@solid-design-system/components 5.16.2 → 5.17.0

package/dist/solid-components.js

@@ -1,195 +1,198 @@
 import "./chunks/chunk.HAL7R4WT.js";
+import {
+  SdTextarea
+} from "./chunks/chunk.5L52M55A.js";
 import {
   SdTooltip
-} from "./chunks/chunk.TWLOCD6V.js";
+} from "./chunks/chunk.KHS7FSFX.js";
 import {
   SdVideo
-} from "./chunks/chunk.YN47LYT7.js";
+} from "./chunks/chunk.KMU4KABG.js";
 import {
   setupAutocomplete
 } from "./chunks/chunk.6DKXZWRN.js";
+import {
+  SdStepGroup
+} from "./chunks/chunk.22DM7THN.js";
 import {
   SdSwitch
-} from "./chunks/chunk.7JUNYBWC.js";
+} from "./chunks/chunk.246LUIGB.js";
 import {
   SdTab
-} from "./chunks/chunk.XF7G3LFU.js";
+} from "./chunks/chunk.A5GKQZGQ.js";
 import {
   SdTabGroup
-} from "./chunks/chunk.QFW772DW.js";
+} from "./chunks/chunk.YBAAPYHP.js";
 import {
   SdTabPanel
-} from "./chunks/chunk.WV4BVBH5.js";
+} from "./chunks/chunk.WUB4VSXU.js";
 import {
   SdTeaser
-} from "./chunks/chunk.V257WRGF.js";
+} from "./chunks/chunk.JUZY76ML.js";
 import {
   SdTeaserMedia
-} from "./chunks/chunk.U3IJ4WDG.js";
+} from "./chunks/chunk.NYOWE72U.js";
 import {
-  SdTextarea
-} from "./chunks/chunk.UFU7P2YD.js";
+  SdRangeTick
+} from "./chunks/chunk.6OGLZOU3.js";
 import {
   SdRange
-} from "./chunks/chunk.CKLEIUJP.js";
+} from "./chunks/chunk.VUTMPKYK.js";
 import "./chunks/chunk.D3YSIVTB.js";
-import {
-  SdRangeTick
-} from "./chunks/chunk.7QAWQQC2.js";
 import {
   SdScrollable
-} from "./chunks/chunk.5USUIHQC.js";
+} from "./chunks/chunk.AWVURKQ3.js";
 import {
   SdSelect
-} from "./chunks/chunk.LLUTMJ6Y.js";
+} from "./chunks/chunk.HTEXYS4A.js";
+import {
+  SdSkeleton
+} from "./chunks/chunk.QP27BG3Y.js";
 import {
   SdSpinner
-} from "./chunks/chunk.EOLLVTEE.js";
+} from "./chunks/chunk.J2MPIUT5.js";
 import {
   SdStep
-} from "./chunks/chunk.BWFYNOYR.js";
-import {
-  SdStepGroup
-} from "./chunks/chunk.TED3AFLN.js";
+} from "./chunks/chunk.VDSIXERI.js";
 import {
   SdNotification
-} from "./chunks/chunk.ABLPLQOM.js";
+} from "./chunks/chunk.WRP3NGPP.js";
 import {
   SdOptgroup
-} from "./chunks/chunk.ERJOEJ54.js";
+} from "./chunks/chunk.FPIRMH7R.js";
 import {
   SdOption
-} from "./chunks/chunk.XR6GLQWM.js";
+} from "./chunks/chunk.IKDVBWFR.js";
 import {
   SdQuickfact
-} from "./chunks/chunk.ZEBYA7QQ.js";
+} from "./chunks/chunk.ZAQS4XFO.js";
 import {
   SdRadioButton
-} from "./chunks/chunk.43SFOPTI.js";
+} from "./chunks/chunk.AAK5STGD.js";
 import {
   SdRadioGroup
-} from "./chunks/chunk.JGH3YXMX.js";
+} from "./chunks/chunk.SJZCQ5SU.js";
 import {
   SdRadio
-} from "./chunks/chunk.VCV7HS44.js";
+} from "./chunks/chunk.63D5DO3S.js";
 import {
   SdInput
-} from "./chunks/chunk.O7O2LFXK.js";
+} from "./chunks/chunk.DOGMVREV.js";
 import {
   SdLink
-} from "./chunks/chunk.W5ZR6XJP.js";
+} from "./chunks/chunk.AZ5YCFXX.js";
 import {
   SdMapMarker
-} from "./chunks/chunk.2SR73L2N.js";
+} from "./chunks/chunk.ZUL25WD4.js";
 import {
   SdMenu
-} from "./chunks/chunk.7IR6CJSO.js";
+} from "./chunks/chunk.QPBHKXL6.js";
 import {
   SdMenuItem
-} from "./chunks/chunk.RCBOBERD.js";
+} from "./chunks/chunk.URTB3C7J.js";
 import "./chunks/chunk.KEJFWGZI.js";
 import {
   SdNavigationItem
-} from "./chunks/chunk.YJF7I33G.js";
+} from "./chunks/chunk.AUMWRORX.js";
 import {
   SdInclude
-} from "./chunks/chunk.BLKVBNBL.js";
+} from "./chunks/chunk.4D5SPJ27.js";
 import {
   SdDatepicker
-} from "./chunks/chunk.7FMGPUZF.js";
+} from "./chunks/chunk.3FCBHDPH.js";
 import "./chunks/chunk.CDM2I6O2.js";
 import {
   SdDialog
-} from "./chunks/chunk.RRDLKLEV.js";
+} from "./chunks/chunk.TD5EDBVC.js";
 import {
   SdDivider
-} from "./chunks/chunk.G3JK5J7P.js";
+} from "./chunks/chunk.OWYDTY46.js";
 import {
   SdDropdown
-} from "./chunks/chunk.FK2BNPQB.js";
+} from "./chunks/chunk.QPBJEOPN.js";
 import {
   SdExpandable
-} from "./chunks/chunk.3YQ55DEG.js";
+} from "./chunks/chunk.4VSYGWIQ.js";
 import {
   SdFlipcard
-} from "./chunks/chunk.PJPWXQY7.js";
+} from "./chunks/chunk.Q4HWX7FF.js";
 import {
   SdHeader
-} from "./chunks/chunk.ANLMAOKA.js";
+} from "./chunks/chunk.E4O3LVAZ.js";
 import {
   SdCheckbox
-} from "./chunks/chunk.QL6JHFGU.js";
+} from "./chunks/chunk.ZBDFCFOP.js";
 import {
   SdCheckboxGroup
-} from "./chunks/chunk.UKB75H6A.js";
+} from "./chunks/chunk.U5L4ZATG.js";
 import {
   SdCombobox
-} from "./chunks/chunk.ZSD3BEVL.js";
+} from "./chunks/chunk.OH3W4PGL.js";
 import {
   SdTag
-} from "./chunks/chunk.VZBVZB3D.js";
+} from "./chunks/chunk.W6RMEFFR.js";
 import {
   SdPopup
-} from "./chunks/chunk.2CAP3Q56.js";
+} from "./chunks/chunk.2EN4CJ2E.js";
 import "./chunks/chunk.GI7VDIWX.js";
 import "./chunks/chunk.WBJBQ4QI.js";
 import "./chunks/chunk.UIQBHPD3.js";
 import {
   SdBadge
-} from "./chunks/chunk.7YENJBA2.js";
+} from "./chunks/chunk.3CUXBZXY.js";
 import {
   SdBrandshape
-} from "./chunks/chunk.72VNUTTV.js";
+} from "./chunks/chunk.P2JBJQH6.js";
 import {
   SdBreadcrumb
-} from "./chunks/chunk.XU2JEV5G.js";
+} from "./chunks/chunk.TMJN75ST.js";
 import {
   SdBreadcrumbItem
-} from "./chunks/chunk.4DHEQEYR.js";
-import "./chunks/chunk.DKBTK7VW.js";
+} from "./chunks/chunk.YGHO5R3O.js";
+import "./chunks/chunk.S253T7LE.js";
 import {
   SdCarousel
-} from "./chunks/chunk.7MXI26GR.js";
+} from "./chunks/chunk.XRKSJCLQ.js";
 import "./chunks/chunk.W2YDXTG5.js";
 import "./chunks/chunk.FNYEXUNK.js";
 import "./chunks/chunk.NOWCQZBS.js";
 import {
   SdCarouselItem
-} from "./chunks/chunk.GUZQ4ADZ.js";
+} from "./chunks/chunk.FWDG6KMC.js";
 import "./chunks/chunk.F4VGSDIW.js";
 import {
   SdAccordionGroup
-} from "./chunks/chunk.44BJS2SJ.js";
+} from "./chunks/chunk.6KCL3YWT.js";
+import {
+  SdAccordion
+} from "./chunks/chunk.MCUIYSD6.js";
 import {
   SdAnimation
-} from "./chunks/chunk.PB672B5H.js";
+} from "./chunks/chunk.QTQEKSJS.js";
 import "./chunks/chunk.TJOP7HQP.js";
-import {
-  SdAccordion
-} from "./chunks/chunk.AQI2R5GT.js";
 import {
   SdAudio
-} from "./chunks/chunk.QV5WLO4L.js";
+} from "./chunks/chunk.WTG2WY6X.js";
 import {
   SdDrawer
-} from "./chunks/chunk.G4FXGRRH.js";
+} from "./chunks/chunk.ATKLZZWE.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.AXFVYO5L.js";
+} from "./chunks/chunk.NBHVDDUK.js";
 import {
   SdLoader
-} from "./chunks/chunk.4VTG7PRD.js";
+} from "./chunks/chunk.QVNC3EJB.js";
 import "./chunks/chunk.XCQC3F3H.js";
 import "./chunks/chunk.IVMQWO2L.js";
 import "./chunks/chunk.N4LHE3QK.js";
 import "./chunks/chunk.B4BZKR24.js";
 import {
   SdIcon
-} from "./chunks/chunk.QVBR2RUV.js";
+} from "./chunks/chunk.PKG3F2KC.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
@@ -205,7 +208,7 @@ import {
 import "./chunks/chunk.ID6DABAJ.js";
 import "./chunks/chunk.3S7EW72P.js";
 import "./chunks/chunk.X2OQMWGY.js";
-import "./chunks/chunk.PJJCHCFO.js";
+import "./chunks/chunk.RZLBIMEH.js";
 import "./chunks/chunk.HQWAKJBV.js";
 import "./chunks/chunk.POFWU6ZT.js";
 import "./chunks/chunk.S3NI7NKU.js";
@@ -254,6 +257,7 @@ export {
   SdRangeTick,
   SdScrollable,
   SdSelect,
+  SdSkeleton,
   SdSpinner,
   SdStep,
   SdStepGroup,

package/dist/utilities/autocomplete-config.js

@@ -1,8 +1,8 @@
 import {
   setupAutocomplete
 } from "../chunks/chunk.6DKXZWRN.js";
-import "../chunks/chunk.2CAP3Q56.js";
-import "../chunks/chunk.PJJCHCFO.js";
+import "../chunks/chunk.2EN4CJ2E.js";
+import "../chunks/chunk.RZLBIMEH.js";
 import "../chunks/chunk.HQWAKJBV.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {

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

@@ -2672,6 +2672,33 @@
         }
       ]
     },
+    {
+      "name": "sd-skeleton",
+      "description": "Skeleton loaders are used as placeholder previews of content before data gets loaded.\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 skeleton's content. When provided, adapts to the content's dimensions. When empty, displays according to the variant property.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "name": "variant",
+          "description": "The shape variant when used without slotted content.",
+          "values": [{ "name": "rectangular" }, { "name": "circular" }]
+        },
+        {
+          "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-skeleton--docs"
+        }
+      ]
+    },
     {
       "name": "sd-spinner",
       "description": "Spinners are used to show the progress of an indeterminate operation.\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.",

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.16.2",
+  "version": "5.17.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -6202,6 +6202,58 @@
             ]
           }
         },
+        {
+          "name": "sd-skeleton",
+          "description": "Skeleton loaders are used as placeholder previews of content before data gets loaded.\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 skeleton's content. When provided, adapts to the content's dimensions. When empty, displays according to the variant property.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "description": "The shape variant when used without slotted content.",
+              "value": {
+                "type": "'rectangular' | 'circular'",
+                "default": "'rectangular'"
+              }
+            },
+            {
+              "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 skeleton's content. When provided, adapts to the content's dimensions. When empty, displays according to the variant property."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "variant",
+                "description": "The shape variant when used without slotted content.",
+                "type": "'rectangular' | 'circular'"
+              },
+              {
+                "name": "dir",
+                "description": "The element's directionality.",
+                "type": "'ltr' | 'rtl' | 'auto'"
+              },
+              {
+                "name": "lang",
+                "description": "The element's language.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "sd-spinner",
           "description": "Spinners are used to show the progress of an indeterminate operation.\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.",

package/dist-versioned/chunks/{chunk.TED3AFLN.js → chunk.22DM7THN.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.RZLBIMEH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -55,7 +55,7 @@ var SdStepGroup = class extends SolidElement {
     });
   }
   getAllSteps() {
-    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-5-16-2-step");
+    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-5-17-0-step");
   }
   /**
    * Sets the active step.
@@ -120,7 +120,7 @@ __decorateClass([
   watch("notInteractive")
 ], SdStepGroup.prototype, "handleInteractivityChange", 1);
 SdStepGroup = __decorateClass([
-  customElement("sd-5-16-2-step-group")
+  customElement("sd-5-17-0-step-group")
 ], SdStepGroup);
 
 export {

package/dist-versioned/chunks/{chunk.7JUNYBWC.js → chunk.246LUIGB.js}

@@ -13,7 +13,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.RZLBIMEH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -172,7 +172,7 @@ __decorateClass([
   watch(["checked"], { waitUntilFirstUpdate: true })
 ], SdSwitch.prototype, "handleStateChange", 1);
 SdSwitch = __decorateClass([
-  customElement("sd-5-16-2-switch")
+  customElement("sd-5-17-0-switch")
 ], SdSwitch);
 
 export {

package/dist-versioned/chunks/{chunk.2CAP3Q56.js → chunk.2EN4CJ2E.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.RZLBIMEH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -323,7 +323,7 @@ __decorateClass([
   property({ attribute: "auto-size-padding", type: Number })
 ], SdPopup.prototype, "autoSizePadding", 2);
 SdPopup = __decorateClass([
-  customElement("sd-5-16-2-popup")
+  customElement("sd-5-17-0-popup")
 ], SdPopup);
 
 export {

package/dist-versioned/chunks/{chunk.7YENJBA2.js → chunk.3CUXBZXY.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.RZLBIMEH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -43,7 +43,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdBadge.prototype, "inverted", 2);
 SdBadge = __decorateClass([
-  customElement("sd-5-16-2-badge")
+  customElement("sd-5-17-0-badge")
 ], SdBadge);
 
 export {

package/dist-versioned/chunks/{chunk.7FMGPUZF.js → chunk.3FCBHDPH.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.RZLBIMEH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -32,7 +32,7 @@ var SdDatepicker = class extends SolidElement {
     this.localize = new LocalizeController(this);
     this.hasSlotController = new HasSlotController(this, "label", "help-text", "tooltip");
     this.formControlController = new FormControlController(this, {
-      assumeInteractionOn: ["sd-blur", "sd-5-16-2-input"]
+      assumeInteractionOn: ["sd-blur", "sd-5-17-0-input"]
     });
     this.locale = "en-US";
     this.value = null;
@@ -1157,7 +1157,7 @@ var SdDatepicker = class extends SolidElement {
       return DateUtils.isBetweenInclusive(day, rs, pe);
     };
     const tabTarget = this.getTabTargetDayForCurrentView(weeks);
-    return html`<div part="datepicker" class="w-[284px] z-50 absolute top-full bg-white border-2 border-t-0 border-primary py-3 px-4 ${this.open ? "block rounded-bl-default rounded-br-default" : "hidden"} ${this.alignment === "left" ? "left-0" : "right-0"}"><div class="flex flex-row items-center w-full justify-between mb-3" part="header"><div class="flex items-center"><button type="button" tabindex="0" class="nav prev w-6 h-6 hover:cursor-pointer sd-interactive" part="prev-year-button" @click="${() => this.setYear(-1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "year", -1, false)}" aria-label="${this.localize.term("previousYear")}"><sd-5-16-2-icon library="_internal" name="chevrons-sm-left" class="h-6 w-6"></sd-5-16-2-icon></button> <button type="button" tabindex="0" class="nav prev w-6 h-6 hover:cursor-pointer sd-interactive" part="prev-month-button" @click="${() => this.setMonth(-1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "month", -1, false)}" aria-label="${this.localize.term("previousMonth")}"><sd-5-16-2-icon library="_internal" name="chevron-sm-left" class="h-6 w-6"></sd-5-16-2-icon></button></div><div tabindex="-1" class="month-label flex justify-center sd-headline sd-headline--size-base !text-primary" part="month-label" aria-live="polite">${monthLabel}</div><div class="flex items-center"><button type="button" tabindex="0" class="nav next w-6 h-6 hover:cursor-pointer sd-interactive" part="next-month-button" @click="${() => this.setMonth(1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "month", 1, false)}" aria-label="${this.localize.term("nextMonth")}"><sd-5-16-2-icon library="_internal" name="chevron-sm-right" class="h-6 w-6"></sd-5-16-2-icon></button> <button type="button" tabindex="0" class="nav next w-6 h-6 hover:cursor-pointer sd-interactive" part="next-year-button" @click="${() => this.setYear(1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "year", 1, true)}" aria-label="${this.localize.term("nextYear")}"><sd-5-16-2-icon library="_internal" name="chevrons-sm-right" class="h-6 w-6"></sd-5-16-2-icon></button></div></div><sd-5-16-2-divider></sd-5-16-2-divider><div class="sr-only" aria-live="polite" aria-atomic="true">${this.statusNavText}</div><div class="sr-only" aria-live="assertive" aria-atomic="true">${this.statusSelectText}</div><div class="sr-only" id="keyboard-hint">${this.localize.term("datePickerInfo")}</div><div class="grid mt-2" role="grid" aria-describedby="keyboard-hint" aria-label="${monthLabel}" part="grid" @mouseleave="${this.onGridMouseLeave}" @focusin="${() => {
+    return html`<div part="datepicker" class="w-[284px] z-50 absolute top-full bg-white border-2 border-t-0 border-primary py-3 px-4 ${this.open ? "block rounded-bl-default rounded-br-default" : "hidden"} ${this.alignment === "left" ? "left-0" : "right-0"}"><div class="flex flex-row items-center w-full justify-between mb-3" part="header"><div class="flex items-center"><button type="button" tabindex="0" class="nav prev w-6 h-6 hover:cursor-pointer sd-interactive" part="prev-year-button" @click="${() => this.setYear(-1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "year", -1, false)}" aria-label="${this.localize.term("previousYear")}"><sd-5-17-0-icon library="_internal" name="chevrons-sm-left" class="h-6 w-6"></sd-5-17-0-icon></button> <button type="button" tabindex="0" class="nav prev w-6 h-6 hover:cursor-pointer sd-interactive" part="prev-month-button" @click="${() => this.setMonth(-1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "month", -1, false)}" aria-label="${this.localize.term("previousMonth")}"><sd-5-17-0-icon library="_internal" name="chevron-sm-left" class="h-6 w-6"></sd-5-17-0-icon></button></div><div tabindex="-1" class="month-label flex justify-center sd-headline sd-headline--size-base !text-primary" part="month-label" aria-live="polite">${monthLabel}</div><div class="flex items-center"><button type="button" tabindex="0" class="nav next w-6 h-6 hover:cursor-pointer sd-interactive" part="next-month-button" @click="${() => this.setMonth(1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "month", 1, false)}" aria-label="${this.localize.term("nextMonth")}"><sd-5-17-0-icon library="_internal" name="chevron-sm-right" class="h-6 w-6"></sd-5-17-0-icon></button> <button type="button" tabindex="0" class="nav next w-6 h-6 hover:cursor-pointer sd-interactive" part="next-year-button" @click="${() => this.setYear(1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "year", 1, true)}" aria-label="${this.localize.term("nextYear")}"><sd-5-17-0-icon library="_internal" name="chevrons-sm-right" class="h-6 w-6"></sd-5-17-0-icon></button></div></div><sd-5-17-0-divider></sd-5-17-0-divider><div class="sr-only" aria-live="polite" aria-atomic="true">${this.statusNavText}</div><div class="sr-only" aria-live="assertive" aria-atomic="true">${this.statusSelectText}</div><div class="sr-only" id="keyboard-hint">${this.localize.term("datePickerInfo")}</div><div class="grid mt-2" role="grid" aria-describedby="keyboard-hint" aria-label="${monthLabel}" part="grid" @mouseleave="${this.onGridMouseLeave}" @focusin="${() => {
       this.tabbingIntoGrid = false;
     }}"><div class="grid-row grid-head grid grid-cols-7 gap-y-[1px]" role="row">${weekdays.map(
       (w, colIndex) => html`<div role="columnheader" aria-colindex="${colIndex + 1}" part="weekday" class="cell head flex items-center justify-center font-bold text-black text-sm leading-none h-8" aria-label="${w}" title="${w}" id="${"col-" + (colIndex + 1)}">${w}</div>`
@@ -1245,7 +1245,7 @@ var SdDatepicker = class extends SolidElement {
       borderColor,
       this.open && this.alignment === "left" ? "rounded-bl-none" : "",
       this.open && this.alignment === "right" ? "rounded-br-none" : ""
-    )}"></div><sd-5-16-2-popup @sd-current-placement="${this.handleCurrentPlacement}" class="${cx("inline-flex relative w-full")}" sync="width" auto-size="vertical" auto-size-padding="10" exportparts="popup:popup__content,"><div part="base" class="${cx(
+    )}"></div><sd-5-17-0-popup @sd-current-placement="${this.handleCurrentPlacement}" class="${cx("inline-flex relative w-full")}" sync="width" auto-size="vertical" auto-size-padding="10" exportparts="popup:popup__content,"><div part="base" class="${cx(
       "px-4 flex flex-row items-center rounded-default transition-colors ease-in-out duration-medium hover:duration-fast w-full",
       !this.disabled && !this.readonly && !this.visuallyDisabled ? "hover:bg-neutral-200" : "",
       this.readonly ? "bg-neutral-100" : "bg-white",
@@ -1255,7 +1255,7 @@ var SdDatepicker = class extends SolidElement {
       this.visuallyDisabled || this.disabled ? "placeholder:text-neutral-500 cursor-not-allowed" : "placeholder:text-neutral-700",
       { sm: "h-8", md: "h-10", lg: "h-12" }[this.size],
       textSize
-    )}" autocomplete="off" spellcheck="false" placeholder="${this.placeholder || this.localize.term(this.range ? "dateRangePlaceholder" : "datePlaceholder")}" ?disabled="${this.disabled}" ?readonly="${this.readonly || this.visuallyDisabled}" @input="${this.handleInput}" @click="${this.handleMouseDown}" @keydown="${this.handleInputKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleInputBlur}" @invalid="${this.handleInvalid}"> ${this.showInvalidStyle ? html`<sd-5-16-2-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-5-16-2-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-5-16-2-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-5-16-2-icon>` : ""}<sd-5-16-2-icon class="${cx(iconColor, iconMarginLeft, iconSize, "hover:cursor-pointer")}" library="_internal" name="calendar" @click="${this.show}"></sd-5-16-2-icon>${this.renderCalendar()}</div></sd-5-16-2-popup></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
+    )}" autocomplete="off" spellcheck="false" placeholder="${this.placeholder || this.localize.term(this.range ? "dateRangePlaceholder" : "datePlaceholder")}" ?disabled="${this.disabled}" ?readonly="${this.readonly || this.visuallyDisabled}" @input="${this.handleInput}" @click="${this.handleMouseDown}" @keydown="${this.handleInputKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleInputBlur}" @invalid="${this.handleInvalid}"> ${this.showInvalidStyle ? html`<sd-5-17-0-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-5-17-0-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-5-17-0-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-5-17-0-icon>` : ""}<sd-5-17-0-icon class="${cx(iconColor, iconMarginLeft, iconSize, "hover:cursor-pointer")}" library="_internal" name="calendar" @click="${this.show}"></sd-5-17-0-icon>${this.renderCalendar()}</div></sd-5-17-0-popup></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 SdDatepicker.styles = [
@@ -1396,7 +1396,7 @@ __decorateClass([
   watch(["disabled", "visually-disabled"], { waitUntilFirstUpdate: true })
 ], SdDatepicker.prototype, "handleDisabledChange", 1);
 SdDatepicker = __decorateClass([
-  customElement("sd-5-16-2-datepicker")
+  customElement("sd-5-17-0-datepicker")
 ], SdDatepicker);
 
 export {

package/dist-versioned/chunks/{chunk.BLKVBNBL.js → chunk.4D5SPJ27.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.RZLBIMEH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -68,7 +68,7 @@ __decorateClass([
   watch("src")
 ], SdInclude.prototype, "handleSrcChange", 1);
 SdInclude = __decorateClass([
-  customElement("sd-5-16-2-include")
+  customElement("sd-5-17-0-include")
 ], SdInclude);
 
 export {

package/dist-versioned/chunks/{chunk.3YQ55DEG.js → chunk.4VSYGWIQ.js}

@@ -14,7 +14,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.RZLBIMEH.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,
@@ -94,7 +94,7 @@ var SdExpandable = class extends SolidElement {
     )}" @click="${this.onToggleClick}" aria-expanded="${this.open}"><div class="${cx("h-full justify-center w-full text-base flex items-center toggle")}"><span part="toggle-icon" class="${cx(
       "flex items-center mr-2 transition-transform duration-medium ease-in-out",
       this.open && "rotate-180"
-    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-5-16-2-icon library="_internal" name="chevron-down" class="text-xl"></sd-5-16-2-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-5-16-2-icon library="_internal" name="chevron-down" class="text-xl"></sd-5-16-2-icon></slot></span><slot name="toggle-closed" class="${cx(this.open && "hidden")}">${this.localize.term("showMore")}</slot><slot name="toggle-open" class="${cx(!this.open && "hidden")}">${this.localize.term("showLess")}</slot></div></button><details part="details" ?inert="${ifDefined(!this.open)}"><summary part="summary" aria-hidden="true" class="cursor-pointer overflow-hidden list-none"><slot name="clone"></slot></summary><div part="content" class="content content-preview overflow-hidden relative"><slot></slot></div></details></div>`;
+    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-5-17-0-icon library="_internal" name="chevron-down" class="text-xl"></sd-5-17-0-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-5-17-0-icon library="_internal" name="chevron-down" class="text-xl"></sd-5-17-0-icon></slot></span><slot name="toggle-closed" class="${cx(this.open && "hidden")}">${this.localize.term("showMore")}</slot><slot name="toggle-open" class="${cx(!this.open && "hidden")}">${this.localize.term("showLess")}</slot></div></button><details part="details" ?inert="${ifDefined(!this.open)}"><summary part="summary" aria-hidden="true" class="cursor-pointer overflow-hidden list-none"><slot name="clone"></slot></summary><div part="content" class="content content-preview overflow-hidden relative"><slot></slot></div></details></div>`;
   }
   firstUpdated() {
     this.cloneContentToLightDOM();
@@ -134,7 +134,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdExpandable.prototype, "onOpenChange", 1);
 SdExpandable = __decorateClass([
-  customElement("sd-5-16-2-expandable")
+  customElement("sd-5-17-0-expandable")
 ], SdExpandable);
 setDefaultAnimation("expandable.show", {
   keyframes: [{ height: "var(--component-expandable-max-block-size, 90px)" }, { height: "auto" }],

package/dist-versioned/chunks/{chunk.UFU7P2YD.js → chunk.5L52M55A.js}

@@ -13,7 +13,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.RZLBIMEH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -208,7 +208,7 @@ var SdTextarea = class extends SolidElement {
       this.readonly ? "bg-neutral-100" : "bg-white",
       textareaState === "disabled" || textareaState === "visuallyDisabled" ? "text-neutral-500" : "text-black"
     )}"><textarea part="textarea" id="input" class="${cx(
-      "ps-4 flex-grow focus:outline-none bg-transparent placeholder-neutral-700 resize-none group-has-[sd-5-16-2-icon]:pe-8",
+      "ps-4 flex-grow focus:outline-none bg-transparent placeholder-neutral-700 resize-none group-has-[sd-5-17-0-icon]:pe-8",
       {
         sm: "py-1",
         md: "py-1",
@@ -216,7 +216,7 @@ var SdTextarea = class extends SolidElement {
       }[this.size],
       this.disabled && "cursor-not-allowed",
       textSize
-    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?visually-disabled="${this.visuallyDisabled}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-5-16-2-icon class="${cx("text-error absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="risk" part="invalid-icon"></sd-5-16-2-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-5-16-2-icon class="${cx("text-success absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-5-16-2-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText ? "block" : "hidden")}" aria-hidden="${hasHelpText ? "false" : "true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
+    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?visually-disabled="${this.visuallyDisabled}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-5-17-0-icon class="${cx("text-error absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="risk" part="invalid-icon"></sd-5-17-0-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-5-17-0-icon class="${cx("text-success absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-5-17-0-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText ? "block" : "hidden")}" aria-hidden="${hasHelpText ? "false" : "true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 /**
@@ -330,7 +330,7 @@ __decorateClass([
   watch("value", { waitUntilFirstUpdate: true })
 ], SdTextarea.prototype, "handleValueChange", 1);
 SdTextarea = __decorateClass([
-  customElement("sd-5-16-2-textarea")
+  customElement("sd-5-17-0-textarea")
 ], SdTextarea);
 
 export {