@solid-design-system/components 6.0.0-next.20 → 6.0.0-next.21

package/dist/components/tab-group/tab-group.js

@@ -1,9 +1,9 @@
 import {
   SdTabGroup
-} from "../../chunks/chunk.XCCVIHHK.js";
+} from "../../chunks/chunk.J5BE4PHS.js";
 import "../../chunks/chunk.NOWCQZBS.js";
 import "../../chunks/chunk.WDWV53JP.js";
-import "../../chunks/chunk.IP6WZTQB.js";
+import "../../chunks/chunk.Y6FWMZCH.js";
 import "../../chunks/chunk.UVPXOOB4.js";
 import "../../chunks/chunk.2BO5LK23.js";
 import "../../chunks/chunk.LS3MCK4L.js";
@@ -14,7 +14,7 @@ import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.GWKDETUD.js";
 import "../../chunks/chunk.M6QWSNU3.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.AYA7WMLI.js";
+import "../../chunks/chunk.KXLUF5NH.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/tab-panel/tab-panel.js

@@ -1,8 +1,8 @@
 import {
   SdTabPanel
-} from "../../chunks/chunk.GLKP6FBY.js";
+} from "../../chunks/chunk.7RRFB7XM.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.AYA7WMLI.js";
+import "../../chunks/chunk.KXLUF5NH.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/tag/tag.js

@@ -1,7 +1,7 @@
 import {
   SdTag
-} from "../../chunks/chunk.J3LIXAL2.js";
-import "../../chunks/chunk.IP6WZTQB.js";
+} from "../../chunks/chunk.365ZQE4U.js";
+import "../../chunks/chunk.Y6FWMZCH.js";
 import "../../chunks/chunk.UVPXOOB4.js";
 import "../../chunks/chunk.2BO5LK23.js";
 import "../../chunks/chunk.LS3MCK4L.js";
@@ -12,7 +12,7 @@ import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.GWKDETUD.js";
 import "../../chunks/chunk.M6QWSNU3.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.AYA7WMLI.js";
+import "../../chunks/chunk.KXLUF5NH.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/teaser/teaser.js

@@ -1,8 +1,8 @@
 import {
   SdTeaser
-} from "../../chunks/chunk.N4OTT34O.js";
+} from "../../chunks/chunk.2RL6TBHJ.js";
 import "../../chunks/chunk.IVMQWO2L.js";
-import "../../chunks/chunk.AYA7WMLI.js";
+import "../../chunks/chunk.KXLUF5NH.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/teaser-media/teaser-media.js

@@ -1,8 +1,8 @@
 import {
   SdTeaserMedia
-} from "../../chunks/chunk.EGZ57KTV.js";
+} from "../../chunks/chunk.R2DOQKTM.js";
 import "../../chunks/chunk.IVMQWO2L.js";
-import "../../chunks/chunk.AYA7WMLI.js";
+import "../../chunks/chunk.KXLUF5NH.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/textarea/textarea.js

@@ -1,10 +1,10 @@
 import {
   SdTextarea
-} from "../../chunks/chunk.QDGO562V.js";
+} from "../../chunks/chunk.6CDLUXQ2.js";
 import "../../chunks/chunk.GI7VDIWX.js";
 import "../../chunks/chunk.XCQC3F3H.js";
 import "../../chunks/chunk.IVMQWO2L.js";
-import "../../chunks/chunk.IP6WZTQB.js";
+import "../../chunks/chunk.Y6FWMZCH.js";
 import "../../chunks/chunk.UVPXOOB4.js";
 import "../../chunks/chunk.2BO5LK23.js";
 import "../../chunks/chunk.LS3MCK4L.js";
@@ -12,7 +12,7 @@ import "../../chunks/chunk.4TPOL3LB.js";
 import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.AYA7WMLI.js";
+import "../../chunks/chunk.KXLUF5NH.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/theme-listener/theme-listener.js

@@ -1,7 +1,7 @@
 import {
   SdThemeListener
-} from "../../chunks/chunk.YV6TLAQG.js";
-import "../../chunks/chunk.AYA7WMLI.js";
+} from "../../chunks/chunk.S4XCK37S.js";
+import "../../chunks/chunk.KXLUF5NH.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/tooltip/tooltip.js

@@ -1,11 +1,11 @@
 import {
   SdTooltip
-} from "../../chunks/chunk.HC6LHKKU.js";
-import "../../chunks/chunk.HHKPFIAB.js";
+} from "../../chunks/chunk.R7ITC7NT.js";
+import "../../chunks/chunk.7MKQP77O.js";
 import "../../chunks/chunk.IVMQWO2L.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.IP6WZTQB.js";
+import "../../chunks/chunk.Y6FWMZCH.js";
 import "../../chunks/chunk.UVPXOOB4.js";
 import "../../chunks/chunk.2BO5LK23.js";
 import "../../chunks/chunk.LS3MCK4L.js";
@@ -16,7 +16,7 @@ import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.GWKDETUD.js";
 import "../../chunks/chunk.M6QWSNU3.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.AYA7WMLI.js";
+import "../../chunks/chunk.KXLUF5NH.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/video/video.js

@@ -1,8 +1,8 @@
 import {
   SdVideo
-} from "../../chunks/chunk.G327Z3UW.js";
+} from "../../chunks/chunk.D2V56L6O.js";
 import "../../chunks/chunk.IVMQWO2L.js";
-import "../../chunks/chunk.IP6WZTQB.js";
+import "../../chunks/chunk.Y6FWMZCH.js";
 import "../../chunks/chunk.UVPXOOB4.js";
 import "../../chunks/chunk.2BO5LK23.js";
 import "../../chunks/chunk.LS3MCK4L.js";
@@ -13,7 +13,7 @@ import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.GWKDETUD.js";
 import "../../chunks/chunk.M6QWSNU3.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.AYA7WMLI.js";
+import "../../chunks/chunk.KXLUF5NH.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/custom-elements.json

@@ -19871,6 +19871,10 @@
             {
               "description": "The tag's removability indicator.",
               "name": "removable-indicator"
+            },
+            {
+              "description": "The container that wraps the left icon area.",
+              "name": "icon-left"
             }
           ],
           "slots": [
@@ -19878,6 +19882,10 @@
               "description": "The tag's content.",
               "name": ""
             },
+            {
+              "description": "A prefix icon or similar element.",
+              "name": "icon-left"
+            },
             {
               "description": "The tag's removability indicator.",
               "name": "removable-indicator"
@@ -22367,7 +22375,7 @@
   "package": {
     "name": "@solid-design-system/components",
     "description": "Solid Design System: Components",
-    "version": "6.0.0-next.20",
+    "version": "6.0.0-next.21",
     "author": "Union Investment",
     "homepage": "https://solid-design-system.fe.union-investment.de/docs/",
     "license": "MIT"

package/dist/solid-components.js

@@ -4,198 +4,198 @@ import {
 import "./chunks/chunk.HAL7R4WT.js";
 import {
   SdTextarea
-} from "./chunks/chunk.QDGO562V.js";
+} from "./chunks/chunk.6CDLUXQ2.js";
 import {
   SdThemeListener
-} from "./chunks/chunk.YV6TLAQG.js";
+} from "./chunks/chunk.S4XCK37S.js";
 import {
   SdTooltip
-} from "./chunks/chunk.HC6LHKKU.js";
+} from "./chunks/chunk.R7ITC7NT.js";
 import {
   SdVideo
-} from "./chunks/chunk.G327Z3UW.js";
+} from "./chunks/chunk.D2V56L6O.js";
 import {
   SdStepGroup
-} from "./chunks/chunk.3UREZKLQ.js";
+} from "./chunks/chunk.N3HOCV7I.js";
 import {
   SdSwitch
-} from "./chunks/chunk.J2JUTR3O.js";
+} from "./chunks/chunk.4UDT2N7R.js";
 import {
   SdTab
-} from "./chunks/chunk.RZYPRKWX.js";
+} from "./chunks/chunk.JDH5QDD4.js";
 import {
   SdTabGroup
-} from "./chunks/chunk.XCCVIHHK.js";
+} from "./chunks/chunk.J5BE4PHS.js";
 import {
   SdTabPanel
-} from "./chunks/chunk.GLKP6FBY.js";
+} from "./chunks/chunk.7RRFB7XM.js";
 import {
   SdTeaser
-} from "./chunks/chunk.N4OTT34O.js";
+} from "./chunks/chunk.2RL6TBHJ.js";
 import {
   SdTeaserMedia
-} from "./chunks/chunk.EGZ57KTV.js";
+} from "./chunks/chunk.R2DOQKTM.js";
 import {
   SdRange
-} from "./chunks/chunk.HOQ7HWJ2.js";
+} from "./chunks/chunk.M37DYQUE.js";
 import "./chunks/chunk.D3YSIVTB.js";
 import {
   SdRangeTick
-} from "./chunks/chunk.YNEDC56F.js";
+} from "./chunks/chunk.MHYTVEQF.js";
 import {
   SdScrollable
-} from "./chunks/chunk.IJLFM2YE.js";
+} from "./chunks/chunk.3ZWL4LLI.js";
 import {
   SdSelect
-} from "./chunks/chunk.PXABEZTS.js";
+} from "./chunks/chunk.7SH2LCIK.js";
 import {
   SdSkeleton
-} from "./chunks/chunk.TANNWOC5.js";
+} from "./chunks/chunk.QFN5ALM7.js";
 import {
   SdSpinner
-} from "./chunks/chunk.AUNSZRBQ.js";
+} from "./chunks/chunk.Y2FZWCLC.js";
 import {
   SdStep
-} from "./chunks/chunk.XXOSIGGH.js";
+} from "./chunks/chunk.RCCVTEK5.js";
 import {
   SdNotification
-} from "./chunks/chunk.P3AEQTO4.js";
+} from "./chunks/chunk.27BT6YJV.js";
 import {
   SdOptgroup
-} from "./chunks/chunk.ULHJFA5A.js";
+} from "./chunks/chunk.JST4Y73L.js";
 import {
   SdOption
-} from "./chunks/chunk.4LMIOELP.js";
+} from "./chunks/chunk.S2ESC563.js";
 import {
   SdQuickfact
-} from "./chunks/chunk.FJXMO4AJ.js";
+} from "./chunks/chunk.MXLBX6CN.js";
 import {
   SdRadioButton
-} from "./chunks/chunk.XPXWMXEZ.js";
+} from "./chunks/chunk.UC3B2PYX.js";
 import {
   SdRadioGroup
-} from "./chunks/chunk.QMAANEK5.js";
+} from "./chunks/chunk.TF5BCX76.js";
 import {
   SdRadio
-} from "./chunks/chunk.GTG5NCJH.js";
+} from "./chunks/chunk.N37INEPQ.js";
 import {
   SdInput
-} from "./chunks/chunk.F3WAQKPZ.js";
+} from "./chunks/chunk.TSXROBHJ.js";
 import {
   SdMapMarker
-} from "./chunks/chunk.NLVFG55I.js";
+} from "./chunks/chunk.DUS6RS4Y.js";
 import {
   SdMenu
-} from "./chunks/chunk.MGI5NELL.js";
+} from "./chunks/chunk.F6YDHYVE.js";
 import {
   SdMenuItem
-} from "./chunks/chunk.76LE4BPL.js";
+} from "./chunks/chunk.4OQKNMVC.js";
 import "./chunks/chunk.KEJFWGZI.js";
 import {
   SdNavigationItem
-} from "./chunks/chunk.76YV6AY5.js";
+} from "./chunks/chunk.WCXEVJIG.js";
 import {
   SdInclude
-} from "./chunks/chunk.GUAIWPL4.js";
+} from "./chunks/chunk.XNSWXKES.js";
 import {
   SdDatepicker
-} from "./chunks/chunk.LIQ3OEHJ.js";
+} from "./chunks/chunk.UXW72ASY.js";
 import "./chunks/chunk.SMPFJ52B.js";
 import {
   SdDialog
-} from "./chunks/chunk.EPZFBHM5.js";
+} from "./chunks/chunk.DIQLJZLV.js";
 import {
   SdDivider
-} from "./chunks/chunk.FTQNZE7U.js";
+} from "./chunks/chunk.QSLMGPBG.js";
 import {
   SdExpandable
-} from "./chunks/chunk.AUWFJ6KR.js";
+} from "./chunks/chunk.HKXD5IL4.js";
 import {
   SdFlipcard
-} from "./chunks/chunk.3DZRUVDI.js";
+} from "./chunks/chunk.XMDDEC3A.js";
 import {
   SdHeader
-} from "./chunks/chunk.RSHUGRW4.js";
+} from "./chunks/chunk.ORYQ3FH3.js";
 import {
   SdCheckbox
-} from "./chunks/chunk.UE4M2UDJ.js";
+} from "./chunks/chunk.PL4OFYJO.js";
 import {
   SdCheckboxGroup
-} from "./chunks/chunk.BWFAN5T4.js";
+} from "./chunks/chunk.GKHCNU2W.js";
 import {
   SdCombobox
-} from "./chunks/chunk.RYXJEAJP.js";
+} from "./chunks/chunk.DJND6YUG.js";
 import {
   SdTag
-} from "./chunks/chunk.J3LIXAL2.js";
+} from "./chunks/chunk.365ZQE4U.js";
 import "./chunks/chunk.GI7VDIWX.js";
 import "./chunks/chunk.WBJBQ4QI.js";
 import "./chunks/chunk.UIQBHPD3.js";
 import {
   SdBadge
-} from "./chunks/chunk.LZEWZD6Z.js";
+} from "./chunks/chunk.JCRS5M2Y.js";
 import {
   SdBrandshape
-} from "./chunks/chunk.QLNTXQ74.js";
+} from "./chunks/chunk.EUBZSNHP.js";
 import {
   SdBreadcrumb
-} from "./chunks/chunk.3T4FDUQP.js";
+} from "./chunks/chunk.OTKB2VRV.js";
 import {
   SdDropdown
-} from "./chunks/chunk.UAKAZZQ5.js";
+} from "./chunks/chunk.RGKPJPQL.js";
 import {
   SdPopup
-} from "./chunks/chunk.HHKPFIAB.js";
+} from "./chunks/chunk.7MKQP77O.js";
 import {
   SdBreadcrumbItem
-} from "./chunks/chunk.BKLAIQ6N.js";
+} from "./chunks/chunk.CJR7IAF2.js";
 import {
   SdLink
-} from "./chunks/chunk.5YR4L6ZG.js";
-import "./chunks/chunk.HPCBK4U6.js";
+} from "./chunks/chunk.LL6JDZ2J.js";
+import "./chunks/chunk.O6OCDAKK.js";
 import {
   SdCarousel
-} from "./chunks/chunk.G4LU2DPT.js";
+} from "./chunks/chunk.JRJ4LNBT.js";
 import "./chunks/chunk.W2YDXTG5.js";
 import "./chunks/chunk.FNYEXUNK.js";
 import "./chunks/chunk.NOWCQZBS.js";
 import {
   SdCarouselItem
-} from "./chunks/chunk.JE5DROBO.js";
+} from "./chunks/chunk.ST34ZDUW.js";
 import "./chunks/chunk.F4VGSDIW.js";
 import {
   SdAccordionGroup
-} from "./chunks/chunk.DUPO2RAV.js";
+} from "./chunks/chunk.VWI6VX73.js";
 import {
   SdAccordion
-} from "./chunks/chunk.BVGYMFAR.js";
+} from "./chunks/chunk.PPWK76KX.js";
 import {
   SdAnimation
-} from "./chunks/chunk.XMHLFXNP.js";
+} from "./chunks/chunk.TZNS32YB.js";
 import "./chunks/chunk.TJOP7HQP.js";
 import {
   SdAudio
-} from "./chunks/chunk.K3WOPEVW.js";
+} from "./chunks/chunk.QCQ7A7DT.js";
 import {
   SdDrawer
-} from "./chunks/chunk.VHCJ4ERI.js";
+} from "./chunks/chunk.YE7KLRVW.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.QBW7TVOK.js";
+} from "./chunks/chunk.56ZWAQO5.js";
 import {
   SdLoader
-} from "./chunks/chunk.RN3MHCKA.js";
+} from "./chunks/chunk.MGFBQQLB.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.IP6WZTQB.js";
+} from "./chunks/chunk.Y6FWMZCH.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
@@ -211,7 +211,7 @@ import {
 import "./chunks/chunk.GWKDETUD.js";
 import "./chunks/chunk.M6QWSNU3.js";
 import "./chunks/chunk.X2OQMWGY.js";
-import "./chunks/chunk.AYA7WMLI.js";
+import "./chunks/chunk.KXLUF5NH.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.U2BN2DBY.js";
-import "../chunks/chunk.HHKPFIAB.js";
-import "../chunks/chunk.AYA7WMLI.js";
+import "../chunks/chunk.7MKQP77O.js";
+import "../chunks/chunk.KXLUF5NH.js";
 import "../chunks/chunk.HQWAKJBV.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {

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

@@ -3043,7 +3043,7 @@
     },
     {
       "name": "sd-tag",
-      "description": "Tags are used as labels to organize things or to indicate a selection.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the tag loses focus.\n- **sd-focus** - Emitted when the tag gains focus.\n- **sd-remove** - Emitted when the remove button is activated.\n- **sd-hide** - Emitted when the hide method is triggered.\n- **sd-after-hide** - Emitted after the tag is hidden and all animations are complete.\n\n### **Methods:**\n - **click()** - Simulates a click on the tag.\n- **focus(options: _FocusOptions_)** - Sets focus on the tag.\n- **blur()** - Removes focus from the tag.\n- **hide()** - Visually hides the tag\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 tag's content.\n- **removable-indicator** - The tag's removability indicator.\n\n### **CSS Properties:**\n - **--sd-tag--default-color-text** - The default text color for tags in their default state. _(default: undefined)_\n- **--sd-tag--default-color-background** - The default color background for tags in their default state. _(default: undefined)_\n- **--sd-tag--default-color-border** - The default color border for tags in their default state. _(default: undefined)_\n- **--sd-tag--default--hover-color-background** - The background color for tags in default state on hover. _(default: undefined)_\n- **--sd-tag--selected--default-color-background** - The default background color for selected tags. _(default: undefined)_\n- **--sd-tag--selected--default-color-text** - The default text color for selected tags. _(default: undefined)_\n- **--sd-tag--selected--default-color-border** - The border color for selected tags in default state. _(default: undefined)_\n- **--sd-tag--selected--hover-color-background** - The background color for selected tags in hover state. _(default: undefined)_\n- **--sd-tag--selected--hover-color-border** - The border color for selected tags in hover state. _(default: undefined)_\n- **--sd-tag--selected--hover-color-text** - The text color for selected tags in hover state. _(default: undefined)_\n- **--sd-tag--selected-border-width** - The border width for selected tags. _(default: undefined)_\n- **--sd-tag--disabled-color-border** - The border color for disabled tags. _(default: undefined)_\n- **--sd-tag-border-radius** - The border radius for tags. _(default: undefined)_\n- **--sd-tag--size-lg-font-size** - The font size for large tags. _(default: undefined)_\n- **--sd-tag--size-sm-font-size** - The font size for small tags. _(default: undefined)_\n- **--sd-tag-font-weight** - The font weight for tags. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The tag's content.\n- **removable-indicator** - The tag's removability indicator.",
+      "description": "Tags are used as labels to organize things or to indicate a selection.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the tag loses focus.\n- **sd-focus** - Emitted when the tag gains focus.\n- **sd-remove** - Emitted when the remove button is activated.\n- **sd-hide** - Emitted when the hide method is triggered.\n- **sd-after-hide** - Emitted after the tag is hidden and all animations are complete.\n\n### **Methods:**\n - **click()** - Simulates a click on the tag.\n- **focus(options: _FocusOptions_)** - Sets focus on the tag.\n- **blur()** - Removes focus from the tag.\n- **hide()** - Visually hides the tag\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 tag's content.\n- **icon-left** - A prefix icon or similar element.\n- **removable-indicator** - The tag's removability indicator.\n\n### **CSS Properties:**\n - **--sd-tag--default-color-text** - The default text color for tags in their default state. _(default: undefined)_\n- **--sd-tag--default-color-background** - The default color background for tags in their default state. _(default: undefined)_\n- **--sd-tag--default-color-border** - The default color border for tags in their default state. _(default: undefined)_\n- **--sd-tag--default--hover-color-background** - The background color for tags in default state on hover. _(default: undefined)_\n- **--sd-tag--selected--default-color-background** - The default background color for selected tags. _(default: undefined)_\n- **--sd-tag--selected--default-color-text** - The default text color for selected tags. _(default: undefined)_\n- **--sd-tag--selected--default-color-border** - The border color for selected tags in default state. _(default: undefined)_\n- **--sd-tag--selected--hover-color-background** - The background color for selected tags in hover state. _(default: undefined)_\n- **--sd-tag--selected--hover-color-border** - The border color for selected tags in hover state. _(default: undefined)_\n- **--sd-tag--selected--hover-color-text** - The text color for selected tags in hover state. _(default: undefined)_\n- **--sd-tag--selected-border-width** - The border width for selected tags. _(default: undefined)_\n- **--sd-tag--disabled-color-border** - The border color for disabled tags. _(default: undefined)_\n- **--sd-tag-border-radius** - The border radius for tags. _(default: undefined)_\n- **--sd-tag--size-lg-font-size** - The font size for large tags. _(default: undefined)_\n- **--sd-tag--size-sm-font-size** - The font size for small tags. _(default: undefined)_\n- **--sd-tag-font-weight** - The font weight for tags. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The tag's content.\n- **removable-indicator** - The tag's removability indicator.\n- **icon-left** - The container that wraps the left icon area.",
       "attributes": [
         {
           "name": "size",

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@solid-design-system/components",
-  "version": "6.0.0-next.20",
+  "version": "6.0.0-next.21",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -6904,7 +6904,7 @@
         },
         {
           "name": "sd-tag",
-          "description": "Tags are used as labels to organize things or to indicate a selection.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the tag loses focus.\n- **sd-focus** - Emitted when the tag gains focus.\n- **sd-remove** - Emitted when the remove button is activated.\n- **sd-hide** - Emitted when the hide method is triggered.\n- **sd-after-hide** - Emitted after the tag is hidden and all animations are complete.\n\n### **Methods:**\n - **click()** - Simulates a click on the tag.\n- **focus(options: _FocusOptions_)** - Sets focus on the tag.\n- **blur()** - Removes focus from the tag.\n- **hide()** - Visually hides the tag\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 tag's content.\n- **removable-indicator** - The tag's removability indicator.\n\n### **CSS Properties:**\n - **--sd-tag--default-color-text** - The default text color for tags in their default state. _(default: undefined)_\n- **--sd-tag--default-color-background** - The default color background for tags in their default state. _(default: undefined)_\n- **--sd-tag--default-color-border** - The default color border for tags in their default state. _(default: undefined)_\n- **--sd-tag--default--hover-color-background** - The background color for tags in default state on hover. _(default: undefined)_\n- **--sd-tag--selected--default-color-background** - The default background color for selected tags. _(default: undefined)_\n- **--sd-tag--selected--default-color-text** - The default text color for selected tags. _(default: undefined)_\n- **--sd-tag--selected--default-color-border** - The border color for selected tags in default state. _(default: undefined)_\n- **--sd-tag--selected--hover-color-background** - The background color for selected tags in hover state. _(default: undefined)_\n- **--sd-tag--selected--hover-color-border** - The border color for selected tags in hover state. _(default: undefined)_\n- **--sd-tag--selected--hover-color-text** - The text color for selected tags in hover state. _(default: undefined)_\n- **--sd-tag--selected-border-width** - The border width for selected tags. _(default: undefined)_\n- **--sd-tag--disabled-color-border** - The border color for disabled tags. _(default: undefined)_\n- **--sd-tag-border-radius** - The border radius for tags. _(default: undefined)_\n- **--sd-tag--size-lg-font-size** - The font size for large tags. _(default: undefined)_\n- **--sd-tag--size-sm-font-size** - The font size for small tags. _(default: undefined)_\n- **--sd-tag-font-weight** - The font weight for tags. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The tag's content.\n- **removable-indicator** - The tag's removability indicator.",
+          "description": "Tags are used as labels to organize things or to indicate a selection.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the tag loses focus.\n- **sd-focus** - Emitted when the tag gains focus.\n- **sd-remove** - Emitted when the remove button is activated.\n- **sd-hide** - Emitted when the hide method is triggered.\n- **sd-after-hide** - Emitted after the tag is hidden and all animations are complete.\n\n### **Methods:**\n - **click()** - Simulates a click on the tag.\n- **focus(options: _FocusOptions_)** - Sets focus on the tag.\n- **blur()** - Removes focus from the tag.\n- **hide()** - Visually hides the tag\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 tag's content.\n- **icon-left** - A prefix icon or similar element.\n- **removable-indicator** - The tag's removability indicator.\n\n### **CSS Properties:**\n - **--sd-tag--default-color-text** - The default text color for tags in their default state. _(default: undefined)_\n- **--sd-tag--default-color-background** - The default color background for tags in their default state. _(default: undefined)_\n- **--sd-tag--default-color-border** - The default color border for tags in their default state. _(default: undefined)_\n- **--sd-tag--default--hover-color-background** - The background color for tags in default state on hover. _(default: undefined)_\n- **--sd-tag--selected--default-color-background** - The default background color for selected tags. _(default: undefined)_\n- **--sd-tag--selected--default-color-text** - The default text color for selected tags. _(default: undefined)_\n- **--sd-tag--selected--default-color-border** - The border color for selected tags in default state. _(default: undefined)_\n- **--sd-tag--selected--hover-color-background** - The background color for selected tags in hover state. _(default: undefined)_\n- **--sd-tag--selected--hover-color-border** - The border color for selected tags in hover state. _(default: undefined)_\n- **--sd-tag--selected--hover-color-text** - The text color for selected tags in hover state. _(default: undefined)_\n- **--sd-tag--selected-border-width** - The border width for selected tags. _(default: undefined)_\n- **--sd-tag--disabled-color-border** - The border color for disabled tags. _(default: undefined)_\n- **--sd-tag-border-radius** - The border radius for tags. _(default: undefined)_\n- **--sd-tag--size-lg-font-size** - The font size for large tags. _(default: undefined)_\n- **--sd-tag--size-sm-font-size** - The font size for small tags. _(default: undefined)_\n- **--sd-tag-font-weight** - The font weight for tags. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The tag's content.\n- **removable-indicator** - The tag's removability indicator.\n- **icon-left** - The container that wraps the left icon area.",
           "doc-url": "",
           "attributes": [
             {
@@ -6960,6 +6960,10 @@
           ],
           "slots": [
             { "name": "", "description": "The tag's content." },
+            {
+              "name": "icon-left",
+              "description": "A prefix icon or similar element."
+            },
             {
               "name": "removable-indicator",
               "description": "The tag's removability indicator."

package/dist-versioned/chunks/{chunk.P3AEQTO4.js → chunk.27BT6YJV.js}

@@ -18,7 +18,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.AYA7WMLI.js";
+} from "./chunk.KXLUF5NH.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,
@@ -210,21 +210,21 @@ var SdNotification = class extends SolidElement {
         warning: "bg-warning",
         error: "bg-error"
       }[this.variant]
-    )}"><sd-6-0-0-next-20-icon name="${{
+    )}"><sd-6-0-0-next-21-icon name="${{
       info: "info-circle",
       success: "confirm-circle",
       warning: "exclamation-circle",
       error: "warning"
-    }[this.variant] || ""}" library="_internal" class="h-6 w-6 text-white"></sd-6-0-0-next-20-icon></slot><div part="content" class="${cx(
+    }[this.variant] || ""}" library="_internal" class="h-6 w-6 text-white"></sd-6-0-0-next-21-icon></slot><div part="content" class="${cx(
       "h-full w-full p-1 gap-2 flex items-center justify-stretch bg-white",
       "border-solid border-[1px] border-l-0 border-neutral-400",
       {
-        info: "sd-6-0-0-next-20-notification--info-color-background",
-        success: "sd-6-0-0-next-20-notification--success-color-background",
-        warning: "sd-6-0-0-next-20-notification--warning-color-background",
-        error: "sd-6-0-0-next-20-notification--error-color-background"
+        info: "sd-6-0-0-next-21-notification--info-color-background",
+        success: "sd-6-0-0-next-21-notification--success-color-background",
+        warning: "sd-6-0-0-next-21-notification--warning-color-background",
+        error: "sd-6-0-0-next-21-notification--error-color-background"
       }[this.variant]
-    )}"><slot id="message" part="message" class="block w-full pl-3 py-2"></slot>${this.closable ? html`<sd-6-0-0-next-20-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-6-0-0-next-20-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-6-0-0-next-20-icon></sd-6-0-0-next-20-button>` : ""}</div>${this.durationIndicator ? html`<div part="duration-indicator__elapsed" id="duration-indicator__elapsed" style="${`animation-duration: ${this.duration}ms`}" class="${cx(`absolute w-0 h-[2px] bottom-0 bg-primary z-10 animate-grow`)}"></div><div part="duration-indicator__total" class="w-full h-[2px] bottom-0 absolute border border-neutral-400"></div>` : ""}</div></div>`;
+    )}"><slot id="message" part="message" class="block w-full pl-3 py-2"></slot>${this.closable ? html`<sd-6-0-0-next-21-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-6-0-0-next-21-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-6-0-0-next-21-icon></sd-6-0-0-next-21-button>` : ""}</div>${this.durationIndicator ? html`<div part="duration-indicator__elapsed" id="duration-indicator__elapsed" style="${`animation-duration: ${this.duration}ms`}" class="${cx(`absolute w-0 h-[2px] bottom-0 bg-primary z-10 animate-grow`)}"></div><div part="duration-indicator__total" class="w-full h-[2px] bottom-0 absolute border border-neutral-400"></div>` : ""}</div></div>`;
   }
 };
 /**
@@ -269,7 +269,7 @@ __decorateClass([
   watch("duration")
 ], SdNotification.prototype, "handleDurationChange", 1);
 SdNotification = __decorateClass([
-  customElement("sd-6-0-0-next-20-notification")
+  customElement("sd-6-0-0-next-21-notification")
 ], SdNotification);
 setDefaultAnimation("notification.show", {
   keyframes: [

package/dist-versioned/chunks/{chunk.N4OTT34O.js → chunk.2RL6TBHJ.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.AYA7WMLI.js";
+} from "./chunk.KXLUF5NH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -60,10 +60,10 @@ var SdTeaser = class extends SolidElement {
       "flex",
       {
         white: "bg-white",
-        "white border-neutral-400": "bg-white border sd-6-0-0-next-20-teaser--neutral-400-color-border",
-        "neutral-100": "sd-6-0-0-next-20-teaser--neutral-100-color-background",
+        "white border-neutral-400": "bg-white border sd-6-0-0-next-21-teaser--neutral-400-color-border",
+        "neutral-100": "sd-6-0-0-next-21-teaser--neutral-100-color-background",
         primary: "bg-primary text-white",
-        "primary-100": "sd-6-0-0-next-20-teaser--primary-100-color-background"
+        "primary-100": "sd-6-0-0-next-21-teaser--primary-100-color-background"
       }[this.variant],
       this._orientation === "vertical" && "flex-col",
       this._orientation === "horizontal" && "flex-row gap-8",
@@ -105,7 +105,7 @@ __decorateClass([
   state()
 ], SdTeaser.prototype, "_orientation", 2);
 SdTeaser = __decorateClass([
-  customElement("sd-6-0-0-next-20-teaser")
+  customElement("sd-6-0-0-next-21-teaser")
 ], SdTeaser);
 
 export {