@solid-design-system/components 5.6.0 → 5.8.0

package/dist/solid-components.js

@@ -1,184 +1,190 @@
+import "./chunks/chunk.HAL7R4WT.js";
+import {
+  SdTooltip
+} from "./chunks/chunk.2BDWN26F.js";
+import {
+  SdVideo
+} from "./chunks/chunk.PK4OGH3M.js";
 import {
   setupAutocomplete
 } from "./chunks/chunk.6DKXZWRN.js";
-import "./chunks/chunk.HAL7R4WT.js";
+import {
+  SdSwitch
+} from "./chunks/chunk.7MAASMDW.js";
+import {
+  SdTab
+} from "./chunks/chunk.J2R4HF6O.js";
 import {
   SdTabGroup
-} from "./chunks/chunk.PB4C4QSB.js";
+} from "./chunks/chunk.L7XW5PYI.js";
 import {
   SdTabPanel
-} from "./chunks/chunk.CM5UUKM4.js";
+} from "./chunks/chunk.IUAN7YQ4.js";
 import {
   SdTeaser
-} from "./chunks/chunk.YUXACDFP.js";
+} from "./chunks/chunk.PYH33SDH.js";
 import {
   SdTeaserMedia
-} from "./chunks/chunk.ISKBRYU2.js";
+} from "./chunks/chunk.U62FIAJ5.js";
 import {
   SdTextarea
-} from "./chunks/chunk.4BSIESXO.js";
-import {
-  SdTooltip
-} from "./chunks/chunk.FIHROP3X.js";
+} from "./chunks/chunk.ZC5TZTGP.js";
 import {
-  SdVideo
-} from "./chunks/chunk.OUXBV3ZI.js";
+  SdRadioButton
+} from "./chunks/chunk.U7SCAMCN.js";
 import {
   SdRadioGroup
-} from "./chunks/chunk.QTRNM73B.js";
+} from "./chunks/chunk.GRJDOPAS.js";
+import {
+  SdRadio
+} from "./chunks/chunk.VTMF55NN.js";
 import {
   SdScrollable
-} from "./chunks/chunk.HJN7RI3V.js";
+} from "./chunks/chunk.BGJVVJYW.js";
 import {
   SdSelect
-} from "./chunks/chunk.NQLGMP2D.js";
+} from "./chunks/chunk.2W7NHUH7.js";
 import {
   SdStep
-} from "./chunks/chunk.TSGNJ5GP.js";
+} from "./chunks/chunk.UTHJPWMF.js";
 import {
   SdStepGroup
-} from "./chunks/chunk.FSL676RI.js";
+} from "./chunks/chunk.G7LKDW7D.js";
 import {
-  SdSwitch
-} from "./chunks/chunk.KTWITSMU.js";
+  SdLink
+} from "./chunks/chunk.BFV6FVEH.js";
 import {
-  SdTab
-} from "./chunks/chunk.2Z3PTZDF.js";
+  SdMapMarker
+} from "./chunks/chunk.56KFGJVD.js";
 import {
   SdNavigationItem
-} from "./chunks/chunk.QGQB5JS7.js";
+} from "./chunks/chunk.FAY52O5K.js";
 import {
   SdNotification
-} from "./chunks/chunk.IF3LSW7O.js";
+} from "./chunks/chunk.NC2M2T2Q.js";
 import {
   SdOptgroup
-} from "./chunks/chunk.SOHUYJIV.js";
+} from "./chunks/chunk.ZTR5JB55.js";
 import {
   SdOption
-} from "./chunks/chunk.HIAESSS3.js";
+} from "./chunks/chunk.ZD3I7DCU.js";
 import {
   SdQuickfact
-} from "./chunks/chunk.KUULYGHN.js";
-import {
-  SdRadio
-} from "./chunks/chunk.SHLIEXLI.js";
-import {
-  SdRadioButton
-} from "./chunks/chunk.W4IVOSZQ.js";
+} from "./chunks/chunk.2CQI5LE4.js";
 import {
   SdInclude
-} from "./chunks/chunk.UH3CRACY.js";
+} from "./chunks/chunk.BHEBFVOB.js";
 import {
   SdInput
-} from "./chunks/chunk.ATBHSXHW.js";
+} from "./chunks/chunk.5KVES6PS.js";
 import {
-  SdLink
-} from "./chunks/chunk.GABDY4S6.js";
+  SdDialog
+} from "./chunks/chunk.TQRMINMT.js";
 import {
-  SdMapMarker
-} from "./chunks/chunk.MUUF45Z6.js";
+  SdDivider
+} from "./chunks/chunk.CRGWQRUO.js";
 import {
   SdDropdown
-} from "./chunks/chunk.WYCBGTC3.js";
+} from "./chunks/chunk.AGJBHOHC.js";
 import {
   SdExpandable
-} from "./chunks/chunk.UWXGXWKM.js";
+} from "./chunks/chunk.H7FP247H.js";
 import {
   SdFlipcard
-} from "./chunks/chunk.H3K5PQJU.js";
+} from "./chunks/chunk.SO2HIZUP.js";
 import {
   SdHeader
-} from "./chunks/chunk.H3OKMVXK.js";
+} from "./chunks/chunk.7UEOJL4C.js";
 import {
   SdCheckbox
-} from "./chunks/chunk.7ASLASKF.js";
+} from "./chunks/chunk.CU3SNWRP.js";
 import {
   SdCheckboxGroup
-} from "./chunks/chunk.7LIXWEBN.js";
+} from "./chunks/chunk.XX3FTPX7.js";
 import {
   SdCombobox
-} from "./chunks/chunk.NE5RAPHM.js";
+} from "./chunks/chunk.5ZNZ5OFS.js";
 import {
   SdTag
-} from "./chunks/chunk.MFEHVTR6.js";
+} from "./chunks/chunk.ZZZHB23N.js";
 import {
   SdPopup
-} from "./chunks/chunk.JBZMLWDZ.js";
+} from "./chunks/chunk.FQ65C655.js";
 import "./chunks/chunk.GI7VDIWX.js";
 import "./chunks/chunk.WBJBQ4QI.js";
 import "./chunks/chunk.UIQBHPD3.js";
-import {
-  SdDialog
-} from "./chunks/chunk.WOD4JUKH.js";
-import {
-  SdDivider
-} from "./chunks/chunk.MM3ZPOVU.js";
 import {
   SdBadge
-} from "./chunks/chunk.DWOWPIFO.js";
+} from "./chunks/chunk.C3QUN3CW.js";
 import {
   SdBrandshape
-} from "./chunks/chunk.Q35RRIOR.js";
-import "./chunks/chunk.BZMDW7E4.js";
+} from "./chunks/chunk.ONBBO64D.js";
 import {
-  SdCarousel
-} from "./chunks/chunk.6A4EY2BW.js";
+  SdBreadcrumb
+} from "./chunks/chunk.PCHDKK7W.js";
 import {
-  SdCarouselItem
-} from "./chunks/chunk.BIWX4AXS.js";
-import "./chunks/chunk.F4VGSDIW.js";
+  SdBreadcrumbItem
+} from "./chunks/chunk.ECTYRNKF.js";
+import "./chunks/chunk.PBSF5V4E.js";
+import {
+  SdCarousel
+} from "./chunks/chunk.5IM5U5QH.js";
 import "./chunks/chunk.W2YDXTG5.js";
 import "./chunks/chunk.FNYEXUNK.js";
 import "./chunks/chunk.NOWCQZBS.js";
+import {
+  SdCarouselItem
+} from "./chunks/chunk.WK2T7YB4.js";
+import "./chunks/chunk.F4VGSDIW.js";
 import {
   SdAccordionGroup
-} from "./chunks/chunk.D23TODRF.js";
+} from "./chunks/chunk.GWQANU5I.js";
 import {
   SdAccordion
-} from "./chunks/chunk.ABTFDUXB.js";
+} from "./chunks/chunk.7ZNUQOKK.js";
 import {
   SdAnimation
-} from "./chunks/chunk.YCPALMH3.js";
+} from "./chunks/chunk.374V27WG.js";
 import "./chunks/chunk.TJOP7HQP.js";
 import {
   SdAudio
-} from "./chunks/chunk.SNWCQACO.js";
+} from "./chunks/chunk.VOSWJX2Z.js";
 import {
   SdDrawer
-} from "./chunks/chunk.EAFZSO6J.js";
+} from "./chunks/chunk.DHECGUIH.js";
 import "./chunks/chunk.SF6AUNJF.js";
-import "./chunks/chunk.UFBRSKVR.js";
-import "./chunks/chunk.XHCTCU2Q.js";
+import "./chunks/chunk.EDMG7C5H.js";
+import "./chunks/chunk.UMIKFOMI.js";
 import "./chunks/chunk.WDWV53JP.js";
 import {
   SdButton
-} from "./chunks/chunk.YQYNXABC.js";
+} from "./chunks/chunk.3IFUYWCQ.js";
 import {
   SdSpinner
-} from "./chunks/chunk.OOCDLYKD.js";
+} from "./chunks/chunk.XNHIGD4G.js";
 import "./chunks/chunk.KVKRZJS7.js";
 import "./chunks/chunk.YEZS5ZR2.js";
 import "./chunks/chunk.N4LHE3QK.js";
+import "./chunks/chunk.B4BZKR24.js";
 import {
   SdIcon
-} from "./chunks/chunk.6Q5PHGOX.js";
+} from "./chunks/chunk.UA3G5555.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "./chunks/chunk.KQKYMBS7.js";
+} from "./chunks/chunk.KZMSCSWH.js";
+import "./chunks/chunk.7VPFFNHR.js";
+import "./chunks/chunk.Z7IN7NPU.js";
 import "./chunks/chunk.4TPOL3LB.js";
 import "./chunks/chunk.P52GZVKG.js";
 import "./chunks/chunk.RPB53XXV.js";
-import "./chunks/chunk.7VPFFNHR.js";
-import "./chunks/chunk.YNSZZDYQ.js";
 import {
   LocalizeController
 } from "./chunks/chunk.YKM42GKF.js";
-import "./chunks/chunk.CVCJY3ME.js";
-import "./chunks/chunk.WEDOS4Q6.js";
-import "./chunks/chunk.B4BZKR24.js";
+import "./chunks/chunk.2G46ORZ2.js";
+import "./chunks/chunk.ZC7XGWJ6.js";
 import "./chunks/chunk.X2OQMWGY.js";
-import "./chunks/chunk.NM4SNSEF.js";
+import "./chunks/chunk.X6WRFCHO.js";
 import "./chunks/chunk.HQWAKJBV.js";
 import "./chunks/chunk.POFWU6ZT.js";
 import "./chunks/chunk.S3NI7NKU.js";
@@ -190,6 +196,8 @@ export {
   SdAudio,
   SdBadge,
   SdBrandshape,
+  SdBreadcrumb,
+  SdBreadcrumbItem,
   SdButton,
   SdCarousel,
   SdCarouselItem,

package/dist/translations/de.js

@@ -1,6 +1,6 @@
 import {
   de_default
-} from "../chunks/chunk.CVCJY3ME.js";
+} from "../chunks/chunk.2G46ORZ2.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {
   de_default as default

package/dist/translations/en.js

@@ -1,6 +1,6 @@
 import {
   en_default
-} from "../chunks/chunk.WEDOS4Q6.js";
+} from "../chunks/chunk.ZC7XGWJ6.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {
   en_default as default

package/dist/utilities/autocomplete-config.js

@@ -1,8 +1,8 @@
 import {
   setupAutocomplete
 } from "../chunks/chunk.6DKXZWRN.js";
-import "../chunks/chunk.JBZMLWDZ.js";
-import "../chunks/chunk.NM4SNSEF.js";
+import "../chunks/chunk.FQ65C655.js";
+import "../chunks/chunk.X6WRFCHO.js";
 import "../chunks/chunk.HQWAKJBV.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/utilities/icon-library.js

@@ -2,10 +2,10 @@ import "../chunks/chunk.HAL7R4WT.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "../chunks/chunk.KQKYMBS7.js";
-import "../chunks/chunk.4TPOL3LB.js";
+} from "../chunks/chunk.KZMSCSWH.js";
 import "../chunks/chunk.7VPFFNHR.js";
-import "../chunks/chunk.YNSZZDYQ.js";
+import "../chunks/chunk.Z7IN7NPU.js";
+import "../chunks/chunk.4TPOL3LB.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {
   registerIconLibrary,

package/dist/utilities/localize.d.ts

@@ -63,5 +63,6 @@ export interface Translation extends DefaultTranslation {
     tagsSelected: string;
     toggleColorFormat: string;
     transcriptIsOpen: string;
+    truncatedBreadcrumbs: string;
     unmute: string;
 }

package/dist/utilities/localize.js

@@ -1,8 +1,8 @@
 import {
   LocalizeController
 } from "../chunks/chunk.YKM42GKF.js";
-import "../chunks/chunk.CVCJY3ME.js";
-import "../chunks/chunk.WEDOS4Q6.js";
+import "../chunks/chunk.2G46ORZ2.js";
+import "../chunks/chunk.ZC7XGWJ6.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {
   LocalizeController

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

@@ -266,6 +266,75 @@
         }
       ]
     },
+    {
+      "name": "sd-breadcrumb",
+      "description": "A responsive breadcrumb navigation component used to visualize a page's location\nwithin the site's hierarchy and provide easy navigation to previous sections.\n---\n\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_ - `sd-breadcrumb-item` elements to display in the breadcrumb.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **list** - The list containing the slotted elements.\n- **truncated** - The truncated wrapper.\n- **truncated-dropdown** - The truncated dropdown containing the truncated breadcrumbs.",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "The breadcrumbs' label. Required for proper accessibility.",
+          "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-breadcrumb--docs"
+        }
+      ]
+    },
+    {
+      "name": "sd-breadcrumb-item",
+      "description": "An individual breadcrumb item for use exclusively within the `sd-breadcrumb`.\n---\n\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 breadcrumb label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "name": "href",
+          "description": "When not set, the breadcrumb will render as disabled.",
+          "values": []
+        },
+        {
+          "name": "target",
+          "description": "Tells the browser where to open the link. Only used when `href` is present.",
+          "values": [
+            { "name": "_blank" },
+            { "name": "_parent" },
+            { "name": "_self" },
+            { "name": "_top" }
+          ]
+        },
+        {
+          "name": "current",
+          "description": "When set, the attribute `aria-current=\"page\"` will be applied",
+          "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-breadcrumb-item--docs"
+        }
+      ]
+    },
     {
       "name": "sd-button",
       "description": "Buttons represent actions that are available to the user.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-focus** - Emitted when the button gains focus.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\n- **checkValidity()** - Checks for validity but does not show the browser's 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 the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\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 button's label.\n- **icon-left** - A prefix icon or similar element.\n- **icon-right** - A suffix icon or similar element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon-left** - The container that wraps the left icon area.\n- **label** - The button's label.\n- **icon-right** - The container that wraps the right icon area.\n- **motion-wrapper** - The container that wraps the motion animation.",
@@ -2669,6 +2738,11 @@
           "description": "The teaser's inner padding. This is always set in `white border-neutral-400`.",
           "values": []
         },
+        {
+          "name": "reversed-layout",
+          "description": "Reverses the layout in horizontal variant",
+          "values": []
+        },
         {
           "name": "dir",
           "description": "The element's directionality.",

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.6.0",
+  "version": "5.8.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -633,6 +633,123 @@
             "events": []
           }
         },
+        {
+          "name": "sd-breadcrumb",
+          "description": "A responsive breadcrumb navigation component used to visualize a page's location\nwithin the site's hierarchy and provide easy navigation to previous sections.\n---\n\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_ - `sd-breadcrumb-item` elements to display in the breadcrumb.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **list** - The list containing the slotted elements.\n- **truncated** - The truncated wrapper.\n- **truncated-dropdown** - The truncated dropdown containing the truncated breadcrumbs.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "The breadcrumbs' label. Required for proper accessibility.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "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": "`sd-breadcrumb-item` elements to display in the breadcrumb."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "localize" },
+              {
+                "name": "label",
+                "description": "The breadcrumbs' label. Required for proper accessibility.",
+                "type": "string"
+              },
+              { "name": "itemPositionsCached", "type": "boolean" },
+              { "name": "isTruncated", "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-breadcrumb-item",
+          "description": "An individual breadcrumb item for use exclusively within the `sd-breadcrumb`.\n---\n\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 breadcrumb label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "href",
+              "description": "When not set, the breadcrumb will render as disabled.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "target",
+              "description": "Tells the browser where to open the link. Only used when `href` is present.",
+              "value": { "type": "'_blank' | '_parent' | '_self' | '_top'" }
+            },
+            {
+              "name": "current",
+              "description": "When set, the attribute `aria-current=\"page\"` will be applied",
+              "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 breadcrumb label." }],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "localize" },
+              {
+                "name": "href",
+                "description": "When not set, the breadcrumb will render as disabled.",
+                "type": "string"
+              },
+              {
+                "name": "target",
+                "description": "Tells the browser where to open the link. Only used when `href` is present.",
+                "type": "'_blank' | '_parent' | '_self' | '_top'"
+              },
+              {
+                "name": "current",
+                "description": "When set, the attribute `aria-current=\"page\"` will be applied",
+                "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-button",
           "description": "Buttons represent actions that are available to the user.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-focus** - Emitted when the button gains focus.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\n- **checkValidity()** - Checks for validity but does not show the browser's 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 the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\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 button's label.\n- **icon-left** - A prefix icon or similar element.\n- **icon-right** - A suffix icon or similar element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon-left** - The container that wraps the left icon area.\n- **label** - The button's label.\n- **icon-right** - The container that wraps the right icon area.\n- **motion-wrapper** - The container that wraps the motion animation.",
@@ -6112,6 +6229,11 @@
               "description": "The teaser's inner padding. This is always set in `white border-neutral-400`.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "reversed-layout",
+              "description": "Reverses the layout in horizontal variant",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "dir",
               "description": "The element's directionality.",
@@ -6147,6 +6269,11 @@
                 "description": "The teaser's inner padding. This is always set in `white border-neutral-400`.",
                 "type": "boolean"
               },
+              {
+                "name": "reversedLayout",
+                "description": "Reverses the layout in horizontal variant",
+                "type": "boolean"
+              },
               {
                 "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-5-6-0-select', { detail: { item } });
+        this.emit('sd-5-8-0-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-5-6-0-divider) {
+  ::slotted(sd-5-8-0-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-5-6-0-icon name="check" library="_internal" aria-hidden="true"></sd-5-6-0-icon>
+          <sd-5-8-0-icon name="check" library="_internal" aria-hidden="true"></sd-5-8-0-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-5-6-0-icon name="chevron-right" library="_internal" aria-hidden="true"></sd-5-6-0-icon>
+          <sd-5-8-0-icon name="chevron-right" library="_internal" aria-hidden="true"></sd-5-8-0-icon>
         </span>
       </div>
     `;