@solid-design-system/components 4.3.1 → 4.4.1

package/dist/chunks/{chunk.RI66LCUS.js → chunk.5AX4S2QZ.js}

@@ -1,6 +1,9 @@
 import {
   watch
 } from "./chunk.X2OQMWGY.js";
+import {
+  HasSlotController
+} from "./chunk.YEZS5ZR2.js";
 import {
   SolidElement,
   customElement
@@ -18,6 +21,7 @@ import cx from "classix";
 var SdStep = class extends SolidElement {
   constructor() {
     super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "label", "[default]");
     this.size = "lg";
     this.orientation = "horizontal";
     this.disabled = false;
@@ -60,6 +64,10 @@ var SdStep = class extends SolidElement {
   render() {
     const isLink = this.isLink();
     const tag = this.notInteractive ? literal`div` : isLink ? literal`a` : literal`button`;
+    const hasLabelSlot = this.hasSlotController.test("label");
+    const hasLabel = this.label ? true : hasLabelSlot;
+    const hasDefaultSlot = this.hasSlotController.test("[default]");
+    const hasDescription = this.description ? true : hasDefaultSlot;
     return html`<div role="listitem" part="base" class="${cx(
       "flex pt-1",
       this.orientation === "horizontal" ? "flex-col w-full" : "flex-row gap-4 items-stretch h-full w-min overflow-hidden",
@@ -69,7 +77,7 @@ var SdStep = class extends SolidElement {
       this.noTail && "w-max",
       this.orientation === "horizontal" ? "flex-row" : "flex-col items-stretch",
       this.orientation === "horizontal" ? this.size === "lg" ? "translateLg" : "translateSm" : this.size === "lg" ? "mt-1" : "mt-3"
-    )}"><${tag} part="circle" href="${ifDefined(isLink ? this.href : void 0)}" aria-disabled="${ifDefined(this.disabled || void 0)}" aria-current="${this.current ? "step" : void 0}" aria-labelledby="${ifDefined("label")}" aria-describedby="${ifDefined("description")}" class="${cx(
+    )}"><${tag} part="circle" href="${ifDefined(isLink ? this.href : void 0)}" aria-disabled="${ifDefined(this.disabled || void 0)}" aria-current="${this.current ? "step" : void 0}" aria-labelledby="${ifDefined(this.notInteractive || !hasLabel ? void 0 : "label")}" aria-describedby="${ifDefined(this.notInteractive || !hasDescription ? void 0 : "description")}" class="${cx(
       "border rounded-full aspect-square circle flex items-center justify-center shrink-0 font-bold select-none",
       this.disabled ? "focus-visible:outline-none cursor-not-allowed" : "focus-visible:focus-outline group-hover:cursor-pointer",
       this.notInteractive ? this.size === "lg" ? "w-[72px]" : "w-12" : this.size === "lg" ? "w-12" : "w-8",

package/dist/chunks/{chunk.2LL4ZNH4.js → chunk.JMAPLJHF.js}

@@ -21,6 +21,7 @@ var SdStepGroup = class extends SolidElement {
     this.orientation = "horizontal";
     this.activeStep = 0;
     this.notInteractive = false;
+    this.label = "";
   }
   connectedCallback() {
     super.connectedCallback();
@@ -84,7 +85,7 @@ var SdStepGroup = class extends SolidElement {
     }
   }
   render() {
-    return html`<div role="${!this.notInteractive ? "navigation" : "group"}" class="h-full"><div role="list" part="base" class="${cx("flex", this.orientation === "vertical" && "flex-col h-full")}"><slot part="body"></slot></div></div>`;
+    return html`<div role="${!this.notInteractive ? "navigation" : "group"}" class="h-full" aria-label="${this.label}"><div role="list" part="base" class="${cx("flex", this.orientation === "vertical" && "flex-col h-full")}"><slot part="body"></slot></div></div>`;
   }
 };
 SdStepGroup.styles = [
@@ -106,6 +107,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true, attribute: "not-interactive" })
 ], SdStepGroup.prototype, "notInteractive", 2);
+__decorateClass([
+  property({ type: String })
+], SdStepGroup.prototype, "label", 2);
 __decorateClass([
   watch("size", { waitUntilFirstUpdate: true })
 ], SdStepGroup.prototype, "updateSize", 1);

package/dist/chunks/{chunk.35GLHXMN.js → chunk.MYCUDMGG.js}

@@ -197,10 +197,10 @@ var SdDrawer = class extends SolidElement {
     return waitForEvent(this, "sd-after-hide");
   }
   render() {
-    return html`<div id="drawer" part="base" class="${cx(
+    return html`<section id="drawer" part="base" class="${cx(
       "top-0 start-0 w-full h-full pointer-events-none overflow-hidden",
       this.contained ? "absolute" : "fixed"
-    )}"><div part="overlay" class="${cx(
+    )}" aria-label="${this.label}"><div part="overlay" class="${cx(
       "block top-0 left-0 right-0 bottom-0 bg-neutral-800/75 pointer-events-auto",
       this.contained ? "absolute" : "fixed"
     )}" @click="${() => this.requestClose("overlay")}" tabindex="-1"></div><div part="panel" class="${cx(
@@ -209,7 +209,7 @@ var SdDrawer = class extends SolidElement {
         end: "top-0 end-0 bottom-auto start-auto w-[--width] h-full",
         start: "top-0 end-auto bottom-auto start-0 w-[--width] h-full"
       }[this.placement]
-    )}" role="dialog" aria-modal="true" aria-label="${this.label}" tabindex="0">${!this.noHeader ? html`<header part="header" class="flex justify-between py-2 px-4 items-center flex-shrink-0" style="min-height:56px"><div part="title"><slot name="header" part="title" class="flex-auto text-xl m-0" id="title"></slot></div><div class="shrink-0 flex flex-wrap justify-end gap-1 ml-4 absolute top-2 right-2"><sd-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-icon label="${this.localize.term("close")}" name="close" library="system"></sd-icon></sd-button></div></header>` : html`<sd-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}" class="absolute top-2 right-2"><sd-icon label="${this.localize.term("close")}" name="close" library="system"></sd-icon></sd-button>`}<div part="body" class="flex-auto block px-4" role="region" tabindex="0"><slot></slot></div><footer part="footer" class="${cx(this.hasSlotController.test("footer") ? "text-left p-4" : "hidden")}"><slot name="footer"></slot></footer></div></div>`;
+    )}" role="dialog" aria-modal="true" aria-labelledby="label" tabindex="0"><p class="sr-only" id="label">${this.label}</p>${!this.noHeader ? html`<header part="header" class="flex justify-between py-2 px-4 items-center flex-shrink-0" style="min-height:56px"><div part="title"><slot name="header" part="title" class="flex-auto text-xl m-0" id="title"></slot></div><div class="shrink-0 flex flex-wrap justify-end gap-1 ml-4 absolute top-2 right-2"><sd-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-icon label="${this.localize.term("close")}" name="close" library="system"></sd-icon></sd-button></div></header>` : html`<sd-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}" class="absolute top-2 right-2"><sd-icon label="${this.localize.term("close")}" name="close" library="system"></sd-icon></sd-button>`}<div part="body" class="flex-auto block px-4" tabindex="0"><slot></slot></div><footer part="footer" class="${cx(this.hasSlotController.test("footer") ? "text-left p-4" : "hidden")}"><slot name="footer"></slot></footer></div></section>`;
   }
 };
 SdDrawer.styles = [

package/dist/components/drawer/drawer.js

@@ -1,6 +1,6 @@
 import {
   SdDrawer
-} from "../../chunks/chunk.35GLHXMN.js";
+} from "../../chunks/chunk.MYCUDMGG.js";
 import "../../chunks/chunk.VBQLCQSN.js";
 import "../../chunks/chunk.XHCTCU2Q.js";
 import "../../chunks/chunk.WDWV53JP.js";

package/dist/components/step/step.d.ts

@@ -1,5 +1,6 @@
 import SolidElement from '../../internal/solid-element';
 export default class SdStep extends SolidElement {
+    private readonly hasSlotController;
     size: 'lg' | 'sm';
     orientation: 'horizontal' | 'vertical';
     disabled: boolean;

package/dist/components/step/step.js

@@ -1,7 +1,8 @@
 import {
   SdStep
-} from "../../chunks/chunk.RI66LCUS.js";
+} from "../../chunks/chunk.5AX4S2QZ.js";
 import "../../chunks/chunk.X2OQMWGY.js";
+import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.T5VRGBLR.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

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

@@ -6,6 +6,7 @@ export default class SdStepGroup extends SolidElement {
     orientation: 'horizontal' | 'vertical';
     activeStep: number;
     notInteractive: boolean;
+    label: string;
     connectedCallback(): void;
     updateSize(): void;
     updateOrientation(): void;

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

@@ -1,6 +1,6 @@
 import {
   SdStepGroup
-} from "../../chunks/chunk.2LL4ZNH4.js";
+} from "../../chunks/chunk.JMAPLJHF.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.T5VRGBLR.js";
 import "../../chunks/chunk.S3NI7NKU.js";

package/dist/custom-elements.json

@@ -13748,6 +13748,16 @@
               "attribute": "not-interactive",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A label to use in the step-group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
+              "attribute": "label"
+            },
             {
               "kind": "method",
               "name": "setActiveStep",
@@ -13850,6 +13860,15 @@
               "description": "Determines if the step-group is not interactive.",
               "fieldName": "notInteractive"
             },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A label to use in the step-group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
+              "fieldName": "label"
+            },
             {
               "name": "dir",
               "type": {
@@ -16991,7 +17010,7 @@
   "package": {
     "name": "@solid-design-system/components",
     "description": "Solid Design System: Components",
-    "version": "4.3.1",
+    "version": "4.4.1",
     "author": "Union Investment",
     "homepage": "https://solid-design-system.fe.union-investment.de/docs/",
     "license": "MIT"

package/dist/solid-components.js

@@ -28,10 +28,10 @@ import {
 } from "./chunks/chunk.XNH47HGG.js";
 import {
   SdStep
-} from "./chunks/chunk.RI66LCUS.js";
+} from "./chunks/chunk.5AX4S2QZ.js";
 import {
   SdStepGroup
-} from "./chunks/chunk.2LL4ZNH4.js";
+} from "./chunks/chunk.JMAPLJHF.js";
 import {
   SdSwitch
 } from "./chunks/chunk.MKZ5TRQH.js";
@@ -115,7 +115,7 @@ import {
 } from "./chunks/chunk.X7HEAUGJ.js";
 import {
   SdDrawer
-} from "./chunks/chunk.35GLHXMN.js";
+} from "./chunks/chunk.MYCUDMGG.js";
 import "./chunks/chunk.VBQLCQSN.js";
 import "./chunks/chunk.XHCTCU2Q.js";
 import "./chunks/chunk.WDWV53JP.js";

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

@@ -2366,6 +2366,11 @@
           "description": "Determines if the step-group is not interactive.",
           "values": []
         },
+        {
+          "name": "label",
+          "description": "A label to use in the step-group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
+          "values": []
+        },
         {
           "name": "dir",
           "description": "The element's directionality.",
@@ -2442,28 +2447,13 @@
       ]
     },
     {
-      "name": "sd-tab",
-      "description": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).\n---\n\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus to the tab.\n- **blur()** - Removes focus from the tab.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The tab's label.\n- **left** - Optional element (eg. icon) positioned to the left of the label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **active-tab-indicator** - The active tab indicator.\n- **hover-bottom-border** - The bottom border that appears when the tab is hovered.",
+      "name": "sd-tab-group",
+      "description": "Tab groups organize content into a container that shows one section at a time.\n---\n\n\n### **Events:**\n - **sd-tab-show** - Emitted when a tab is shown.\n- **sd-tab-hide** - Emitted when a tab is hidden.\n\n### **Methods:**\n - **show(panel: _string_)** - Shows the specified tab panel.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - Used for grouping tab panels in the tab group. Must be `<sd-tab-panel>` elements.\n- **nav** - Used for grouping tabs in the tab group. Must be `<sd-tab>` elements.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **nav** - The tab group's navigation container where tabs are slotted in.\n- **scroll-container** - The container that wraps the tabs and active-tab-indicator.\n- **tabs** - The container that wraps the tabs.\n- **separation** - The line that separates tabs from panels.\n- **body** - The tab group's body where tab panels are slotted in.\n- **scroll-button--start** - The starting scroll button.\n- **scroll-button--end** - The ending scroll button.\n- **scroll-button__base** - The scroll button's exported `base` part.",
       "attributes": [
         {
-          "name": "variant",
-          "description": "When set to container, a border appears around the current tab and tab-panel.",
-          "values": [{ "name": "default" }, { "name": "container" }]
-        },
-        {
-          "name": "active",
-          "description": "Draws the tab in an active state.",
-          "values": []
-        },
-        {
-          "name": "disabled",
-          "description": "Disables the tab and prevents selection.",
-          "values": []
-        },
-        {
-          "name": "panel",
-          "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tab group.",
-          "values": []
+          "name": "activation",
+          "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
+          "values": [{ "name": "auto" }, { "name": "manual" }]
         },
         {
           "name": "dir",
@@ -2479,18 +2469,33 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-tab--docs"
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-tab-group--docs"
         }
       ]
     },
     {
-      "name": "sd-tab-group",
-      "description": "Tab groups organize content into a container that shows one section at a time.\n---\n\n\n### **Events:**\n - **sd-tab-show** - Emitted when a tab is shown.\n- **sd-tab-hide** - Emitted when a tab is hidden.\n\n### **Methods:**\n - **show(panel: _string_)** - Shows the specified tab panel.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - Used for grouping tab panels in the tab group. Must be `<sd-tab-panel>` elements.\n- **nav** - Used for grouping tabs in the tab group. Must be `<sd-tab>` elements.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **nav** - The tab group's navigation container where tabs are slotted in.\n- **scroll-container** - The container that wraps the tabs and active-tab-indicator.\n- **tabs** - The container that wraps the tabs.\n- **separation** - The line that separates tabs from panels.\n- **body** - The tab group's body where tab panels are slotted in.\n- **scroll-button--start** - The starting scroll button.\n- **scroll-button--end** - The ending scroll button.\n- **scroll-button__base** - The scroll button's exported `base` part.",
+      "name": "sd-tab",
+      "description": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).\n---\n\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus to the tab.\n- **blur()** - Removes focus from the tab.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The tab's label.\n- **left** - Optional element (eg. icon) positioned to the left of the label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **active-tab-indicator** - The active tab indicator.\n- **hover-bottom-border** - The bottom border that appears when the tab is hovered.",
       "attributes": [
         {
-          "name": "activation",
-          "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
-          "values": [{ "name": "auto" }, { "name": "manual" }]
+          "name": "variant",
+          "description": "When set to container, a border appears around the current tab and tab-panel.",
+          "values": [{ "name": "default" }, { "name": "container" }]
+        },
+        {
+          "name": "active",
+          "description": "Draws the tab in an active state.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the tab and prevents selection.",
+          "values": []
+        },
+        {
+          "name": "panel",
+          "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tab group.",
+          "values": []
         },
         {
           "name": "dir",
@@ -2506,7 +2511,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-tab-group--docs"
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-tab--docs"
         }
       ]
     },

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": "4.3.1",
+  "version": "4.4.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -5450,6 +5450,11 @@
               "description": "Determines if the step-group is not interactive.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "label",
+              "description": "A label to use in the step-group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
+              "value": { "type": "string", "default": "''" }
+            },
             {
               "name": "dir",
               "description": "The element's directionality.",
@@ -5490,6 +5495,11 @@
                 "description": "Determines if the step-group is not interactive.",
                 "type": "boolean"
               },
+              {
+                "name": "label",
+                "description": "A label to use in the step-group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
+                "type": "string"
+              },
               {
                 "name": "dir",
                 "description": "The element's directionality.",
@@ -5651,6 +5661,82 @@
             ]
           }
         },
+        {
+          "name": "sd-tab-group",
+          "description": "Tab groups organize content into a container that shows one section at a time.\n---\n\n\n### **Events:**\n - **sd-tab-show** - Emitted when a tab is shown.\n- **sd-tab-hide** - Emitted when a tab is hidden.\n\n### **Methods:**\n - **show(panel: _string_)** - Shows the specified tab panel.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - Used for grouping tab panels in the tab group. Must be `<sd-tab-panel>` elements.\n- **nav** - Used for grouping tabs in the tab group. Must be `<sd-tab>` elements.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **nav** - The tab group's navigation container where tabs are slotted in.\n- **scroll-container** - The container that wraps the tabs and active-tab-indicator.\n- **tabs** - The container that wraps the tabs.\n- **separation** - The line that separates tabs from panels.\n- **body** - The tab group's body where tab panels are slotted in.\n- **scroll-button--start** - The starting scroll button.\n- **scroll-button--end** - The ending scroll button.\n- **scroll-button__base** - The scroll button's exported `base` part.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "activation",
+              "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
+              "value": { "type": "'auto' | 'manual'", "default": "'auto'" }
+            },
+            {
+              "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": "Used for grouping tab panels in the tab group. Must be `<sd-tab-panel>` elements."
+            },
+            {
+              "name": "nav",
+              "description": "Used for grouping tabs in the tab group. Must be `<sd-tab>` elements."
+            }
+          ],
+          "events": [
+            {
+              "name": "sd-tab-show",
+              "type": "{ name: String }",
+              "description": "Emitted when a tab is shown."
+            },
+            {
+              "name": "sd-tab-hide",
+              "type": "{ name: String }",
+              "description": "Emitted when a tab is hidden."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "localize" },
+              {
+                "name": "activation",
+                "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
+                "type": "'auto' | 'manual'"
+              },
+              {
+                "name": "dir",
+                "description": "The element's directionality.",
+                "type": "'ltr' | 'rtl' | 'auto'"
+              },
+              {
+                "name": "lang",
+                "description": "The element's language.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "sd-tab-show",
+                "type": "{ name: String }",
+                "description": "Emitted when a tab is shown."
+              },
+              {
+                "name": "sd-tab-hide",
+                "type": "{ name: String }",
+                "description": "Emitted when a tab is hidden."
+              }
+            ]
+          }
+        },
         {
           "name": "sd-tab",
           "description": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).\n---\n\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus to the tab.\n- **blur()** - Removes focus from the tab.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The tab's label.\n- **left** - Optional element (eg. icon) positioned to the left of the label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **active-tab-indicator** - The active tab indicator.\n- **hover-bottom-border** - The bottom border that appears when the tab is hovered.",
@@ -5734,82 +5820,6 @@
             "events": []
           }
         },
-        {
-          "name": "sd-tab-group",
-          "description": "Tab groups organize content into a container that shows one section at a time.\n---\n\n\n### **Events:**\n - **sd-tab-show** - Emitted when a tab is shown.\n- **sd-tab-hide** - Emitted when a tab is hidden.\n\n### **Methods:**\n - **show(panel: _string_)** - Shows the specified tab panel.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - Used for grouping tab panels in the tab group. Must be `<sd-tab-panel>` elements.\n- **nav** - Used for grouping tabs in the tab group. Must be `<sd-tab>` elements.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **nav** - The tab group's navigation container where tabs are slotted in.\n- **scroll-container** - The container that wraps the tabs and active-tab-indicator.\n- **tabs** - The container that wraps the tabs.\n- **separation** - The line that separates tabs from panels.\n- **body** - The tab group's body where tab panels are slotted in.\n- **scroll-button--start** - The starting scroll button.\n- **scroll-button--end** - The ending scroll button.\n- **scroll-button__base** - The scroll button's exported `base` part.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "activation",
-              "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
-              "value": { "type": "'auto' | 'manual'", "default": "'auto'" }
-            },
-            {
-              "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": "Used for grouping tab panels in the tab group. Must be `<sd-tab-panel>` elements."
-            },
-            {
-              "name": "nav",
-              "description": "Used for grouping tabs in the tab group. Must be `<sd-tab>` elements."
-            }
-          ],
-          "events": [
-            {
-              "name": "sd-tab-show",
-              "type": "{ name: String }",
-              "description": "Emitted when a tab is shown."
-            },
-            {
-              "name": "sd-tab-hide",
-              "type": "{ name: String }",
-              "description": "Emitted when a tab is hidden."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "localize" },
-              {
-                "name": "activation",
-                "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
-                "type": "'auto' | 'manual'"
-              },
-              {
-                "name": "dir",
-                "description": "The element's directionality.",
-                "type": "'ltr' | 'rtl' | 'auto'"
-              },
-              {
-                "name": "lang",
-                "description": "The element's language.",
-                "type": "string"
-              }
-            ],
-            "events": [
-              {
-                "name": "sd-tab-show",
-                "type": "{ name: String }",
-                "description": "Emitted when a tab is shown."
-              },
-              {
-                "name": "sd-tab-hide",
-                "type": "{ name: String }",
-                "description": "Emitted when a tab is hidden."
-              }
-            ]
-          }
-        },
         {
           "name": "sd-tab-panel",
           "description": "Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The tab panel's content.\n\n### **CSS Properties:**\n - **--padding** - The tab panel's padding. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",

package/dist-versioned/_components/menu/menu.js

@@ -32,7 +32,7 @@ let SdMenu = class SdMenu extends SolidElement {
         if (item.type === 'checkbox') {
             item.checked = !item.checked;
         }
-        this.emit('sd-4-3-1-select', { detail: { item } });
+        this.emit('sd-4-4-1-select', { detail: { item } });
     }
     handleKeyDown(event) {
         if (event.key === 'Enter') {

package/dist-versioned/_components/menu/menu.styles.js

@@ -11,7 +11,7 @@ export default css `
     overscroll-behavior: none;
   }
 
-  ::slotted(sd-4-3-1-divider) {
+  ::slotted(sd-4-4-1-divider) {
     --spacing: var(--sd-spacing-x-small);
   }
 `;

package/dist-versioned/_components/menu-item/menu-item.js

@@ -74,7 +74,7 @@ let SdMenuItem = class SdMenuItem extends SolidElement {
         })}
       >
         <span part="checked-icon" class="menu-item__check">
-          <sd-4-3-1-icon name="check" library="system" aria-hidden="true"></sd-4-3-1-icon>
+          <sd-4-4-1-icon name="check" library="system" aria-hidden="true"></sd-4-4-1-icon>
         </span>
 
         <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
@@ -84,7 +84,7 @@ let SdMenuItem = class SdMenuItem extends SolidElement {
         <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
 
         <span class="menu-item__chevron">
-          <sd-4-3-1-icon name="chevron-right" library="system" aria-hidden="true"></sd-4-3-1-icon>
+          <sd-4-4-1-icon name="chevron-right" library="system" aria-hidden="true"></sd-4-4-1-icon>
         </span>
       </div>
     `;

package/dist-versioned/chunks/chunk.3UO2LKG5.js

@@ -77,10 +77,10 @@ var SdRadioGroup = class extends SolidElement {
     this.formControlController.updateValidity();
   }
   getAllRadios() {
-    return [...this.querySelectorAll("sd-4-3-1-radio, sd-4-3-1-radio-button")];
+    return [...this.querySelectorAll("sd-4-4-1-radio, sd-4-4-1-radio-button")];
   }
   handleRadioClick(event) {
-    const target = event.target.closest("sd-4-3-1-radio, sd-4-3-1-radio-button");
+    const target = event.target.closest("sd-4-4-1-radio, sd-4-4-1-radio-button");
     const radios = this.getAllRadios();
     const oldValue = this.value;
     if (target.disabled) {
@@ -157,7 +157,7 @@ var SdRadioGroup = class extends SolidElement {
         }
       })
     );
-    this.hasButtonGroup = radios.some((radio) => radio.tagName.toLowerCase() === "sd-4-3-1-radio-button");
+    this.hasButtonGroup = radios.some((radio) => radio.tagName.toLowerCase() === "sd-4-4-1-radio-button");
     if (!radios.some((radio) => radio.checked)) {
       if (this.hasButtonGroup) {
         const buttonRadio = (_a = radios[0].shadowRoot) == null ? void 0 : _a.querySelector("button");
@@ -169,26 +169,26 @@ var SdRadioGroup = class extends SolidElement {
       }
     }
     if (this.hasButtonGroup) {
-      const buttonGroup = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector("sd-4-3-1-button-group");
+      const buttonGroup = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector("sd-4-4-1-button-group");
       if (buttonGroup) {
         buttonGroup.disableRole = true;
       }
     }
   }
   syncRadios() {
-    if (customElements.get("sd-4-3-1-radio") && customElements.get("sd-4-3-1-radio-button")) {
+    if (customElements.get("sd-4-4-1-radio") && customElements.get("sd-4-4-1-radio-button")) {
       this.syncRadioElements();
       return;
     }
-    if (customElements.get("sd-4-3-1-radio")) {
+    if (customElements.get("sd-4-4-1-radio")) {
       this.syncRadioElements();
     } else {
-      customElements.whenDefined("sd-4-3-1-radio").then(() => this.syncRadios());
+      customElements.whenDefined("sd-4-4-1-radio").then(() => this.syncRadios());
     }
-    if (customElements.get("sd-4-3-1-radio-button")) {
+    if (customElements.get("sd-4-4-1-radio-button")) {
       this.syncRadioElements();
     } else {
-      customElements.whenDefined("sd-4-3-1-radio-button").then(() => this.syncRadios());
+      customElements.whenDefined("sd-4-4-1-radio-button").then(() => this.syncRadios());
     }
   }
   updateCheckedRadio() {
@@ -267,16 +267,16 @@ var SdRadioGroup = class extends SolidElement {
         vertical: "flex-col",
         horizontal: "flex-row"
       }[this.orientation]
-    )}"><div class="sr-only"><label><input id="validation-input" type="text" ?required="${this.required}" aria-labelledby="label" tabindex="-1" hidden @invalid="${this.handleInvalid}"></label></div>${this.hasButtonGroup ? html`<sd-4-3-1-button-group part="button-group" exportparts="base:button-group__base" role="presentation">${defaultSlot}</sd-4-3-1-button-group>` : defaultSlot}</div></fieldset><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-2", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot>${this.formControlController.renderInvalidMessage()}`;
+    )}"><div class="sr-only"><label><input id="validation-input" type="text" ?required="${this.required}" aria-labelledby="label" tabindex="-1" hidden @invalid="${this.handleInvalid}"></label></div>${this.hasButtonGroup ? html`<sd-4-4-1-button-group part="button-group" exportparts="base:button-group__base" role="presentation">${defaultSlot}</sd-4-4-1-button-group>` : defaultSlot}</div></fieldset><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-2", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot>${this.formControlController.renderInvalidMessage()}`;
   }
 };
-SdRadioGroup.dependencies = { "sd-4-3-1-button-group": SdButtonGroup };
+SdRadioGroup.dependencies = { "sd-4-4-1-button-group": SdButtonGroup };
 /**
  * Inherits Tailwind classes and includes additional styling.
  */
 SdRadioGroup.styles = [
   ...SolidElement.styles,
-  css`:host{display:block}:host([orientation=vertical]) ::slotted(sd-4-3-1-radio){display:flex;margin-bottom:var(--sd-spacing-2,.5rem)}:host([orientation=vertical]) ::slotted(sd-4-3-1-radio:last-of-type){margin-bottom:var(--sd-spacing-0,0)}:host([orientation=horizontal]) ::slotted(sd-4-3-1-radio){margin-right:var(--sd-spacing-6,1.5rem)}:host([orientation=horizontal]) ::slotted(sd-4-3-1-radio:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-4-3-1-radio){margin-right:var(--sd-spacing-4,1rem)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-4-3-1-radio:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([required]) #label:after{content:" *"}`
+  css`:host{display:block}:host([orientation=vertical]) ::slotted(sd-4-4-1-radio){display:flex;margin-bottom:var(--sd-spacing-2,.5rem)}:host([orientation=vertical]) ::slotted(sd-4-4-1-radio:last-of-type){margin-bottom:var(--sd-spacing-0,0)}:host([orientation=horizontal]) ::slotted(sd-4-4-1-radio){margin-right:var(--sd-spacing-6,1.5rem)}:host([orientation=horizontal]) ::slotted(sd-4-4-1-radio:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-4-4-1-radio){margin-right:var(--sd-spacing-4,1rem)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-4-4-1-radio:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([required]) #label:after{content:" *"}`
 ];
 __decorateClass([
   query("slot:not([name])")
@@ -333,7 +333,7 @@ __decorateClass([
   watch("value")
 ], SdRadioGroup.prototype, "handleValueChange", 1);
 SdRadioGroup = __decorateClass([
-  customElement("sd-4-3-1-radio-group")
+  customElement("sd-4-4-1-radio-group")
 ], SdRadioGroup);
 
 export {