@solid-design-system/components 4.0.0-next.5 → 4.0.0-next.6

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@solid-design-system/components",
-  "version": "4.0.0-next.5",
+  "version": "4.0.0-next.6",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1911,33 +1911,61 @@
           }
         },
         {
-          "name": "sd-drawer",
-          "description": "Drawers slide in from a container to expose additional options and information.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the drawer opens.\n- **sd-after-show** - Emitted after the drawer opens and all animations are complete.\n- **sd-hide** - Emitted when the drawer closes.\n- **sd-after-hide** - Emitted after the drawer closes and all animations are complete.\n- **sd-initial-focus** - 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.\n- **sd-request-close** - 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.\n\n### **Methods:**\n - **show()** - Shows the drawer.\n- **hide()** - Hides the drawer\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The drawer's main content.\n- **header** - The drawer's header, usually a title.\n- **footer** - The drawer's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the drawer. depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the drawer.\n- **panel** - The drawer's panel (where the drawer and its content are rendered).\n- **header** - The drawer's header. This element wraps the title and the close-button.\n- **title** - The drawer's title.\n- **close-button** - The close button, an `<sd-button>`.\n- **body** - The drawer's body.\n- **footer** - The drawer's footer.",
+          "name": "sd-dropdown",
+          "description": "Dropdowns expose additional content that \"drops down\" in a panel.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the dropdown opens.\n- **sd-after-show** - Emitted after the dropdown opens and all animations are complete.\n- **sd-hide** - Emitted when the dropdown closes.\n- **sd-after-hide** - Emitted after the dropdown closes and all animations are complete.\n\n### **Methods:**\n - **getAccessibleTrigger(): _HTMLElement | null_** - Slotted triggers can be arbitrary content. The accessible trigger is the tabbable element\nwithin the slotted trigger. This could be the slotted element itself, a child of the slotted element,\nor an element within the slotted elements shadow root.\n\ne.g. the accessible trigger of an <sd-button> is a <button> located inside its shadow root.\n\nTo determine this, we assume the first tabbable element in the trigger slot is the \"accessible trigger.\"\n- **show()** - Shows the dropdown panel.\n- **hide()** - Hides the dropdown panel\n- **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The dropdown's main content.\n- **trigger** - The dropdown's trigger, usually a `<sd-button>` element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the dropdown is open.",
           "doc-url": "",
           "attributes": [
             {
               "name": "open",
-              "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.",
+              "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.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "label",
-              "description": "You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility.",
-              "value": { "type": "string", "default": "''" }
+              "name": "rounded",
+              "description": "Indicates whether or not the dropdown should be styled with rounded corners.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "placement",
-              "description": "The direction from which the drawer will open.",
-              "value": { "type": "'end' | 'start'", "default": "'end'" }
+              "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.",
+              "value": {
+                "type": "| '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'"
+              }
             },
             {
-              "name": "contained",
-              "description": "By default, the drawer slides out of its containing block (the viewport). Contained is a hidden feature used only for testing purposes. Please do not use it in production as it will likely change.",
+              "name": "disabled",
+              "description": "Disables the dropdown so the panel will not open.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "no-header",
-              "description": "Removes the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the drawer.",
+              "name": "stay-open-on-select",
+              "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.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "distance",
+              "description": "The distance in pixels from which to offset the panel away from its trigger. This defaults to `0` for `rounded=false` and to a minimum of `1` for `rounded=true`.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "skidding",
+              "description": "The distance in pixels from which to offset the panel along its trigger.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "no-auto-size",
+              "description": "Indicates whether or not the dropdown should automatically resize its content's width/height regarding the available space on screen.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "no-flip",
+              "description": "When set to true, the placement of the dropdown will not flip to the opposite site to keep it in view.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "hoist",
+              "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.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -1952,69 +1980,82 @@
             }
           ],
           "slots": [
-            { "name": "", "description": "The drawer's main content." },
-            {
-              "name": "header",
-              "description": "The drawer's header, usually a title."
-            },
+            { "name": "", "description": "The dropdown's main content." },
             {
-              "name": "footer",
-              "description": "The drawer's footer, usually one or more buttons representing various options."
+              "name": "trigger",
+              "description": "The dropdown's trigger, usually a `<sd-button>` element."
             }
           ],
           "events": [
             {
               "name": "sd-show",
-              "description": "Emitted when the drawer opens."
+              "description": "Emitted when the dropdown opens."
             },
             {
               "name": "sd-after-show",
-              "description": "Emitted after the drawer opens and all animations are complete."
+              "description": "Emitted after the dropdown opens and all animations are complete."
             },
             {
               "name": "sd-hide",
-              "description": "Emitted when the drawer closes."
+              "description": "Emitted when the dropdown closes."
             },
             {
               "name": "sd-after-hide",
-              "description": "Emitted after the drawer closes and all animations are complete."
-            },
-            {
-              "name": "sd-initial-focus",
-              "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": "sd-request-close",
-              "type": "{ 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."
+              "description": "Emitted after the dropdown closes and all animations are complete."
             }
           ],
           "js": {
             "properties": [
+              { "name": "popup", "type": "SdPopup" },
               { "name": "localize" },
               {
                 "name": "open",
-                "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.",
+                "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.",
                 "type": "boolean"
               },
               {
-                "name": "label",
-                "description": "You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility.",
-                "type": "string"
+                "name": "rounded",
+                "description": "Indicates whether or not the dropdown should be styled with rounded corners.",
+                "type": "boolean"
               },
               {
                 "name": "placement",
-                "description": "The direction from which the drawer will open.",
-                "type": "'end' | '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.",
+                "type": "| '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'"
               },
               {
-                "name": "contained",
-                "description": "By default, the drawer slides out of its containing block (the viewport). Contained is a hidden feature used only for testing purposes. Please do not use it in production as it will likely change.",
+                "name": "disabled",
+                "description": "Disables the dropdown so the panel will not open.",
                 "type": "boolean"
               },
               {
-                "name": "noHeader",
-                "description": "Removes the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the drawer.",
+                "name": "stayOpenOnSelect",
+                "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.",
+                "type": "boolean"
+              },
+              {
+                "name": "distance",
+                "description": "The distance in pixels from which to offset the panel away from its trigger. This defaults to `0` for `rounded=false` and to a minimum of `1` for `rounded=true`.",
+                "type": "number"
+              },
+              {
+                "name": "skidding",
+                "description": "The distance in pixels from which to offset the panel along its trigger.",
+                "type": "number"
+              },
+              {
+                "name": "noAutoSize",
+                "description": "Indicates whether or not the dropdown should automatically resize its content's width/height regarding the available space on screen.",
+                "type": "boolean"
+              },
+              {
+                "name": "noFlip",
+                "description": "When set to true, the placement of the dropdown will not flip to the opposite site to keep it in view.",
+                "type": "boolean"
+              },
+              {
+                "name": "hoist",
+                "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.",
                 "type": "boolean"
               },
               {
@@ -2031,88 +2072,51 @@
             "events": [
               {
                 "name": "sd-show",
-                "description": "Emitted when the drawer opens."
+                "description": "Emitted when the dropdown opens."
               },
               {
                 "name": "sd-after-show",
-                "description": "Emitted after the drawer opens and all animations are complete."
+                "description": "Emitted after the dropdown opens and all animations are complete."
               },
               {
                 "name": "sd-hide",
-                "description": "Emitted when the drawer closes."
+                "description": "Emitted when the dropdown closes."
               },
               {
                 "name": "sd-after-hide",
-                "description": "Emitted after the drawer closes and all animations are complete."
-              },
-              {
-                "name": "sd-initial-focus",
-                "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": "sd-request-close",
-                "type": "{ 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."
+                "description": "Emitted after the dropdown closes and all animations are complete."
               }
             ]
           }
         },
         {
-          "name": "sd-dropdown",
-          "description": "Dropdowns expose additional content that \"drops down\" in a panel.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the dropdown opens.\n- **sd-after-show** - Emitted after the dropdown opens and all animations are complete.\n- **sd-hide** - Emitted when the dropdown closes.\n- **sd-after-hide** - Emitted after the dropdown closes and all animations are complete.\n\n### **Methods:**\n - **getAccessibleTrigger(): _HTMLElement | null_** - Slotted triggers can be arbitrary content. The accessible trigger is the tabbable element\nwithin the slotted trigger. This could be the slotted element itself, a child of the slotted element,\nor an element within the slotted elements shadow root.\n\ne.g. the accessible trigger of an <sd-button> is a <button> located inside its shadow root.\n\nTo determine this, we assume the first tabbable element in the trigger slot is the \"accessible trigger.\"\n- **show()** - Shows the dropdown panel.\n- **hide()** - Hides the dropdown panel\n- **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The dropdown's main content.\n- **trigger** - The dropdown's trigger, usually a `<sd-button>` element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the dropdown is open.",
+          "name": "sd-drawer",
+          "description": "Drawers slide in from a container to expose additional options and information.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the drawer opens.\n- **sd-after-show** - Emitted after the drawer opens and all animations are complete.\n- **sd-hide** - Emitted when the drawer closes.\n- **sd-after-hide** - Emitted after the drawer closes and all animations are complete.\n- **sd-initial-focus** - 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.\n- **sd-request-close** - 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.\n\n### **Methods:**\n - **show()** - Shows the drawer.\n- **hide()** - Hides the drawer\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The drawer's main content.\n- **header** - The drawer's header, usually a title.\n- **footer** - The drawer's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the drawer. depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the drawer.\n- **panel** - The drawer's panel (where the drawer and its content are rendered).\n- **header** - The drawer's header. This element wraps the title and the close-button.\n- **title** - The drawer's title.\n- **close-button** - The close button, an `<sd-button>`.\n- **body** - The drawer's body.\n- **footer** - The drawer's footer.",
           "doc-url": "",
           "attributes": [
             {
               "name": "open",
-              "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.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "rounded",
-              "description": "Indicates whether or not the dropdown should be styled with rounded corners.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "label",
+              "description": "You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility.",
+              "value": { "type": "string", "default": "''" }
             },
             {
               "name": "placement",
-              "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.",
-              "value": {
-                "type": "| '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'"
-              }
-            },
-            {
-              "name": "disabled",
-              "description": "Disables the dropdown so the panel will not open.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "stay-open-on-select",
-              "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.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "distance",
-              "description": "The distance in pixels from which to offset the panel away from its trigger. This defaults to `0` for `rounded=false` and to a minimum of `1` for `rounded=true`.",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "skidding",
-              "description": "The distance in pixels from which to offset the panel along its trigger.",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "no-auto-size",
-              "description": "Indicates whether or not the dropdown should automatically resize its content's width/height regarding the available space on screen.",
-              "value": { "type": "boolean", "default": "false" }
+              "description": "The direction from which the drawer will open.",
+              "value": { "type": "'end' | 'start'", "default": "'end'" }
             },
             {
-              "name": "no-flip",
-              "description": "When set to true, the placement of the dropdown will not flip to the opposite site to keep it in view.",
+              "name": "contained",
+              "description": "By default, the drawer slides out of its containing block (the viewport). Contained is a hidden feature used only for testing purposes. Please do not use it in production as it will likely change.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "hoist",
-              "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.",
+              "name": "no-header",
+              "description": "Removes the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the drawer.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -2127,82 +2131,69 @@
             }
           ],
           "slots": [
-            { "name": "", "description": "The dropdown's main content." },
+            { "name": "", "description": "The drawer's main content." },
             {
-              "name": "trigger",
-              "description": "The dropdown's trigger, usually a `<sd-button>` element."
+              "name": "header",
+              "description": "The drawer's header, usually a title."
+            },
+            {
+              "name": "footer",
+              "description": "The drawer's footer, usually one or more buttons representing various options."
             }
           ],
           "events": [
             {
               "name": "sd-show",
-              "description": "Emitted when the dropdown opens."
+              "description": "Emitted when the drawer opens."
             },
             {
               "name": "sd-after-show",
-              "description": "Emitted after the dropdown opens and all animations are complete."
+              "description": "Emitted after the drawer opens and all animations are complete."
             },
             {
               "name": "sd-hide",
-              "description": "Emitted when the dropdown closes."
+              "description": "Emitted when the drawer closes."
             },
             {
               "name": "sd-after-hide",
-              "description": "Emitted after the dropdown closes and all animations are complete."
+              "description": "Emitted after the drawer closes and all animations are complete."
+            },
+            {
+              "name": "sd-initial-focus",
+              "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": "sd-request-close",
+              "type": "{ 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."
             }
           ],
           "js": {
             "properties": [
-              { "name": "popup", "type": "SdPopup" },
               { "name": "localize" },
               {
                 "name": "open",
-                "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.",
                 "type": "boolean"
               },
               {
-                "name": "rounded",
-                "description": "Indicates whether or not the dropdown should be styled with rounded corners.",
-                "type": "boolean"
+                "name": "label",
+                "description": "You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility.",
+                "type": "string"
               },
               {
                 "name": "placement",
-                "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.",
-                "type": "| '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'"
-              },
-              {
-                "name": "disabled",
-                "description": "Disables the dropdown so the panel will not open.",
-                "type": "boolean"
-              },
-              {
-                "name": "stayOpenOnSelect",
-                "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.",
-                "type": "boolean"
-              },
-              {
-                "name": "distance",
-                "description": "The distance in pixels from which to offset the panel away from its trigger. This defaults to `0` for `rounded=false` and to a minimum of `1` for `rounded=true`.",
-                "type": "number"
-              },
-              {
-                "name": "skidding",
-                "description": "The distance in pixels from which to offset the panel along its trigger.",
-                "type": "number"
-              },
-              {
-                "name": "noAutoSize",
-                "description": "Indicates whether or not the dropdown should automatically resize its content's width/height regarding the available space on screen.",
-                "type": "boolean"
+                "description": "The direction from which the drawer will open.",
+                "type": "'end' | 'start'"
               },
               {
-                "name": "noFlip",
-                "description": "When set to true, the placement of the dropdown will not flip to the opposite site to keep it in view.",
+                "name": "contained",
+                "description": "By default, the drawer slides out of its containing block (the viewport). Contained is a hidden feature used only for testing purposes. Please do not use it in production as it will likely change.",
                 "type": "boolean"
               },
               {
-                "name": "hoist",
-                "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.",
+                "name": "noHeader",
+                "description": "Removes the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the drawer.",
                 "type": "boolean"
               },
               {
@@ -2219,19 +2210,28 @@
             "events": [
               {
                 "name": "sd-show",
-                "description": "Emitted when the dropdown opens."
+                "description": "Emitted when the drawer opens."
               },
               {
                 "name": "sd-after-show",
-                "description": "Emitted after the dropdown opens and all animations are complete."
+                "description": "Emitted after the drawer opens and all animations are complete."
               },
               {
                 "name": "sd-hide",
-                "description": "Emitted when the dropdown closes."
+                "description": "Emitted when the drawer closes."
               },
               {
                 "name": "sd-after-hide",
-                "description": "Emitted after the dropdown closes and all animations are complete."
+                "description": "Emitted after the drawer closes and all animations are complete."
+              },
+              {
+                "name": "sd-initial-focus",
+                "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": "sd-request-close",
+                "type": "{ 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."
               }
             ]
           }
@@ -2427,6 +2427,7 @@
                 "description": "Determines the variant of the back face of the flipcard.",
                 "type": "'primary' | 'primary-100' | 'gradient-light' | 'gradient-dark'"
               },
+              { "name": "activeSide", "type": "'front' | 'back'" },
               {
                 "name": "dir",
                 "description": "The element's directionality.",

package/dist-versioned/_components/menu/menu.js

@@ -32,7 +32,7 @@ let SdMenu = class SdMenu extends SolidElement {
         if (item.type === 'checkbox') {
             item.checked = !item.checked;
         }
-        this.emit('sd-4-0-0-next-5-select', { detail: { item } });
+        this.emit('sd-4-0-0-next-6-select', { detail: { item } });
     }
     handleKeyDown(event) {
         if (event.key === 'Enter') {

package/dist-versioned/_components/menu/menu.styles.js

@@ -11,7 +11,7 @@ export default css `
     overscroll-behavior: none;
   }
 
-  ::slotted(sd-4-0-0-next-5-divider) {
+  ::slotted(sd-4-0-0-next-6-divider) {
     --spacing: var(--sd-spacing-x-small);
   }
 `;

package/dist-versioned/_components/menu-item/menu-item.js

@@ -74,7 +74,7 @@ let SdMenuItem = class SdMenuItem extends SolidElement {
         })}
       >
         <span part="checked-icon" class="menu-item__check">
-          <sd-4-0-0-next-5-icon name="check" library="system" aria-hidden="true"></sd-4-0-0-next-5-icon>
+          <sd-4-0-0-next-6-icon name="check" library="system" aria-hidden="true"></sd-4-0-0-next-6-icon>
         </span>
 
         <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
@@ -84,7 +84,7 @@ let SdMenuItem = class SdMenuItem extends SolidElement {
         <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
 
         <span class="menu-item__chevron">
-          <sd-4-0-0-next-5-icon name="chevron-right" library="system" aria-hidden="true"></sd-4-0-0-next-5-icon>
+          <sd-4-0-0-next-6-icon name="chevron-right" library="system" aria-hidden="true"></sd-4-0-0-next-6-icon>
         </span>
       </div>
     `;

package/dist-versioned/chunks/chunk.2IBVAXOX.js

@@ -168,7 +168,7 @@ __decorateClass([
   watch(["checked"], { waitUntilFirstUpdate: true })
 ], SdSwitch.prototype, "handleStateChange", 1);
 SdSwitch = __decorateClass([
-  customElement("sd-4-0-0-next-5-switch")
+  customElement("sd-4-0-0-next-6-switch")
 ], SdSwitch);
 
 export {

package/dist-versioned/chunks/chunk.3IT4HBTI.js

@@ -126,7 +126,7 @@ __decorateClass([
   watch(["name", "src", "library"])
 ], SdIcon.prototype, "setIcon", 1);
 SdIcon = __decorateClass([
-  customElement("sd-4-0-0-next-5-icon")
+  customElement("sd-4-0-0-next-6-icon")
 ], SdIcon);
 
 export {

package/dist-versioned/chunks/chunk.3LGDUVS4.js

@@ -81,7 +81,7 @@ var SdStep = class extends SolidElement {
       !this.disabled && !this.current && !this.notInteractive && "text-primary group-hover:text-primary-500 group-hover:fill-primary-500",
       this.notInteractive && "text-primary",
       this.size === "lg" ? "text-lg" : "text-sm"
-    )}">${!this.disabled && !this.current && !this.notInteractive ? html`<sd-4-0-0-next-5-icon name="status-check" library="system"></sd-4-0-0-next-5-icon>` : html`${this.index}`}</slot></${tag}>${this.noTail ? "" : html`<div part="tail" class="${cx(
+    )}">${!this.disabled && !this.current && !this.notInteractive ? html`<sd-4-0-0-next-6-icon name="status-check" library="system"></sd-4-0-0-next-6-icon>` : html`${this.index}`}</slot></${tag}>${this.noTail ? "" : html`<div part="tail" class="${cx(
       this.orientation === "horizontal" ? "border-t w-full my-auto mr-2" : "border-l flex-grow flex-shrink-0 basis-auto h-full w-[1px] mx-auto",
       !this.disabled && !this.current && !this.notInteractive ? " border-primary group-hover:border-primary-500" : "border-neutral-400"
     )}"></div>`}</div><div part="text-container" class="${cx("mt-4 break-words flex flex-col gap-2", this.orientation === "horizontal" ? "text-center w-40" : "w-max text-left", this.disabled && "!text-neutral-700", this.notInteractive ? "ml-3" : "mr-4")}"><div part="label" id="label" class="${cx("!font-bold sd-paragraph", this.disabled && "!text-neutral-700", !this.disabled && !this.current && !this.notInteractive ? "!text-primary group-hover:!text-primary-500 group-hover:cursor-pointer" : "text-black")}"><slot name="label">${this.label}</slot></div><div part="description" id="description" class="${cx("sd-paragraph sd-paragraph--size-sm", this.disabled && "!text-neutral-700")}">${this.description || html`<slot></slot>`}</div></div></div>`;
@@ -131,7 +131,7 @@ __decorateClass([
   watch("notInteractive")
 ], SdStep.prototype, "handleInteractivityChange", 1);
 SdStep = __decorateClass([
-  customElement("sd-4-0-0-next-5-step")
+  customElement("sd-4-0-0-next-6-step")
 ], SdStep);
 
 export {

package/dist-versioned/chunks/chunk.4JZQQD4L.js

@@ -64,10 +64,10 @@ var SdQuickfact = class extends SdAccordion {
       !this.expandable && "hidden"
     )}
             ><slot name="expand-icon" class=${cx(this.open && "hidden")}>
-              <sd-4-0-0-next-5-icon library="system" name="chevron-down"></sd-4-0-0-next-5-icon>
+              <sd-4-0-0-next-6-icon library="system" name="chevron-down"></sd-4-0-0-next-6-icon>
             </slot>
             <slot name="collapse-icon" class=${cx(!this.open && "hidden")}>
-              <sd-4-0-0-next-5-icon library="system" name="chevron-down"></sd-4-0-0-next-5-icon> </slot
+              <sd-4-0-0-next-6-icon library="system" name="chevron-down"></sd-4-0-0-next-6-icon> </slot
           ></span>
         </${header}>
         <div part="content" id="content" class=${cx("overflow-hidden", !this.expandable && "hidden")}>
@@ -85,7 +85,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdQuickfact.prototype, "expandable", 2);
 SdQuickfact = __decorateClass([
-  customElement("sd-4-0-0-next-5-quickfact")
+  customElement("sd-4-0-0-next-6-quickfact")
 ], SdQuickfact);
 setDefaultAnimation("quickfact.show", {
   keyframes: [