@solid-design-system/components 5.16.2 → 5.17.1

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";
-import {
-  SdTextarea
-} from "./chunks/chunk.UFU7P2YD.js";
+} from "./chunks/chunk.NYOWE72U.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";
+} from "./chunks/chunk.6OGLZOU3.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.TJKIQ2ZR.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";
-import {
-  SdBrandshape
-} from "./chunks/chunk.72VNUTTV.js";
+} from "./chunks/chunk.3CUXBZXY.js";
 import {
   SdBreadcrumb
-} from "./chunks/chunk.XU2JEV5G.js";
+} from "./chunks/chunk.TMJN75ST.js";
+import {
+  SdBrandshape
+} from "./chunks/chunk.P2JBJQH6.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.1",
   "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-1-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-1-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-1-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-1-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-1-badge")
 ], SdBadge);
 
 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-1-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-1-icon library="_internal" name="chevron-down" class="text-xl"></sd-5-17-1-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-5-17-1-icon library="_internal" name="chevron-down" class="text-xl"></sd-5-17-1-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-1-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-1-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-1-icon class="${cx("text-error absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="risk" part="invalid-icon"></sd-5-17-1-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-5-17-1-icon class="${cx("text-success absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-5-17-1-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-1-textarea")
 ], SdTextarea);
 
 export {

package/dist-versioned/chunks/{chunk.VCV7HS44.js → chunk.63D5DO3S.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.RZLBIMEH.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-16-2-radio group inline-flex items-start items-center text-base leading-normal text-black cursor-pointer align-middle",
+      "sd-5-17-1-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-16-2-radio")
+  customElement("sd-5-17-1-radio")
 ], SdRadio);
 
 export {

package/dist-versioned/chunks/chunk.6DKXZWRN.js

@@ -10,7 +10,7 @@ function setupAutocomplete(selector, { setValueOnSelection, scrollSelectionIntoV
     var _a, _b;
     const ul = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("ul");
     ul == null ? void 0 : ul.setAttribute("part", "listbox");
-    const popup = document.createElement("sd-5-16-2-popup");
+    const popup = document.createElement("sd-5-17-1-popup");
     popup.appendChild(ul);
     (_b = sdInput.shadowRoot) == null ? void 0 : _b.appendChild(popup);
     popup == null ? void 0 : popup.setAttribute("exportparts", "popup__content");
@@ -22,7 +22,7 @@ function setupAutocomplete(selector, { setValueOnSelection, scrollSelectionIntoV
       popup.anchor = sdInput;
       popup.sync = "width";
     }
-    const styles = css`sd-5-16-2-popup::part(popup){border-bottom-left-radius:var(--sd-border-radius-default,.25rem);border-bottom-right-radius:var(--sd-border-radius-default,.25rem);border-width:0 2px 2px;overflow-y:scroll;z-index:var(--sd-z-index-dropdown,900);--tw-border-opacity:1;border-color:rgb(var(--sd-color-primary,0 53 142)/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(var(--sd-color-white,255 255 255)/var(--tw-bg-opacity,1));padding:var(--sd-spacing-3,.75rem) var(--sd-spacing-2,.5rem);--tw-shadow:var(--sd-shadow,0px 1px 3px 0px rgba(81,81,81,.75));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-5-16-2-popup li{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}sd-5-16-2-popup li:hover:not([disabled]){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-100,246 246 246)/var(--tw-bg-opacity,1))}sd-5-16-2-popup li{list-style-type:""}sd-5-16-2-popup li mark{background-color:transparent;font-weight:700}sd-5-16-2-popup li:not(:has(sd-5-16-2-option)){cursor:pointer;font-size:var(--sd-font-size-base,1rem);padding:var(--sd-spacing-3,.75rem) var(--sd-spacing-4,1rem);--tw-text-opacity:1;color:rgb(var(--sd-color-black,24 24 24)/var(--tw-text-opacity,1))}sd-5-16-2-popup li:not(:has(sd-5-16-2-option)):hover{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233)/var(--tw-bg-opacity,1))}sd-5-16-2-popup li[aria-selected=true]{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233)/var(--tw-bg-opacity,1))}`;
+    const styles = css`sd-5-17-1-popup::part(popup){border-bottom-left-radius:var(--sd-border-radius-default,.25rem);border-bottom-right-radius:var(--sd-border-radius-default,.25rem);border-width:0 2px 2px;overflow-y:scroll;z-index:var(--sd-z-index-dropdown,900);--tw-border-opacity:1;border-color:rgb(var(--sd-color-primary,0 53 142)/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(var(--sd-color-white,255 255 255)/var(--tw-bg-opacity,1));padding:var(--sd-spacing-3,.75rem) var(--sd-spacing-2,.5rem);--tw-shadow:var(--sd-shadow,0px 1px 3px 0px rgba(81,81,81,.75));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-5-17-1-popup li{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}sd-5-17-1-popup li:hover:not([disabled]){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-100,246 246 246)/var(--tw-bg-opacity,1))}sd-5-17-1-popup li{list-style-type:""}sd-5-17-1-popup li mark{background-color:transparent;font-weight:700}sd-5-17-1-popup li:not(:has(sd-5-17-1-option)){cursor:pointer;font-size:var(--sd-font-size-base,1rem);padding:var(--sd-spacing-3,.75rem) var(--sd-spacing-4,1rem);--tw-text-opacity:1;color:rgb(var(--sd-color-black,24 24 24)/var(--tw-text-opacity,1))}sd-5-17-1-popup li:not(:has(sd-5-17-1-option)):hover{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233)/var(--tw-bg-opacity,1))}sd-5-17-1-popup li[aria-selected=true]{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233)/var(--tw-bg-opacity,1))}`;
     const styleSheet = new CSSStyleSheet();
     styleSheet.replaceSync(styles);
     sdInput.shadowRoot.adoptedStyleSheets = [...sdInput.shadowRoot.adoptedStyleSheets, styleSheet];
@@ -35,13 +35,13 @@ function setupAutocomplete(selector, { setValueOnSelection, scrollSelectionIntoV
   }
   input.addEventListener("open", () => {
     var _a, _b, _c, _d, _e, _f;
-    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-5-16-2-popup")) == null ? void 0 : _b.setAttribute("active", "true");
+    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-5-17-1-popup")) == null ? void 0 : _b.setAttribute("active", "true");
     (_d = (_c = sdInput.shadowRoot) == null ? void 0 : _c.querySelector('[part="border"]')) == null ? void 0 : _d.classList.add("rounded-b-none");
     (_f = (_e = sdInput.shadowRoot) == null ? void 0 : _e.querySelector('[part="form-control"]')) == null ? void 0 : _f.classList.add("z-50");
   });
   input.addEventListener("close", () => {
     var _a, _b, _c, _d, _e, _f;
-    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-5-16-2-popup")) == null ? void 0 : _b.removeAttribute("active");
+    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-5-17-1-popup")) == null ? void 0 : _b.removeAttribute("active");
     (_d = (_c = sdInput.shadowRoot) == null ? void 0 : _c.querySelector('[part="border"]')) == null ? void 0 : _d.classList.remove("rounded-b-none");
     (_f = (_e = sdInput.shadowRoot) == null ? void 0 : _e.querySelector('[part="form-control"]')) == null ? void 0 : _f.classList.remove("z-50");
   });