@solid-design-system/components 5.4.3 → 5.5.0

package/dist/solid-components.js

@@ -4,162 +4,163 @@ import {
 import "./chunks/chunk.HAL7R4WT.js";
 import {
   SdTabPanel
-} from "./chunks/chunk.BMOZ4UCJ.js";
+} from "./chunks/chunk.KQIAHXDV.js";
 import {
   SdTeaser
-} from "./chunks/chunk.PMMQGCWE.js";
+} from "./chunks/chunk.3HPLJIDM.js";
 import {
   SdTeaserMedia
-} from "./chunks/chunk.DKMBAQNN.js";
+} from "./chunks/chunk.SJ633J2S.js";
 import {
   SdTextarea
-} from "./chunks/chunk.YR7FBXEK.js";
+} from "./chunks/chunk.GPGNE73T.js";
 import {
   SdTooltip
-} from "./chunks/chunk.MGZNYUU5.js";
+} from "./chunks/chunk.RUGET775.js";
 import {
   SdVideo
-} from "./chunks/chunk.3EFIPRDK.js";
+} from "./chunks/chunk.EZYVCZIX.js";
 import {
   SdScrollable
-} from "./chunks/chunk.AQSNQIE2.js";
+} from "./chunks/chunk.MJI2LR7Q.js";
 import {
   SdSelect
-} from "./chunks/chunk.J2MWZHOR.js";
+} from "./chunks/chunk.LLVY4FRO.js";
 import {
   SdStep
-} from "./chunks/chunk.VWCNE6RW.js";
+} from "./chunks/chunk.WZSUVVGK.js";
 import {
   SdStepGroup
-} from "./chunks/chunk.IAVZSNZM.js";
+} from "./chunks/chunk.TN3AK2CB.js";
 import {
   SdSwitch
-} from "./chunks/chunk.TICMXROB.js";
+} from "./chunks/chunk.GC6J3QO6.js";
 import {
   SdTab
-} from "./chunks/chunk.RJEVYRGU.js";
+} from "./chunks/chunk.VWO7SMIW.js";
 import {
   SdTabGroup
-} from "./chunks/chunk.XVPNFAM2.js";
+} from "./chunks/chunk.OLQDLBR7.js";
 import {
   SdNotification
-} from "./chunks/chunk.ER5WL52L.js";
+} from "./chunks/chunk.EPXREFBH.js";
 import {
   SdOptgroup
-} from "./chunks/chunk.K4NJXWOJ.js";
+} from "./chunks/chunk.2PXT2JGM.js";
 import {
   SdOption
-} from "./chunks/chunk.4L2ZJWMT.js";
+} from "./chunks/chunk.S44HT5WK.js";
 import {
   SdQuickfact
-} from "./chunks/chunk.VYA3GCBI.js";
+} from "./chunks/chunk.YGYU27OD.js";
 import {
   SdRadioButton
-} from "./chunks/chunk.XOBAD7BT.js";
+} from "./chunks/chunk.XEIN3AUI.js";
 import {
   SdRadioGroup
-} from "./chunks/chunk.ZWGFV5US.js";
+} from "./chunks/chunk.CPC45P5D.js";
 import {
   SdRadio
-} from "./chunks/chunk.KNR2TKCV.js";
+} from "./chunks/chunk.2USCM2K7.js";
 import {
   SdInclude
-} from "./chunks/chunk.WPSQV3EJ.js";
+} from "./chunks/chunk.NRZU3V4L.js";
 import {
   SdInput
-} from "./chunks/chunk.OYISVPRT.js";
+} from "./chunks/chunk.GANFEZEA.js";
 import {
   SdLink
-} from "./chunks/chunk.O6ZCXYG7.js";
+} from "./chunks/chunk.2N5XLHBL.js";
 import {
   SdMapMarker
-} from "./chunks/chunk.Y7RW6FN5.js";
+} from "./chunks/chunk.2FLTH2J2.js";
 import {
   SdNavigationItem
-} from "./chunks/chunk.WNKRVUCI.js";
+} from "./chunks/chunk.4PQ2QFNO.js";
 import {
   SdDropdown
-} from "./chunks/chunk.YA5MP52V.js";
+} from "./chunks/chunk.JDQMDO76.js";
 import {
   SdExpandable
-} from "./chunks/chunk.CWRYUKKN.js";
+} from "./chunks/chunk.MXEVN4M3.js";
 import {
   SdFlipcard
-} from "./chunks/chunk.EPTG3T3K.js";
+} from "./chunks/chunk.7KAD3IZR.js";
 import {
   SdHeader
-} from "./chunks/chunk.MQHKJBMI.js";
+} from "./chunks/chunk.FKLYH7XI.js";
 import {
   SdCheckbox
-} from "./chunks/chunk.JDURQSHD.js";
+} from "./chunks/chunk.GOGPGGHW.js";
 import {
   SdCheckboxGroup
-} from "./chunks/chunk.NJDUDBH3.js";
+} from "./chunks/chunk.57SMIFAB.js";
 import {
   SdCombobox
-} from "./chunks/chunk.QT7I3AD5.js";
+} from "./chunks/chunk.PA346ZLC.js";
 import {
   SdTag
-} from "./chunks/chunk.I3TERPA7.js";
+} from "./chunks/chunk.3WKBJLEU.js";
 import {
   SdPopup
-} from "./chunks/chunk.E3L4D5JB.js";
+} from "./chunks/chunk.3GP7FNMV.js";
 import "./chunks/chunk.GI7VDIWX.js";
 import "./chunks/chunk.WBJBQ4QI.js";
 import "./chunks/chunk.UIQBHPD3.js";
 import {
   SdDialog
-} from "./chunks/chunk.YHPP5HHG.js";
+} from "./chunks/chunk.INOD7KXJ.js";
 import {
   SdDivider
-} from "./chunks/chunk.ZKAEJF4D.js";
+} from "./chunks/chunk.ZJYBYFC4.js";
 import {
   SdBadge
-} from "./chunks/chunk.AEC7OUIU.js";
+} from "./chunks/chunk.YIT7C2FX.js";
 import {
   SdBrandshape
-} from "./chunks/chunk.JDGZXKQ6.js";
-import "./chunks/chunk.QHFL2NPD.js";
+} from "./chunks/chunk.XUT7HJ23.js";
+import "./chunks/chunk.DMKN3M74.js";
 import {
   SdCarousel
-} from "./chunks/chunk.POPZOOPO.js";
+} from "./chunks/chunk.FL7XA2L3.js";
 import "./chunks/chunk.F4VGSDIW.js";
 import "./chunks/chunk.FNYEXUNK.js";
 import "./chunks/chunk.NOWCQZBS.js";
 import {
   SdCarouselItem
-} from "./chunks/chunk.BNKXTELX.js";
+} from "./chunks/chunk.URTD4FVZ.js";
 import {
   SdAccordionGroup
-} from "./chunks/chunk.VBUX2EMW.js";
+} from "./chunks/chunk.7HDYUFV4.js";
 import {
   SdAccordion
-} from "./chunks/chunk.BNHWLWIO.js";
+} from "./chunks/chunk.QN3ULHF6.js";
 import {
   SdAnimation
-} from "./chunks/chunk.KHDJQVLW.js";
+} from "./chunks/chunk.K3TQETH6.js";
 import "./chunks/chunk.TJOP7HQP.js";
 import {
   SdAudio
-} from "./chunks/chunk.DVE7LUSU.js";
+} from "./chunks/chunk.AJXUUZNA.js";
 import {
   SdDrawer
-} from "./chunks/chunk.WOZNRS7M.js";
+} from "./chunks/chunk.2ZGD7ZWV.js";
+import "./chunks/chunk.SF6AUNJF.js";
 import "./chunks/chunk.UFBRSKVR.js";
 import "./chunks/chunk.XHCTCU2Q.js";
 import "./chunks/chunk.WDWV53JP.js";
 import {
   SdButton
-} from "./chunks/chunk.R4RNIJUR.js";
+} from "./chunks/chunk.AV42LWAO.js";
 import {
   SdSpinner
-} from "./chunks/chunk.QH3LDBIV.js";
+} from "./chunks/chunk.ZZ53RZAM.js";
 import "./chunks/chunk.KVKRZJS7.js";
 import "./chunks/chunk.YEZS5ZR2.js";
 import "./chunks/chunk.N4LHE3QK.js";
 import {
   SdIcon
-} from "./chunks/chunk.ZFCSAN3P.js";
+} from "./chunks/chunk.MAEGWOCQ.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
@@ -176,7 +177,7 @@ import "./chunks/chunk.WEDOS4Q6.js";
 import "./chunks/chunk.CVCJY3ME.js";
 import "./chunks/chunk.B4BZKR24.js";
 import "./chunks/chunk.X2OQMWGY.js";
-import "./chunks/chunk.BHMQ7JTH.js";
+import "./chunks/chunk.6EG5PXXO.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.6DKXZWRN.js";
-import "../chunks/chunk.E3L4D5JB.js";
-import "../chunks/chunk.BHMQ7JTH.js";
+import "../chunks/chunk.3GP7FNMV.js";
+import "../chunks/chunk.6EG5PXXO.js";
 import "../chunks/chunk.HQWAKJBV.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {

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

@@ -1604,7 +1604,7 @@
     },
     {
       "name": "sd-notification",
-      "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the notification opens.\n- **sd-after-show** - Emitted after the notification opens and all animations are complete.\n- **sd-hide** - Emitted when the notification closes.\n- **sd-after-hide** - Emitted after the notification closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the notification.\n- **hide()** - Hides the notification\n- **toast()** - Displays the notification as a toast notification. This will move the notification out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the notification, you can reuse it by\ncalling this method again. The returned promise will resolve after the notification is hidden.\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 sd-notification's main content.\n- **icon** - An icon to show in the sd-notification. Works best with `<sd-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the optional icon.\n- **content** - The container that wraps the notifications's main content and the close button.\n- **message** - The container that wraps the notifications's main content.\n- **duration-indicator__elapsed** - The current duration indicator.\n- **duration-indicator__total** - The total duration indicator.\n- **close-button** - The close button, an `<sd-icon-button>`.",
+      "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the notification opens.\n- **sd-after-show** - Emitted after the notification opens and all animations are complete.\n- **sd-hide** - Emitted when the notification closes.\n- **sd-after-hide** - Emitted after the notification closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the notification.\n- **hide()** - Hides the notification\n- **toast()** - Displays the notification as a toast notification. This will move the notification out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the notification, you can reuse it by\ncalling this method again. The returned promise will resolve after the notification is hidden.\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 sd-notification's main content.\n- **icon** - An icon to show in the sd-notification. Works best with `<sd-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **wrapper** - The container that wraps all the notification elements.\n- **icon** - The container that wraps the optional icon.\n- **content** - The container that wraps the notifications's main content and the close button.\n- **message** - The container that wraps the notifications's main content.\n- **duration-indicator__elapsed** - The current duration indicator.\n- **duration-indicator__total** - The total duration indicator.\n- **close-button** - The close button, an `<sd-icon-button>`.",
       "attributes": [
         {
           "name": "variant",

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.4.3",
+  "version": "5.5.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -3672,7 +3672,7 @@
         },
         {
           "name": "sd-notification",
-          "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the notification opens.\n- **sd-after-show** - Emitted after the notification opens and all animations are complete.\n- **sd-hide** - Emitted when the notification closes.\n- **sd-after-hide** - Emitted after the notification closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the notification.\n- **hide()** - Hides the notification\n- **toast()** - Displays the notification as a toast notification. This will move the notification out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the notification, you can reuse it by\ncalling this method again. The returned promise will resolve after the notification is hidden.\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 sd-notification's main content.\n- **icon** - An icon to show in the sd-notification. Works best with `<sd-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the optional icon.\n- **content** - The container that wraps the notifications's main content and the close button.\n- **message** - The container that wraps the notifications's main content.\n- **duration-indicator__elapsed** - The current duration indicator.\n- **duration-indicator__total** - The total duration indicator.\n- **close-button** - The close button, an `<sd-icon-button>`.",
+          "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the notification opens.\n- **sd-after-show** - Emitted after the notification opens and all animations are complete.\n- **sd-hide** - Emitted when the notification closes.\n- **sd-after-hide** - Emitted after the notification closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the notification.\n- **hide()** - Hides the notification\n- **toast()** - Displays the notification as a toast notification. This will move the notification out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the notification, you can reuse it by\ncalling this method again. The returned promise will resolve after the notification is hidden.\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 sd-notification's main content.\n- **icon** - An icon to show in the sd-notification. Works best with `<sd-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **wrapper** - The container that wraps all the notification elements.\n- **icon** - The container that wraps the optional icon.\n- **content** - The container that wraps the notifications's main content and the close button.\n- **message** - The container that wraps the notifications's main content.\n- **duration-indicator__elapsed** - The current duration indicator.\n- **duration-indicator__total** - The total duration indicator.\n- **close-button** - The close button, an `<sd-icon-button>`.",
           "doc-url": "",
           "attributes": [
             {

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-4-3-select', { detail: { item } });
+        this.emit('sd-5-5-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-4-3-divider) {
+  ::slotted(sd-5-5-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-4-3-icon name="check" library="_internal" aria-hidden="true"></sd-5-4-3-icon>
+          <sd-5-5-0-icon name="check" library="_internal" aria-hidden="true"></sd-5-5-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-4-3-icon name="chevron-right" library="_internal" aria-hidden="true"></sd-5-4-3-icon>
+          <sd-5-5-0-icon name="chevron-right" library="_internal" aria-hidden="true"></sd-5-5-0-icon>
         </span>
       </div>
     `;

package/dist-versioned/chunks/{chunk.Y7RW6FN5.js → chunk.2FLTH2J2.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.6EG5PXXO.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -107,7 +107,7 @@ __decorateClass([
   property({ reflect: true })
 ], SdMapMarker.prototype, "label", 2);
 SdMapMarker = __decorateClass([
-  customElement("sd-5-4-3-map-marker")
+  customElement("sd-5-5-0-map-marker")
 ], SdMapMarker);
 
 export {

package/dist-versioned/chunks/{chunk.O6ZCXYG7.js → chunk.2N5XLHBL.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.6EG5PXXO.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -84,7 +84,7 @@ var SdLink = class extends SolidElement {
 };
 SdLink.styles = [
   ...SolidElement.styles,
-  css`::slotted(sd-5-4-3-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-5-4-3-icon){font-size:var(--sd-font-size-base,1rem)}:host([size=lg][standalone]) ::slotted(sd-5-4-3-icon){font-size:var(--sd-font-size-xl,1.5rem)}`
+  css`::slotted(sd-5-5-0-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-5-5-0-icon){font-size:var(--sd-font-size-base,1rem)}:host([size=lg][standalone]) ::slotted(sd-5-5-0-icon){font-size:var(--sd-font-size-xl,1.5rem)}`
 ];
 __decorateClass([
   query("a")
@@ -111,7 +111,7 @@ __decorateClass([
   property({ reflect: true })
 ], SdLink.prototype, "download", 2);
 SdLink = __decorateClass([
-  customElement("sd-5-4-3-link")
+  customElement("sd-5-5-0-link")
 ], SdLink);
 
 export {

package/dist-versioned/chunks/{chunk.K4NJXWOJ.js → chunk.2PXT2JGM.js}

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

package/dist-versioned/chunks/{chunk.KNR2TKCV.js → chunk.2USCM2K7.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.6EG5PXXO.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -71,7 +71,7 @@ var SdRadio = class extends SolidElement {
   }
   render() {
     return html`<span part="base" class="${cx(
-      "sd-5-4-3-radio group inline-flex items-start items-center text-base leading-normal text-black cursor-pointer align-middle",
+      "sd-5-5-0-radio group inline-flex items-start items-center text-base leading-normal text-black cursor-pointer align-middle",
       (this.disabled || this.visuallyDisabled) && "hover:cursor-not-allowed",
       {
         /* sizes, fonts */
@@ -127,7 +127,7 @@ __decorateClass([
   watch(["disabled", "visually-disabled"], { waitUntilFirstUpdate: true })
 ], SdRadio.prototype, "handleDisabledChange", 1);
 SdRadio = __decorateClass([
-  customElement("sd-5-4-3-radio")
+  customElement("sd-5-5-0-radio")
 ], SdRadio);
 
 export {

package/dist-versioned/chunks/{chunk.WOZNRS7M.js → chunk.2ZGD7ZWV.js}

@@ -1,3 +1,6 @@
+import {
+  uppercaseFirstLetter
+} from "./chunk.SF6AUNJF.js";
 import {
   Modal,
   getDeepActiveElement
@@ -25,7 +28,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.6EG5PXXO.js";
 import {
   animateTo,
   stopAnimations
@@ -37,13 +40,6 @@ import {
 // src/components/drawer/drawer.ts
 import { css, html } from "lit";
 import { property, query } from "lit/decorators.js";
-
-// src/internal/string.ts
-function uppercaseFirstLetter(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
-
-// src/components/drawer/drawer.ts
 import cx from "classix";
 var SdDrawer = class extends SolidElement {
   constructor() {
@@ -113,6 +109,16 @@ var SdDrawer = class extends SolidElement {
       await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);
       this.drawer.hidden = false;
       this.drawer.removeAttribute("inert");
+      const panelAnimation = getAnimation(this, `drawer.show${uppercaseFirstLetter(this.placement)}`, {
+        dir: this.localize.dir()
+      });
+      const overlayAnimation = getAnimation(this, "drawer.overlay.show", { dir: this.localize.dir() });
+      await Promise.all([
+        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),
+        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)
+      ]);
+      closeButtonBase == null ? void 0 : closeButtonBase.setAttribute("aria-controls", "drawer");
+      closeButtonBase == null ? void 0 : closeButtonBase.setAttribute("aria-expanded", "true");
       requestAnimationFrame(() => {
         const sdInitialFocus = this.emit("sd-initial-focus", { cancelable: true });
         if (!sdInitialFocus.defaultPrevented) {
@@ -128,16 +134,6 @@ var SdDrawer = class extends SolidElement {
           this.closeButton.focus();
         }
       });
-      const panelAnimation = getAnimation(this, `drawer.show${uppercaseFirstLetter(this.placement)}`, {
-        dir: this.localize.dir()
-      });
-      const overlayAnimation = getAnimation(this, "drawer.overlay.show", { dir: this.localize.dir() });
-      await Promise.all([
-        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),
-        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)
-      ]);
-      closeButtonBase == null ? void 0 : closeButtonBase.setAttribute("aria-controls", "drawer");
-      closeButtonBase == null ? void 0 : closeButtonBase.setAttribute("aria-expanded", "true");
       this.emit("sd-after-show");
     } else {
       this.emit("sd-hide");
@@ -210,7 +206,7 @@ var SdDrawer = class extends SolidElement {
         end: "top-0 end-0 bottom-auto start-auto w-[--width] h-full",
         start: "top-0 end-auto bottom-auto start-0 w-[--width] h-full"
       }[this.placement]
-    )}" role="dialog" aria-modal="true" aria-label="${this.label}" tabindex="0">${!this.noHeader ? html`<header part="header" class="flex justify-between py-2 px-4 items-center flex-shrink-0" style="min-height:56px"><div part="title"><slot name="header" part="title" class="flex-auto text-xl m-0" id="title"></slot></div><div class="shrink-0 flex flex-wrap justify-end gap-1 ml-4 absolute top-2 right-2"><sd-5-4-3-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-5-4-3-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-5-4-3-icon></sd-5-4-3-button></div></header>` : html`<sd-5-4-3-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}" class="absolute top-2 right-2"><sd-5-4-3-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-5-4-3-icon></sd-5-4-3-button>`}<div part="body" class="flex-auto block px-4 focus-visible:focus-outline !-outline-offset-2" tabindex="0"><slot></slot></div><footer part="footer" class="${cx(this.hasSlotController.test("footer") ? "text-left p-4" : "hidden")}"><slot name="footer"></slot></footer></div></section>`;
+    )}" role="dialog" aria-modal="true" aria-label="${this.label}" tabindex="0">${!this.noHeader ? html`<header part="header" class="flex justify-between py-2 px-4 items-center flex-shrink-0" style="min-height:56px"><div part="title"><slot name="header" part="title" class="flex-auto text-xl m-0" id="title"></slot></div><div class="shrink-0 flex flex-wrap justify-end gap-1 ml-4 absolute top-2 right-2"><sd-5-5-0-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-5-5-0-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-5-5-0-icon></sd-5-5-0-button></div></header>` : html`<sd-5-5-0-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}" class="absolute top-2 right-2"><sd-5-5-0-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-5-5-0-icon></sd-5-5-0-button>`}<div part="body" class="flex-auto block px-4 focus-visible:focus-outline !-outline-offset-2" tabindex="0"><slot></slot></div><footer part="footer" class="${cx(this.hasSlotController.test("footer") ? "text-left p-4" : "hidden")}"><slot name="footer"></slot></footer></div></section>`;
   }
 };
 SdDrawer.styles = [
@@ -251,7 +247,7 @@ __decorateClass([
   watch("contained", { waitUntilFirstUpdate: true })
 ], SdDrawer.prototype, "handleNoModalChange", 1);
 SdDrawer = __decorateClass([
-  customElement("sd-5-4-3-drawer")
+  customElement("sd-5-5-0-drawer")
 ], SdDrawer);
 setDefaultAnimation("drawer.showStart", {
   keyframes: [

package/dist-versioned/chunks/{chunk.E3L4D5JB.js → chunk.3GP7FNMV.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.6EG5PXXO.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-4-3-popup")
+  customElement("sd-5-5-0-popup")
 ], SdPopup);
 
 export {

package/dist-versioned/chunks/{chunk.PMMQGCWE.js → chunk.3HPLJIDM.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.6EG5PXXO.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -99,7 +99,7 @@ __decorateClass([
   state()
 ], SdTeaser.prototype, "_orientation", 2);
 SdTeaser = __decorateClass([
-  customElement("sd-5-4-3-teaser")
+  customElement("sd-5-5-0-teaser")
 ], SdTeaser);
 
 export {

package/dist-versioned/chunks/{chunk.I3TERPA7.js → chunk.3WKBJLEU.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.6EG5PXXO.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -80,7 +80,7 @@ var SdTag = class extends SolidElement {
         !this.removable ? "hover:border-primary-500 hover:bg-neutral-100 hover:text-primary-500" : "has-[button:hover]:border-primary-500 has-[button:hover]:bg-neutral-100 has-[button:hover]:text-primary-500"
       ) : "bg-primary border-primary text-white hover:bg-primary-500 hover:border-primary-500 disabled:bg-neutral-500 disabled:border-neutral-500",
       this.disabled && !isLink && "cursor-not-allowed"
-    )}"><slot id="content" part="content"></slot>${this.removable ? html`<button class="sd-interactive flex items-center" type="button" @click="${this.handleRemove}"><slot part="removable-indicator" name="removable-indicator"><sd-5-4-3-icon library="_internal" name="close" label="${this.localize.term("remove")}"></sd-5-4-3-icon></slot></button>` : ""}</${tag}>`;
+    )}"><slot id="content" part="content"></slot>${this.removable ? html`<button class="sd-interactive flex items-center" type="button" @click="${this.handleRemove}"><slot part="removable-indicator" name="removable-indicator"><sd-5-5-0-icon library="_internal" name="close" label="${this.localize.term("remove")}"></sd-5-5-0-icon></slot></button>` : ""}</${tag}>`;
   }
 };
 SdTag.styles = [
@@ -115,7 +115,7 @@ __decorateClass([
   property({ reflect: true })
 ], SdTag.prototype, "download", 2);
 SdTag = __decorateClass([
-  customElement("sd-5-4-3-tag")
+  customElement("sd-5-5-0-tag")
 ], SdTag);
 
 export {

package/dist-versioned/chunks/{chunk.WNKRVUCI.js → chunk.4PQ2QFNO.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.BHMQ7JTH.js";
+} from "./chunk.6EG5PXXO.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -117,16 +117,16 @@ var SdNavigationItem = class extends SolidElement {
       slots["description"] && "pt-3",
       slots["description"] || this.separated ? "pb-1" : horizontalPadding,
       this.calculatePaddingX
-    )}">${this.divider && this.vertical ? html`<sd-5-4-3-divider part="divider" class="${cx("w-full transition-all absolute -top-0.25 left-0", this.calculatePaddingX)}"></sd-5-4-3-divider>` : ""} <span part="content-container" class="inline-flex items-center flex-auto">${this.separated ? html`<a class="${cx(
+    )}">${this.divider && this.vertical ? html`<sd-5-5-0-divider part="divider" class="${cx("w-full transition-all absolute -top-0.25 left-0", this.calculatePaddingX)}"></sd-5-5-0-divider>` : ""} <span part="content-container" class="inline-flex items-center flex-auto">${this.separated ? html`<a class="${cx(
       "mr-4 w-full inline-flex items-center pl-4 cursor-pointer relative focus-visible:focus-outline hover:bg-neutral-200 group transition-colors duration-fast ease-in-out min-h-[48px]",
       !slots["description"] && "py-4"
-    )}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}"><slot part="content" class="inline-flex"></slot></a>` : html`<slot part="content" class="inline-flex"></slot>`} </span>${(this.chevron || slots["children"]) && this.vertical ? this.separated ? html`<button type="button" title="${this.open ? this.localize.term("collapseNavigationItem") : this.localize.term("expandNavigationItem")}" class="sd-interactive sd-interactive--reset" @click="${this.handleClickSummary}"><sd-5-4-3-icon name="chevron-down" part="chevron" library="_internal" color="currentColor" class="${cx(
+    )}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}"><slot part="content" class="inline-flex"></slot></a>` : html`<slot part="content" class="inline-flex"></slot>`} </span>${(this.chevron || slots["children"]) && this.vertical ? this.separated ? html`<button type="button" title="${this.open ? this.localize.term("collapseNavigationItem") : this.localize.term("expandNavigationItem")}" class="sd-interactive sd-interactive--reset" @click="${this.handleClickSummary}"><sd-5-5-0-icon name="chevron-down" part="chevron" library="_internal" color="currentColor" class="${cx(
       "m-4 h-6 w-6 transition-all",
       isAccordion || this.separated ? this.open ? "rotate-180" : "rotate-0" : "rotate-[270deg]"
-    )}"></sd-5-4-3-icon></button>` : html`<sd-5-4-3-icon name="chevron-down" part="chevron" library="_internal" color="currentColor" class="${cx(
+    )}"></sd-5-5-0-icon></button>` : html`<sd-5-5-0-icon name="chevron-down" part="chevron" library="_internal" color="currentColor" class="${cx(
       "h-6 w-6 ml-2 transition-all",
       isAccordion ? this.open ? "rotate-180" : "rotate-0" : "rotate-[270deg]"
-    )}"></sd-5-4-3-icon>` : ""} </span>${slots["description"] && this.vertical ? html`<slot name="description" part="description" class="${cx(
+    )}"></sd-5-5-0-icon>` : ""} </span>${slots["description"] && this.vertical ? html`<slot name="description" part="description" class="${cx(
       "inline-block text-sm text-left text-black pb-3",
       isAccordion || this.separated ? "grow" : "w-full",
       this.separated ? "px-4" : this.calculatePaddingX
@@ -190,7 +190,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdNavigationItem.prototype, "separated", 2);
 SdNavigationItem = __decorateClass([
-  customElement("sd-5-4-3-navigation-item")
+  customElement("sd-5-5-0-navigation-item")
 ], SdNavigationItem);
 
 export {