@solid-design-system/components 6.21.2 → 6.22.1

package/dist/solid-components.js

@@ -2,200 +2,201 @@ import {
   setupAutocomplete
 } from "./chunks/chunk.EAJ3CM6N.js";
 import "./chunks/chunk.HAL7R4WT.js";
+import {
+  SdTeaserMedia
+} from "./chunks/chunk.G5R47M2B.js";
 import {
   SdTextarea
-} from "./chunks/chunk.OVAIRJ6A.js";
+} from "./chunks/chunk.X3SWQRRP.js";
 import {
   SdThemeListener
-} from "./chunks/chunk.234WMPXN.js";
+} from "./chunks/chunk.3MUWC7ZQ.js";
 import {
   SdVideo
-} from "./chunks/chunk.B747IT2V.js";
+} from "./chunks/chunk.FRLOS6P7.js";
+import {
+  SdStep
+} from "./chunks/chunk.3P3ZLPSI.js";
 import {
   SdStepGroup
-} from "./chunks/chunk.P7QIYXBM.js";
+} from "./chunks/chunk.J3RX4Y6S.js";
 import {
   SdSwitch
-} from "./chunks/chunk.6CXQO2LR.js";
+} from "./chunks/chunk.YT23TSJR.js";
 import {
   SdTab
-} from "./chunks/chunk.TLR7Y6RR.js";
+} from "./chunks/chunk.MLDYTATL.js";
 import {
   SdTabGroup
-} from "./chunks/chunk.LXWI4JHE.js";
+} from "./chunks/chunk.TE6LK5OI.js";
 import {
   SdTabPanel
-} from "./chunks/chunk.7QVXY24T.js";
+} from "./chunks/chunk.TQGIML36.js";
 import {
   SdTeaser
-} from "./chunks/chunk.SZUS5ZW6.js";
+} from "./chunks/chunk.RMSZCVAI.js";
 import {
-  SdTeaserMedia
-} from "./chunks/chunk.LS547AKE.js";
+  SdRadioGroup
+} from "./chunks/chunk.W6PBLDS5.js";
 import {
   SdRange
-} from "./chunks/chunk.X3SO46EU.js";
+} from "./chunks/chunk.3NFW33UT.js";
 import {
   SdTooltip
-} from "./chunks/chunk.KIMASFRG.js";
+} from "./chunks/chunk.RU5GF26P.js";
 import "./chunks/chunk.D3YSIVTB.js";
 import {
   SdRangeTick
-} from "./chunks/chunk.LXEDTKMG.js";
+} from "./chunks/chunk.DYG4FWRG.js";
 import {
   SdScrollable
-} from "./chunks/chunk.ZOE6NEFW.js";
+} from "./chunks/chunk.GFHNKXRG.js";
 import {
   SdSelect
-} from "./chunks/chunk.3JPUXY3E.js";
+} from "./chunks/chunk.EDHEUF6G.js";
 import {
   SdSkeleton
-} from "./chunks/chunk.YCUAZMU4.js";
+} from "./chunks/chunk.SLUGXG7E.js";
 import {
   SdSpinner
-} from "./chunks/chunk.S4HQL24U.js";
+} from "./chunks/chunk.AQ5RLVDO.js";
 import {
-  SdStep
-} from "./chunks/chunk.XJDIF3TO.js";
+  SdNavigationItem
+} from "./chunks/chunk.7BSLFKU5.js";
 import {
   SdNotification
-} from "./chunks/chunk.L6FBD5Q3.js";
+} from "./chunks/chunk.UF4HXV3V.js";
 import {
   SdOptgroup
-} from "./chunks/chunk.EYY4XXUV.js";
+} from "./chunks/chunk.I4T5RT5D.js";
 import {
   SdOption
-} from "./chunks/chunk.PCXIG7RW.js";
+} from "./chunks/chunk.H3SVUQP3.js";
 import {
   SdQuickfact
-} from "./chunks/chunk.3XB3MDZA.js";
-import {
-  SdRadioButton
-} from "./chunks/chunk.QSAWUC7Z.js";
-import {
-  SdRadioGroup
-} from "./chunks/chunk.TJOWX2RZ.js";
+} from "./chunks/chunk.7AGLFNJK.js";
 import {
   SdRadio
-} from "./chunks/chunk.BDRCNAP2.js";
+} from "./chunks/chunk.BR5PPGBX.js";
+import {
+  SdRadioButton
+} from "./chunks/chunk.NWI2U6GV.js";
 import {
   SdInput
-} from "./chunks/chunk.GH6RJCYI.js";
+} from "./chunks/chunk.B4TM2WST.js";
 import {
   SdMapMarker
-} from "./chunks/chunk.PZTZ7EDY.js";
+} from "./chunks/chunk.HDGNHXRQ.js";
 import {
   SdMenu
-} from "./chunks/chunk.OKLMUSN5.js";
+} from "./chunks/chunk.ZXAAMEZI.js";
 import {
   SdMenuItem
-} from "./chunks/chunk.YKO32EDY.js";
+} from "./chunks/chunk.WXXHOSE3.js";
 import "./chunks/chunk.KEJFWGZI.js";
 import {
-  SdNavigationItem
-} from "./chunks/chunk.AQVFMVTN.js";
+  SdHeader
+} from "./chunks/chunk.UWOJEWNV.js";
 import {
   SdInclude
-} from "./chunks/chunk.D2M6PTUJ.js";
+} from "./chunks/chunk.EXZ6VFXN.js";
 import {
   SdDatepicker
-} from "./chunks/chunk.5BYGGDHP.js";
+} from "./chunks/chunk.LQBN4KWJ.js";
 import "./chunks/chunk.A4LR62QO.js";
+import "./chunks/chunk.TJ2FFWLY.js";
 import {
   SdDialog
-} from "./chunks/chunk.WUVJOWM6.js";
+} from "./chunks/chunk.EEEIIJMB.js";
 import {
   SdDivider
-} from "./chunks/chunk.7IOIWJCC.js";
+} from "./chunks/chunk.ZOLOAEEA.js";
 import {
   SdExpandable
-} from "./chunks/chunk.KDPPIV2Q.js";
+} from "./chunks/chunk.POKSS32D.js";
 import {
   SdFlipcard
-} from "./chunks/chunk.BOLOX4WN.js";
-import {
-  SdHeader
-} from "./chunks/chunk.7S66HTS5.js";
+} from "./chunks/chunk.AJ6IUEXD.js";
 import {
   SdCheckbox
-} from "./chunks/chunk.HMJLHL4X.js";
+} from "./chunks/chunk.RS7M5R4R.js";
 import {
   SdCheckboxGroup
-} from "./chunks/chunk.5IEWEZ32.js";
+} from "./chunks/chunk.TJI3UYUJ.js";
 import {
   SdCombobox
-} from "./chunks/chunk.2IGM5O3Z.js";
+} from "./chunks/chunk.CMHJNHR6.js";
 import {
   SdTag
-} from "./chunks/chunk.CGWCE53G.js";
+} from "./chunks/chunk.DG6HQUYC.js";
 import "./chunks/chunk.GI7VDIWX.js";
 import "./chunks/chunk.WBJBQ4QI.js";
 import "./chunks/chunk.UIQBHPD3.js";
 import {
   SdBadge
-} from "./chunks/chunk.W7MVICGC.js";
+} from "./chunks/chunk.J5A33XU2.js";
 import {
   SdBrandshape
-} from "./chunks/chunk.PBIXMTMH.js";
+} from "./chunks/chunk.6XTGETVW.js";
 import {
   SdBreadcrumb
-} from "./chunks/chunk.XLMNB54R.js";
+} from "./chunks/chunk.D2XKPNOP.js";
 import {
   SdDropdown
-} from "./chunks/chunk.WTPLBXHZ.js";
+} from "./chunks/chunk.M4O3MDU3.js";
 import {
   SdPopup
-} from "./chunks/chunk.IENX2KRD.js";
+} from "./chunks/chunk.VTBH4LAP.js";
 import {
   SdBreadcrumbItem
-} from "./chunks/chunk.PVMZQVCM.js";
+} from "./chunks/chunk.7BT4WAQS.js";
 import {
   SdLink
-} from "./chunks/chunk.DYR6RQ4I.js";
-import "./chunks/chunk.4GT63TFU.js";
+} from "./chunks/chunk.2XO44VKK.js";
+import "./chunks/chunk.BS2ZPKOG.js";
 import {
   SdCarousel
-} from "./chunks/chunk.3SHMQDU5.js";
+} from "./chunks/chunk.KVKO4ZLN.js";
 import "./chunks/chunk.W2YDXTG5.js";
 import "./chunks/chunk.6RE6UZ72.js";
 import "./chunks/chunk.UVI5HHLF.js";
 import {
   SdCarouselItem
-} from "./chunks/chunk.VNBBYBKG.js";
+} from "./chunks/chunk.5NTF57TJ.js";
 import "./chunks/chunk.F4VGSDIW.js";
 import {
   SdAccordionGroup
-} from "./chunks/chunk.LN3YKBFO.js";
+} from "./chunks/chunk.JQBYEVD6.js";
 import {
   SdAccordion
-} from "./chunks/chunk.JTLSKGYA.js";
+} from "./chunks/chunk.UI7JLJDL.js";
 import {
   SdAnimation
-} from "./chunks/chunk.YTJ47KE6.js";
+} from "./chunks/chunk.SB4P52KM.js";
 import "./chunks/chunk.TJOP7HQP.js";
 import {
   SdAudio
-} from "./chunks/chunk.VXB2N5RN.js";
+} from "./chunks/chunk.KWD3E7PP.js";
 import {
   SdDrawer
-} from "./chunks/chunk.UCHOLQ5K.js";
+} from "./chunks/chunk.4CYDINDB.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.ZOJIEPWP.js";
+} from "./chunks/chunk.2PFOTMKD.js";
 import {
   SdLoader
-} from "./chunks/chunk.B5ABJMXQ.js";
+} from "./chunks/chunk.YSZ5CL7K.js";
 import "./chunks/chunk.C3WIBDGG.js";
 import "./chunks/chunk.IVMQWO2L.js";
 import "./chunks/chunk.N4LHE3QK.js";
 import "./chunks/chunk.B4BZKR24.js";
 import {
   SdIcon
-} from "./chunks/chunk.LQ73NDCS.js";
+} from "./chunks/chunk.AGSJ3MWY.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
@@ -211,7 +212,7 @@ import {
 import "./chunks/chunk.X4IYFUX6.js";
 import "./chunks/chunk.BT6SAX2H.js";
 import "./chunks/chunk.X2OQMWGY.js";
-import "./chunks/chunk.C5M5Z6EY.js";
+import "./chunks/chunk.H53WQBDK.js";
 import "./chunks/chunk.HQWAKJBV.js";
 import "./chunks/chunk.POFWU6ZT.js";
 import "./chunks/chunk.S3NI7NKU.js";

package/dist/utilities/autocomplete-config.js

@@ -1,8 +1,8 @@
 import {
   setupAutocomplete
 } from "../chunks/chunk.EAJ3CM6N.js";
-import "../chunks/chunk.IENX2KRD.js";
-import "../chunks/chunk.C5M5Z6EY.js";
+import "../chunks/chunk.VTBH4LAP.js";
+import "../chunks/chunk.H53WQBDK.js";
 import "../chunks/chunk.HQWAKJBV.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {

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

@@ -854,7 +854,7 @@
     },
     {
       "name": "sd-datepicker",
-      "description": "\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.",
+      "description": "Used to enter or select a date or a range of dates using a calendar view.\n---\n\n\n### **Events:**\n - **sd-change** - Emitted when the date selection changes.\n- **sd-range-select** - Emitted when the date range selection changes.\n- **sd-select** - Emitted when the date selection changes.\n- **sd-datepicker-close** - Emitted when the datepicker is closed.\n- **sd-focus** - Emitted when the datepicker is focused.\n- **sd-blur** - Emitted when the datepicker is blurred.\n- **sd-month-change** - Emitted when the month is changed.\n- **sd-month-year** - Emitted when the year is changed.\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 default slot.\n- **label** - The label for the date input.\n- **help-text** - The help text, displayed below the input.\n- **tooltip** - The tooltip icon and content.\n\n### **CSS Properties:**\n - **--sd-form-control-color-text** - The text color for the datepicker. _(default: undefined)_\n- **--sd-form-control-border-radius** - The border radius for the datepicker. _(default: undefined)_\n- **--sd-form-control-color-border** - The default border color for the datepicker. _(default: undefined)_\n- **--sd-form-control--filled__floating-label-color-text** - The text color for the floating label when the input is filled. _(default: undefined)_\n- **--sd-form-control--invalid-color-background** - The background color for the input when it is invalid. _(default: undefined)_\n- **--sd-form-control__listbox-border-bottom-left-radius** - The border radius for the bottom left corner of the datepicker. _(default: undefined)_\n- **--sd-form-control__listbox-border-bottom-right-radius** - The border radius for the bottom right corner of the datepicker. _(default: undefined)_\n- **--sd-form-control__listbox-border-top-left-radius** - The border radius for the top left corner of the datepicker. _(default: undefined)_\n- **--sd-form-control__listbox-border-top-right-radius** - The border radius for the top right corner of the datepicker. _(default: undefined)_\n- **--sd-form-control--hover-color-background** - The background color for form controls on hover. _(default: undefined)_\n- **--sd-form-control--read-only-color-background** - The background color for read-only form controls. _(default: undefined)_\n- **--sd-datepicker__date-item--default-color-text** - The default text color for date items. _(default: undefined)_\n- **--sd-datepicker__date-item--hover--default-color-background** - The background color for date items in hover state. _(default: undefined)_\n- **--sd-datepicker__date-item--hover--default-color-text** - The text color for date items in hover state. _(default: undefined)_\n- **--sd-datepicker__date-item--default-color-border** - The default border color for date items. _(default: undefined)_\n- **--sd-datepicker__date-item--selected-color-text** - The text color for selected date items. _(default: undefined)_\n- **--sd-datepicker__date-item--hover--prev-next-color-background** - The background color for date items in hover state when they are previous/next month days. _(default: undefined)_\n- **--sd-datepicker__date-item--hover--prev-next-color-text** - The text color for date items in hover state when they are previous/next month days. _(default: undefined)_\n- **--sd-datepicker__date-item--current-font-weight** - The font weight for the current date item. _(default: undefined)_\n- **--sd-datepicker__date-item--selected-color-background** - The background color for selected date items. _(default: undefined)_\n- **--sd-datepicker__date-item--selected--hover-color-background** - The background color for selected date items in hover state. _(default: undefined)_\n- **--sd-datepicker__date-item--range-color-background** - The background color for date items that are within the selected range. _(default: undefined)_\n- **--sd-datepicker__date-item--current-color-text** - The text color for the current date item. _(default: undefined)_\n- **--sd-datepicker__date-item--selected--hover-color-text** - The text color for selected date items in hover state. _(default: undefined)_\n\n### **CSS Parts:**\n - **datepicker** - The component's base wrapper.\n- **header** - The header containing the month/year and navigation buttons.\n- **prev-year-button** - The button to go to the previous year.\n- **prev-month-button** - The button to go to the previous month.\n- **month-label** - The month and year label.\n- **next-month-button** - The button to go to the next month.\n- **next-year-button** - The button to go to the next year.\n- **grid** - The calendar grid container.\n- **weekday** - Each weekday label in the calendar header.\n- **day** - Each day button in the calendar grid.\n- **form-control** - The form control wrapper around the input.\n- **form-control-label** - The label for the input.\n- **form-control-input** - The input element.\n- **border** - The border around the input.\n- **invalid-icon** - The icon shown when the input is invalid.\n- **valid-icon** - The icon shown when the input is valid.\n- **form-control-help-text** - The help text, displayed below the input.",
       "attributes": [
         {
           "name": "locale",
@@ -1906,6 +1906,11 @@
           "description": "Disables the navigation item.",
           "values": []
         },
+        {
+          "name": "stacked",
+          "description": "Stacks the navigation-item in a vertical layout. Only used if `vertical` is false.",
+          "values": []
+        },
         {
           "name": "chevron",
           "description": "Appends a chevron to the right side of a navigation item. Only used if `vertical` is true.",

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": "6.21.2",
+  "version": "6.22.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1963,7 +1963,7 @@
         },
         {
           "name": "sd-datepicker",
-          "description": "\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.",
+          "description": "Used to enter or select a date or a range of dates using a calendar view.\n---\n\n\n### **Events:**\n - **sd-change** - Emitted when the date selection changes.\n- **sd-range-select** - Emitted when the date range selection changes.\n- **sd-select** - Emitted when the date selection changes.\n- **sd-datepicker-close** - Emitted when the datepicker is closed.\n- **sd-focus** - Emitted when the datepicker is focused.\n- **sd-blur** - Emitted when the datepicker is blurred.\n- **sd-month-change** - Emitted when the month is changed.\n- **sd-month-year** - Emitted when the year is changed.\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 default slot.\n- **label** - The label for the date input.\n- **help-text** - The help text, displayed below the input.\n- **tooltip** - The tooltip icon and content.\n\n### **CSS Properties:**\n - **--sd-form-control-color-text** - The text color for the datepicker. _(default: undefined)_\n- **--sd-form-control-border-radius** - The border radius for the datepicker. _(default: undefined)_\n- **--sd-form-control-color-border** - The default border color for the datepicker. _(default: undefined)_\n- **--sd-form-control--filled__floating-label-color-text** - The text color for the floating label when the input is filled. _(default: undefined)_\n- **--sd-form-control--invalid-color-background** - The background color for the input when it is invalid. _(default: undefined)_\n- **--sd-form-control__listbox-border-bottom-left-radius** - The border radius for the bottom left corner of the datepicker. _(default: undefined)_\n- **--sd-form-control__listbox-border-bottom-right-radius** - The border radius for the bottom right corner of the datepicker. _(default: undefined)_\n- **--sd-form-control__listbox-border-top-left-radius** - The border radius for the top left corner of the datepicker. _(default: undefined)_\n- **--sd-form-control__listbox-border-top-right-radius** - The border radius for the top right corner of the datepicker. _(default: undefined)_\n- **--sd-form-control--hover-color-background** - The background color for form controls on hover. _(default: undefined)_\n- **--sd-form-control--read-only-color-background** - The background color for read-only form controls. _(default: undefined)_\n- **--sd-datepicker__date-item--default-color-text** - The default text color for date items. _(default: undefined)_\n- **--sd-datepicker__date-item--hover--default-color-background** - The background color for date items in hover state. _(default: undefined)_\n- **--sd-datepicker__date-item--hover--default-color-text** - The text color for date items in hover state. _(default: undefined)_\n- **--sd-datepicker__date-item--default-color-border** - The default border color for date items. _(default: undefined)_\n- **--sd-datepicker__date-item--selected-color-text** - The text color for selected date items. _(default: undefined)_\n- **--sd-datepicker__date-item--hover--prev-next-color-background** - The background color for date items in hover state when they are previous/next month days. _(default: undefined)_\n- **--sd-datepicker__date-item--hover--prev-next-color-text** - The text color for date items in hover state when they are previous/next month days. _(default: undefined)_\n- **--sd-datepicker__date-item--current-font-weight** - The font weight for the current date item. _(default: undefined)_\n- **--sd-datepicker__date-item--selected-color-background** - The background color for selected date items. _(default: undefined)_\n- **--sd-datepicker__date-item--selected--hover-color-background** - The background color for selected date items in hover state. _(default: undefined)_\n- **--sd-datepicker__date-item--range-color-background** - The background color for date items that are within the selected range. _(default: undefined)_\n- **--sd-datepicker__date-item--current-color-text** - The text color for the current date item. _(default: undefined)_\n- **--sd-datepicker__date-item--selected--hover-color-text** - The text color for selected date items in hover state. _(default: undefined)_\n\n### **CSS Parts:**\n - **datepicker** - The component's base wrapper.\n- **header** - The header containing the month/year and navigation buttons.\n- **prev-year-button** - The button to go to the previous year.\n- **prev-month-button** - The button to go to the previous month.\n- **month-label** - The month and year label.\n- **next-month-button** - The button to go to the next month.\n- **next-year-button** - The button to go to the next year.\n- **grid** - The calendar grid container.\n- **weekday** - Each weekday label in the calendar header.\n- **day** - Each day button in the calendar grid.\n- **form-control** - The form control wrapper around the input.\n- **form-control-label** - The label for the input.\n- **form-control-input** - The input element.\n- **border** - The border around the input.\n- **invalid-icon** - The icon shown when the input is invalid.\n- **valid-icon** - The icon shown when the input is valid.\n- **form-control-help-text** - The help text, displayed below the input.",
           "doc-url": "",
           "attributes": [
             {
@@ -2113,7 +2113,52 @@
               "value": { "type": "string" }
             }
           ],
-          "events": [],
+          "slots": [
+            { "name": "", "description": "The default slot." },
+            { "name": "label", "description": "The label for the date input." },
+            {
+              "name": "help-text",
+              "description": "The help text, displayed below the input."
+            },
+            {
+              "name": "tooltip",
+              "description": "The tooltip icon and content."
+            }
+          ],
+          "events": [
+            {
+              "name": "sd-change",
+              "description": "Emitted when the date selection changes."
+            },
+            {
+              "name": "sd-range-select",
+              "description": "Emitted when the date range selection changes."
+            },
+            {
+              "name": "sd-select",
+              "description": "Emitted when the date selection changes."
+            },
+            {
+              "name": "sd-datepicker-close",
+              "description": "Emitted when the datepicker is closed."
+            },
+            {
+              "name": "sd-focus",
+              "description": "Emitted when the datepicker is focused."
+            },
+            {
+              "name": "sd-blur",
+              "description": "Emitted when the datepicker is blurred."
+            },
+            {
+              "name": "sd-month-change",
+              "description": "Emitted when the month is changed."
+            },
+            {
+              "name": "sd-month-year",
+              "description": "Emitted when the year is changed."
+            }
+          ],
           "js": {
             "properties": [
               {
@@ -2288,7 +2333,40 @@
                 "type": "string"
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "sd-change",
+                "description": "Emitted when the date selection changes."
+              },
+              {
+                "name": "sd-range-select",
+                "description": "Emitted when the date range selection changes."
+              },
+              {
+                "name": "sd-select",
+                "description": "Emitted when the date selection changes."
+              },
+              {
+                "name": "sd-datepicker-close",
+                "description": "Emitted when the datepicker is closed."
+              },
+              {
+                "name": "sd-focus",
+                "description": "Emitted when the datepicker is focused."
+              },
+              {
+                "name": "sd-blur",
+                "description": "Emitted when the datepicker is blurred."
+              },
+              {
+                "name": "sd-month-change",
+                "description": "Emitted when the month is changed."
+              },
+              {
+                "name": "sd-month-year",
+                "description": "Emitted when the year is changed."
+              }
+            ]
           }
         },
         {
@@ -4211,6 +4289,11 @@
               "description": "Disables the navigation item.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "stacked",
+              "description": "Stacks the navigation-item in a vertical layout. Only used if `vertical` is false.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "chevron",
               "description": "Appends a chevron to the right side of a navigation item. Only used if `vertical` is true.",
@@ -4309,6 +4392,11 @@
                 "description": "Disables the navigation item.",
                 "type": "boolean"
               },
+              {
+                "name": "stacked",
+                "description": "Stacks the navigation-item in a vertical layout. Only used if `vertical` is false.",
+                "type": "boolean"
+              },
               {
                 "name": "chevron",
                 "description": "Appends a chevron to the right side of a navigation item. Only used if `vertical` is true.",

package/dist-versioned/chunks/{chunk.ZOJIEPWP.js → chunk.2PFOTMKD.js}

@@ -11,7 +11,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.C5M5Z6EY.js";
+} from "./chunk.H53WQBDK.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -159,62 +159,62 @@ var SdButton = class extends SolidElement {
       (this.disabled || this.visuallyDisabled) && "cursor-not-allowed",
       {
         /* sizes, fonts */
-        sm: `varspacing-8 min-h-8 sd-6-21-2-button--size-sm-font-size sd-6-21-2-button-font-weight sd-6-21-2-button--secondary--size-sm-padding-block sd-6-21-2-button--size-sm-border-radius`,
-        md: `varspacing-10 sd-6-21-2-button--size-md-height sd-6-21-2-button--size-md-font-size sd-6-21-2-button--secondary--size-md-padding-block sd-6-21-2-button-font-weight sd-6-21-2-button--size-md-border-radius`,
-        lg: `varspacing-12 sd-6-21-2-button--size-lg-height sd-6-21-2-button--size-lg-font-size sd-6-21-2-button--secondary--size-lg-padding-block sd-6-21-2-button-font-weight sd-6-21-2-button--size-lg-border-radius`
+        sm: `varspacing-8 min-h-8 sd-6-22-1-button--size-sm-font-size sd-6-22-1-button-font-weight sd-6-22-1-button--secondary--size-sm-padding-block sd-6-22-1-button--size-sm-border-radius`,
+        md: `varspacing-10 sd-6-22-1-button--size-md-height sd-6-22-1-button--size-md-font-size sd-6-22-1-button--secondary--size-md-padding-block sd-6-22-1-button-font-weight sd-6-22-1-button--size-md-border-radius`,
+        lg: `varspacing-12 sd-6-22-1-button--size-lg-height sd-6-22-1-button--size-lg-font-size sd-6-22-1-button--secondary--size-lg-padding-block sd-6-22-1-button-font-weight sd-6-22-1-button--size-lg-border-radius`
       }[this.size],
       !slots["icon-only"] && {
         /* sizes, fonts */
-        sm: `${hasBorder ? "sd-6-21-2-button--secondary-padding-inline" : "sd-6-21-2-button--size-sm-padding-block sd-6-21-2-button-padding-inline"}`,
-        md: `${hasBorder ? "sd-6-21-2-button--secondary-padding-inline" : "sd-6-21-2-button--size-md-padding-block sd-6-21-2-button-padding-inline"}`,
-        lg: `${hasBorder ? "sd-6-21-2-button--secondary-padding-inline" : "sd-6-21-2-button--size-lg-padding-block sd-6-21-2-button-padding-inline"}`
+        sm: `${hasBorder ? "sd-6-22-1-button--secondary-padding-inline" : "sd-6-22-1-button--size-sm-padding-block sd-6-22-1-button-padding-inline"}`,
+        md: `${hasBorder ? "sd-6-22-1-button--secondary-padding-inline" : "sd-6-22-1-button--size-md-padding-block sd-6-22-1-button-padding-inline"}`,
+        lg: `${hasBorder ? "sd-6-22-1-button--secondary-padding-inline" : "sd-6-22-1-button--size-lg-padding-block sd-6-22-1-button-padding-inline"}`
       }[this.size],
       /**
        * Anatomy
        * */
       slots["icon-only"] && {
         sm: "px-1 aspect-square",
-        md: "sd-6-21-2-button--size-md--icon-only-padding-inline aspect-square",
+        md: "sd-6-22-1-button--size-md--icon-only-padding-inline aspect-square",
         lg: "px-[12px] aspect-square"
       }[this.size],
       {
         /* variants */
-        primary: !this.inverted ? `${this.visuallyDisabled ? "sd-6-21-2-button--primary--disabled-color-background border-neutral-500 text-white" : "sd-6-21-2-button--primary--default-color-background border-transparent sd-6-21-2-button--primary--default-color-text hover:sd-6-21-2-button--primary--hover-color-text active:sd-6-21-2-button--primary--active-color-text active:sd-6-21-2-button--primary--active-color-background"}
-          disabled:sd-6-21-2-button--primary--disabled-color-background disabled:text-white` : `${this.visuallyDisabled ? "sd-6-21-2-button--inverted--disabled-color-background text-white border-neutral-500" : "sd-6-21-2-button--primary--inverted--default-color-text sd-6-21-2-button--primary--inverted--default-color-background border-white hover:sd-6-21-2-button--primary--inverted--hover-color-text active:sd-6-21-2-button--primary--inverted--active-color-text active:sd-6-21-2-button--primary--inverted--active-color-background"}
-          disabled:sd-6-21-2-button--inverted--disabled-color-background disabled:text-white`,
-        secondary: !this.inverted ? `border sd-6-21-2-button-border-width ${this.visuallyDisabled ? "sd-6-21-2-button--secondary--disabled-color-text sd-6-21-2-button--secondary--disabled-color-border" : "sd-6-21-2-button--secondary--default-color-text sd-6-21-2-button--secondary--default-color-border hover:sd-6-21-2-button--secondary--hover-color-text hover:sd-6-21-2-button--secondary--hover-color-border active:sd-6-21-2-button--secondary--active-color-text active:sd-6-21-2-button--secondary--active-color-border"}
-          disabled:sd-6-21-2-button--secondary--disabled-color-text disabled:sd-6-21-2-button--secondary--disabled-color-border` : `border sd-6-21-2-button-border-width ${this.visuallyDisabled ? "text-neutral-600 border-neutral-600" : "sd-6-21-2-button--secondary--inverted-color-text sd-6-21-2-button--secondary--inverted-color-border hover:sd-6-21-2-button--secondary--inverted-color-border hover:sd-6-21-2-button--secondary--inverted--hover-color-text hover:sd-6-21-2-button--secondary--inverted--hover-color-background active:sd-6-21-2-button--secondary--inverted--active-color-text active:border-primary-200 active:sd-6-21-2-button--secondary--inverted--active-color-background"}
-          disabled:sd-6-21-2-button--inverted--disabled-color-border disabled:sd-6-21-2-button--inverted--disabled-color-text`,
-        tertiary: !this.inverted ? `border-transparent ${this.visuallyDisabled ? "sd-6-21-2-button--tertiary--disabled-color-text" : "sd-6-21-2-button--tertiary--default-color-text hover:sd-6-21-2-button--tertiary--hover-color-text active:sd-6-21-2-button--tertiary--active-color-text"}
-          disabled:sd-6-21-2-button--tertiary--disabled-color-text` : `border-transparent  ${this.visuallyDisabled ? "text-neutral-600" : "sd-6-21-2-button--tertiary--inverted-color-text hover:sd-6-21-2-button--tertiary--inverted--hover-color-text hover:sd-6-21-2-button--tertiary--inverted--hover-color-background active:sd-6-21-2-button--tertiary--inverted--active-color-background active:sd-6-21-2-button--tertiary--inverted--active-color-text"}
-          disabled:sd-6-21-2-button--inverted--disabled-color-text`,
-        cta: `${this.visuallyDisabled ? "sd-6-21-2-button--primary--disabled-color-background border-neutral-500" : "bg-accent border-transparent hover:bg-accent-500"}
-          ${!this.inverted ? "text-white bg-accent disabled:sd-6-21-2-button--primary--disabled-color-background hover:bg-accent-500 disabled:border-neutral-500 disabled:text-white" : "sd-6-21-2-button--cta--inverted--default-color-background sd-6-21-2-button--cta--inverted--default-color-text hover:sd-6-21-2-button--cta--inverted--hover-color-text active:sd-6-21-2-button--cta--inverted--active-color-text disabled:sd-6-21-2-button--inverted--disabled-color-background disabled:text-white"}`
+        primary: !this.inverted ? `${this.visuallyDisabled ? "sd-6-22-1-button--primary--disabled-color-background border-neutral-500 text-white" : "sd-6-22-1-button--primary--default-color-background border-transparent sd-6-22-1-button--primary--default-color-text hover:sd-6-22-1-button--primary--hover-color-text active:sd-6-22-1-button--primary--active-color-text active:sd-6-22-1-button--primary--active-color-background"}
+          disabled:sd-6-22-1-button--primary--disabled-color-background disabled:text-white` : `${this.visuallyDisabled ? "sd-6-22-1-button--inverted--disabled-color-background text-white border-neutral-500" : "sd-6-22-1-button--primary--inverted--default-color-text sd-6-22-1-button--primary--inverted--default-color-background border-white hover:sd-6-22-1-button--primary--inverted--hover-color-text active:sd-6-22-1-button--primary--inverted--active-color-text active:sd-6-22-1-button--primary--inverted--active-color-background"}
+          disabled:sd-6-22-1-button--inverted--disabled-color-background disabled:text-white`,
+        secondary: !this.inverted ? `border sd-6-22-1-button-border-width ${this.visuallyDisabled ? "sd-6-22-1-button--secondary--disabled-color-text sd-6-22-1-button--secondary--disabled-color-border" : "sd-6-22-1-button--secondary--default-color-text sd-6-22-1-button--secondary--default-color-border hover:sd-6-22-1-button--secondary--hover-color-text hover:sd-6-22-1-button--secondary--hover-color-border active:sd-6-22-1-button--secondary--active-color-text active:sd-6-22-1-button--secondary--active-color-border"}
+          disabled:sd-6-22-1-button--secondary--disabled-color-text disabled:sd-6-22-1-button--secondary--disabled-color-border` : `border sd-6-22-1-button-border-width ${this.visuallyDisabled ? "text-neutral-600 border-neutral-600" : "sd-6-22-1-button--secondary--inverted-color-text sd-6-22-1-button--secondary--inverted-color-border hover:sd-6-22-1-button--secondary--inverted-color-border hover:sd-6-22-1-button--secondary--inverted--hover-color-text hover:sd-6-22-1-button--secondary--inverted--hover-color-background active:sd-6-22-1-button--secondary--inverted--active-color-text active:border-primary-200 active:sd-6-22-1-button--secondary--inverted--active-color-background"}
+          disabled:sd-6-22-1-button--inverted--disabled-color-border disabled:sd-6-22-1-button--inverted--disabled-color-text`,
+        tertiary: !this.inverted ? `border-transparent ${this.visuallyDisabled ? "sd-6-22-1-button--tertiary--disabled-color-text" : "sd-6-22-1-button--tertiary--default-color-text hover:sd-6-22-1-button--tertiary--hover-color-text active:sd-6-22-1-button--tertiary--active-color-text"}
+          disabled:sd-6-22-1-button--tertiary--disabled-color-text` : `border-transparent  ${this.visuallyDisabled ? "text-neutral-600" : "sd-6-22-1-button--tertiary--inverted-color-text hover:sd-6-22-1-button--tertiary--inverted--hover-color-text hover:sd-6-22-1-button--tertiary--inverted--hover-color-background active:sd-6-22-1-button--tertiary--inverted--active-color-background active:sd-6-22-1-button--tertiary--inverted--active-color-text"}
+          disabled:sd-6-22-1-button--inverted--disabled-color-text`,
+        cta: `${this.visuallyDisabled ? "sd-6-22-1-button--primary--disabled-color-background border-neutral-500" : "bg-accent border-transparent hover:bg-accent-500"}
+          ${!this.inverted ? "text-white bg-accent disabled:sd-6-22-1-button--primary--disabled-color-background hover:bg-accent-500 disabled:border-neutral-500 disabled:text-white" : "sd-6-22-1-button--cta--inverted--default-color-background sd-6-22-1-button--cta--inverted--default-color-text hover:sd-6-22-1-button--cta--inverted--hover-color-text active:sd-6-22-1-button--cta--inverted--active-color-text disabled:sd-6-22-1-button--inverted--disabled-color-background disabled:text-white"}`
       }[this.variant]
     )}" ?disabled="${ifDefined(isLink ? void 0 : this.disabled)}" type="${ifDefined(isLink ? void 0 : this.type)}" title="${this.title}" name="${ifDefined(isLink ? void 0 : this.name)}" value="${ifDefined(isLink ? void 0 : this.value)}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}" rel="${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}" role="${ifDefined(isLink ? void 0 : "button")}" aria-disabled="${this.disabled || this.visuallyDisabled ? "true" : "false"}" aria-labelledby="content" tabindex="${this.disabled ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @invalid="${this.isButton() ? this.handleInvalid : null}" @click="${this.handleClick}"><div part="motion-wrapper" class="${cx(
       "absolute inset-0 -z-10 overflow-hidden pointer-events-none ",
       (this.disabled || this.visuallyDisabled) && "hidden",
       {
         /* sizes, fonts */
-        sm: `sd-6-21-2-button-border-radius`,
-        md: `sd-6-21-2-button-border-radius`,
-        lg: `sd-6-21-2-button-border-radius`
+        sm: `sd-6-22-1-button-border-radius`,
+        md: `sd-6-22-1-button-border-radius`,
+        lg: `sd-6-22-1-button-border-radius`
       }[this.size]
     )}"><div class="absolute inset-0 w-full h-full transition-all duration-fast translate-y-full group-hover:translate-y-0 group-hover:mt-[-22%] mt-[11%]"><div class="${cx(
       "absolute right-0 min-w-full min-h-full aspect-square skew-y-[-11deg] mt-[11%]",
       {
-        primary: !this.inverted ? "sd-6-21-2-button--primary--hover-color-background group-active:sd-6-21-2-button--primary--active-color-background" : "sd-6-21-2-button--primary--inverted--hover-color-background group-active:sd-6-21-2-button--primary--inverted--active-color-background",
-        secondary: !this.inverted ? "sd-6-21-2-button--secondary--hover-color-background group-active:sd-6-21-2-button--secondary--active-color-background" : "sd-6-21-2-button--secondary--inverted--hover-color-background group-active:sd-6-21-2-button--secondary--inverted--active-color-background group-active:sd-6-21-2-button--secondary--inverted--active-color-text",
-        tertiary: !this.inverted ? "sd-6-21-2-button--tertiary--hover-color-background group-active:sd-6-21-2-button--tertiary--active-color-background" : "sd-6-21-2-button--tertiary--inverted--hover-color-background group-active:sd-6-21-2-button--tertiary--inverted--active-color-background group-active:sd-6-21-2-button--tertiary--inverted--active-color-text",
-        cta: !this.inverted ? "bg-accent-500 group-active:bg-accent-700" : "sd-6-21-2-button--cta--inverted--hover-color-background group-active:sd-6-21-2-button--cta--inverted--active-color-background"
+        primary: !this.inverted ? "sd-6-22-1-button--primary--hover-color-background group-active:sd-6-22-1-button--primary--active-color-background" : "sd-6-22-1-button--primary--inverted--hover-color-background group-active:sd-6-22-1-button--primary--inverted--active-color-background",
+        secondary: !this.inverted ? "sd-6-22-1-button--secondary--hover-color-background group-active:sd-6-22-1-button--secondary--active-color-background" : "sd-6-22-1-button--secondary--inverted--hover-color-background group-active:sd-6-22-1-button--secondary--inverted--active-color-background group-active:sd-6-22-1-button--secondary--inverted--active-color-text",
+        tertiary: !this.inverted ? "sd-6-22-1-button--tertiary--hover-color-background group-active:sd-6-22-1-button--tertiary--active-color-background" : "sd-6-22-1-button--tertiary--inverted--hover-color-background group-active:sd-6-22-1-button--tertiary--inverted--active-color-background group-active:sd-6-22-1-button--tertiary--inverted--active-color-text",
+        cta: !this.inverted ? "bg-accent-500 group-active:bg-accent-700" : "sd-6-22-1-button--cta--inverted--hover-color-background group-active:sd-6-22-1-button--cta--inverted--active-color-background"
       }[this.variant]
     )}"></div><div class="${cx(
       "absolute w-full h-full mt-[22%]",
       {
-        primary: !this.inverted ? "sd-6-21-2-button--primary--hover-color-background group-active:sd-6-21-2-button--primary--active-color-background" : "sd-6-21-2-button--primary--inverted--hover-color-background group-active:sd-6-21-2-button--primary--inverted--active-color-background",
-        secondary: !this.inverted ? "sd-6-21-2-button--secondary--hover-color-background group-active:sd-6-21-2-button--secondary--active-color-background" : "sd-6-21-2-button--secondary--inverted--hover-color-background group-active:sd-6-21-2-button--secondary--inverted--active-color-background group-active:sd-6-21-2-button--secondary--inverted--active-color-text group-active:sd-6-21-2-button--secondary--active-color-border",
-        tertiary: !this.inverted ? "sd-6-21-2-button--tertiary--hover-color-background group-active:sd-6-21-2-button--tertiary--active-color-background" : "sd-6-21-2-button--tertiary--inverted--hover-color-background group-active:sd-6-21-2-button--tertiary--inverted--active-color-background group-active:sd-6-21-2-button--tertiary--inverted--active-color-text",
-        cta: !this.inverted ? "bg-accent-500 group-active:bg-accent-700" : "sd-6-21-2-button--cta--inverted--hover-color-background group-active:sd-6-21-2-button--cta--inverted--active-color-background"
+        primary: !this.inverted ? "sd-6-22-1-button--primary--hover-color-background group-active:sd-6-22-1-button--primary--active-color-background" : "sd-6-22-1-button--primary--inverted--hover-color-background group-active:sd-6-22-1-button--primary--inverted--active-color-background",
+        secondary: !this.inverted ? "sd-6-22-1-button--secondary--hover-color-background group-active:sd-6-22-1-button--secondary--active-color-background" : "sd-6-22-1-button--secondary--inverted--hover-color-background group-active:sd-6-22-1-button--secondary--inverted--active-color-background group-active:sd-6-22-1-button--secondary--inverted--active-color-text group-active:sd-6-22-1-button--secondary--active-color-border",
+        tertiary: !this.inverted ? "sd-6-22-1-button--tertiary--hover-color-background group-active:sd-6-22-1-button--tertiary--active-color-background" : "sd-6-22-1-button--tertiary--inverted--hover-color-background group-active:sd-6-22-1-button--tertiary--inverted--active-color-background group-active:sd-6-22-1-button--tertiary--inverted--active-color-text",
+        cta: !this.inverted ? "bg-accent-500 group-active:bg-accent-700" : "sd-6-22-1-button--cta--inverted--hover-color-background group-active:sd-6-22-1-button--cta--inverted--active-color-background"
       }[this.variant]
     )}"></div></div></div><slot name="icon-left" part="icon-left" class="${cx(
       "flex flex-auto items-center justify-end pointer-events-none",
@@ -243,7 +243,7 @@ var SdButton = class extends SolidElement {
         md: "ml-2",
         lg: "ml-2"
       }[this.size]
-    )}"></slot>${this.loading ? html`<sd-6-21-2-loader class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-6-21-2-loader>` : ""}</${tag}>`;
+    )}"></slot>${this.loading ? html`<sd-6-22-1-loader class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-6-22-1-loader>` : ""}</${tag}>`;
   }
 };
 /**
@@ -252,13 +252,13 @@ var SdButton = class extends SolidElement {
 SdButton.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
-:host{position:relative;z-index:0;display:inline-block;width:auto;cursor:pointer}::slotted(sd-6-21-2-badge){pointer-events:none;position:absolute;top:calc(var(--sd-spacing-1) * 0);right:calc(var(--sd-spacing-1) * 0);--tw-translate-x:calc(1 / 2 * 100%)!important;--tw-translate-y:calc(calc(1 / 2 * 100%) * -1)!important;translate:var(--tw-translate-x) var(--tw-translate-y)!important}::slotted(sd-6-21-2-icon),sd-6-21-2-loader{font-size:calc(var(--tw-varspacing)/ 2)}:host([size=lg]) ::slotted(sd-6-21-2-icon){font-size:var(--sd-button--size-lg-icon-height,var(--sd-spacing-6))}:host([size=sm]) .sd-6-21-2-button--size-sm-border-radius{border-radius:var(--sd-button--size-sm-border-radius,var(--sd-button-border-radius))}:host([size=md]) .sd-6-21-2-button--size-md-border-radius{border-radius:var(--sd-button--size-md-border-radius,var(--sd-button-border-radius))}:host([size=lg]) .sd-6-21-2-button--size-lg-border-radius{border-radius:var(--sd-button--size-lg-border-radius,var(--sd-button-border-radius))}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}`
+:host{position:relative;z-index:0;display:inline-block;width:auto;cursor:pointer}::slotted(sd-6-22-1-badge){pointer-events:none;position:absolute;top:calc(var(--sd-spacing-1) * 0);right:calc(var(--sd-spacing-1) * 0);--tw-translate-x:calc(1 / 2 * 100%)!important;--tw-translate-y:calc(calc(1 / 2 * 100%) * -1)!important;translate:var(--tw-translate-x) var(--tw-translate-y)!important}::slotted(sd-6-22-1-icon),sd-6-22-1-loader{font-size:calc(var(--tw-varspacing)/ 2)}:host([size=lg]) ::slotted(sd-6-22-1-icon){font-size:var(--sd-button--size-lg-icon-height,var(--sd-spacing-6))}:host([size=sm]) .sd-6-22-1-button--size-sm-border-radius{border-radius:var(--sd-button--size-sm-border-radius,var(--sd-button-border-radius))}:host([size=md]) .sd-6-22-1-button--size-md-border-radius{border-radius:var(--sd-button--size-md-border-radius,var(--sd-button-border-radius))}:host([size=lg]) .sd-6-22-1-button--size-lg-border-radius{border-radius:var(--sd-button--size-lg-border-radius,var(--sd-button-border-radius))}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}`
 ];
 __decorateClass([
   query("a, button")
 ], SdButton.prototype, "button", 2);
 __decorateClass([
-  queryAssignedElements({ selector: "sd-6-21-2-icon" })
+  queryAssignedElements({ selector: "sd-6-22-1-icon" })
 ], SdButton.prototype, "_iconsInDefaultSlot", 2);
 __decorateClass([
   state()
@@ -324,7 +324,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdButton.prototype, "handleDisabledChange", 1);
 SdButton = __decorateClass([
-  customElement("sd-6-21-2-button")
+  customElement("sd-6-22-1-button")
 ], SdButton);
 
 export {