@solid-design-system/components 5.12.0 → 5.13.2

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

@@ -1,8 +1,8 @@
 import {
   SdStepGroup
-} from "../../chunks/chunk.K5VSAEEA.js";
+} from "../../chunks/chunk.OW4S63FI.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.QWL32OLS.js";
+import "../../chunks/chunk.D43BWQVS.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/switch/switch.js

@@ -1,11 +1,11 @@
 import {
   SdSwitch
-} from "../../chunks/chunk.GJKBJOMN.js";
+} from "../../chunks/chunk.QUUVWSUV.js";
 import "../../chunks/chunk.GI7VDIWX.js";
 import "../../chunks/chunk.KVKRZJS7.js";
 import "../../chunks/chunk.IVMQWO2L.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.QWL32OLS.js";
+import "../../chunks/chunk.D43BWQVS.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/tab/tab.d.ts

@@ -1,9 +1,12 @@
+import { LocalizeController } from '../../utilities/localize';
 import SolidElement from '../../internal/solid-element';
 export default class SdTab extends SolidElement {
     private readonly attrId;
     private readonly componentId;
     private readonly hasSlotController;
+    localize: LocalizeController;
     tab: HTMLElement;
+    currentIndicator: HTMLElement;
     variant: 'default' | 'container';
     active: boolean;
     disabled: boolean;

package/dist/components/tab/tab.js

@@ -1,9 +1,12 @@
 import {
   SdTab
-} from "../../chunks/chunk.L2D6TOK4.js";
+} from "../../chunks/chunk.3ZINXNZU.js";
 import "../../chunks/chunk.IVMQWO2L.js";
+import "../../chunks/chunk.YKM42GKF.js";
+import "../../chunks/chunk.P3RYNUKZ.js";
+import "../../chunks/chunk.YXCPZAFU.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.QWL32OLS.js";
+import "../../chunks/chunk.D43BWQVS.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/tab-group/tab-group.d.ts

@@ -11,6 +11,8 @@ export default class SdTabGroup extends SolidElement {
     tabGroup: HTMLElement;
     body: HTMLSlotElement;
     nav: HTMLElement;
+    indicator: HTMLElement | null;
+    private tabsContainer;
     hasScrollControls: boolean;
     variant: string;
     activation: 'auto' | 'manual';
@@ -27,6 +29,7 @@ export default class SdTabGroup extends SolidElement {
     private setAriaLabels;
     private syncTabsAndPanels;
     private updateScrollControls;
+    private repositionIndicator;
     show(panel: string): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];

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

@@ -1,8 +1,8 @@
 import {
   SdTabGroup
-} from "../../chunks/chunk.VD6EMWBX.js";
+} from "../../chunks/chunk.R2BO3KFV.js";
 import "../../chunks/chunk.WDWV53JP.js";
-import "../../chunks/chunk.F4RHOUGP.js";
+import "../../chunks/chunk.YYQORGQY.js";
 import "../../chunks/chunk.IIYSG3NP.js";
 import "../../chunks/chunk.7VPFFNHR.js";
 import "../../chunks/chunk.ZYF25H5G.js";
@@ -13,7 +13,7 @@ import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.P3RYNUKZ.js";
 import "../../chunks/chunk.YXCPZAFU.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.QWL32OLS.js";
+import "../../chunks/chunk.D43BWQVS.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.2E6AZ7IS.js";
+} from "../../chunks/chunk.KXEWTKH5.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.QWL32OLS.js";
+import "../../chunks/chunk.D43BWQVS.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.2I3XKHRL.js";
-import "../../chunks/chunk.F4RHOUGP.js";
+} from "../../chunks/chunk.VRQD64HC.js";
+import "../../chunks/chunk.YYQORGQY.js";
 import "../../chunks/chunk.IIYSG3NP.js";
 import "../../chunks/chunk.7VPFFNHR.js";
 import "../../chunks/chunk.ZYF25H5G.js";
@@ -12,7 +12,7 @@ import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.P3RYNUKZ.js";
 import "../../chunks/chunk.YXCPZAFU.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.QWL32OLS.js";
+import "../../chunks/chunk.D43BWQVS.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.FKIK5XXL.js";
+} from "../../chunks/chunk.KS37HIDJ.js";
 import "../../chunks/chunk.IVMQWO2L.js";
-import "../../chunks/chunk.QWL32OLS.js";
+import "../../chunks/chunk.D43BWQVS.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.LBZP6N7M.js";
+} from "../../chunks/chunk.TC76S4MF.js";
 import "../../chunks/chunk.IVMQWO2L.js";
-import "../../chunks/chunk.QWL32OLS.js";
+import "../../chunks/chunk.D43BWQVS.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.UTF4KIPA.js";
+} from "../../chunks/chunk.NK4QH6PT.js";
 import "../../chunks/chunk.GI7VDIWX.js";
 import "../../chunks/chunk.KVKRZJS7.js";
 import "../../chunks/chunk.IVMQWO2L.js";
-import "../../chunks/chunk.F4RHOUGP.js";
+import "../../chunks/chunk.YYQORGQY.js";
 import "../../chunks/chunk.IIYSG3NP.js";
 import "../../chunks/chunk.7VPFFNHR.js";
 import "../../chunks/chunk.ZYF25H5G.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.QWL32OLS.js";
+import "../../chunks/chunk.D43BWQVS.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.KSDF7SV6.js";
-import "../../chunks/chunk.JW6RZW7I.js";
+} from "../../chunks/chunk.ITFFE5ZG.js";
+import "../../chunks/chunk.NVFHCFFY.js";
 import "../../chunks/chunk.IVMQWO2L.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.F4RHOUGP.js";
+import "../../chunks/chunk.YYQORGQY.js";
 import "../../chunks/chunk.IIYSG3NP.js";
 import "../../chunks/chunk.7VPFFNHR.js";
 import "../../chunks/chunk.ZYF25H5G.js";
@@ -16,7 +16,7 @@ import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.P3RYNUKZ.js";
 import "../../chunks/chunk.YXCPZAFU.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.QWL32OLS.js";
+import "../../chunks/chunk.D43BWQVS.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.5EHIHSWD.js";
+} from "../../chunks/chunk.PREQICZ2.js";
 import "../../chunks/chunk.IVMQWO2L.js";
-import "../../chunks/chunk.F4RHOUGP.js";
+import "../../chunks/chunk.YYQORGQY.js";
 import "../../chunks/chunk.IIYSG3NP.js";
 import "../../chunks/chunk.7VPFFNHR.js";
 import "../../chunks/chunk.ZYF25H5G.js";
@@ -13,7 +13,7 @@ import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.P3RYNUKZ.js";
 import "../../chunks/chunk.YXCPZAFU.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.QWL32OLS.js";
+import "../../chunks/chunk.D43BWQVS.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/custom-elements.json

@@ -17551,6 +17551,12 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "public",
+              "default": "new LocalizeController(this)"
+            },
             {
               "kind": "field",
               "name": "variant",
@@ -20571,7 +20577,7 @@
   "package": {
     "name": "@solid-design-system/components",
     "description": "Solid Design System: Components",
-    "version": "5.12.0",
+    "version": "5.13.2",
     "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.5EHIHSWD.js";
+} from "./chunks/chunk.PREQICZ2.js";
 import {
   setupAutocomplete
 } from "./chunks/chunk.6DKXZWRN.js";
 import {
   SdTab
-} from "./chunks/chunk.L2D6TOK4.js";
+} from "./chunks/chunk.3ZINXNZU.js";
 import {
   SdTabGroup
-} from "./chunks/chunk.VD6EMWBX.js";
+} from "./chunks/chunk.R2BO3KFV.js";
 import {
   SdTabPanel
-} from "./chunks/chunk.2E6AZ7IS.js";
+} from "./chunks/chunk.KXEWTKH5.js";
 import {
   SdTeaser
-} from "./chunks/chunk.FKIK5XXL.js";
+} from "./chunks/chunk.KS37HIDJ.js";
 import {
   SdTeaserMedia
-} from "./chunks/chunk.LBZP6N7M.js";
+} from "./chunks/chunk.TC76S4MF.js";
 import {
   SdTextarea
-} from "./chunks/chunk.UTF4KIPA.js";
+} from "./chunks/chunk.NK4QH6PT.js";
 import {
   SdTooltip
-} from "./chunks/chunk.KSDF7SV6.js";
+} from "./chunks/chunk.ITFFE5ZG.js";
 import {
   SdRangeTick
-} from "./chunks/chunk.Q5NANOL5.js";
+} from "./chunks/chunk.VVXWJVI2.js";
 import {
   SdScrollable
-} from "./chunks/chunk.OVMZ5AQ3.js";
+} from "./chunks/chunk.HG32KUJT.js";
 import {
   SdSelect
-} from "./chunks/chunk.WYGXHCZK.js";
+} from "./chunks/chunk.RPHYBAUC.js";
 import {
   SdSpinner
-} from "./chunks/chunk.MHXRRPRS.js";
+} from "./chunks/chunk.PPNIMWMV.js";
 import {
   SdStep
-} from "./chunks/chunk.YVIGSH2Q.js";
+} from "./chunks/chunk.TSVBLBYH.js";
 import {
   SdStepGroup
-} from "./chunks/chunk.K5VSAEEA.js";
+} from "./chunks/chunk.OW4S63FI.js";
 import {
   SdSwitch
-} from "./chunks/chunk.GJKBJOMN.js";
+} from "./chunks/chunk.QUUVWSUV.js";
 import {
   SdOptgroup
-} from "./chunks/chunk.CNKD3LT7.js";
+} from "./chunks/chunk.SDZZIAXH.js";
 import {
   SdOption
-} from "./chunks/chunk.N73QET3I.js";
+} from "./chunks/chunk.EUXH5NR6.js";
 import {
   SdQuickfact
-} from "./chunks/chunk.J5KZ6AYY.js";
+} from "./chunks/chunk.MOI3OG7R.js";
 import {
   SdRadioButton
-} from "./chunks/chunk.SDNZJEO4.js";
+} from "./chunks/chunk.GTO2JCMN.js";
 import {
   SdRadioGroup
-} from "./chunks/chunk.GCLUX5DU.js";
+} from "./chunks/chunk.W43TL6B7.js";
 import {
   SdRadio
-} from "./chunks/chunk.MYCJZM33.js";
+} from "./chunks/chunk.YBFZ5WWW.js";
 import {
   SdRange
-} from "./chunks/chunk.ZXPTGOCQ.js";
+} from "./chunks/chunk.5O44LILO.js";
 import "./chunks/chunk.D3YSIVTB.js";
 import {
   SdLink
-} from "./chunks/chunk.XE2TTS56.js";
+} from "./chunks/chunk.4OJT3G7A.js";
 import {
   SdMapMarker
-} from "./chunks/chunk.53TIETIU.js";
+} from "./chunks/chunk.VL6PR3YB.js";
 import {
   SdMenu
-} from "./chunks/chunk.2TRX3FZB.js";
+} from "./chunks/chunk.GJPESTPP.js";
 import {
   SdMenuItem
-} from "./chunks/chunk.3LB6F6UZ.js";
+} from "./chunks/chunk.WOML5RS7.js";
 import "./chunks/chunk.KEJFWGZI.js";
 import {
   SdNavigationItem
-} from "./chunks/chunk.FG5EPKY3.js";
+} from "./chunks/chunk.4KSPG5C4.js";
 import {
   SdNotification
-} from "./chunks/chunk.6OA4LXDX.js";
+} from "./chunks/chunk.TMFSN6FM.js";
 import {
   SdInclude
-} from "./chunks/chunk.5YHSIEJI.js";
+} from "./chunks/chunk.SLZ6SU32.js";
 import {
   SdInput
-} from "./chunks/chunk.5WAILGKS.js";
+} from "./chunks/chunk.DPJBZIFF.js";
 import {
   SdDialog
-} from "./chunks/chunk.7QXCN2ON.js";
+} from "./chunks/chunk.LPKRKLXA.js";
 import {
   SdDivider
-} from "./chunks/chunk.7O463ZCI.js";
+} from "./chunks/chunk.BRL5RW4N.js";
 import {
   SdDropdown
-} from "./chunks/chunk.QEMBE34K.js";
+} from "./chunks/chunk.QANW7VJX.js";
 import {
   SdExpandable
-} from "./chunks/chunk.K6PS5MI5.js";
+} from "./chunks/chunk.4HI2O74B.js";
 import {
   SdFlipcard
-} from "./chunks/chunk.2KGI4RGY.js";
+} from "./chunks/chunk.APDVCSJD.js";
 import {
   SdHeader
-} from "./chunks/chunk.A3OMC6GV.js";
+} from "./chunks/chunk.SF6HZPMC.js";
 import {
   SdCheckbox
-} from "./chunks/chunk.U5XX2CPX.js";
+} from "./chunks/chunk.BNWAPG5S.js";
 import {
   SdCheckboxGroup
-} from "./chunks/chunk.SHDQPZVK.js";
+} from "./chunks/chunk.KB7BZWRJ.js";
 import {
   SdCombobox
-} from "./chunks/chunk.G4SPWXEP.js";
+} from "./chunks/chunk.ECI7YNBZ.js";
 import {
   SdTag
-} from "./chunks/chunk.2I3XKHRL.js";
+} from "./chunks/chunk.VRQD64HC.js";
 import {
   SdPopup
-} from "./chunks/chunk.JW6RZW7I.js";
+} from "./chunks/chunk.NVFHCFFY.js";
 import "./chunks/chunk.GI7VDIWX.js";
 import "./chunks/chunk.WBJBQ4QI.js";
 import "./chunks/chunk.UIQBHPD3.js";
 import {
   SdBadge
-} from "./chunks/chunk.BS3O2QJ6.js";
+} from "./chunks/chunk.NE2BMBIU.js";
 import {
   SdBrandshape
-} from "./chunks/chunk.LM6HLQCE.js";
+} from "./chunks/chunk.K32GBV6Q.js";
 import {
   SdBreadcrumb
-} from "./chunks/chunk.SNZAP25L.js";
+} from "./chunks/chunk.737PY2Q6.js";
 import {
   SdBreadcrumbItem
-} from "./chunks/chunk.GLR5XK2G.js";
-import "./chunks/chunk.WISC4V5Q.js";
+} from "./chunks/chunk.MAWWCON7.js";
+import "./chunks/chunk.WK2YM3RD.js";
 import {
   SdCarousel
-} from "./chunks/chunk.2OIBQGHM.js";
+} from "./chunks/chunk.H7S2YE6V.js";
 import "./chunks/chunk.W2YDXTG5.js";
 import "./chunks/chunk.FNYEXUNK.js";
 import "./chunks/chunk.NOWCQZBS.js";
 import {
   SdCarouselItem
-} from "./chunks/chunk.ZYSPY56A.js";
+} from "./chunks/chunk.5FRNNYAO.js";
 import "./chunks/chunk.F4VGSDIW.js";
 import {
   SdAccordionGroup
-} from "./chunks/chunk.OT4PPAKV.js";
+} from "./chunks/chunk.F3IX2UHI.js";
 import {
   SdAccordion
-} from "./chunks/chunk.MQGUFVIS.js";
+} from "./chunks/chunk.CCRA376S.js";
 import {
   SdAnimation
-} from "./chunks/chunk.UYJNZRYC.js";
+} from "./chunks/chunk.HDOMTH7O.js";
 import "./chunks/chunk.TJOP7HQP.js";
 import {
   SdAudio
-} from "./chunks/chunk.ULYZ7HF4.js";
+} from "./chunks/chunk.PEL457CC.js";
 import {
   SdDrawer
-} from "./chunks/chunk.LNUCDACW.js";
+} from "./chunks/chunk.SR4AXQAP.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.PMNTW4FI.js";
+} from "./chunks/chunk.NZUH4YN5.js";
 import {
   SdLoader
-} from "./chunks/chunk.5ZCXBV7F.js";
+} from "./chunks/chunk.CJEJTIBR.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.F4RHOUGP.js";
+} from "./chunks/chunk.YYQORGQY.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.QWL32OLS.js";
+import "./chunks/chunk.D43BWQVS.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.JW6RZW7I.js";
-import "../chunks/chunk.QWL32OLS.js";
+import "../chunks/chunk.NVFHCFFY.js";
+import "../chunks/chunk.D43BWQVS.js";
 import "../chunks/chunk.HQWAKJBV.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {

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.12.0",
+  "version": "5.13.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -6330,6 +6330,7 @@
           "events": [],
           "js": {
             "properties": [
+              { "name": "localize" },
               {
                 "name": "variant",
                 "description": "When set to container, a border appears around the current tab and tab-panel.",

package/dist-versioned/chunks/{chunk.L2D6TOK4.js → chunk.3ZINXNZU.js}

@@ -1,13 +1,16 @@
 import {
   HasSlotController
 } from "./chunk.IVMQWO2L.js";
+import {
+  LocalizeController
+} from "./chunk.YKM42GKF.js";
 import {
   watch
 } from "./chunk.X2OQMWGY.js";
 import {
   SolidElement,
   customElement
-} from "./chunk.QWL32OLS.js";
+} from "./chunk.D43BWQVS.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -21,8 +24,9 @@ var SdTab = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.attrId = ++id;
-    this.componentId = `sd-5-12-0-tab-${this.attrId}`;
+    this.componentId = `sd-5-13-2-tab-${this.attrId}`;
     this.hasSlotController = new HasSlotController(this, "left");
+    this.localize = new LocalizeController(this);
     this.variant = "default";
     this.active = false;
     this.disabled = false;
@@ -54,32 +58,33 @@ var SdTab = class extends SolidElement {
       left: this.hasSlotController.test("left")
     };
     return html`<div part="base" class="${cx(
-      "inline-flex justify-center min-w-max items-center h-12 px-3 leading-none select-none cursor-pointer group relative focus-visible:focus-outline outline-2 !-outline-offset-2",
-      this.variant === "container" && " rounded-[4px_4px_0_0]",
+      "inline-flex justify-center min-w-max items-center h-12 px-3 leading-none select-none cursor-pointer group relative",
+      "focus-visible:focus-outline outline-2 !-outline-offset-2 transition-all duration-fast ease-in-out",
+      this.variant === "container" && "tab-container-border bg-white rounded-[4px_4px_0_0]",
       this.variant === "container" && this.active && "tab--active-container-border bg-white",
-      this.disabled || this.visuallyDisabled ? "!cursor-not-allowed" : "hover:bg-neutral-200"
+      this.disabled || this.visuallyDisabled ? "!cursor-not-allowed" : "hover:bg-neutral-200",
+      this.active && "z-20"
     )}" tabindex="${!this.active || this.disabled ? "-1" : "0"}"><div class="${cx(
       "flex h-full items-center justify-center whitespace-nowrap",
       this.disabled || this.visuallyDisabled && "opacity-50 "
     )}"><slot name="left" class="${cx(
       slots.left && "block pr-2",
       this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary"
-    )}"></slot><slot class="${cx(this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary")}"></slot><div part="active-tab-indicator" class="${cx(
-      (!this.active || this.disabled) && "hidden",
-      "absolute bottom-0 h-1 bg-accent",
-      this.variant === "default" ? "w-full" : "w-3/4 group-hover:w-full transition-all duration-200 ease-in-out"
-    )}"></div><div part="hover-bottom-border" class="${cx(
-      !this.active && !this.disabled && "absolute w-full h-0.25 bottom-0 border-b border-neutral-400 invisible group-hover:visible"
+    )}"></slot><slot class="${cx(this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary")}"></slot>${this.variant === "container" ? html`<div part="active-tab-indicator" class="${cx("absolute bottom-0 h-1 bg-accent w-3/4 bottom-0 group-hover:w-full")}"></div>` : ""}<div part="hover-bottom-border" class="${cx(
+      !this.active && !this.disabled && "absolute bottom-0 left-0 w-full h-0.25 border-b border-transparent group-hover:border-b-neutral-400 transition-[border] duration-fast ease-in-out"
     )}"></div></div></div>`;
   }
 };
 SdTab.styles = [
   ...SolidElement.styles,
-  css`:host{box-sizing:border-box;display:block}.tab--active-container-border:after{border-width:1px;content:"";height:100%;position:absolute;width:100%;--tw-border-opacity:1;border-color:rgb(var(--sd-color-neutral-400,195 195 195)/var(--tw-border-opacity,1));border-bottom:none;border-radius:4px 4px 0 0}`
+  css`:host{box-sizing:border-box;display:inline-block}:host(:hover)::part(hover-bottom-border){--tw-border-opacity:1;border-bottom-color:rgb(var(--sd-color-neutral-400,195 195 195)/var(--tw-border-opacity,1))}.tab-container-border:after{border-color:transparent;border-width:1px;--tw-content:""}.tab--active-container-border:after,.tab-container-border:after{content:var(--tw-content);height:100%;position:absolute;width:100%}.tab--active-container-border:after{border-width:1px;--tw-border-opacity:1;border-color:rgb(var(--sd-color-neutral-400,195 195 195)/var(--tw-border-opacity,1));transition-duration:.15s;transition-duration:var(--sd-duration-medium,.3s);transition-property:border;transition-timing-function:cubic-bezier(.4,0,.2,1);--tw-content:"";border-bottom:none;border-radius:4px 4px 0 0}[part=active-tab-indicator]{--tw-scale-x:0;--tw-scale-y:0;opacity:var(--sd-opacity-0,0);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-duration:var(--sd-duration-fast,.15s);transition:width var(--sd-duration-fast) ease-in-out,opacity var(--sd-duration-fast) ease-in-out,transform var(--sd-duration-fast) ease-in-out var(--sd-duration-fast)}:host([active]) [part=active-tab-indicator]{--tw-scale-x:1;--tw-scale-y:1;opacity:var(--sd-opacity-100,1);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition:width var(--sd-duration-fast) ease-in-out,transform var(--sd-duration-fast) ease-in-out}`
 ];
 __decorateClass([
   query("[part=base]")
 ], SdTab.prototype, "tab", 2);
+__decorateClass([
+  query("[part=active-tab-indicator]")
+], SdTab.prototype, "currentIndicator", 2);
 __decorateClass([
   property({ type: String, reflect: true })
 ], SdTab.prototype, "variant", 2);
@@ -102,7 +107,7 @@ __decorateClass([
   watch(["disabled", "visually-disabled"])
 ], SdTab.prototype, "handleDisabledChange", 1);
 SdTab = __decorateClass([
-  customElement("sd-5-12-0-tab")
+  customElement("sd-5-13-2-tab")
 ], SdTab);
 
 export {

package/dist-versioned/chunks/{chunk.K6PS5MI5.js → chunk.4HI2O74B.js}

@@ -14,7 +14,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.QWL32OLS.js";
+} from "./chunk.D43BWQVS.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-12-0-icon library="_internal" name="chevron-down" class="text-xl"></sd-5-12-0-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-5-12-0-icon library="_internal" name="chevron-down" class="text-xl"></sd-5-12-0-icon></slot></span><slot name="toggle-closed" class="${cx(this.open && "hidden")}">${this.localize.term("showMore")}</slot><slot name="toggle-open" class="${cx(!this.open && "hidden")}">${this.localize.term("showLess")}</slot></div></button><details part="details" ?inert="${ifDefined(!this.open)}"><summary part="summary" aria-hidden="true" class="cursor-pointer overflow-hidden list-none"><slot name="clone"></slot></summary><div part="content" class="content content-preview overflow-hidden relative"><slot></slot></div></details></div>`;
+    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-5-13-2-icon library="_internal" name="chevron-down" class="text-xl"></sd-5-13-2-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-5-13-2-icon library="_internal" name="chevron-down" class="text-xl"></sd-5-13-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>`;
   }
   firstUpdated() {
     this.cloneContentToLightDOM();
@@ -134,7 +134,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdExpandable.prototype, "onOpenChange", 1);
 SdExpandable = __decorateClass([
-  customElement("sd-5-12-0-expandable")
+  customElement("sd-5-13-2-expandable")
 ], SdExpandable);
 setDefaultAnimation("expandable.show", {
   keyframes: [{ height: "var(--component-expandable-max-block-size, 90px)" }, { height: "auto" }],