@kdcloudjs/shoelace 0.0.1 → 1.0.0

package/dist/custom-elements.json

@@ -1072,6 +1072,126 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/breadcrumb/breadcrumb.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SlBreadcrumb",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "One or more breadcrumb items to display.",
+              "name": ""
+            },
+            {
+              "description": "The separator to use between breadcrumb items. Works best with `<sl-icon>`.",
+              "name": "separator"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'sl-icon': SlIcon }"
+            },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "separatorDir",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "defaultSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "separatorSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
+              "attribute": "label"
+            },
+            {
+              "kind": "method",
+              "name": "getSeparator",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
+              "fieldName": "label"
+            }
+          ],
+          "superclass": {
+            "name": "ShoelaceElement",
+            "module": "/src/internal/shoelace-element.js"
+          },
+          "summary": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
+          "tagNameWithoutPrefix": "breadcrumb",
+          "tagName": "sl-breadcrumb",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n * @documentation https://shoelace.style/components/breadcrumb\n * @status stable\n * @since 2.0\n *\n * @slot - One or more breadcrumb items to display.\n * @slot separator - The separator to use between breadcrumb items. Works best with `<sl-icon>`.\n *\n * @dependency sl-icon\n *\n * @csspart base - The component's base wrapper.\n */",
+          "documentation": "https://shoelace.style/components/breadcrumb",
+          "status": "stable",
+          "since": "2.0",
+          "dependencies": [
+            "sl-icon"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SlBreadcrumb",
+            "module": "components/breadcrumb/breadcrumb.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/badge/badge.js",
@@ -1347,126 +1467,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/breadcrumb/breadcrumb.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SlBreadcrumb",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "One or more breadcrumb items to display.",
-              "name": ""
-            },
-            {
-              "description": "The separator to use between breadcrumb items. Works best with `<sl-icon>`.",
-              "name": "separator"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "dependencies",
-              "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{ 'sl-icon': SlIcon }"
-            },
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "separatorDir",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "defaultSlot",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "separatorSlot",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
-              "attribute": "label"
-            },
-            {
-              "kind": "method",
-              "name": "getSeparator",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleSlotChange",
-              "privacy": "private"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
-              "fieldName": "label"
-            }
-          ],
-          "superclass": {
-            "name": "ShoelaceElement",
-            "module": "/src/internal/shoelace-element.js"
-          },
-          "summary": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
-          "tagNameWithoutPrefix": "breadcrumb",
-          "tagName": "sl-breadcrumb",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n * @documentation https://shoelace.style/components/breadcrumb\n * @status stable\n * @since 2.0\n *\n * @slot - One or more breadcrumb items to display.\n * @slot separator - The separator to use between breadcrumb items. Works best with `<sl-icon>`.\n *\n * @dependency sl-icon\n *\n * @csspart base - The component's base wrapper.\n */",
-          "documentation": "https://shoelace.style/components/breadcrumb",
-          "status": "stable",
-          "since": "2.0",
-          "dependencies": [
-            "sl-icon"
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SlBreadcrumb",
-            "module": "components/breadcrumb/breadcrumb.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/button/button.js",
@@ -2144,250 +2144,135 @@
     {
       "kind": "javascript-module",
       "path": "components/calendar/calendar.js",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/button-group/button-group.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SlCalendar",
-          "members": [
-            {
-              "kind": "field",
-              "name": "date",
-              "type": {
-                "text": "Date"
-              },
-              "default": "new Date()",
-              "attribute": "date"
-            },
+          "name": "SlButtonGroup",
+          "cssParts": [
             {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "value"
-            },
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
             {
-              "kind": "field",
-              "name": "currentDate",
-              "privacy": "private",
-              "default": "new Date(this.date)"
-            },
+              "description": "One or more `<sl-button>` elements to display in the button group.",
+              "name": ""
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "view",
+              "name": "defaultSlot",
               "type": {
-                "text": "'days' | 'months' | 'years'"
-              },
-              "privacy": "private",
-              "default": "'days'"
+                "text": "HTMLSlotElement"
+              }
             },
             {
               "kind": "field",
-              "name": "selectedDate",
+              "name": "disableRole",
               "type": {
-                "text": "Date | null"
-              },
-              "privacy": "private",
-              "default": "null"
-            },
-            {
-              "kind": "method",
-              "name": "handleValueChange"
-            },
-            {
-              "kind": "method",
-              "name": "handleDateChange"
-            },
-            {
-              "kind": "method",
-              "name": "getFirstDayOfMonth",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "number"
-                }
+                "text": "boolean"
               },
-              "parameters": [
-                {
-                  "name": "date",
-                  "type": {
-                    "text": "Date"
-                  }
-                }
-              ]
+              "default": "false"
             },
             {
-              "kind": "method",
-              "name": "getDaysInMonth",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "number"
-                }
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
               },
-              "parameters": [
-                {
-                  "name": "date",
-                  "type": {
-                    "text": "Date"
-                  }
-                }
-              ]
+              "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": "getMonthDays",
+              "name": "handleFocus",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "date",
+                  "name": "event",
                   "type": {
-                    "text": "Date"
+                    "text": "Event"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "getYearRange",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "number[]"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getMonthNames",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string[]"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getWeekdayHeaders",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string[]"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "navigatePrev",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "navigateNext",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "selectYear",
+              "name": "handleBlur",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "year",
+                  "name": "event",
                   "type": {
-                    "text": "number"
+                    "text": "Event"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "selectMonth",
+              "name": "handleMouseOver",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "month",
+                  "name": "event",
                   "type": {
-                    "text": "number"
+                    "text": "Event"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "selectDay",
+              "name": "handleMouseOut",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "day",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "month",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "year",
+                  "name": "event",
                   "type": {
-                    "text": "number"
+                    "text": "Event"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "showYearSelector",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "showMonthSelector",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "navigatePrevYear",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "navigateNextYear",
+              "name": "handleSlotChange",
               "privacy": "private"
             }
           ],
           "attributes": [
             {
-              "name": "date",
-              "type": {
-                "text": "Date"
-              },
-              "default": "new Date()",
-              "fieldName": "date"
-            },
-            {
-              "name": "value",
+              "name": "label",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "fieldName": "value"
+              "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.",
+              "fieldName": "label"
             }
           ],
           "superclass": {
             "name": "ShoelaceElement",
             "module": "/src/internal/shoelace-element.js"
           },
-          "summary": "日历组件，支持年份和月份选择",
-          "tagNameWithoutPrefix": "calendar",
-          "tagName": "sl-calendar",
+          "summary": "Button groups can be used to group related buttons into sections.",
+          "tagNameWithoutPrefix": "button-group",
+          "tagName": "sl-button-group",
           "customElement": true,
-          "jsDoc": "/**\n * @summary 日历组件，支持年份和月份选择\n * @documentation https://shoelace.style/components/calendar\n * @status experimental\n * @since 2.0\n */",
-          "documentation": "https://shoelace.style/components/calendar",
-          "status": "experimental",
+          "jsDoc": "/**\n * @summary Button groups can be used to group related buttons into sections.\n * @documentation https://shoelace.style/components/button-group\n * @status stable\n * @since 2.0\n *\n * @slot - One or more `<sl-button>` elements to display in the button group.\n *\n * @csspart base - The component's base wrapper.\n */",
+          "documentation": "https://shoelace.style/components/button-group",
+          "status": "stable",
           "since": "2.0"
         }
       ],
@@ -2396,8 +2281,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SlCalendar",
-            "module": "components/calendar/calendar.js"
+            "name": "SlButtonGroup",
+            "module": "components/button-group/button-group.js"
           }
         }
       ]
@@ -2504,175 +2389,80 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/button-group/button-group.js",
+      "path": "components/carousel-item/carousel-item.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SlButtonGroup",
-          "cssParts": [
+          "name": "SlCarouselItem",
+          "cssProperties": [
             {
-              "description": "The component's base wrapper.",
-              "name": "base"
+              "description": "The slide's aspect ratio. Inherited from the carousel by default.",
+              "name": "--aspect-ratio"
             }
           ],
           "slots": [
             {
-              "description": "One or more `<sl-button>` elements to display in the button group.",
+              "description": "The carousel item's content..",
               "name": ""
             }
           ],
-          "members": [
+          "members": [],
+          "superclass": {
+            "name": "ShoelaceElement",
+            "module": "/src/internal/shoelace-element.js"
+          },
+          "summary": "A carousel item represent a slide within a [carousel](/components/carousel).",
+          "tagNameWithoutPrefix": "carousel-item",
+          "tagName": "sl-carousel-item",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary A carousel item represent a slide within a [carousel](/components/carousel).\n *\n * @since 2.0\n * @status experimental\n *\n * @slot - The carousel item's content..\n *\n * @cssproperty --aspect-ratio - The slide's aspect ratio. Inherited from the carousel by default.\n *\n */",
+          "since": "2.0",
+          "status": "experimental"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SlCarouselItem",
+            "module": "components/carousel-item/carousel-item.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/carousel/carousel.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SlCarousel",
+          "cssProperties": [
             {
-              "kind": "field",
-              "name": "defaultSlot",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
+              "description": "The space between each slide.",
+              "name": "--slide-gap"
             },
             {
-              "kind": "field",
-              "name": "disableRole",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
+              "description": "The aspect ratio of each slide.",
+              "name": "--aspect-ratio",
+              "default": "16/9"
             },
             {
-              "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"
+              "description": "The amount of padding to apply to the scroll area, allowing adjacent slides to become partially visible as a scroll hint.",
+              "name": "--scroll-hint"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The carousel's internal wrapper.",
+              "name": "base"
             },
             {
-              "kind": "method",
-              "name": "handleFocus",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleBlur",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleMouseOver",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleMouseOut",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleSlotChange",
-              "privacy": "private"
-            }
-          ],
-          "attributes": [
-            {
-              "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.",
-              "fieldName": "label"
-            }
-          ],
-          "superclass": {
-            "name": "ShoelaceElement",
-            "module": "/src/internal/shoelace-element.js"
-          },
-          "summary": "Button groups can be used to group related buttons into sections.",
-          "tagNameWithoutPrefix": "button-group",
-          "tagName": "sl-button-group",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Button groups can be used to group related buttons into sections.\n * @documentation https://shoelace.style/components/button-group\n * @status stable\n * @since 2.0\n *\n * @slot - One or more `<sl-button>` elements to display in the button group.\n *\n * @csspart base - The component's base wrapper.\n */",
-          "documentation": "https://shoelace.style/components/button-group",
-          "status": "stable",
-          "since": "2.0"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SlButtonGroup",
-            "module": "components/button-group/button-group.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/carousel/carousel.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SlCarousel",
-          "cssProperties": [
-            {
-              "description": "The space between each slide.",
-              "name": "--slide-gap"
-            },
-            {
-              "description": "The aspect ratio of each slide.",
-              "name": "--aspect-ratio",
-              "default": "16/9"
-            },
-            {
-              "description": "The amount of padding to apply to the scroll area, allowing adjacent slides to become partially visible as a scroll hint.",
-              "name": "--scroll-hint"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The carousel's internal wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "The scroll container that wraps the slides.",
-              "name": "scroll-container"
+              "description": "The scroll container that wraps the slides.",
+              "name": "scroll-container"
             },
             {
               "description": "The pagination indicators wrapper.",
@@ -3226,51 +3016,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/carousel-item/carousel-item.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SlCarouselItem",
-          "cssProperties": [
-            {
-              "description": "The slide's aspect ratio. Inherited from the carousel by default.",
-              "name": "--aspect-ratio"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The carousel item's content..",
-              "name": ""
-            }
-          ],
-          "members": [],
-          "superclass": {
-            "name": "ShoelaceElement",
-            "module": "/src/internal/shoelace-element.js"
-          },
-          "summary": "A carousel item represent a slide within a [carousel](/components/carousel).",
-          "tagNameWithoutPrefix": "carousel-item",
-          "tagName": "sl-carousel-item",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary A carousel item represent a slide within a [carousel](/components/carousel).\n *\n * @since 2.0\n * @status experimental\n *\n * @slot - The carousel item's content..\n *\n * @cssproperty --aspect-ratio - The slide's aspect ratio. Inherited from the carousel by default.\n *\n */",
-          "since": "2.0",
-          "status": "experimental"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SlCarouselItem",
-            "module": "components/carousel-item/carousel-item.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/checkbox/checkbox.js",
@@ -5122,52 +4867,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/details/details.js",
+      "path": "components/datepicker/datepicker.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SlDetails",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "The header that wraps both the summary and the expand/collapse icon.",
-              "name": "header"
-            },
-            {
-              "description": "The container that wraps the summary.",
-              "name": "summary"
-            },
-            {
-              "description": "The container that wraps the expand/collapse icons.",
-              "name": "summary-icon"
-            },
-            {
-              "description": "The details content.",
-              "name": "content"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The details' main content.",
-              "name": ""
-            },
-            {
-              "description": "The details' summary. Alternatively, you can use the `summary` attribute.",
-              "name": "summary"
-            },
-            {
-              "description": "Optional expand icon to use instead of the default. Works best with `<sl-icon>`.",
-              "name": "expand-icon"
-            },
-            {
-              "description": "Optional collapse icon to use instead of the default. Works best with `<sl-icon>`.",
-              "name": "collapse-icon"
-            }
-          ],
+          "name": "SlDatepicker",
           "members": [
             {
               "kind": "field",
@@ -5176,49 +4881,44 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ 'sl-icon': SlIcon }"
-            },
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
+              "default": "{ 'sl-calendar': SlCalendar, 'sl-popup': SlPopup, 'sl-input': SlInput as unknown as typeof ShoelaceElement }"
             },
             {
               "kind": "field",
-              "name": "details",
+              "name": "input",
               "type": {
-                "text": "HTMLDetailsElement"
+                "text": "SlInput"
               }
             },
             {
               "kind": "field",
-              "name": "header",
+              "name": "calendar",
               "type": {
-                "text": "HTMLElement"
+                "text": "SlCalendar"
               }
             },
             {
               "kind": "field",
-              "name": "body",
-              "type": {
-                "text": "HTMLElement"
-              }
+              "name": "formControlController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new FormControlController(this)"
             },
             {
               "kind": "field",
-              "name": "expandIconSlot",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController( this, 'help-text', 'label', 'prefix', 'suffix', 'clear-icon' )"
             },
             {
               "kind": "field",
-              "name": "detailsObserver",
+              "name": "lastValidValue",
               "type": {
-                "text": "MutationObserver"
-              }
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''"
             },
             {
               "kind": "field",
@@ -5226,29 +4926,690 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
-              "attribute": "open",
-              "reflects": true
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "summary",
+              "name": "valueChangeDebounceTimer",
               "type": {
-                "text": "string"
+                "text": "number | undefined"
               },
-              "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
-              "attribute": "summary"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Disables the details so it can't be toggled.",
-              "attribute": "disabled",
+              "default": "''",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "defaultValue",
+              "type": {
+                "text": "string"
+              },
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "'date' | 'datetime'"
+              },
+              "default": "'date'",
+              "attribute": "type",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "placeholder"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disabled"
+            },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "readonly"
+            },
+            {
+              "kind": "field",
+              "name": "clearable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "attribute": "clearable"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "hoist",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "hoist"
+            },
+            {
+              "kind": "field",
+              "name": "filled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws a filled input.",
+              "attribute": "filled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "pill",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws a pill-style input with rounded edges.",
+              "attribute": "pill",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "attribute": "help-text"
+            },
+            {
+              "kind": "field",
+              "name": "form",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "attribute": "form",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the input a required field.",
+              "attribute": "required",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "pattern",
+              "type": {
+                "text": "string"
+              },
+              "description": "A regular expression pattern to validate input against.",
+              "attribute": "pattern"
+            },
+            {
+              "kind": "field",
+              "name": "min",
+              "type": {
+                "text": "number | string"
+              },
+              "description": "The input's minimum value. Only applies to date and number input types.",
+              "attribute": "min"
+            },
+            {
+              "kind": "field",
+              "name": "max",
+              "type": {
+                "text": "number | string"
+              },
+              "description": "The input's maximum value. Only applies to date and number input types.",
+              "attribute": "max"
+            },
+            {
+              "kind": "field",
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Indicates that the input should receive focus on page load.",
+              "attribute": "autofocus"
+            },
+            {
+              "kind": "method",
+              "name": "handleOpenChange"
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
+            },
+            {
+              "kind": "method",
+              "name": "setCustomValidity",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Sets a custom validation message. The value provided will be shown to the user when the form is submitted."
+            },
+            {
+              "kind": "method",
+              "name": "getForm",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
+              },
+              "description": "Gets the associated form, if one exists."
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "validationMessage",
+              "description": "Gets the validation message",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "updateValue",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "{ emitInput?: boolean; emitChange?: boolean }"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "parseValue",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Date | null"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleDateSelect",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CustomEvent<{ date: Date }>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleDateChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CustomEvent<{ date: Date }>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleTriggerMouseDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleInputChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CustomEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleInputInput",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CustomEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleInputKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleInputBlur",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleValueChange"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "value"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "name"
+            },
+            {
+              "name": "type",
+              "type": {
+                "text": "'date' | 'datetime'"
+              },
+              "default": "'date'",
+              "fieldName": "type"
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "label"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "readonly"
+            },
+            {
+              "name": "clearable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "fieldName": "clearable"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "fieldName": "size"
+            },
+            {
+              "name": "hoist",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "hoist"
+            },
+            {
+              "name": "filled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws a filled input.",
+              "fieldName": "filled"
+            },
+            {
+              "name": "pill",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws a pill-style input with rounded edges.",
+              "fieldName": "pill"
+            },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "fieldName": "helpText"
+            },
+            {
+              "name": "form",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "fieldName": "form"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the input a required field.",
+              "fieldName": "required"
+            },
+            {
+              "name": "pattern",
+              "type": {
+                "text": "string"
+              },
+              "description": "A regular expression pattern to validate input against.",
+              "fieldName": "pattern"
+            },
+            {
+              "name": "min",
+              "type": {
+                "text": "number | string"
+              },
+              "description": "The input's minimum value. Only applies to date and number input types.",
+              "fieldName": "min"
+            },
+            {
+              "name": "max",
+              "type": {
+                "text": "number | string"
+              },
+              "description": "The input's maximum value. Only applies to date and number input types.",
+              "fieldName": "max"
+            },
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Indicates that the input should receive focus on page load.",
+              "fieldName": "autofocus"
+            }
+          ],
+          "superclass": {
+            "name": "ShoelaceElement",
+            "module": "/src/internal/shoelace-element.js"
+          },
+          "tagNameWithoutPrefix": "datepicker",
+          "tagName": "sl-datepicker",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SlDatepicker",
+            "module": "components/datepicker/datepicker.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/details/details.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SlDetails",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The header that wraps both the summary and the expand/collapse icon.",
+              "name": "header"
+            },
+            {
+              "description": "The container that wraps the summary.",
+              "name": "summary"
+            },
+            {
+              "description": "The container that wraps the expand/collapse icons.",
+              "name": "summary-icon"
+            },
+            {
+              "description": "The details content.",
+              "name": "content"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The details' main content.",
+              "name": ""
+            },
+            {
+              "description": "The details' summary. Alternatively, you can use the `summary` attribute.",
+              "name": "summary"
+            },
+            {
+              "description": "Optional expand icon to use instead of the default. Works best with `<sl-icon>`.",
+              "name": "expand-icon"
+            },
+            {
+              "description": "Optional collapse icon to use instead of the default. Works best with `<sl-icon>`.",
+              "name": "collapse-icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'sl-icon': SlIcon }"
+            },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "details",
+              "type": {
+                "text": "HTMLDetailsElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "header",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "body",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "expandIconSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "detailsObserver",
+              "type": {
+                "text": "MutationObserver"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
+              "attribute": "open",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "summary",
+              "type": {
+                "text": "string"
+              },
+              "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+              "attribute": "summary"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the details so it can't be toggled.",
+              "attribute": "disabled",
               "reflects": true
             },
             {
@@ -5811,88 +6172,38 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/drawer/drawer.js",
+      "path": "components/dropdown/dropdown.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SlDrawer",
-          "cssProperties": [
-            {
-              "description": "The preferred size of the drawer. This will be applied to the drawer's width or height depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.",
-              "name": "--size"
-            },
-            {
-              "description": "The amount of padding to use for the header.",
-              "name": "--header-spacing"
-            },
-            {
-              "description": "The amount of padding to use for the body.",
-              "name": "--body-spacing"
-            },
-            {
-              "description": "The amount of padding to use for the footer.",
-              "name": "--footer-spacing"
-            }
-          ],
+          "name": "SlDropdown",
           "cssParts": [
             {
-              "description": "The component's base wrapper.",
+              "description": "The component's base wrapper, an `<sl-popup>` element.",
               "name": "base"
             },
             {
-              "description": "The overlay that covers the screen behind the drawer.",
-              "name": "overlay"
-            },
-            {
-              "description": "The drawer's panel (where the drawer and its content are rendered).",
-              "name": "panel"
-            },
-            {
-              "description": "The drawer's header. This element wraps the title and header actions.",
-              "name": "header"
-            },
-            {
-              "description": "Optional actions to add to the header. Works best with `<sl-icon-button>`.",
-              "name": "header-actions"
-            },
-            {
-              "description": "The drawer's title.",
-              "name": "title"
-            },
-            {
-              "description": "The close button, an `<sl-icon-button>`.",
-              "name": "close-button"
-            },
-            {
-              "description": "The close button's exported `base` part.",
-              "name": "close-button__base"
-            },
-            {
-              "description": "The drawer's body.",
-              "name": "body"
+              "description": "The popup's exported `popup` part. Use this to target the tooltip's popup container.",
+              "name": "base__popup"
             },
             {
-              "description": "The drawer's footer.",
-              "name": "footer"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The drawer's main content.",
-              "name": ""
+              "description": "The container that wraps the trigger.",
+              "name": "trigger"
             },
             {
-              "description": "The drawer's label. Alternatively, you can use the `label` attribute.",
-              "name": "label"
-            },
+              "description": "The panel that gets shown when the dropdown is open.",
+              "name": "panel"
+            }
+          ],
+          "slots": [
             {
-              "description": "Optional actions to add to the header. Works best with `<sl-icon-button>`.",
-              "name": "header-actions"
+              "description": "The dropdown's main content.",
+              "name": ""
             },
             {
-              "description": "The drawer's footer, usually one or more buttons representing various options.",
-              "name": "footer"
+              "description": "The dropdown's trigger, usually a `<sl-button>` element.",
+              "name": "trigger"
             }
           ],
           "members": [
@@ -5903,36 +6214,35 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ 'sl-icon-button': SlIconButton }"
+              "default": "{ 'sl-popup': SlPopup }"
             },
             {
               "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, 'footer')"
+              "name": "popup",
+              "type": {
+                "text": "SlPopup"
+              }
             },
             {
               "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
+              "name": "trigger",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
             },
             {
               "kind": "field",
-              "name": "originalTrigger",
+              "name": "panel",
               "type": {
-                "text": "HTMLElement | null"
-              },
-              "privacy": "private"
+                "text": "HTMLSlotElement"
+              }
             },
             {
               "kind": "field",
-              "name": "modal",
-              "privacy": "public",
-              "default": "new Modal(this)",
-              "description": "Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active Shoelace modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping."
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
             },
             {
               "kind": "field",
@@ -5944,274 +6254,312 @@
             },
             {
               "kind": "field",
-              "name": "drawer",
+              "name": "open",
               "type": {
-                "text": "HTMLElement"
-              }
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.",
+              "attribute": "open",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "panel",
+              "name": "placement",
               "type": {
-                "text": "HTMLElement"
-              }
+                "text": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
+              },
+              "default": "'bottom-start'",
+              "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
+              "attribute": "placement",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "overlay",
+              "name": "disabled",
               "type": {
-                "text": "HTMLElement"
-              }
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the dropdown so the panel will not open.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "open",
+              "name": "stayOpenOnSelect",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.",
-              "attribute": "open",
+              "description": "By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.",
+              "attribute": "stay-open-on-select",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "containingElement",
               "type": {
-                "text": "string"
+                "text": "HTMLElement | undefined"
               },
-              "default": "''",
-              "description": "The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
-              "attribute": "label",
-              "reflects": true
+              "description": "The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other\ncomponents that use a dropdown internally."
             },
             {
               "kind": "field",
-              "name": "placement",
+              "name": "distance",
               "type": {
-                "text": "'top' | 'end' | 'bottom' | 'start'"
+                "text": "number"
               },
-              "default": "'end'",
-              "description": "The direction from which the drawer will open.",
-              "attribute": "placement",
-              "reflects": true
+              "default": "0",
+              "description": "The distance in pixels from which to offset the panel away from its trigger.",
+              "attribute": "distance"
             },
             {
               "kind": "field",
-              "name": "contained",
+              "name": "skidding",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this attribute and add `position: relative` to the parent.",
-              "attribute": "contained",
-              "reflects": true
+              "default": "0",
+              "description": "The distance in pixels from which to offset the panel along its trigger.",
+              "attribute": "skidding"
             },
             {
               "kind": "field",
-              "name": "noHeader",
+              "name": "hoist",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.",
-              "attribute": "no-header",
+              "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+              "attribute": "hoist"
+            },
+            {
+              "kind": "field",
+              "name": "sync",
+              "type": {
+                "text": "'width' | 'height' | 'both' | undefined"
+              },
+              "default": "undefined",
+              "description": "Syncs the popup width or height to that of the trigger element.",
+              "attribute": "sync",
               "reflects": true
             },
             {
               "kind": "method",
-              "name": "requestClose",
-              "privacy": "private",
+              "name": "focusOnTrigger"
+            },
+            {
+              "kind": "method",
+              "name": "getMenu"
+            },
+            {
+              "kind": "field",
+              "name": "handleKeyDown",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleDocumentKeyDown",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleDocumentMouseDown",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handlePanelSelect",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleTriggerClick"
+            },
+            {
+              "kind": "method",
+              "name": "handleTriggerKeyDown",
               "parameters": [
                 {
-                  "name": "source",
+                  "name": "event",
                   "type": {
-                    "text": "'close-button' | 'keyboard' | 'overlay'"
+                    "text": "KeyboardEvent"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "addOpenListeners",
-              "privacy": "private"
+              "name": "handleTriggerKeyUp",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "removeOpenListeners",
-              "privacy": "private"
+              "name": "handleTriggerSlotChange"
             },
             {
-              "kind": "field",
-              "name": "handleDocumentKeyDown",
-              "privacy": "private"
+              "kind": "method",
+              "name": "updateAccessibleTrigger"
             },
             {
               "kind": "method",
-              "name": "handleOpenChange"
+              "name": "show",
+              "description": "Shows the dropdown panel."
             },
             {
               "kind": "method",
-              "name": "handleNoModalChange"
+              "name": "hide",
+              "description": "Hides the dropdown panel"
             },
             {
               "kind": "method",
-              "name": "show",
-              "description": "Shows the drawer."
+              "name": "reposition",
+              "description": "Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated."
             },
             {
               "kind": "method",
-              "name": "hide",
-              "description": "Hides the drawer"
+              "name": "addOpenListeners"
+            },
+            {
+              "kind": "method",
+              "name": "removeOpenListeners"
+            },
+            {
+              "kind": "method",
+              "name": "handleOpenChange"
             }
           ],
           "events": [
             {
-              "description": "Emitted when the drawer opens.",
+              "description": "Emitted when the dropdown opens.",
               "name": "sl-show",
               "reactName": "onSlShow",
               "eventName": "SlShowEvent"
             },
             {
-              "description": "Emitted after the drawer opens and all animations are complete.",
+              "description": "Emitted after the dropdown opens and all animations are complete.",
               "name": "sl-after-show",
               "reactName": "onSlAfterShow",
               "eventName": "SlAfterShowEvent"
             },
             {
-              "description": "Emitted when the drawer closes.",
+              "description": "Emitted when the dropdown closes.",
               "name": "sl-hide",
               "reactName": "onSlHide",
               "eventName": "SlHideEvent"
             },
             {
-              "description": "Emitted after the drawer closes and all animations are complete.",
+              "description": "Emitted after the dropdown closes and all animations are complete.",
               "name": "sl-after-hide",
               "reactName": "onSlAfterHide",
               "eventName": "SlAfterHideEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.",
+              "fieldName": "open"
             },
             {
-              "description": "Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.",
-              "name": "sl-initial-focus",
-              "reactName": "onSlInitialFocus",
-              "eventName": "SlInitialFocusEvent"
+              "name": "placement",
+              "type": {
+                "text": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
+              },
+              "default": "'bottom-start'",
+              "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
+              "fieldName": "placement"
             },
             {
+              "name": "disabled",
               "type": {
-                "text": "{ source: 'close-button' | 'keyboard' | 'overlay' }"
+                "text": "boolean"
               },
-              "description": "Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.",
-              "name": "sl-request-close",
-              "reactName": "onSlRequestClose",
-              "eventName": "SlRequestCloseEvent"
-            }
-          ],
-          "attributes": [
+              "default": "false",
+              "description": "Disables the dropdown so the panel will not open.",
+              "fieldName": "disabled"
+            },
             {
-              "name": "open",
+              "name": "stay-open-on-select",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.",
-              "fieldName": "open"
+              "description": "By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.",
+              "fieldName": "stayOpenOnSelect"
             },
             {
-              "name": "label",
+              "name": "distance",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "''",
-              "description": "The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
-              "fieldName": "label"
+              "default": "0",
+              "description": "The distance in pixels from which to offset the panel away from its trigger.",
+              "fieldName": "distance"
             },
             {
-              "name": "placement",
+              "name": "skidding",
               "type": {
-                "text": "'top' | 'end' | 'bottom' | 'start'"
+                "text": "number"
               },
-              "default": "'end'",
-              "description": "The direction from which the drawer will open.",
-              "fieldName": "placement"
+              "default": "0",
+              "description": "The distance in pixels from which to offset the panel along its trigger.",
+              "fieldName": "skidding"
             },
             {
-              "name": "contained",
+              "name": "hoist",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this attribute and add `position: relative` to the parent.",
-              "fieldName": "contained"
+              "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+              "fieldName": "hoist"
             },
             {
-              "name": "no-header",
+              "name": "sync",
               "type": {
-                "text": "boolean"
+                "text": "'width' | 'height' | 'both' | undefined"
               },
-              "default": "false",
-              "description": "Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.",
-              "fieldName": "noHeader"
+              "default": "undefined",
+              "description": "Syncs the popup width or height to that of the trigger element.",
+              "fieldName": "sync"
             }
           ],
           "superclass": {
             "name": "ShoelaceElement",
             "module": "/src/internal/shoelace-element.js"
           },
-          "summary": "Drawers slide in from a container to expose additional options and information.",
-          "tagNameWithoutPrefix": "drawer",
-          "tagName": "sl-drawer",
+          "summary": "Dropdowns expose additional content that \"drops down\" in a panel.",
+          "tagNameWithoutPrefix": "dropdown",
+          "tagName": "sl-dropdown",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Drawers slide in from a container to expose additional options and information.\n * @documentation https://shoelace.style/components/drawer\n * @status stable\n * @since 2.0\n *\n * @dependency sl-icon-button\n *\n * @slot - The drawer's main content.\n * @slot label - The drawer's label. Alternatively, you can use the `label` attribute.\n * @slot header-actions - Optional actions to add to the header. Works best with `<sl-icon-button>`.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n *\n * @event sl-show - Emitted when the drawer opens.\n * @event sl-after-show - Emitted after the drawer opens and all animations are complete.\n * @event sl-hide - Emitted when the drawer closes.\n * @event sl-after-hide - Emitted after the drawer closes and all animations are complete.\n * @event sl-initial-focus - Emitted when the drawer opens and is ready to receive focus. Calling\n *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} sl-request-close - Emitted when the user attempts to\n *   close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n *   `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\n *   destructive behavior such as data loss.\n *\n * @csspart base - The component's base wrapper.\n * @csspart overlay - The overlay that covers the screen behind the drawer.\n * @csspart panel - The drawer's panel (where the drawer and its content are rendered).\n * @csspart header - The drawer's header. This element wraps the title and header actions.\n * @csspart header-actions - Optional actions to add to the header. Works best with `<sl-icon-button>`.\n * @csspart title - The drawer's title.\n * @csspart close-button - The close button, an `<sl-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n * @csspart body - The drawer's body.\n * @csspart footer - The drawer's footer.\n *\n * @cssproperty --size - The preferred size of the drawer. This will be applied to the drawer's width or height\n *   depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.\n * @cssproperty --header-spacing - The amount of padding to use for the header.\n * @cssproperty --body-spacing - The amount of padding to use for the body.\n * @cssproperty --footer-spacing - The amount of padding to use for the footer.\n *\n * @animation drawer.showTop - The animation to use when showing a drawer with `top` placement.\n * @animation drawer.showEnd - The animation to use when showing a drawer with `end` placement.\n * @animation drawer.showBottom - The animation to use when showing a drawer with `bottom` placement.\n * @animation drawer.showStart - The animation to use when showing a drawer with `start` placement.\n * @animation drawer.hideTop - The animation to use when hiding a drawer with `top` placement.\n * @animation drawer.hideEnd - The animation to use when hiding a drawer with `end` placement.\n * @animation drawer.hideBottom - The animation to use when hiding a drawer with `bottom` placement.\n * @animation drawer.hideStart - The animation to use when hiding a drawer with `start` placement.\n * @animation drawer.denyClose - The animation to use when a request to close the drawer is denied.\n * @animation drawer.overlay.show - The animation to use when showing the drawer's overlay.\n * @animation drawer.overlay.hide - The animation to use when hiding the drawer's overlay.\n *\n * @property modal - Exposes the internal modal utility that controls focus trapping. To temporarily disable focus\n *   trapping and allow third-party modals spawned from an active Shoelace modal, call `modal.activateExternal()` when\n *   the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping.\n */",
-          "documentation": "https://shoelace.style/components/drawer",
+          "jsDoc": "/**\n * @summary Dropdowns expose additional content that \"drops down\" in a panel.\n * @documentation https://shoelace.style/components/dropdown\n * @status stable\n * @since 2.0\n *\n * @dependency sl-popup\n *\n * @slot - The dropdown's main content.\n * @slot trigger - The dropdown's trigger, usually a `<sl-button>` element.\n *\n * @event sl-show - Emitted when the dropdown opens.\n * @event sl-after-show - Emitted after the dropdown opens and all animations are complete.\n * @event sl-hide - Emitted when the dropdown closes.\n * @event sl-after-hide - Emitted after the dropdown closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper, an `<sl-popup>` element.\n * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n * @csspart trigger - The container that wraps the trigger.\n * @csspart panel - The panel that gets shown when the dropdown is open.\n *\n * @animation dropdown.show - The animation to use when showing the dropdown.\n * @animation dropdown.hide - The animation to use when hiding the dropdown.\n */",
+          "documentation": "https://shoelace.style/components/dropdown",
           "status": "stable",
           "since": "2.0",
           "dependencies": [
-            "sl-icon-button"
+            "sl-popup"
           ],
           "animations": [
             {
-              "name": "drawer.showTop",
-              "description": "The animation to use when showing a drawer with `top` placement."
-            },
-            {
-              "name": "drawer.showEnd",
-              "description": "The animation to use when showing a drawer with `end` placement."
-            },
-            {
-              "name": "drawer.showBottom",
-              "description": "The animation to use when showing a drawer with `bottom` placement."
-            },
-            {
-              "name": "drawer.showStart",
-              "description": "The animation to use when showing a drawer with `start` placement."
-            },
-            {
-              "name": "drawer.hideTop",
-              "description": "The animation to use when hiding a drawer with `top` placement."
-            },
-            {
-              "name": "drawer.hideEnd",
-              "description": "The animation to use when hiding a drawer with `end` placement."
-            },
-            {
-              "name": "drawer.hideBottom",
-              "description": "The animation to use when hiding a drawer with `bottom` placement."
-            },
-            {
-              "name": "drawer.hideStart",
-              "description": "The animation to use when hiding a drawer with `start` placement."
-            },
-            {
-              "name": "drawer.denyClose",
-              "description": "The animation to use when a request to close the drawer is denied."
-            },
-            {
-              "name": "drawer.overlay.show",
-              "description": "The animation to use when showing the drawer's overlay."
+              "name": "dropdown.show",
+              "description": "The animation to use when showing the dropdown."
             },
             {
-              "name": "drawer.overlay.hide",
-              "description": "The animation to use when hiding the drawer's overlay."
+              "name": "dropdown.hide",
+              "description": "The animation to use when hiding the dropdown."
             }
           ]
         }
@@ -6221,46 +6569,96 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SlDrawer",
-            "module": "components/drawer/drawer.js"
+            "name": "SlDropdown",
+            "module": "components/dropdown/dropdown.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/dropdown/dropdown.js",
+      "path": "components/drawer/drawer.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SlDropdown",
+          "name": "SlDrawer",
+          "cssProperties": [
+            {
+              "description": "The preferred size of the drawer. This will be applied to the drawer's width or height depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.",
+              "name": "--size"
+            },
+            {
+              "description": "The amount of padding to use for the header.",
+              "name": "--header-spacing"
+            },
+            {
+              "description": "The amount of padding to use for the body.",
+              "name": "--body-spacing"
+            },
+            {
+              "description": "The amount of padding to use for the footer.",
+              "name": "--footer-spacing"
+            }
+          ],
           "cssParts": [
             {
-              "description": "The component's base wrapper, an `<sl-popup>` element.",
+              "description": "The component's base wrapper.",
               "name": "base"
             },
             {
-              "description": "The popup's exported `popup` part. Use this to target the tooltip's popup container.",
-              "name": "base__popup"
+              "description": "The overlay that covers the screen behind the drawer.",
+              "name": "overlay"
             },
             {
-              "description": "The container that wraps the trigger.",
-              "name": "trigger"
+              "description": "The drawer's panel (where the drawer and its content are rendered).",
+              "name": "panel"
             },
             {
-              "description": "The panel that gets shown when the dropdown is open.",
-              "name": "panel"
+              "description": "The drawer's header. This element wraps the title and header actions.",
+              "name": "header"
+            },
+            {
+              "description": "Optional actions to add to the header. Works best with `<sl-icon-button>`.",
+              "name": "header-actions"
+            },
+            {
+              "description": "The drawer's title.",
+              "name": "title"
+            },
+            {
+              "description": "The close button, an `<sl-icon-button>`.",
+              "name": "close-button"
+            },
+            {
+              "description": "The close button's exported `base` part.",
+              "name": "close-button__base"
+            },
+            {
+              "description": "The drawer's body.",
+              "name": "body"
+            },
+            {
+              "description": "The drawer's footer.",
+              "name": "footer"
             }
           ],
           "slots": [
             {
-              "description": "The dropdown's main content.",
+              "description": "The drawer's main content.",
               "name": ""
             },
             {
-              "description": "The dropdown's trigger, usually a `<sl-button>` element.",
-              "name": "trigger"
+              "description": "The drawer's label. Alternatively, you can use the `label` attribute.",
+              "name": "label"
+            },
+            {
+              "description": "Optional actions to add to the header. Works best with `<sl-icon-button>`.",
+              "name": "header-actions"
+            },
+            {
+              "description": "The drawer's footer, usually one or more buttons representing various options.",
+              "name": "footer"
             }
           ],
           "members": [
@@ -6271,28 +6669,14 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ 'sl-popup': SlPopup }"
-            },
-            {
-              "kind": "field",
-              "name": "popup",
-              "type": {
-                "text": "SlPopup"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "trigger",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
+              "default": "{ 'sl-icon-button': SlIconButton }"
             },
             {
               "kind": "field",
-              "name": "panel",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'footer')"
             },
             {
               "kind": "field",
@@ -6303,221 +6687,189 @@
             },
             {
               "kind": "field",
-              "name": "closeWatcher",
+              "name": "originalTrigger",
               "type": {
-                "text": "CloseWatcher | null"
+                "text": "HTMLElement | null"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.",
-              "attribute": "open",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "placement",
-              "type": {
-                "text": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
-              },
-              "default": "'bottom-start'",
-              "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
-              "attribute": "placement",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the dropdown so the panel will not open.",
-              "attribute": "disabled",
-              "reflects": true
+              "name": "modal",
+              "privacy": "public",
+              "default": "new Modal(this)",
+              "description": "Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active Shoelace modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping."
             },
             {
               "kind": "field",
-              "name": "stayOpenOnSelect",
+              "name": "closeWatcher",
               "type": {
-                "text": "boolean"
+                "text": "CloseWatcher | null"
               },
-              "default": "false",
-              "description": "By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.",
-              "attribute": "stay-open-on-select",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "containingElement",
+              "name": "drawer",
               "type": {
-                "text": "HTMLElement | undefined"
-              },
-              "description": "The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other\ncomponents that use a dropdown internally."
+                "text": "HTMLElement"
+              }
             },
             {
               "kind": "field",
-              "name": "distance",
+              "name": "panel",
               "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The distance in pixels from which to offset the panel away from its trigger.",
-              "attribute": "distance"
+                "text": "HTMLElement"
+              }
             },
             {
               "kind": "field",
-              "name": "skidding",
+              "name": "overlay",
               "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The distance in pixels from which to offset the panel along its trigger.",
-              "attribute": "skidding"
+                "text": "HTMLElement"
+              }
             },
             {
               "kind": "field",
-              "name": "hoist",
+              "name": "open",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
-              "attribute": "hoist"
+              "description": "Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.",
+              "attribute": "open",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "sync",
+              "name": "label",
               "type": {
-                "text": "'width' | 'height' | 'both' | undefined"
+                "text": "string"
               },
-              "default": "undefined",
-              "description": "Syncs the popup width or height to that of the trigger element.",
-              "attribute": "sync",
+              "default": "''",
+              "description": "The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
+              "attribute": "label",
               "reflects": true
             },
-            {
-              "kind": "method",
-              "name": "focusOnTrigger"
-            },
-            {
-              "kind": "method",
-              "name": "getMenu"
-            },
-            {
-              "kind": "field",
-              "name": "handleKeyDown",
-              "privacy": "private"
-            },
             {
               "kind": "field",
-              "name": "handleDocumentKeyDown",
-              "privacy": "private"
+              "name": "placement",
+              "type": {
+                "text": "'top' | 'end' | 'bottom' | 'start'"
+              },
+              "default": "'end'",
+              "description": "The direction from which the drawer will open.",
+              "attribute": "placement",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "handleDocumentMouseDown",
-              "privacy": "private"
+              "name": "contained",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this attribute and add `position: relative` to the parent.",
+              "attribute": "contained",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "handlePanelSelect",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleTriggerClick"
-            },
-            {
-              "kind": "method",
-              "name": "handleTriggerKeyDown",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
+              "name": "noHeader",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.",
+              "attribute": "no-header",
+              "reflects": true
             },
             {
               "kind": "method",
-              "name": "handleTriggerKeyUp",
+              "name": "requestClose",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "source",
                   "type": {
-                    "text": "KeyboardEvent"
+                    "text": "'close-button' | 'keyboard' | 'overlay'"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "handleTriggerSlotChange"
-            },
-            {
-              "kind": "method",
-              "name": "updateAccessibleTrigger"
+              "name": "addOpenListeners",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "show",
-              "description": "Shows the dropdown panel."
+              "name": "removeOpenListeners",
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "hide",
-              "description": "Hides the dropdown panel"
+              "kind": "field",
+              "name": "handleDocumentKeyDown",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "reposition",
-              "description": "Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated."
+              "name": "handleOpenChange"
             },
             {
               "kind": "method",
-              "name": "addOpenListeners"
+              "name": "handleNoModalChange"
             },
             {
               "kind": "method",
-              "name": "removeOpenListeners"
+              "name": "show",
+              "description": "Shows the drawer."
             },
             {
               "kind": "method",
-              "name": "handleOpenChange"
+              "name": "hide",
+              "description": "Hides the drawer"
             }
           ],
           "events": [
             {
-              "description": "Emitted when the dropdown opens.",
+              "description": "Emitted when the drawer opens.",
               "name": "sl-show",
               "reactName": "onSlShow",
               "eventName": "SlShowEvent"
             },
             {
-              "description": "Emitted after the dropdown opens and all animations are complete.",
+              "description": "Emitted after the drawer opens and all animations are complete.",
               "name": "sl-after-show",
               "reactName": "onSlAfterShow",
               "eventName": "SlAfterShowEvent"
             },
             {
-              "description": "Emitted when the dropdown closes.",
+              "description": "Emitted when the drawer closes.",
               "name": "sl-hide",
               "reactName": "onSlHide",
               "eventName": "SlHideEvent"
             },
             {
-              "description": "Emitted after the dropdown closes and all animations are complete.",
+              "description": "Emitted after the drawer closes and all animations are complete.",
               "name": "sl-after-hide",
               "reactName": "onSlAfterHide",
               "eventName": "SlAfterHideEvent"
+            },
+            {
+              "description": "Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.",
+              "name": "sl-initial-focus",
+              "reactName": "onSlInitialFocus",
+              "eventName": "SlInitialFocusEvent"
+            },
+            {
+              "type": {
+                "text": "{ source: 'close-button' | 'keyboard' | 'overlay' }"
+              },
+              "description": "Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.",
+              "name": "sl-request-close",
+              "reactName": "onSlRequestClose",
+              "eventName": "SlRequestCloseEvent"
             }
           ],
           "attributes": [
@@ -6527,96 +6879,105 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.",
+              "description": "Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.",
               "fieldName": "open"
             },
             {
-              "name": "placement",
+              "name": "label",
               "type": {
-                "text": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
+                "text": "string"
               },
-              "default": "'bottom-start'",
-              "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
-              "fieldName": "placement"
+              "default": "''",
+              "description": "The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
+              "fieldName": "label"
             },
             {
-              "name": "disabled",
+              "name": "placement",
               "type": {
-                "text": "boolean"
+                "text": "'top' | 'end' | 'bottom' | 'start'"
               },
-              "default": "false",
-              "description": "Disables the dropdown so the panel will not open.",
-              "fieldName": "disabled"
+              "default": "'end'",
+              "description": "The direction from which the drawer will open.",
+              "fieldName": "placement"
             },
             {
-              "name": "stay-open-on-select",
+              "name": "contained",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.",
-              "fieldName": "stayOpenOnSelect"
-            },
-            {
-              "name": "distance",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The distance in pixels from which to offset the panel away from its trigger.",
-              "fieldName": "distance"
-            },
-            {
-              "name": "skidding",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The distance in pixels from which to offset the panel along its trigger.",
-              "fieldName": "skidding"
+              "description": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this attribute and add `position: relative` to the parent.",
+              "fieldName": "contained"
             },
             {
-              "name": "hoist",
+              "name": "no-header",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
-              "fieldName": "hoist"
-            },
-            {
-              "name": "sync",
-              "type": {
-                "text": "'width' | 'height' | 'both' | undefined"
-              },
-              "default": "undefined",
-              "description": "Syncs the popup width or height to that of the trigger element.",
-              "fieldName": "sync"
+              "description": "Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.",
+              "fieldName": "noHeader"
             }
           ],
           "superclass": {
             "name": "ShoelaceElement",
             "module": "/src/internal/shoelace-element.js"
           },
-          "summary": "Dropdowns expose additional content that \"drops down\" in a panel.",
-          "tagNameWithoutPrefix": "dropdown",
-          "tagName": "sl-dropdown",
+          "summary": "Drawers slide in from a container to expose additional options and information.",
+          "tagNameWithoutPrefix": "drawer",
+          "tagName": "sl-drawer",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Dropdowns expose additional content that \"drops down\" in a panel.\n * @documentation https://shoelace.style/components/dropdown\n * @status stable\n * @since 2.0\n *\n * @dependency sl-popup\n *\n * @slot - The dropdown's main content.\n * @slot trigger - The dropdown's trigger, usually a `<sl-button>` element.\n *\n * @event sl-show - Emitted when the dropdown opens.\n * @event sl-after-show - Emitted after the dropdown opens and all animations are complete.\n * @event sl-hide - Emitted when the dropdown closes.\n * @event sl-after-hide - Emitted after the dropdown closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper, an `<sl-popup>` element.\n * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n * @csspart trigger - The container that wraps the trigger.\n * @csspart panel - The panel that gets shown when the dropdown is open.\n *\n * @animation dropdown.show - The animation to use when showing the dropdown.\n * @animation dropdown.hide - The animation to use when hiding the dropdown.\n */",
-          "documentation": "https://shoelace.style/components/dropdown",
+          "jsDoc": "/**\n * @summary Drawers slide in from a container to expose additional options and information.\n * @documentation https://shoelace.style/components/drawer\n * @status stable\n * @since 2.0\n *\n * @dependency sl-icon-button\n *\n * @slot - The drawer's main content.\n * @slot label - The drawer's label. Alternatively, you can use the `label` attribute.\n * @slot header-actions - Optional actions to add to the header. Works best with `<sl-icon-button>`.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n *\n * @event sl-show - Emitted when the drawer opens.\n * @event sl-after-show - Emitted after the drawer opens and all animations are complete.\n * @event sl-hide - Emitted when the drawer closes.\n * @event sl-after-hide - Emitted after the drawer closes and all animations are complete.\n * @event sl-initial-focus - Emitted when the drawer opens and is ready to receive focus. Calling\n *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} sl-request-close - Emitted when the user attempts to\n *   close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n *   `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\n *   destructive behavior such as data loss.\n *\n * @csspart base - The component's base wrapper.\n * @csspart overlay - The overlay that covers the screen behind the drawer.\n * @csspart panel - The drawer's panel (where the drawer and its content are rendered).\n * @csspart header - The drawer's header. This element wraps the title and header actions.\n * @csspart header-actions - Optional actions to add to the header. Works best with `<sl-icon-button>`.\n * @csspart title - The drawer's title.\n * @csspart close-button - The close button, an `<sl-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n * @csspart body - The drawer's body.\n * @csspart footer - The drawer's footer.\n *\n * @cssproperty --size - The preferred size of the drawer. This will be applied to the drawer's width or height\n *   depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.\n * @cssproperty --header-spacing - The amount of padding to use for the header.\n * @cssproperty --body-spacing - The amount of padding to use for the body.\n * @cssproperty --footer-spacing - The amount of padding to use for the footer.\n *\n * @animation drawer.showTop - The animation to use when showing a drawer with `top` placement.\n * @animation drawer.showEnd - The animation to use when showing a drawer with `end` placement.\n * @animation drawer.showBottom - The animation to use when showing a drawer with `bottom` placement.\n * @animation drawer.showStart - The animation to use when showing a drawer with `start` placement.\n * @animation drawer.hideTop - The animation to use when hiding a drawer with `top` placement.\n * @animation drawer.hideEnd - The animation to use when hiding a drawer with `end` placement.\n * @animation drawer.hideBottom - The animation to use when hiding a drawer with `bottom` placement.\n * @animation drawer.hideStart - The animation to use when hiding a drawer with `start` placement.\n * @animation drawer.denyClose - The animation to use when a request to close the drawer is denied.\n * @animation drawer.overlay.show - The animation to use when showing the drawer's overlay.\n * @animation drawer.overlay.hide - The animation to use when hiding the drawer's overlay.\n *\n * @property modal - Exposes the internal modal utility that controls focus trapping. To temporarily disable focus\n *   trapping and allow third-party modals spawned from an active Shoelace modal, call `modal.activateExternal()` when\n *   the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping.\n */",
+          "documentation": "https://shoelace.style/components/drawer",
           "status": "stable",
           "since": "2.0",
           "dependencies": [
-            "sl-popup"
+            "sl-icon-button"
           ],
           "animations": [
             {
-              "name": "dropdown.show",
-              "description": "The animation to use when showing the dropdown."
+              "name": "drawer.showTop",
+              "description": "The animation to use when showing a drawer with `top` placement."
+            },
+            {
+              "name": "drawer.showEnd",
+              "description": "The animation to use when showing a drawer with `end` placement."
+            },
+            {
+              "name": "drawer.showBottom",
+              "description": "The animation to use when showing a drawer with `bottom` placement."
+            },
+            {
+              "name": "drawer.showStart",
+              "description": "The animation to use when showing a drawer with `start` placement."
+            },
+            {
+              "name": "drawer.hideTop",
+              "description": "The animation to use when hiding a drawer with `top` placement."
+            },
+            {
+              "name": "drawer.hideEnd",
+              "description": "The animation to use when hiding a drawer with `end` placement."
+            },
+            {
+              "name": "drawer.hideBottom",
+              "description": "The animation to use when hiding a drawer with `bottom` placement."
+            },
+            {
+              "name": "drawer.hideStart",
+              "description": "The animation to use when hiding a drawer with `start` placement."
+            },
+            {
+              "name": "drawer.denyClose",
+              "description": "The animation to use when a request to close the drawer is denied."
+            },
+            {
+              "name": "drawer.overlay.show",
+              "description": "The animation to use when showing the drawer's overlay."
             },
             {
-              "name": "dropdown.hide",
-              "description": "The animation to use when hiding the dropdown."
+              "name": "drawer.overlay.hide",
+              "description": "The animation to use when hiding the drawer's overlay."
             }
           ]
         }
@@ -6626,8 +6987,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SlDropdown",
-            "module": "components/dropdown/dropdown.js"
+            "name": "SlDrawer",
+            "module": "components/drawer/drawer.js"
           }
         }
       ]
@@ -8067,7 +8428,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ 'sl-icon': SlIcon, 'sl-calendar': SlCalendar, 'sl-popup': SlPopup }"
+              "default": "{ 'sl-icon': SlIcon }"
             },
             {
               "kind": "field",
@@ -8097,13 +8458,6 @@
                 "text": "HTMLInputElement"
               }
             },
-            {
-              "kind": "field",
-              "name": "calendar",
-              "type": {
-                "text": "SlCalendar"
-              }
-            },
             {
               "kind": "field",
               "name": "hasFocus",
@@ -8113,23 +8467,6 @@
               "privacy": "private",
               "default": "false"
             },
-            {
-              "kind": "field",
-              "name": "valueChangeDebounceTimer",
-              "type": {
-                "text": "number | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "isCalendarOpen",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
             {
               "kind": "field",
               "name": "title",
@@ -8549,32 +8886,6 @@
               "name": "handlePasswordToggle",
               "privacy": "private"
             },
-            {
-              "kind": "method",
-              "name": "handleDateSelect",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "CustomEvent<{ date: Date }>"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleInputMouseDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
-            },
             {
               "kind": "method",
               "name": "handleDisabledChange"
@@ -9178,6 +9489,52 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/menu-label/menu-label.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SlMenuLabel",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The menu label's content.",
+              "name": ""
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "ShoelaceElement",
+            "module": "/src/internal/shoelace-element.js"
+          },
+          "summary": "Menu labels are used to describe a group of menu items.",
+          "tagNameWithoutPrefix": "menu-label",
+          "tagName": "sl-menu-label",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Menu labels are used to describe a group of menu items.\n * @documentation https://shoelace.style/components/menu-label\n * @status stable\n * @since 2.0\n *\n * @slot - The menu label's content.\n *\n * @csspart base - The component's base wrapper.\n */",
+          "documentation": "https://shoelace.style/components/menu-label",
+          "status": "stable",
+          "since": "2.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SlMenuLabel",
+            "module": "components/menu-label/menu-label.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/menu-item/menu-item.js",
@@ -9467,52 +9824,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/menu-label/menu-label.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SlMenuLabel",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The menu label's content.",
-              "name": ""
-            }
-          ],
-          "members": [],
-          "superclass": {
-            "name": "ShoelaceElement",
-            "module": "/src/internal/shoelace-element.js"
-          },
-          "summary": "Menu labels are used to describe a group of menu items.",
-          "tagNameWithoutPrefix": "menu-label",
-          "tagName": "sl-menu-label",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Menu labels are used to describe a group of menu items.\n * @documentation https://shoelace.style/components/menu-label\n * @status stable\n * @since 2.0\n *\n * @slot - The menu label's content.\n *\n * @csspart base - The component's base wrapper.\n */",
-          "documentation": "https://shoelace.style/components/menu-label",
-          "status": "stable",
-          "since": "2.0"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SlMenuLabel",
-            "module": "components/menu-label/menu-label.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/mutation-observer/mutation-observer.js",
@@ -12946,58 +13257,168 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Keep the displayed value up to date as time passes.",
-              "attribute": "sync"
-            }
-          ],
-          "attributes": [
+              "description": "Keep the displayed value up to date as time passes.",
+              "attribute": "sync"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "date",
+              "type": {
+                "text": "Date | string"
+              },
+              "default": "new Date()",
+              "description": "The date from which to calculate time from. If not set, the current date and time will be used. When passing a\nstring, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert\na date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
+              "fieldName": "date"
+            },
+            {
+              "name": "format",
+              "type": {
+                "text": "'long' | 'short' | 'narrow'"
+              },
+              "default": "'long'",
+              "description": "The formatting style to use.",
+              "fieldName": "format"
+            },
+            {
+              "name": "numeric",
+              "type": {
+                "text": "'always' | 'auto'"
+              },
+              "default": "'auto'",
+              "description": "When `auto`, values such as \"yesterday\" and \"tomorrow\" will be shown when possible. When `always`, values such as\n\"1 day ago\" and \"in 1 day\" will be shown.",
+              "fieldName": "numeric"
+            },
+            {
+              "name": "sync",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Keep the displayed value up to date as time passes.",
+              "fieldName": "sync"
+            }
+          ],
+          "superclass": {
+            "name": "ShoelaceElement",
+            "module": "/src/internal/shoelace-element.js"
+          },
+          "summary": "Outputs a localized time phrase relative to the current date and time.",
+          "tagNameWithoutPrefix": "relative-time",
+          "tagName": "sl-relative-time",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Outputs a localized time phrase relative to the current date and time.\n * @documentation https://shoelace.style/components/relative-time\n * @status stable\n * @since 2.0\n */",
+          "documentation": "https://shoelace.style/components/relative-time",
+          "status": "stable",
+          "since": "2.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SlRelativeTime",
+            "module": "components/relative-time/relative-time.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/resize-observer/resize-observer.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SlResizeObserver",
+          "slots": [
+            {
+              "description": "One or more elements to watch for resizing.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "resizeObserver",
+              "type": {
+                "text": "ResizeObserver"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "observedElements",
+              "type": {
+                "text": "HTMLElement[]"
+              },
+              "privacy": "private",
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the observer.",
+              "attribute": "disabled",
+              "reflects": true
+            },
             {
-              "name": "date",
-              "type": {
-                "text": "Date | string"
-              },
-              "default": "new Date()",
-              "description": "The date from which to calculate time from. If not set, the current date and time will be used. When passing a\nstring, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert\na date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
-              "fieldName": "date"
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private"
             },
             {
-              "name": "format",
-              "type": {
-                "text": "'long' | 'short' | 'narrow'"
-              },
-              "default": "'long'",
-              "description": "The formatting style to use.",
-              "fieldName": "format"
+              "kind": "method",
+              "name": "startObserver",
+              "privacy": "private"
             },
             {
-              "name": "numeric",
+              "kind": "method",
+              "name": "stopObserver",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleDisabledChange"
+            }
+          ],
+          "events": [
+            {
               "type": {
-                "text": "'always' | 'auto'"
+                "text": "{ entries: ResizeObserverEntry[] }"
               },
-              "default": "'auto'",
-              "description": "When `auto`, values such as \"yesterday\" and \"tomorrow\" will be shown when possible. When `always`, values such as\n\"1 day ago\" and \"in 1 day\" will be shown.",
-              "fieldName": "numeric"
-            },
+              "description": "Emitted when the element is resized.",
+              "name": "sl-resize",
+              "reactName": "onSlResize",
+              "eventName": "SlResizeEvent"
+            }
+          ],
+          "attributes": [
             {
-              "name": "sync",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Keep the displayed value up to date as time passes.",
-              "fieldName": "sync"
+              "description": "Disables the observer.",
+              "fieldName": "disabled"
             }
           ],
           "superclass": {
             "name": "ShoelaceElement",
             "module": "/src/internal/shoelace-element.js"
           },
-          "summary": "Outputs a localized time phrase relative to the current date and time.",
-          "tagNameWithoutPrefix": "relative-time",
-          "tagName": "sl-relative-time",
+          "summary": "The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).",
+          "tagNameWithoutPrefix": "resize-observer",
+          "tagName": "sl-resize-observer",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Outputs a localized time phrase relative to the current date and time.\n * @documentation https://shoelace.style/components/relative-time\n * @status stable\n * @since 2.0\n */",
-          "documentation": "https://shoelace.style/components/relative-time",
+          "jsDoc": "/**\n * @summary The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\n * @documentation https://shoelace.style/components/resize-observer\n * @status stable\n * @since 2.0\n *\n * @slot - One or more elements to watch for resizing.\n *\n * @event {{ entries: ResizeObserverEntry[] }} sl-resize - Emitted when the element is resized.\n */",
+          "documentation": "https://shoelace.style/components/resize-observer",
           "status": "stable",
           "since": "2.0"
         }
@@ -13007,8 +13428,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SlRelativeTime",
-            "module": "components/relative-time/relative-time.js"
+            "name": "SlResizeObserver",
+            "module": "components/resize-observer/resize-observer.js"
           }
         }
       ]
@@ -13987,188 +14408,12 @@
           "jsDoc": "/**\n * @summary Selects allow you to choose items from a menu of predefined options.\n * @documentation https://shoelace.style/components/select\n * @status stable\n * @since 2.0\n *\n * @dependency sl-icon\n * @dependency sl-popup\n * @dependency sl-tag\n *\n * @slot - The listbox options. Must be `<sl-option>` elements. You can use `<sl-divider>` to group items visually.\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.\n * @slot suffix - Used to append a presentational icon or similar element to the combobox.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n *\n * @event sl-change - Emitted when the control's value changes.\n * @event sl-clear - Emitted when the control's value is cleared.\n * @event sl-input - Emitted when the control receives input.\n * @event sl-focus - Emitted when the control gains focus.\n * @event sl-blur - Emitted when the control loses focus.\n * @event sl-show - Emitted when the select's menu opens.\n * @event sl-after-show - Emitted after the select's menu opens and all animations are complete.\n * @event sl-hide - Emitted when the select's menu closes.\n * @event sl-after-hide - Emitted after the select's menu closes and all animations are complete.\n * @event sl-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The select's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.\n * @csspart prefix - The container that wraps the prefix slot.\n * @csspart suffix - The container that wraps the suffix slot.\n * @csspart display-input - The element that displays the selected option's label, an `<input>` element.\n * @csspart listbox - The listbox container where options are slotted.\n * @csspart tags - The container that houses option tags when `multiselect` is used.\n * @csspart tag - The individual tags that represent each multiselect option.\n * @csspart tag__base - The tag's base part.\n * @csspart tag__content - The tag's content part.\n * @csspart tag__remove-button - The tag's remove button.\n * @csspart tag__remove-button__base - The tag's remove button base part.\n * @csspart clear-button - The clear button.\n * @csspart expand-icon - The container that wraps the expand icon.\n */",
           "documentation": "https://shoelace.style/components/select",
           "status": "stable",
-          "since": "2.0",
-          "dependencies": [
-            "sl-icon",
-            "sl-popup",
-            "sl-tag"
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SlSelect",
-            "module": "components/select/select.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/resize-observer/resize-observer.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SlResizeObserver",
-          "slots": [
-            {
-              "description": "One or more elements to watch for resizing.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "resizeObserver",
-              "type": {
-                "text": "ResizeObserver"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "observedElements",
-              "type": {
-                "text": "HTMLElement[]"
-              },
-              "privacy": "private",
-              "default": "[]"
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the observer.",
-              "attribute": "disabled",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "startObserver",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "stopObserver",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleDisabledChange"
-            }
-          ],
-          "events": [
-            {
-              "type": {
-                "text": "{ entries: ResizeObserverEntry[] }"
-              },
-              "description": "Emitted when the element is resized.",
-              "name": "sl-resize",
-              "reactName": "onSlResize",
-              "eventName": "SlResizeEvent"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the observer.",
-              "fieldName": "disabled"
-            }
-          ],
-          "superclass": {
-            "name": "ShoelaceElement",
-            "module": "/src/internal/shoelace-element.js"
-          },
-          "summary": "The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).",
-          "tagNameWithoutPrefix": "resize-observer",
-          "tagName": "sl-resize-observer",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\n * @documentation https://shoelace.style/components/resize-observer\n * @status stable\n * @since 2.0\n *\n * @slot - One or more elements to watch for resizing.\n *\n * @event {{ entries: ResizeObserverEntry[] }} sl-resize - Emitted when the element is resized.\n */",
-          "documentation": "https://shoelace.style/components/resize-observer",
-          "status": "stable",
-          "since": "2.0"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SlResizeObserver",
-            "module": "components/resize-observer/resize-observer.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/spinner/spinner.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SlSpinner",
-          "cssProperties": [
-            {
-              "description": "The width of the track.",
-              "name": "--track-width"
-            },
-            {
-              "description": "The color of the track.",
-              "name": "--track-color"
-            },
-            {
-              "description": "The color of the spinner's indicator.",
-              "name": "--indicator-color"
-            },
-            {
-              "description": "The time it takes for the spinner to complete one animation cycle.",
-              "name": "--speed"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
-            }
-          ],
-          "superclass": {
-            "name": "ShoelaceElement",
-            "module": "/src/internal/shoelace-element.js"
-          },
-          "summary": "Spinners are used to show the progress of an indeterminate operation.",
-          "tagNameWithoutPrefix": "spinner",
-          "tagName": "sl-spinner",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Spinners are used to show the progress of an indeterminate operation.\n * @documentation https://shoelace.style/components/spinner\n * @status stable\n * @since 2.0\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --track-width - The width of the track.\n * @cssproperty --track-color - The color of the track.\n * @cssproperty --indicator-color - The color of the spinner's indicator.\n * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.\n */",
-          "documentation": "https://shoelace.style/components/spinner",
-          "status": "stable",
-          "since": "2.0"
+          "since": "2.0",
+          "dependencies": [
+            "sl-icon",
+            "sl-popup",
+            "sl-tag"
+          ]
         }
       ],
       "exports": [
@@ -14176,8 +14421,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SlSpinner",
-            "module": "components/spinner/spinner.js"
+            "name": "SlSelect",
+            "module": "components/select/select.js"
           }
         }
       ]
@@ -14262,6 +14507,72 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/spinner/spinner.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SlSpinner",
+          "cssProperties": [
+            {
+              "description": "The width of the track.",
+              "name": "--track-width"
+            },
+            {
+              "description": "The color of the track.",
+              "name": "--track-color"
+            },
+            {
+              "description": "The color of the spinner's indicator.",
+              "name": "--indicator-color"
+            },
+            {
+              "description": "The time it takes for the spinner to complete one animation cycle.",
+              "name": "--speed"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            }
+          ],
+          "superclass": {
+            "name": "ShoelaceElement",
+            "module": "/src/internal/shoelace-element.js"
+          },
+          "summary": "Spinners are used to show the progress of an indeterminate operation.",
+          "tagNameWithoutPrefix": "spinner",
+          "tagName": "sl-spinner",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Spinners are used to show the progress of an indeterminate operation.\n * @documentation https://shoelace.style/components/spinner\n * @status stable\n * @since 2.0\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --track-width - The width of the track.\n * @cssproperty --track-color - The color of the track.\n * @cssproperty --indicator-color - The color of the spinner's indicator.\n * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.\n */",
+          "documentation": "https://shoelace.style/components/spinner",
+          "status": "stable",
+          "since": "2.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SlSpinner",
+            "module": "components/spinner/spinner.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/split-panel/split-panel.js",
@@ -15926,6 +16237,261 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/table/table.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SlTable",
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'sl-checkbox': SlCheckBox, 'sl-radio': SlRadio }"
+            },
+            {
+              "kind": "field",
+              "name": "columns",
+              "type": {
+                "text": "TableProps<TData>['columns']"
+              },
+              "default": "[]",
+              "attribute": "columns"
+            },
+            {
+              "kind": "field",
+              "name": "dataSource",
+              "type": {
+                "text": "TableProps<TData>['dataSource']"
+              },
+              "default": "[]",
+              "attribute": "dataSource"
+            },
+            {
+              "kind": "field",
+              "name": "loading",
+              "type": {
+                "text": "TableProps<TData>['loading']"
+              },
+              "default": "false",
+              "attribute": "loading"
+            },
+            {
+              "kind": "field",
+              "name": "bordered",
+              "type": {
+                "text": "TableProps<TData>['bordered']"
+              },
+              "default": "false",
+              "attribute": "bordered"
+            },
+            {
+              "kind": "field",
+              "name": "direction",
+              "type": {
+                "text": "TableProps<TData>['direction'] | undefined"
+              },
+              "default": "'ltr'",
+              "attribute": "direction"
+            },
+            {
+              "kind": "field",
+              "name": "showHeader",
+              "type": {
+                "text": "TableProps<TData>['showHeader']"
+              },
+              "default": "true",
+              "attribute": "show-header"
+            },
+            {
+              "kind": "field",
+              "name": "rowSelection",
+              "type": {
+                "text": "TableRowSelection<TData> | undefined"
+              },
+              "attribute": "rowSelection"
+            },
+            {
+              "kind": "field",
+              "name": "rowSelectedMap",
+              "type": {
+                "text": "RowSelectionState"
+              },
+              "default": "{}"
+            },
+            {
+              "kind": "field",
+              "name": "tableController",
+              "privacy": "private",
+              "default": "new TableController<TData>(this)"
+            },
+            {
+              "kind": "field",
+              "name": "adapter",
+              "type": {
+                "text": "TableAdapter"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "renderTable",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "unknown"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "tableInstance",
+                  "type": {
+                    "text": "Table<TData>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "renderMainTable",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "unknown"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "tableInstance",
+                  "type": {
+                    "text": "Table<TData>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "generateColumns",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "ColumnDef<TData, any>[]"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "buildTableState",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "columns",
+              "type": {
+                "text": "TableProps<TData>['columns']"
+              },
+              "default": "[]",
+              "fieldName": "columns"
+            },
+            {
+              "name": "dataSource",
+              "type": {
+                "text": "TableProps<TData>['dataSource']"
+              },
+              "default": "[]",
+              "fieldName": "dataSource"
+            },
+            {
+              "name": "loading",
+              "type": {
+                "text": "TableProps<TData>['loading']"
+              },
+              "default": "false",
+              "fieldName": "loading"
+            },
+            {
+              "name": "bordered",
+              "type": {
+                "text": "TableProps<TData>['bordered']"
+              },
+              "default": "false",
+              "fieldName": "bordered"
+            },
+            {
+              "name": "direction",
+              "type": {
+                "text": "TableProps<TData>['direction'] | undefined"
+              },
+              "default": "'ltr'",
+              "fieldName": "direction"
+            },
+            {
+              "name": "show-header",
+              "type": {
+                "text": "TableProps<TData>['showHeader']"
+              },
+              "default": "true",
+              "fieldName": "showHeader"
+            },
+            {
+              "name": "rowSelection",
+              "type": {
+                "text": "TableRowSelection<TData> | undefined"
+              },
+              "fieldName": "rowSelection"
+            }
+          ],
+          "superclass": {
+            "name": "ShoelaceElement",
+            "module": "/src/internal/shoelace-element.js"
+          },
+          "tagNameWithoutPrefix": "table",
+          "tagName": "sl-table",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SlTable",
+            "module": "components/table/table.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./spinner-container.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./head-table.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./body-table.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/tag/tag.js",
@@ -18013,7 +18579,7 @@
   "package": {
     "name": "@kdcloudjs/shoelace",
     "description": "A forward-thinking library of web components.",
-    "version": "0.0.1",
+    "version": "1.0.0",
     "license": "MIT"
   }
 }