@solid-design-system/components 5.8.4 → 5.10.0

package/dist/solid-components.js

@@ -1,180 +1,187 @@
+import {
+  setupAutocomplete
+} from "./chunks/chunk.6DKXZWRN.js";
 import "./chunks/chunk.HAL7R4WT.js";
+import {
+  SdTeaserMedia
+} from "./chunks/chunk.7EMNYFIP.js";
+import {
+  SdTextarea
+} from "./chunks/chunk.I6NQOQEO.js";
+import {
+  SdTeaser
+} from "./chunks/chunk.R2XG3O7O.js";
 import {
   SdTooltip
-} from "./chunks/chunk.IENME46S.js";
+} from "./chunks/chunk.SGJGJL45.js";
 import {
   SdVideo
-} from "./chunks/chunk.3D4DMXRR.js";
+} from "./chunks/chunk.MQ5VT5VP.js";
 import {
-  setupAutocomplete
-} from "./chunks/chunk.6DKXZWRN.js";
+  SdStep
+} from "./chunks/chunk.EO5MCLIR.js";
+import {
+  SdStepGroup
+} from "./chunks/chunk.YGVCQCO4.js";
 import {
   SdSwitch
-} from "./chunks/chunk.E7EV2RDK.js";
+} from "./chunks/chunk.FDQQDXKD.js";
 import {
   SdTab
-} from "./chunks/chunk.5RE63XH3.js";
+} from "./chunks/chunk.ZSZ2IB2L.js";
 import {
   SdTabGroup
-} from "./chunks/chunk.X2MHTR7J.js";
+} from "./chunks/chunk.7VIYCZ4Z.js";
 import {
   SdTabPanel
-} from "./chunks/chunk.45HZJPE2.js";
-import {
-  SdTeaser
-} from "./chunks/chunk.R6GZBBBT.js";
+} from "./chunks/chunk.BK4CYVLA.js";
 import {
-  SdTeaserMedia
-} from "./chunks/chunk.5DAXULFD.js";
+  SdOption
+} from "./chunks/chunk.KFVC6XFD.js";
 import {
-  SdTextarea
-} from "./chunks/chunk.UBWROOYD.js";
+  SdQuickfact
+} from "./chunks/chunk.XKFVXICF.js";
 import {
   SdRadioButton
-} from "./chunks/chunk.HM3LCNHO.js";
+} from "./chunks/chunk.2VDSJ75Q.js";
 import {
   SdRadioGroup
-} from "./chunks/chunk.OYDC3KOZ.js";
+} from "./chunks/chunk.SW6AKO54.js";
 import {
   SdRadio
-} from "./chunks/chunk.XVD3XEUF.js";
+} from "./chunks/chunk.47VXT6XF.js";
 import {
   SdScrollable
-} from "./chunks/chunk.VPMSIODG.js";
+} from "./chunks/chunk.VFG2SXVE.js";
 import {
   SdSelect
-} from "./chunks/chunk.PQWYZXV6.js";
-import {
-  SdStep
-} from "./chunks/chunk.HKYEM2KT.js";
-import {
-  SdStepGroup
-} from "./chunks/chunk.FZ6CB77Z.js";
+} from "./chunks/chunk.5XKGAQGU.js";
 import {
   SdLink
-} from "./chunks/chunk.FGJ7DRXJ.js";
+} from "./chunks/chunk.AQKWXHIC.js";
 import {
   SdMapMarker
-} from "./chunks/chunk.LWXZJIRQ.js";
+} from "./chunks/chunk.3PUMOBIO.js";
+import {
+  SdMenu
+} from "./chunks/chunk.JJTGSFOV.js";
+import {
+  SdMenuItem
+} from "./chunks/chunk.RGFFEJMJ.js";
+import "./chunks/chunk.KEJFWGZI.js";
 import {
   SdNavigationItem
-} from "./chunks/chunk.EZQDEKUU.js";
+} from "./chunks/chunk.UJHYOR23.js";
 import {
   SdNotification
-} from "./chunks/chunk.NRFL4RBI.js";
+} from "./chunks/chunk.WSEY3LJE.js";
 import {
   SdOptgroup
-} from "./chunks/chunk.S6JOYZFA.js";
-import {
-  SdOption
-} from "./chunks/chunk.6FBOYPMX.js";
-import {
-  SdQuickfact
-} from "./chunks/chunk.KORSEOQ4.js";
+} from "./chunks/chunk.3JIBD4DC.js";
 import {
   SdInclude
-} from "./chunks/chunk.EXH7DCD2.js";
+} from "./chunks/chunk.5UQ6EJAW.js";
 import {
   SdInput
-} from "./chunks/chunk.E33JBIRB.js";
+} from "./chunks/chunk.UQ55GFI3.js";
 import {
   SdDialog
-} from "./chunks/chunk.UVEPG25K.js";
+} from "./chunks/chunk.UJHYUCHT.js";
 import {
   SdDivider
-} from "./chunks/chunk.5XMZ6WXX.js";
+} from "./chunks/chunk.6ID5BKH5.js";
 import {
   SdDropdown
-} from "./chunks/chunk.V6V6VOCS.js";
+} from "./chunks/chunk.EIUEZZ5G.js";
 import {
   SdExpandable
-} from "./chunks/chunk.2AJD3JJI.js";
+} from "./chunks/chunk.4Z5MLLDU.js";
 import {
   SdFlipcard
-} from "./chunks/chunk.J44XCBXL.js";
+} from "./chunks/chunk.N7WBIQUG.js";
 import {
   SdHeader
-} from "./chunks/chunk.7VREM4PD.js";
+} from "./chunks/chunk.N3MU3643.js";
 import {
   SdCheckbox
-} from "./chunks/chunk.FZ6HADPO.js";
+} from "./chunks/chunk.MEHX7EVL.js";
 import {
   SdCheckboxGroup
-} from "./chunks/chunk.5GRW5ZMD.js";
+} from "./chunks/chunk.ZF7CPAC2.js";
 import {
   SdCombobox
-} from "./chunks/chunk.P2GSSESB.js";
+} from "./chunks/chunk.WEUFN5UU.js";
 import {
   SdTag
-} from "./chunks/chunk.OT7LAUQS.js";
+} from "./chunks/chunk.7ZISZOWN.js";
 import {
   SdPopup
-} from "./chunks/chunk.N3IMBUNL.js";
+} from "./chunks/chunk.UAADOLK5.js";
 import "./chunks/chunk.GI7VDIWX.js";
 import "./chunks/chunk.WBJBQ4QI.js";
 import "./chunks/chunk.UIQBHPD3.js";
 import {
   SdBadge
-} from "./chunks/chunk.O73ZT3UW.js";
+} from "./chunks/chunk.6SZYSES2.js";
 import {
   SdBrandshape
-} from "./chunks/chunk.DHRBNSPZ.js";
+} from "./chunks/chunk.JUUDZ47Q.js";
 import {
   SdBreadcrumb
-} from "./chunks/chunk.TLWBSIPQ.js";
+} from "./chunks/chunk.QS7N47CI.js";
 import {
   SdBreadcrumbItem
-} from "./chunks/chunk.UVVLW7XN.js";
-import "./chunks/chunk.WHHDXLGX.js";
+} from "./chunks/chunk.P4UKJXBL.js";
+import "./chunks/chunk.TX6S5UVP.js";
 import {
   SdCarousel
-} from "./chunks/chunk.A53JZAAA.js";
+} from "./chunks/chunk.FUGGYSQF.js";
 import "./chunks/chunk.W2YDXTG5.js";
 import "./chunks/chunk.FNYEXUNK.js";
 import "./chunks/chunk.NOWCQZBS.js";
 import {
   SdCarouselItem
-} from "./chunks/chunk.XEXGLMT2.js";
+} from "./chunks/chunk.TWDHTS5K.js";
 import "./chunks/chunk.F4VGSDIW.js";
 import {
   SdAccordionGroup
-} from "./chunks/chunk.2S3WUQ6C.js";
+} from "./chunks/chunk.FFAUGMVF.js";
 import {
   SdAccordion
-} from "./chunks/chunk.LH3FOXUD.js";
+} from "./chunks/chunk.WL7EGHGP.js";
 import {
   SdAnimation
-} from "./chunks/chunk.LMZP2HEH.js";
+} from "./chunks/chunk.TQMYNSM4.js";
 import "./chunks/chunk.TJOP7HQP.js";
 import {
   SdAudio
-} from "./chunks/chunk.SS3CZ5NU.js";
+} from "./chunks/chunk.FDUVN4I6.js";
 import {
   SdDrawer
-} from "./chunks/chunk.PQDBG4AZ.js";
+} from "./chunks/chunk.ZVLZ6XOK.js";
 import "./chunks/chunk.SF6AUNJF.js";
 import "./chunks/chunk.EDMG7C5H.js";
 import "./chunks/chunk.UMIKFOMI.js";
 import "./chunks/chunk.WDWV53JP.js";
 import {
   SdButton
-} from "./chunks/chunk.FKBZQOFQ.js";
+} from "./chunks/chunk.MEDUZPGV.js";
 import {
   SdSpinner
-} from "./chunks/chunk.5UKTWIKN.js";
+} from "./chunks/chunk.ZCI47J45.js";
 import "./chunks/chunk.KVKRZJS7.js";
-import "./chunks/chunk.YEZS5ZR2.js";
+import "./chunks/chunk.IVMQWO2L.js";
 import "./chunks/chunk.N4LHE3QK.js";
 import "./chunks/chunk.B4BZKR24.js";
 import {
   SdIcon
-} from "./chunks/chunk.2PJVN4WQ.js";
+} from "./chunks/chunk.YRFRBXRK.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "./chunks/chunk.7TFT5VTM.js";
+} from "./chunks/chunk.IIYSG3NP.js";
 import "./chunks/chunk.7VPFFNHR.js";
-import "./chunks/chunk.Z4FH3THI.js";
+import "./chunks/chunk.ZYF25H5G.js";
 import "./chunks/chunk.4TPOL3LB.js";
 import "./chunks/chunk.P52GZVKG.js";
 import "./chunks/chunk.RPB53XXV.js";
@@ -184,7 +191,7 @@ import {
 import "./chunks/chunk.2G46ORZ2.js";
 import "./chunks/chunk.ZC7XGWJ6.js";
 import "./chunks/chunk.X2OQMWGY.js";
-import "./chunks/chunk.HY3LORT5.js";
+import "./chunks/chunk.PP5IDYES.js";
 import "./chunks/chunk.HQWAKJBV.js";
 import "./chunks/chunk.POFWU6ZT.js";
 import "./chunks/chunk.S3NI7NKU.js";
@@ -216,6 +223,8 @@ export {
   SdInput,
   SdLink,
   SdMapMarker,
+  SdMenu,
+  SdMenuItem,
   SdNavigationItem,
   SdNotification,
   SdOptgroup,

package/dist/utilities/autocomplete-config.js

@@ -1,8 +1,8 @@
 import {
   setupAutocomplete
 } from "../chunks/chunk.6DKXZWRN.js";
-import "../chunks/chunk.N3IMBUNL.js";
-import "../chunks/chunk.HY3LORT5.js";
+import "../chunks/chunk.UAADOLK5.js";
+import "../chunks/chunk.PP5IDYES.js";
 import "../chunks/chunk.HQWAKJBV.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/utilities/icon-library.js

@@ -2,9 +2,9 @@ import "../chunks/chunk.HAL7R4WT.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "../chunks/chunk.7TFT5VTM.js";
+} from "../chunks/chunk.IIYSG3NP.js";
 import "../chunks/chunk.7VPFFNHR.js";
-import "../chunks/chunk.Z4FH3THI.js";
+import "../chunks/chunk.ZYF25H5G.js";
 import "../chunks/chunk.4TPOL3LB.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/vscode.html-custom-data.json

@@ -1588,6 +1588,71 @@
         }
       ]
     },
+    {
+      "name": "sd-menu",
+      "description": "Used as a list of choices to the user, such as a set of actions or functions.\n---\n\n\n### **Events:**\n - **sd-select** - Emitted when a menu item is selected.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The menu's content.",
+      "attributes": [
+        {
+          "name": "dir",
+          "description": "The element's directionality.",
+          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
+        },
+        {
+          "name": "lang",
+          "description": "The element's language.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-menu--docs"
+        }
+      ]
+    },
+    {
+      "name": "sd-menu-item",
+      "description": "Menu items provide options for the user to pick from in a menu.\n---\n\n\n### **Methods:**\n - **getTextLabel(): _string_** - Returns a text label based on the contents of the menu item's default slot.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The menu item's label.\n- **icon-indent** - Used to prepend an icon or similar element to the menu item.\n- **submenu** - Used to denote a nested menu.\n\n### **CSS Properties:**\n - **--submenu-offset** - The offset of the submenu from the parent menu item. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **checked-icon** - The icon shown when the menu item is checked.\n- **icon-indent** - The icon shown when the menu item has an indent.\n- **label** - The menu item's label.\n- **submenu-icon** - The icon shown when the menu item has a submenu.",
+      "attributes": [
+        {
+          "name": "type",
+          "description": "The type of menu item to render. To use `checked`, this value must be set to `checkbox`.",
+          "values": [{ "name": "normal" }, { "name": "checkbox" }]
+        },
+        {
+          "name": "checked",
+          "description": "Draws the item in a checked state.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Draws the menu item in a disabled state, preventing selection.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "A unique value to store in the menu item. This can be used as a way to identify menu items when selected.",
+          "values": []
+        },
+        { "name": "chevron", "values": [] },
+        {
+          "name": "dir",
+          "description": "The element's directionality.",
+          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
+        },
+        {
+          "name": "lang",
+          "description": "The element's language.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-menu-item--docs"
+        }
+      ]
+    },
     {
       "name": "sd-navigation-item",
       "description": "Flexible button / link component that can be used to quickly build navigations. Takes one of 3 forms: link (overrides all other if 'href' is provided), button (default), or accordion (if 'children' slot defined).\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the navigation item has has children, no href, and is clicked while HTML details are hidden.\n- **sd-hide** - Emitted when the navigation item has has children, no href, and is clicked while HTML details are shown.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The navigation item's label.\n- **description** - *Vertical only: Slot used to provide a description for the navigation item.\n- **children** - Slot used to provide nested child navigation elements. If provided, details and summary elements will be used. A chevron will be shown on the right side regardless of the chevron property.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper including children.\n- **content-wrapper** - The component's content wrapper.\n- **content** - The component's content excluding children.\n- **chevron** - The container that wraps the chevron.\n- **description** - The component's description area below its main content.\n- **divider** - The component's optional top divider.",
@@ -2484,7 +2549,7 @@
     },
     {
       "name": "sd-switch",
-      "description": "Switches allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the switch loses focus.\n- **sd-change** - Emitted when the checked state changes.\n- **sd-focus** - Emitted when the switch gains focus.\n- **sd-input** - Emitted when the switch receives input.\n\n### **Methods:**\n - **click()** - Simulates a click on the switch.\n- **focus(options: _FocusOptions_)** - Sets focus on the switch.\n- **blur()** - Removes focus from the switch.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns true when valid and false when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows a validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The switch's label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the switch's state.\n- **control--checked** - Matches the control part when the switch is on.\n- **control--unchecked** - Matches the control part when the switch is off.\n- **thumb** - The circle that marks the switch's state.\n- **label** - The container that wraps the switch's label.",
+      "description": "Switches allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the switch loses focus.\n- **sd-change** - Emitted when the checked state changes.\n- **sd-focus** - Emitted when the switch gains focus.\n- **sd-input** - Emitted when the switch receives input.\n\n### **Methods:**\n - **click()** - Simulates a click on the switch.\n- **focus(options: _FocusOptions_)** - Sets focus on the switch.\n- **blur()** - Removes focus from the switch.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns true when valid and false when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows a validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The switch's label.\n- **tooltip** - An optional tooltip that helps describe the switch. Use this slot with the `sd-tooltip` component.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the switch's state.\n- **control--checked** - Matches the control part when the switch is on.\n- **control--unchecked** - Matches the control part when the switch is off.\n- **thumb** - The circle that marks the switch's state.\n- **label** - The container that wraps the switch's label.",
       "attributes": [
         {
           "name": "title",

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": "5.8.4",
+  "version": "5.10.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -3610,6 +3610,143 @@
             ]
           }
         },
+        {
+          "name": "sd-menu",
+          "description": "Used as a list of choices to the user, such as a set of actions or functions.\n---\n\n\n### **Events:**\n - **sd-select** - Emitted when a menu item is selected.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The menu's content.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "dir",
+              "description": "The element's directionality.",
+              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
+            },
+            {
+              "name": "lang",
+              "description": "The element's language.",
+              "value": { "type": "string" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The menu's content." }],
+          "events": [
+            {
+              "name": "sd-select",
+              "description": "Emitted when a menu item is selected."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "localize" },
+              {
+                "name": "dir",
+                "description": "The element's directionality.",
+                "type": "'ltr' | 'rtl' | 'auto'"
+              },
+              {
+                "name": "lang",
+                "description": "The element's language.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "sd-select",
+                "description": "Emitted when a menu item is selected."
+              }
+            ]
+          }
+        },
+        {
+          "name": "sd-menu-item",
+          "description": "Menu items provide options for the user to pick from in a menu.\n---\n\n\n### **Methods:**\n - **getTextLabel(): _string_** - Returns a text label based on the contents of the menu item's default slot.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The menu item's label.\n- **icon-indent** - Used to prepend an icon or similar element to the menu item.\n- **submenu** - Used to denote a nested menu.\n\n### **CSS Properties:**\n - **--submenu-offset** - The offset of the submenu from the parent menu item. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **checked-icon** - The icon shown when the menu item is checked.\n- **icon-indent** - The icon shown when the menu item has an indent.\n- **label** - The menu item's label.\n- **submenu-icon** - The icon shown when the menu item has a submenu.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "type",
+              "description": "The type of menu item to render. To use `checked`, this value must be set to `checkbox`.",
+              "value": {
+                "type": "'normal' | 'checkbox'",
+                "default": "'normal'"
+              }
+            },
+            {
+              "name": "checked",
+              "description": "Draws the item in a checked state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disabled",
+              "description": "Draws the menu item in a disabled state, preventing selection.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "value",
+              "description": "A unique value to store in the menu item. This can be used as a way to identify menu items when selected.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "chevron",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "dir",
+              "description": "The element's directionality.",
+              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
+            },
+            {
+              "name": "lang",
+              "description": "The element's language.",
+              "value": { "type": "string" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The menu item's label." },
+            {
+              "name": "icon-indent",
+              "description": "Used to prepend an icon or similar element to the menu item."
+            },
+            {
+              "name": "submenu",
+              "description": "Used to denote a nested menu."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "type",
+                "description": "The type of menu item to render. To use `checked`, this value must be set to `checkbox`.",
+                "type": "'normal' | 'checkbox'"
+              },
+              {
+                "name": "checked",
+                "description": "Draws the item in a checked state.",
+                "type": "boolean"
+              },
+              {
+                "name": "disabled",
+                "description": "Draws the menu item in a disabled state, preventing selection.",
+                "type": "boolean"
+              },
+              {
+                "name": "value",
+                "description": "A unique value to store in the menu item. This can be used as a way to identify menu items when selected.",
+                "type": "string"
+              },
+              { "name": "chevron", "type": "boolean" },
+              {
+                "name": "dir",
+                "description": "The element's directionality.",
+                "type": "'ltr' | 'rtl' | 'auto'"
+              },
+              {
+                "name": "lang",
+                "description": "The element's language.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "sd-navigation-item",
           "description": "Flexible button / link component that can be used to quickly build navigations. Takes one of 3 forms: link (overrides all other if 'href' is provided), button (default), or accordion (if 'children' slot defined).\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the navigation item has has children, no href, and is clicked while HTML details are hidden.\n- **sd-hide** - Emitted when the navigation item has has children, no href, and is clicked while HTML details are shown.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The navigation item's label.\n- **description** - *Vertical only: Slot used to provide a description for the navigation item.\n- **children** - Slot used to provide nested child navigation elements. If provided, details and summary elements will be used. A chevron will be shown on the right side regardless of the chevron property.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper including children.\n- **content-wrapper** - The component's content wrapper.\n- **content** - The component's content excluding children.\n- **chevron** - The container that wraps the chevron.\n- **description** - The component's description area below its main content.\n- **divider** - The component's optional top divider.",
@@ -5676,7 +5813,7 @@
         },
         {
           "name": "sd-switch",
-          "description": "Switches allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the switch loses focus.\n- **sd-change** - Emitted when the checked state changes.\n- **sd-focus** - Emitted when the switch gains focus.\n- **sd-input** - Emitted when the switch receives input.\n\n### **Methods:**\n - **click()** - Simulates a click on the switch.\n- **focus(options: _FocusOptions_)** - Sets focus on the switch.\n- **blur()** - Removes focus from the switch.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns true when valid and false when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows a validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The switch's label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the switch's state.\n- **control--checked** - Matches the control part when the switch is on.\n- **control--unchecked** - Matches the control part when the switch is off.\n- **thumb** - The circle that marks the switch's state.\n- **label** - The container that wraps the switch's label.",
+          "description": "Switches allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the switch loses focus.\n- **sd-change** - Emitted when the checked state changes.\n- **sd-focus** - Emitted when the switch gains focus.\n- **sd-input** - Emitted when the switch receives input.\n\n### **Methods:**\n - **click()** - Simulates a click on the switch.\n- **focus(options: _FocusOptions_)** - Sets focus on the switch.\n- **blur()** - Removes focus from the switch.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns true when valid and false when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows a validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The switch's label.\n- **tooltip** - An optional tooltip that helps describe the switch. Use this slot with the `sd-tooltip` component.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the switch's state.\n- **control--checked** - Matches the control part when the switch is on.\n- **control--unchecked** - Matches the control part when the switch is off.\n- **thumb** - The circle that marks the switch's state.\n- **label** - The container that wraps the switch's label.",
           "doc-url": "",
           "attributes": [
             {
@@ -5725,7 +5862,13 @@
               "value": { "type": "string" }
             }
           ],
-          "slots": [{ "name": "", "description": "The switch's label." }],
+          "slots": [
+            { "name": "", "description": "The switch's label." },
+            {
+              "name": "tooltip",
+              "description": "An optional tooltip that helps describe the switch. Use this slot with the `sd-tooltip` component."
+            }
+          ],
           "events": [
             {
               "name": "sd-blur",

package/dist-versioned/chunks/{chunk.HM3LCNHO.js → chunk.2VDSJ75Q.js}

@@ -1,13 +1,13 @@
 import {
   HasSlotController
-} from "./chunk.YEZS5ZR2.js";
+} from "./chunk.IVMQWO2L.js";
 import {
   watch
 } from "./chunk.X2OQMWGY.js";
 import {
   SolidElement,
   customElement
-} from "./chunk.HY3LORT5.js";
+} from "./chunk.PP5IDYES.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -84,7 +84,7 @@ var SdRadioButton = class extends SolidElement {
 };
 SdRadioButton.styles = [
   ...SolidElement.styles,
-  css`:host{display:block;width:-moz-min-content;width:min-content}.hidden-input{all:unset;inset:var(--sd-spacing-0,0);opacity:var(--sd-opacity-0,0);outline-color:rgb(var(--sd-color-error,204 25 55)/1);outline-style:dotted;outline-width:1px;position:absolute;z-index:-10}.lg-label,.lg-no-label{height:var(--sd-spacing-12,3rem)}.lg-no-label{width:var(--sd-spacing-12,3rem)}.md-label,.md-no-label{height:var(--sd-spacing-10,2.5rem)}.md-no-label{width:var(--sd-spacing-10,2.5rem)}.sm-label,.sm-no-label{height:var(--sd-spacing-8,2rem)}.sm-no-label{width:var(--sd-spacing-8,2rem)}:host(.sd-5-8-4-button-group__button--first:not(.sd-5-8-4-button-group__button--last)) button{border-bottom-right-radius:var(--sd-border-radius-none,0);border-top-right-radius:var(--sd-border-radius-none,0)}:host(.sd-5-8-4-button-group__button--inner) button{border-radius:var(--sd-border-radius-none,0)}:host(.sd-5-8-4-button-group__button--last:not(.sd-5-8-4-button-group__button--first)) button{border-bottom-left-radius:var(--sd-border-radius-none,0);border-top-left-radius:var(--sd-border-radius-none,0)}:host(.sd-5-8-4-button-group__button:not(.sd-5-8-4-button-group__button--first)){margin-inline-start:-1px}:host(.sd-5-8-4-button-group__button--hover){z-index:10}:host(.sd-5-8-4-button-group__button--focus),:host(.sd-5-8-4-button-group__button[checked]){z-index:20}`
+  css`:host{display:block;width:-moz-min-content;width:min-content}.hidden-input{all:unset;inset:var(--sd-spacing-0,0);opacity:var(--sd-opacity-0,0);outline-color:rgb(var(--sd-color-error,204 25 55)/1);outline-style:dotted;outline-width:1px;position:absolute;z-index:-10}.lg-label,.lg-no-label{height:var(--sd-spacing-12,3rem)}.lg-no-label{width:var(--sd-spacing-12,3rem)}.md-label,.md-no-label{height:var(--sd-spacing-10,2.5rem)}.md-no-label{width:var(--sd-spacing-10,2.5rem)}.sm-label,.sm-no-label{height:var(--sd-spacing-8,2rem)}.sm-no-label{width:var(--sd-spacing-8,2rem)}:host(.sd-5-10-0-button-group__button--first:not(.sd-5-10-0-button-group__button--last)) button{border-bottom-right-radius:var(--sd-border-radius-none,0);border-top-right-radius:var(--sd-border-radius-none,0)}:host(.sd-5-10-0-button-group__button--inner) button{border-radius:var(--sd-border-radius-none,0)}:host(.sd-5-10-0-button-group__button--last:not(.sd-5-10-0-button-group__button--first)) button{border-bottom-left-radius:var(--sd-border-radius-none,0);border-top-left-radius:var(--sd-border-radius-none,0)}:host(.sd-5-10-0-button-group__button:not(.sd-5-10-0-button-group__button--first)){margin-inline-start:-1px}:host(.sd-5-10-0-button-group__button--hover){z-index:10}:host(.sd-5-10-0-button-group__button--focus),:host(.sd-5-10-0-button-group__button[checked]){z-index:20}`
 ];
 __decorateClass([
   query(".button")
@@ -114,7 +114,7 @@ __decorateClass([
   watch(["disabled", "visually-disabled"], { waitUntilFirstUpdate: true })
 ], SdRadioButton.prototype, "handleDisabledChange", 1);
 SdRadioButton = __decorateClass([
-  customElement("sd-5-8-4-radio-button")
+  customElement("sd-5-10-0-radio-button")
 ], SdRadioButton);
 
 export {

package/dist-versioned/chunks/{chunk.S6JOYZFA.js → chunk.3JIBD4DC.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.HY3LORT5.js";
+} from "./chunk.PP5IDYES.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -25,11 +25,11 @@ var SdOptgroup = class extends SolidElement {
     this.label = "";
   }
   /**
-   * Syncs the disabled prop for all slotted sd-5-8-4-options when it is triggered
+   * Syncs the disabled prop for all slotted sd-5-10-0-options when it is triggered
    */
   handleDisableOptions() {
     const { disabled } = this;
-    this.defaultSlot.assignedElements().filter((opt) => opt.tagName.toLowerCase() === "sd-5-8-4-option").forEach((opt) => {
+    this.defaultSlot.assignedElements().filter((opt) => opt.tagName.toLowerCase() === "sd-5-10-0-option").forEach((opt) => {
       opt.disabled = disabled;
     });
   }
@@ -38,7 +38,7 @@ var SdOptgroup = class extends SolidElement {
   }
   render() {
     const { disabled } = this;
-    return html`<div role="${disabled ? "presentation" : "group"}" class="${cx(this.disabled ? "text-neutral-500" : "")}" part="base" aria-labelledby="group-label"><sd-5-8-4-divider id="divider" class="pt-2 pb-4" part="divider"></sd-5-8-4-divider><div part="label-container" class="${cx(this.disabled ? "text-neutral-500" : "text-black")} px-4 font-bold text-left" role="presentation" id="group-label"><slot name="label"><span>${this.label}</span></slot></div><div role="listbox" part="options" aria-label="${this.localize.term("optionGroup")}"><slot @slotchange="${this.handleDisableOptions}"></slot></div></div>`;
+    return html`<div role="${disabled ? "presentation" : "group"}" class="${cx(this.disabled ? "text-neutral-500" : "")}" part="base" aria-labelledby="group-label"><sd-5-10-0-divider id="divider" class="pt-2 pb-4" part="divider"></sd-5-10-0-divider><div part="label-container" class="${cx(this.disabled ? "text-neutral-500" : "text-black")} px-4 font-bold text-left" role="presentation" id="group-label"><slot name="label"><span>${this.label}</span></slot></div><div role="listbox" part="options" aria-label="${this.localize.term("optionGroup")}"><slot @slotchange="${this.handleDisableOptions}"></slot></div></div>`;
   }
 };
 SdOptgroup.styles = [
@@ -58,7 +58,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdOptgroup.prototype, "handleDisabledChange", 1);
 SdOptgroup = __decorateClass([
-  customElement("sd-5-8-4-optgroup")
+  customElement("sd-5-10-0-optgroup")
 ], SdOptgroup);
 
 export {