@solid-design-system/components 5.13.7 → 5.13.8

package/dist/custom-elements.json

@@ -20577,7 +20577,7 @@
   "package": {
     "name": "@solid-design-system/components",
     "description": "Solid Design System: Components",
-    "version": "5.13.7",
+    "version": "5.13.8",
     "author": "Union Investment",
     "homepage": "https://solid-design-system.fe.union-investment.de/docs/",
     "license": "MIT"

package/dist/solid-components.js

@@ -1,191 +1,191 @@
 import "./chunks/chunk.HAL7R4WT.js";
 import {
   SdVideo
-} from "./chunks/chunk.HDOXCV5R.js";
+} from "./chunks/chunk.AAM4EQUJ.js";
 import {
   setupAutocomplete
 } from "./chunks/chunk.6DKXZWRN.js";
 import {
   SdTab
-} from "./chunks/chunk.SVC3IWAA.js";
+} from "./chunks/chunk.JEZL6XOP.js";
 import {
   SdTabGroup
-} from "./chunks/chunk.WJAVDZC4.js";
+} from "./chunks/chunk.3KHJBMC3.js";
 import {
   SdTabPanel
-} from "./chunks/chunk.EQ6ES4D4.js";
+} from "./chunks/chunk.K3X5P6CZ.js";
 import {
   SdTeaser
-} from "./chunks/chunk.D4DTFLNK.js";
+} from "./chunks/chunk.YCDY43E5.js";
 import {
   SdTeaserMedia
-} from "./chunks/chunk.R7SUBHGP.js";
+} from "./chunks/chunk.NTFOK2AA.js";
 import {
   SdTextarea
-} from "./chunks/chunk.COXPSVWJ.js";
+} from "./chunks/chunk.77NSPIFM.js";
 import {
   SdTooltip
-} from "./chunks/chunk.5PBRPBRT.js";
+} from "./chunks/chunk.OSOEO2ZC.js";
 import {
   SdRangeTick
-} from "./chunks/chunk.XHOP5USY.js";
+} from "./chunks/chunk.2LGZXRL4.js";
 import {
   SdScrollable
-} from "./chunks/chunk.WMLESPZB.js";
+} from "./chunks/chunk.QUGFVQCM.js";
 import {
   SdSelect
-} from "./chunks/chunk.2CWYTGUF.js";
+} from "./chunks/chunk.AZJYD66N.js";
 import {
   SdSpinner
-} from "./chunks/chunk.VEBQYO6P.js";
+} from "./chunks/chunk.7VTXJNYA.js";
 import {
   SdStep
-} from "./chunks/chunk.I34ENUW2.js";
+} from "./chunks/chunk.ZEI4OKHM.js";
 import {
   SdStepGroup
-} from "./chunks/chunk.KTW4YKIN.js";
+} from "./chunks/chunk.3M4X7AEY.js";
 import {
   SdSwitch
-} from "./chunks/chunk.4GOBDXSS.js";
+} from "./chunks/chunk.UERVAUNW.js";
 import {
   SdOptgroup
-} from "./chunks/chunk.3IWFEPZF.js";
+} from "./chunks/chunk.HGH5QNIU.js";
 import {
   SdOption
-} from "./chunks/chunk.A5Z4VKXC.js";
+} from "./chunks/chunk.VSDARV47.js";
 import {
   SdQuickfact
-} from "./chunks/chunk.S4W23ZFB.js";
+} from "./chunks/chunk.LG4F5X4T.js";
 import {
   SdRadioButton
-} from "./chunks/chunk.LJGEETGS.js";
+} from "./chunks/chunk.QVXVVXID.js";
 import {
   SdRadioGroup
-} from "./chunks/chunk.VSSD4EBM.js";
+} from "./chunks/chunk.XHPPN7XW.js";
 import {
   SdRadio
-} from "./chunks/chunk.I55X5D52.js";
+} from "./chunks/chunk.JW3IIMMD.js";
 import {
   SdRange
-} from "./chunks/chunk.YGJNZUTI.js";
+} from "./chunks/chunk.2SWC2CD2.js";
 import "./chunks/chunk.D3YSIVTB.js";
 import {
   SdLink
-} from "./chunks/chunk.E3JOKBV7.js";
+} from "./chunks/chunk.W77IAZZL.js";
 import {
   SdMapMarker
-} from "./chunks/chunk.SGY6Q5FM.js";
+} from "./chunks/chunk.7ZBLKJT5.js";
 import {
   SdMenu
-} from "./chunks/chunk.4JS6YQGE.js";
+} from "./chunks/chunk.LJ3YEQTI.js";
 import {
   SdMenuItem
-} from "./chunks/chunk.UMJTGYQ7.js";
+} from "./chunks/chunk.LH6QPA5C.js";
 import "./chunks/chunk.KEJFWGZI.js";
 import {
   SdNavigationItem
-} from "./chunks/chunk.VPTCQBGB.js";
+} from "./chunks/chunk.FFBPU23K.js";
 import {
   SdNotification
-} from "./chunks/chunk.CZXEOVSI.js";
+} from "./chunks/chunk.IJFMUKNI.js";
 import {
   SdInclude
-} from "./chunks/chunk.22XVLL4U.js";
+} from "./chunks/chunk.KMZJOXPV.js";
 import {
   SdInput
-} from "./chunks/chunk.7AKLVTJJ.js";
+} from "./chunks/chunk.OWWOKHLM.js";
 import {
   SdDialog
-} from "./chunks/chunk.K2A6FAQM.js";
+} from "./chunks/chunk.4WRDUSNG.js";
 import {
   SdDivider
-} from "./chunks/chunk.7L25CLNU.js";
+} from "./chunks/chunk.WI2LQTA7.js";
 import {
   SdDropdown
-} from "./chunks/chunk.3HHT2OQH.js";
+} from "./chunks/chunk.6DQNB3SA.js";
 import {
   SdExpandable
-} from "./chunks/chunk.VPU4YXCW.js";
+} from "./chunks/chunk.S7SZ7PIX.js";
 import {
   SdFlipcard
-} from "./chunks/chunk.L3CJJWQH.js";
+} from "./chunks/chunk.7EDAY5SR.js";
 import {
   SdHeader
-} from "./chunks/chunk.NIOP54NF.js";
+} from "./chunks/chunk.2LUZ5ADD.js";
 import {
   SdCheckbox
-} from "./chunks/chunk.OKJADCUF.js";
+} from "./chunks/chunk.UGN3I35T.js";
 import {
   SdCheckboxGroup
-} from "./chunks/chunk.NIVOUKTJ.js";
+} from "./chunks/chunk.JT54G5CA.js";
 import {
   SdCombobox
-} from "./chunks/chunk.33JOPIXE.js";
+} from "./chunks/chunk.WNXSYKQB.js";
 import {
   SdTag
-} from "./chunks/chunk.LVKMRGF7.js";
+} from "./chunks/chunk.ELZAOG6X.js";
 import {
   SdPopup
-} from "./chunks/chunk.VISHTUP5.js";
+} from "./chunks/chunk.7RNERN6N.js";
 import "./chunks/chunk.GI7VDIWX.js";
 import "./chunks/chunk.WBJBQ4QI.js";
 import "./chunks/chunk.UIQBHPD3.js";
 import {
   SdBadge
-} from "./chunks/chunk.VNGVFWX6.js";
+} from "./chunks/chunk.HS7LHZQD.js";
 import {
   SdBrandshape
-} from "./chunks/chunk.R6QYQOQJ.js";
+} from "./chunks/chunk.NGFE3KFR.js";
 import {
   SdBreadcrumb
-} from "./chunks/chunk.ZSG33GER.js";
+} from "./chunks/chunk.5WIXR2JN.js";
 import {
   SdBreadcrumbItem
-} from "./chunks/chunk.3P4CWN6B.js";
-import "./chunks/chunk.TB76LMSK.js";
+} from "./chunks/chunk.MUJYVT7H.js";
+import "./chunks/chunk.5IFTI3YX.js";
 import {
   SdCarousel
-} from "./chunks/chunk.CURD6RBZ.js";
+} from "./chunks/chunk.X6XICQDG.js";
 import "./chunks/chunk.W2YDXTG5.js";
 import "./chunks/chunk.FNYEXUNK.js";
 import "./chunks/chunk.NOWCQZBS.js";
 import {
   SdCarouselItem
-} from "./chunks/chunk.3H34BS4K.js";
+} from "./chunks/chunk.QI2AW6AQ.js";
 import "./chunks/chunk.F4VGSDIW.js";
 import {
   SdAccordionGroup
-} from "./chunks/chunk.S4BMH7I6.js";
+} from "./chunks/chunk.X5J22XAO.js";
 import {
   SdAccordion
-} from "./chunks/chunk.KGO6SGAI.js";
+} from "./chunks/chunk.V34O6IDJ.js";
 import {
   SdAnimation
-} from "./chunks/chunk.6P3RKSUO.js";
+} from "./chunks/chunk.EV2J2MEU.js";
 import "./chunks/chunk.TJOP7HQP.js";
 import {
   SdAudio
-} from "./chunks/chunk.2USKLT7E.js";
+} from "./chunks/chunk.YGOB765P.js";
 import {
   SdDrawer
-} from "./chunks/chunk.DG2EQDME.js";
+} from "./chunks/chunk.VE7RWFMR.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.PMP3SJSG.js";
+} from "./chunks/chunk.3V55NXJN.js";
 import {
   SdLoader
-} from "./chunks/chunk.5DBXOC2V.js";
+} from "./chunks/chunk.DHGVK7PH.js";
 import "./chunks/chunk.KVKRZJS7.js";
 import "./chunks/chunk.IVMQWO2L.js";
 import "./chunks/chunk.N4LHE3QK.js";
 import "./chunks/chunk.B4BZKR24.js";
 import {
   SdIcon
-} from "./chunks/chunk.CZOZQ3VO.js";
+} from "./chunks/chunk.BWILTNTK.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
@@ -201,7 +201,7 @@ import {
 import "./chunks/chunk.P3RYNUKZ.js";
 import "./chunks/chunk.YXCPZAFU.js";
 import "./chunks/chunk.X2OQMWGY.js";
-import "./chunks/chunk.YTLWADMX.js";
+import "./chunks/chunk.MOXWYOS4.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.VISHTUP5.js";
-import "../chunks/chunk.YTLWADMX.js";
+import "../chunks/chunk.7RNERN6N.js";
+import "../chunks/chunk.MOXWYOS4.js";
 import "../chunks/chunk.HQWAKJBV.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {

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

@@ -2058,6 +2058,43 @@
         }
       ]
     },
+    {
+      "name": "sd-quickfact",
+      "description": "Accordion shows a brief summary and expands to show additional content.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the accordion opens.\n- **sd-after-show** - Emitted after the accordion opens and all animations are complete.\n- **sd-hide** - Emitted when the accordion closes.\n- **sd-after-hide** - Emitted after the accordion closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the accordion.\n- **hide()** - Hides the accordion\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 - **icon** - Optional icon to show in the header. Works best with `<sd-icon>`.\n- _default_ - The accordion main content.\n- **summary** - The accordion summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sd-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sd-icon>`.\n\n### **CSS Parts:**\n - **icon** - The container that wraps the icon.\n- **base** - The component's base wrapper.\n- **header** - The header that wraps both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **summary-border** - The container that wraps the currently active accordions border.\n- **content** - The container that wraps the accordion content slot.\n- **content__slot** - The accordion content slot.",
+      "attributes": [
+        {
+          "name": "expandable",
+          "description": "Determines if the quickfact is not interactive. When set to `true`, the quickfact will not expand or collapse.",
+          "values": []
+        },
+        {
+          "name": "open",
+          "description": "Indicates whether or not the accordion is open. You can toggle this attribute to show and hide the accordion, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the accordion' open state.",
+          "values": []
+        },
+        {
+          "name": "summary",
+          "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+          "values": []
+        },
+        {
+          "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-quickfact--docs"
+        }
+      ]
+    },
     {
       "name": "sd-radio",
       "description": "A radio allows to select only one value from a set of options. Clicking on an unchecked radio will deselect the other one(s).\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the control loses focus.\n- **sd-focus** - Emitted when the control gains focus.\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 radio's label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control--unchecked** - The radio control when the radio is unchecked.\n- **control--checked** - The radio control when the radio is checked.\n- **checked** - The dot inside the radio component when the radio is checked.\n- **label** - The container that wraps the radio's label.",
@@ -2370,43 +2407,6 @@
         }
       ]
     },
-    {
-      "name": "sd-quickfact",
-      "description": "Accordion shows a brief summary and expands to show additional content.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the accordion opens.\n- **sd-after-show** - Emitted after the accordion opens and all animations are complete.\n- **sd-hide** - Emitted when the accordion closes.\n- **sd-after-hide** - Emitted after the accordion closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the accordion.\n- **hide()** - Hides the accordion\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 - **icon** - Optional icon to show in the header. Works best with `<sd-icon>`.\n- _default_ - The accordion main content.\n- **summary** - The accordion summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sd-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sd-icon>`.\n\n### **CSS Parts:**\n - **icon** - The container that wraps the icon.\n- **base** - The component's base wrapper.\n- **header** - The header that wraps both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **summary-border** - The container that wraps the currently active accordions border.\n- **content** - The container that wraps the accordion content slot.\n- **content__slot** - The accordion content slot.",
-      "attributes": [
-        {
-          "name": "expandable",
-          "description": "Determines if the quickfact is not interactive. When set to `true`, the quickfact will not expand or collapse.",
-          "values": []
-        },
-        {
-          "name": "open",
-          "description": "Indicates whether or not the accordion is open. You can toggle this attribute to show and hide the accordion, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the accordion' open state.",
-          "values": []
-        },
-        {
-          "name": "summary",
-          "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
-          "values": []
-        },
-        {
-          "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-quickfact--docs"
-        }
-      ]
-    },
     {
       "name": "sd-select",
       "description": "Selects allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **sd-change** - Emitted when the control's value changes.\n- **sd-clear** - Emitted when the control's value is cleared.\n- **sd-input** - Emitted when the control receives input.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-blur** - Emitted when the control loses focus.\n- **sd-show** - Emitted when the select's menu opens.\n- **sd-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **sd-hide** - Emitted when the select's menu closes.\n- **sd-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\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 listbox options. Must be `<sd-option>` elements. You can use `<sd-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **tooltip** - An optional tooltip that helps describe the input. Use this slot with the `sd-tooltip` component.\n\n### **CSS Properties:**\n - **--tag-max-width** - Set the maximum width of the tags and to show an ellipsis. Defaults to \"15ch\" _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the combobox, clear icon, and expand button.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiselect` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__removable-indicator** - The tag's remove button.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",

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.13.7",
+  "version": "5.13.8",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/dist-versioned/chunks/{chunk.XHOP5USY.js → chunk.2LGZXRL4.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.YTLWADMX.js";
+} from "./chunk.MOXWYOS4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -28,7 +28,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdRangeTick.prototype, "subtick", 2);
 SdRangeTick = __decorateClass([
-  customElement("sd-5-13-7-range-tick")
+  customElement("sd-5-13-8-range-tick")
 ], SdRangeTick);
 
 export {

package/dist-versioned/chunks/{chunk.NIOP54NF.js → chunk.2LUZ5ADD.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.YTLWADMX.js";
+} from "./chunk.MOXWYOS4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -71,7 +71,7 @@ __decorateClass([
   debounce(100)
 ], SdHeader.prototype, "updateCalculatedHeight", 1);
 SdHeader = __decorateClass([
-  customElement("sd-5-13-7-header")
+  customElement("sd-5-13-8-header")
 ], SdHeader);
 
 export {

package/dist-versioned/chunks/{chunk.YGJNZUTI.js → chunk.2SWC2CD2.js}

@@ -18,7 +18,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.YTLWADMX.js";
+} from "./chunk.MOXWYOS4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -399,10 +399,10 @@ var SdRange = class extends SolidElement {
           ariaLabel = this.tooltipFormatter(value);
         }
       }
-      return html`<sd-5-13-7-tooltip hoist trigger="focus" disabled="${ifDefined(this.disabled || this.visuallyDisabled || this.noTooltip ? true : void 0)}"><div id="${id}" part="thumb" role="slider" tabindex="${this.disabled || this.visuallyDisabled ? -1 : 0}" aria-disabled="${ifDefined(this.disabled || this.visuallyDisabled ? "true" : void 0)}" aria-labelledby="${ariaLabeledBy}" aria-label="${ariaLabel}" aria-valuemax="${this.max}" aria-valuemin="${this.min}" aria-valuenow="${value}" aria-valuetext="${this.tooltipFormatter(value)}" data-range-id="${rangeId}" @pointerdown="${this.onClickThumb}" @pointermove="${this.onDragThumb}" @pointerup="${this.onReleaseThumb}" @pointercancel="${this.onReleaseThumb}" @pointerleave="${this.onReleaseThumb}" @keydown="${this.onKeyPress}" @focus="${this.onFocusThumb}" class="${cx(
+      return html`<sd-5-13-8-tooltip hoist trigger="focus" disabled="${ifDefined(this.disabled || this.visuallyDisabled || this.noTooltip ? true : void 0)}"><div id="${id}" part="thumb" role="slider" tabindex="${this.disabled || this.visuallyDisabled ? -1 : 0}" aria-disabled="${ifDefined(this.disabled || this.visuallyDisabled ? "true" : void 0)}" aria-labelledby="${ariaLabeledBy}" aria-label="${ariaLabel}" aria-valuemax="${this.max}" aria-valuemin="${this.min}" aria-valuenow="${value}" aria-valuetext="${this.tooltipFormatter(value)}" data-range-id="${rangeId}" @pointerdown="${this.onClickThumb}" @pointermove="${this.onDragThumb}" @pointerup="${this.onReleaseThumb}" @pointercancel="${this.onReleaseThumb}" @pointerleave="${this.onReleaseThumb}" @keydown="${this.onKeyPress}" @focus="${this.onFocusThumb}" class="${cx(
         "rounded-full absolute top-0 size-4 hover:cursor-grab after:-inset-2",
         this.disabled || this.visuallyDisabled ? "bg-neutral-500 outline-none" : "bg-primary cursor-pointer focus-visible:focus-outline"
-      )}"></div></sd-5-13-7-tooltip>`;
+      )}"></div></sd-5-13-8-tooltip>`;
     });
   }
   render() {
@@ -471,7 +471,7 @@ __decorateClass([
   property({ type: String })
 ], SdRange.prototype, "value", 1);
 SdRange = __decorateClass([
-  customElement("sd-5-13-7-range")
+  customElement("sd-5-13-8-range")
 ], SdRange);
 
 export {

package/dist-versioned/chunks/{chunk.WJAVDZC4.js → chunk.3KHJBMC3.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.YTLWADMX.js";
+} from "./chunk.MOXWYOS4.js";
 import {
   __decorateClass,
   __spreadValues
@@ -37,8 +37,8 @@ var SdTabGroup = class extends SolidElement {
   }
   connectedCallback() {
     const whenAllDefined = Promise.all([
-      customElements.whenDefined("sd-5-13-7-tab"),
-      customElements.whenDefined("sd-5-13-7-tab-panel")
+      customElements.whenDefined("sd-5-13-8-tab"),
+      customElements.whenDefined("sd-5-13-8-tab-panel")
     ]);
     super.connectedCallback();
     this.resizeObserver = new ResizeObserver(() => {
@@ -81,20 +81,20 @@ var SdTabGroup = class extends SolidElement {
   }
   getAllTabs(options = { includeDisabled: true }) {
     const slot = this.shadowRoot.querySelector('slot[name="nav"]');
-    return Array.from(slot.assignedElements()).map((el) => el.tagName.toLocaleLowerCase() === "sd-5-13-7-tab" ? el : el.querySelector("sd-5-13-7-tab")).filter((el) => {
-      return el && options.includeDisabled ? el.tagName.toLowerCase() === "sd-5-13-7-tab" : el.tagName.toLowerCase() === "sd-5-13-7-tab" && !el.disabled;
+    return Array.from(slot.assignedElements()).map((el) => el.tagName.toLocaleLowerCase() === "sd-5-13-8-tab" ? el : el.querySelector("sd-5-13-8-tab")).filter((el) => {
+      return el && options.includeDisabled ? el.tagName.toLowerCase() === "sd-5-13-8-tab" : el.tagName.toLowerCase() === "sd-5-13-8-tab" && !el.disabled;
     });
   }
   getAllPanels() {
-    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-5-13-7-tab-panel");
+    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-5-13-8-tab-panel");
   }
   getActiveTab() {
     return this.tabs.find((t) => t.matches(":focus"));
   }
   handleClick(event) {
     const target = event.target;
-    const tab = target.closest("sd-5-13-7-tab");
-    const tabGroup = tab == null ? void 0 : tab.closest("sd-5-13-7-tab-group");
+    const tab = target.closest("sd-5-13-8-tab");
+    const tabGroup = tab == null ? void 0 : tab.closest("sd-5-13-8-tab-group");
     if (tabGroup !== this) {
       return;
     }
@@ -104,8 +104,8 @@ var SdTabGroup = class extends SolidElement {
   }
   handleKeyDown(event) {
     const target = event.target;
-    const tab = target.closest("sd-5-13-7-tab");
-    const tabGroup = tab == null ? void 0 : tab.closest("sd-5-13-7-tab-group");
+    const tab = target.closest("sd-5-13-8-tab");
+    const tabGroup = tab == null ? void 0 : tab.closest("sd-5-13-8-tab-group");
     if (tabGroup !== this) {
       return;
     }
@@ -132,7 +132,7 @@ var SdTabGroup = class extends SolidElement {
     if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
       const activeEl = this.tabs.find((t) => t.matches(":focus"));
       const isRtl = this.localize.dir() === "rtl";
-      if ((activeEl == null ? void 0 : activeEl.tagName.toLowerCase()) === "sd-5-13-7-tab") {
+      if ((activeEl == null ? void 0 : activeEl.tagName.toLowerCase()) === "sd-5-13-8-tab") {
         let index = this.tabs.indexOf(activeEl);
         if (event.key === "Home") {
           index = 0;
@@ -253,15 +253,15 @@ var SdTabGroup = class extends SolidElement {
     return html`<div part="base" class="${cx("flex flex-col rounded-none")}" @click="${this.handleClick}" @keydown="${this.handleKeyDown}"><div part="nav" class="${cx(this.hasScrollControls && "relative py-0 px-12")}">${this.hasScrollControls ? html`<button part="scroll-button--start" exportparts="base:scroll-button__base" tabindex="-1" aria-hidden="true" disabled="${ifDefined(!this.canScroll.left || void 0)}" class="${cx(
       "sd-interactive flex items-center justify-center absolute top-0 bottom-0 left-0 !outline-offset-0 border-b border-neutral-400 z-10",
       this.localize.dir() === "rtl" && "left-auto right-0"
-    )}" @click="${this.handleScrollToStart}"><sd-5-13-7-icon library="_internal" name="${isRtl ? "chevron-up" : "chevron-down"}" label="previous" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-5-13-7-icon></button>` : ""}<div part="scroll-container" class="flex overflow-x-auto focus-visible:focus-outline !outline-offset-0"><div part="tabs" class="${cx("flex flex-auto relative flex-row")}" role="tablist">${((_a = this.activeTab) == null ? void 0 : _a.variant) !== "container" ? html`<div part="active-tab-indicator" id="indicator" class="absolute h-1 bg-accent bottom-0 transition-[transform,width] duration-medium ease-in-out z-30"></div>` : ""}<div part="separation" class="border-neutral-400 absolute w-full h-0.25 bottom-0 border-b z-10"></div><slot name="nav" @slotchange="${this.syncTabsAndPanels}"></slot></div></div>${this.hasScrollControls ? html`<button part="scroll-button--end" exportparts="base:scroll-button__base" tabindex="-1" aria-hidden="true" disabled="${ifDefined(!this.canScroll.right || void 0)}" class="${cx(
+    )}" @click="${this.handleScrollToStart}"><sd-5-13-8-icon library="_internal" name="${isRtl ? "chevron-up" : "chevron-down"}" label="previous" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-5-13-8-icon></button>` : ""}<div part="scroll-container" class="flex overflow-x-auto focus-visible:focus-outline !outline-offset-0"><div part="tabs" class="${cx("flex flex-auto relative flex-row")}" role="tablist">${((_a = this.activeTab) == null ? void 0 : _a.variant) !== "container" ? html`<div part="active-tab-indicator" id="indicator" class="absolute h-1 bg-accent bottom-0 transition-[transform,width] duration-medium ease-in-out z-30"></div>` : ""}<div part="separation" class="border-neutral-400 absolute w-full h-0.25 bottom-0 border-b z-10"></div><slot name="nav" @slotchange="${this.syncTabsAndPanels}"></slot></div></div>${this.hasScrollControls ? html`<button part="scroll-button--end" exportparts="base:scroll-button__base" tabindex="-1" aria-hidden="true" disabled="${ifDefined(!this.canScroll.right || void 0)}" class="${cx(
       "sd-interactive flex items-center justify-center absolute top-0 bottom-0 right-0 !outline-offset-0 border-b border-neutral-400 z-10",
       this.localize.dir() === "rtl" && "right-auto left-0"
-    )}" @click="${this.handleScrollToEnd}"><sd-5-13-7-icon library="_internal" name="${isRtl ? "chevron-down" : "chevron-up"}" label="next" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-5-13-7-icon></button>` : ""}</div><slot part="body" class="${cx("block auto py-8 px-6", this.variant === "container" && "border border-neutral-400 border-t-0")}" @slotchange="${this.syncTabsAndPanels}"></slot></div>`;
+    )}" @click="${this.handleScrollToEnd}"><sd-5-13-8-icon library="_internal" name="${isRtl ? "chevron-down" : "chevron-up"}" label="next" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-5-13-8-icon></button>` : ""}</div><slot part="body" class="${cx("block auto py-8 px-6", this.variant === "container" && "border border-neutral-400 border-t-0")}" @slotchange="${this.syncTabsAndPanels}"></slot></div>`;
   }
 };
 SdTabGroup.styles = [
   ...SolidElement.styles,
-  css`:host{box-sizing:border-box;display:block}[part=scroll-container]{scrollbar-width:none}[part=scroll-container]::-webkit-scrollbar{height:var(--sd-spacing-0,0);width:var(--sd-spacing-0,0)}::slotted(sd-5-13-7-tab-panel){--padding:1rem 0}::slotted(sd-5-13-7-tab-panel:focus-visible){outline-color:rgb(var(--sd-color-primary,0 53 142)/1);outline-offset:2px;outline-style:solid;outline-width:2px}`
+  css`:host{box-sizing:border-box;display:block}[part=scroll-container]{scrollbar-width:none}[part=scroll-container]::-webkit-scrollbar{height:var(--sd-spacing-0,0);width:var(--sd-spacing-0,0)}::slotted(sd-5-13-8-tab-panel){--padding:1rem 0}::slotted(sd-5-13-8-tab-panel:focus-visible){outline-color:rgb(var(--sd-color-primary,0 53 142)/1);outline-offset:2px;outline-style:solid;outline-width:2px}`
 ];
 __decorateClass([
   query("[part=base]")
@@ -294,7 +294,7 @@ __decorateClass([
   debounce(20)
 ], SdTabGroup.prototype, "handleScroll", 1);
 SdTabGroup = __decorateClass([
-  customElement("sd-5-13-7-tab-group")
+  customElement("sd-5-13-8-tab-group")
 ], SdTabGroup);
 
 export {

package/dist-versioned/chunks/{chunk.KTW4YKIN.js → chunk.3M4X7AEY.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.YTLWADMX.js";
+} from "./chunk.MOXWYOS4.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-13-7-step");
+    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-5-13-8-step");
   }
   /**
    * Sets the active step.
@@ -120,7 +120,7 @@ __decorateClass([
   watch("notInteractive")
 ], SdStepGroup.prototype, "handleInteractivityChange", 1);
 SdStepGroup = __decorateClass([
-  customElement("sd-5-13-7-step-group")
+  customElement("sd-5-13-8-step-group")
 ], SdStepGroup);
 
 export {