@solid-design-system/components 4.6.1 → 4.6.2

package/dist/chunks/{chunk.LCW6HH3R.js → chunk.WM45G2PF.js}

@@ -378,7 +378,7 @@ var SdInput = class extends SolidElement {
       this.size === "sm" ? "h-6" : "h-8",
       textSize,
       this.visuallyDisabled && "cursor-not-allowed"
-    )}" type="${this.type === "password" && this.passwordVisible ? "text" : this.type}" title="${this.title}" name="${ifDefined(this.name)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" .value="${live(this.value)}" autocapitalize="${ifDefined(this.type === "password" ? "off" : this.autocapitalize)}" autocomplete="${ifDefined(this.type === "password" ? "off" : this.autocomplete)}" autocorrect="${ifDefined(this.type === "password" ? "off" : this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${this.spellcheck}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-disabled="${this.visuallyDisabled || this.disabled ? "true" : "false"}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-icon class="${cx("icon-fill-neutral-800", iconSize)}" library="system" name="closing-round"></sd-icon></slot></button>` : ""} ${this.passwordToggle && this.type === "password" ? html`<button aria-label="${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}" part="password-toggle-button" class="flex items-center" type="button" @click="${this.handlePasswordToggle}" tabindex="-1">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye"></sd-icon></slot>` : html`<slot name="hide-password-icon"><sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye-crossed-out"></sd-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="calendar"></sd-icon>` : ""} ${this.type === "time" ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="clock"></sd-icon>` : ""} ${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handleSearchClick}"><sd-icon class="${cx(iconColor, iconSize)}" library="system" name="magnifying-glass" label="${this.localize.term("search")}"></sd-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="system" name="risk"></sd-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="system" name="status-check" part="valid-icon"></sd-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""} ${this.type === "number" && this.spinButtons ? html`<div part="stepper" class="flex items-center"><button part="decrement-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isDecrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepDown(), end: () => this.handleChange() })} tabindex="-1"><slot name="decrement-number-stepper"><sd-icon name="system/minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-icon></slot></button> <button part="increment-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isIncrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepUp(), end: () => this.handleChange() })} tabindex="-1"><slot name="increment-number-stepper"><sd-icon name="system/plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-icon></slot></button></div>` : ""}</div></div><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></div>${this.formControlController.renderInvalidMessage()}`;
+    )}" type="${this.type === "password" && this.passwordVisible ? "text" : this.type}" title="${this.title}" name="${ifDefined(this.name)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" .value="${live(this.value)}" autocapitalize="${ifDefined(this.type === "password" ? "off" : this.autocapitalize)}" autocomplete="${ifDefined(this.type === "password" ? "off" : this.autocomplete)}" autocorrect="${ifDefined(this.type === "password" ? "off" : this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${this.spellcheck}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-disabled="${this.visuallyDisabled || this.disabled ? "true" : "false"}" aria-invalid="${this.showInvalidStyle}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-icon class="${cx("icon-fill-neutral-800", iconSize)}" library="system" name="closing-round"></sd-icon></slot></button>` : ""} ${this.passwordToggle && this.type === "password" ? html`<button aria-label="${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}" part="password-toggle-button" class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handlePasswordToggle}">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-icon class="${cx(iconColor, iconSize)}" library="system" name="eye"></sd-icon></slot>` : html`<slot name="hide-password-icon"><sd-icon class="${cx(iconColor, iconSize)}" library="system" name="eye-crossed-out"></sd-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="calendar"></sd-icon>` : ""} ${this.type === "time" ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="clock"></sd-icon>` : ""} ${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handleSearchClick}"><sd-icon class="${cx(iconColor, iconSize)}" library="system" name="magnifying-glass" label="${this.localize.term("search")}"></sd-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="system" name="risk"></sd-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="system" name="status-check" part="valid-icon"></sd-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""} ${this.type === "number" && this.spinButtons ? html`<div part="stepper" class="flex items-center"><button part="decrement-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isDecrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepDown(), end: () => this.handleChange() })} tabindex="-1"><slot name="decrement-number-stepper"><sd-icon name="system/minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-icon></slot></button> <button part="increment-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isIncrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepUp(), end: () => this.handleChange() })} tabindex="-1"><slot name="increment-number-stepper"><sd-icon name="system/plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-icon></slot></button></div>` : ""}</div></div><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></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 /**

package/dist/components/input/input.js

@@ -1,6 +1,6 @@
 import {
   SdInput
-} from "../../chunks/chunk.LCW6HH3R.js";
+} from "../../chunks/chunk.WM45G2PF.js";
 import "../../chunks/chunk.GI7VDIWX.js";
 import "../../chunks/chunk.KVKRZJS7.js";
 import "../../chunks/chunk.4FGGIABU.js";

package/dist/custom-elements.json

@@ -3603,221 +3603,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/checkbox-group/checkbox-group.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SdCheckboxGroup",
-          "slots": [
-            {
-              "description": "The default slot where `<sd-checkbox>` elements are placed.",
-              "name": ""
-            },
-            {
-              "description": "The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.",
-              "name": "label"
-            },
-            {
-              "description": "An optional tooltip that helps describe the checkbox-group. Use this slot with the `sd-tooltip` component.",
-              "name": "tooltip"
-            },
-            {
-              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
-              "name": "help-text"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'lg' | 'md' | 'sm'"
-              },
-              "default": "'lg'",
-              "description": "The checkbox group's size. This size will be applied to the label, all child checkboxes.",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "orientation",
-              "type": {
-                "text": "'horizontal' | 'vertical'"
-              },
-              "default": "'vertical'",
-              "description": "The orientation property determines the alignment of the component's content or elements. It accepts two possible\nvalues: 'horizontal' and 'vertical'. The default value is 'vertical'.\nThis property allows you to control the visual layout and arrangement of elements within the component, providing\nflexibility in how the component is displayed based on your specific design needs.",
-              "attribute": "orientation",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
-              "attribute": "label",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "helpText",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
-              "attribute": "help-text",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "dir",
-              "type": {
-                "text": "'ltr' | 'rtl' | 'auto'"
-              },
-              "description": "The element's directionality.",
-              "attribute": "dir",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "internal/solid-element.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "lang",
-              "type": {
-                "text": "string"
-              },
-              "description": "The element's language.",
-              "attribute": "lang",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "internal/solid-element.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "emit",
-              "parameters": [
-                {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "CustomEventInit"
-                  }
-                }
-              ],
-              "description": "Emits a custom event with more convenient defaults.",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "internal/solid-element.js"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "'lg' | 'md' | 'sm'"
-              },
-              "default": "'lg'",
-              "description": "The checkbox group's size. This size will be applied to the label, all child checkboxes.",
-              "fieldName": "size"
-            },
-            {
-              "name": "orientation",
-              "type": {
-                "text": "'horizontal' | 'vertical'"
-              },
-              "default": "'vertical'",
-              "description": "The orientation property determines the alignment of the component's content or elements. It accepts two possible\nvalues: 'horizontal' and 'vertical'. The default value is 'vertical'.\nThis property allows you to control the visual layout and arrangement of elements within the component, providing\nflexibility in how the component is displayed based on your specific design needs.",
-              "fieldName": "orientation"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
-              "fieldName": "label"
-            },
-            {
-              "name": "help-text",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
-              "fieldName": "helpText"
-            },
-            {
-              "name": "dir",
-              "type": {
-                "text": "'ltr' | 'rtl' | 'auto'"
-              },
-              "description": "The element's directionality.",
-              "fieldName": "dir",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "src/internal/solid-element.ts"
-              }
-            },
-            {
-              "name": "lang",
-              "type": {
-                "text": "string"
-              },
-              "description": "The element's language.",
-              "fieldName": "lang",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "src/internal/solid-element.ts"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "SolidElement",
-            "module": "/src/internal/solid-element"
-          },
-          "summary": "Checkbox groups are used to group multiple [checkbox](/components/checkbox). It provides only presentational functionality.",
-          "documentation": "https://solid.union-investment.com/[storybook-link]/checkbox-group",
-          "status": "stable",
-          "since": "1.22.0",
-          "tagName": "sd-checkbox-group",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SdCheckboxGroup",
-            "module": "components/checkbox-group/checkbox-group.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "sd-checkbox-group",
-          "declaration": {
-            "name": "SdCheckboxGroup",
-            "module": "components/checkbox-group/checkbox-group.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/combobox/combobox.js",
@@ -17133,12 +16918,227 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/checkbox-group/checkbox-group.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SdCheckboxGroup",
+          "slots": [
+            {
+              "description": "The default slot where `<sd-checkbox>` elements are placed.",
+              "name": ""
+            },
+            {
+              "description": "The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.",
+              "name": "label"
+            },
+            {
+              "description": "An optional tooltip that helps describe the checkbox-group. Use this slot with the `sd-tooltip` component.",
+              "name": "tooltip"
+            },
+            {
+              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
+              "name": "help-text"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'lg' | 'md' | 'sm'"
+              },
+              "default": "'lg'",
+              "description": "The checkbox group's size. This size will be applied to the label, all child checkboxes.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "'horizontal' | 'vertical'"
+              },
+              "default": "'vertical'",
+              "description": "The orientation property determines the alignment of the component's content or elements. It accepts two possible\nvalues: 'horizontal' and 'vertical'. The default value is 'vertical'.\nThis property allows you to control the visual layout and arrangement of elements within the component, providing\nflexibility in how the component is displayed based on your specific design needs.",
+              "attribute": "orientation",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
+              "attribute": "help-text",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "dir",
+              "type": {
+                "text": "'ltr' | 'rtl' | 'auto'"
+              },
+              "description": "The element's directionality.",
+              "attribute": "dir",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "lang",
+              "type": {
+                "text": "string"
+              },
+              "description": "The element's language.",
+              "attribute": "lang",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "emit",
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "CustomEventInit"
+                  }
+                }
+              ],
+              "description": "Emits a custom event with more convenient defaults.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "'lg' | 'md' | 'sm'"
+              },
+              "default": "'lg'",
+              "description": "The checkbox group's size. This size will be applied to the label, all child checkboxes.",
+              "fieldName": "size"
+            },
+            {
+              "name": "orientation",
+              "type": {
+                "text": "'horizontal' | 'vertical'"
+              },
+              "default": "'vertical'",
+              "description": "The orientation property determines the alignment of the component's content or elements. It accepts two possible\nvalues: 'horizontal' and 'vertical'. The default value is 'vertical'.\nThis property allows you to control the visual layout and arrangement of elements within the component, providing\nflexibility in how the component is displayed based on your specific design needs.",
+              "fieldName": "orientation"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
+              "fieldName": "label"
+            },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
+              "fieldName": "helpText"
+            },
+            {
+              "name": "dir",
+              "type": {
+                "text": "'ltr' | 'rtl' | 'auto'"
+              },
+              "description": "The element's directionality.",
+              "fieldName": "dir",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "src/internal/solid-element.ts"
+              }
+            },
+            {
+              "name": "lang",
+              "type": {
+                "text": "string"
+              },
+              "description": "The element's language.",
+              "fieldName": "lang",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "src/internal/solid-element.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "SolidElement",
+            "module": "/src/internal/solid-element"
+          },
+          "summary": "Checkbox groups are used to group multiple [checkbox](/components/checkbox). It provides only presentational functionality.",
+          "documentation": "https://solid.union-investment.com/[storybook-link]/checkbox-group",
+          "status": "stable",
+          "since": "1.22.0",
+          "tagName": "sd-checkbox-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SdCheckboxGroup",
+            "module": "components/checkbox-group/checkbox-group.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "sd-checkbox-group",
+          "declaration": {
+            "name": "SdCheckboxGroup",
+            "module": "components/checkbox-group/checkbox-group.js"
+          }
+        }
+      ]
     }
   ],
   "package": {
     "name": "@solid-design-system/components",
     "description": "Solid Design System: Components",
-    "version": "4.6.1",
+    "version": "4.6.2",
     "author": "Union Investment",
     "homepage": "https://solid-design-system.fe.union-investment.de/docs/",
     "license": "MIT"

package/dist/solid-components.js

@@ -42,8 +42,8 @@ import {
   SdTabGroup
 } from "./chunks/chunk.PYP5VT7Q.js";
 import {
-  SdNotification
-} from "./chunks/chunk.HGCAGKAN.js";
+  SdNavigationItem
+} from "./chunks/chunk.DTROPLWA.js";
 import {
   SdOptgroup
 } from "./chunks/chunk.RM6FOML7.js";
@@ -67,7 +67,7 @@ import {
 } from "./chunks/chunk.LC3HWWVO.js";
 import {
   SdInput
-} from "./chunks/chunk.LCW6HH3R.js";
+} from "./chunks/chunk.WM45G2PF.js";
 import {
   SdLink
 } from "./chunks/chunk.KNC4IRP2.js";
@@ -75,20 +75,20 @@ import {
   SdMapMarker
 } from "./chunks/chunk.EEZURJVH.js";
 import {
-  SdNavigationItem
-} from "./chunks/chunk.DTROPLWA.js";
+  SdNotification
+} from "./chunks/chunk.HGCAGKAN.js";
 import {
   SdDropdown
 } from "./chunks/chunk.WECFZLMT.js";
 import {
-  SdExpandable
-} from "./chunks/chunk.W4ODHTDG.js";
+  SdHeader
+} from "./chunks/chunk.IT5IEST5.js";
 import {
   SdFlipcard
 } from "./chunks/chunk.DXNE63DE.js";
 import {
-  SdHeader
-} from "./chunks/chunk.IT5IEST5.js";
+  SdExpandable
+} from "./chunks/chunk.W4ODHTDG.js";
 import {
   SdCheckbox
 } from "./chunks/chunk.PLE7R7FE.js";

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

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-6-1-select', { detail: { item } });
+        this.emit('sd-4-6-2-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-6-1-divider) {
+  ::slotted(sd-4-6-2-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-6-1-icon name="check" library="system" aria-hidden="true"></sd-4-6-1-icon>
+          <sd-4-6-2-icon name="check" library="system" aria-hidden="true"></sd-4-6-2-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-6-1-icon name="chevron-right" library="system" aria-hidden="true"></sd-4-6-1-icon>
+          <sd-4-6-2-icon name="chevron-right" library="system" aria-hidden="true"></sd-4-6-2-icon>
         </span>
       </div>
     `;

package/dist-versioned/chunks/chunk.2BTNPIIA.js

@@ -323,7 +323,7 @@ __decorateClass([
   property({ attribute: "auto-size-padding", type: Number })
 ], SdPopup.prototype, "autoSizePadding", 2);
 SdPopup = __decorateClass([
-  customElement("sd-4-6-1-popup")
+  customElement("sd-4-6-2-popup")
 ], SdPopup);
 
 export {

package/dist-versioned/chunks/chunk.2PUHCALR.js

@@ -26,7 +26,7 @@ var SdCheckboxGroup = class extends SolidElement {
     this.helpText = "";
   }
   getAllCheckboxes() {
-    return [...this.querySelectorAll("sd-4-6-1-checkbox")];
+    return [...this.querySelectorAll("sd-4-6-2-checkbox")];
   }
   async syncCheckboxElements() {
     const checkboxes = this.getAllCheckboxes();
@@ -39,10 +39,10 @@ var SdCheckboxGroup = class extends SolidElement {
     );
   }
   syncCheckboxes() {
-    if (customElements.get("sd-4-6-1-checkbox")) {
+    if (customElements.get("sd-4-6-2-checkbox")) {
       this.syncCheckboxElements();
     } else {
-      customElements.whenDefined("sd-4-6-1-checkbox").then(() => this.syncCheckboxes());
+      customElements.whenDefined("sd-4-6-2-checkbox").then(() => this.syncCheckboxes());
     }
   }
   handleSizeChange() {
@@ -79,7 +79,7 @@ var SdCheckboxGroup = class extends SolidElement {
  */
 SdCheckboxGroup.styles = [
   ...SolidElement.styles,
-  css`:host{display:block}:host([orientation=vertical]) ::slotted(sd-4-6-1-checkbox){display:flex;margin-bottom:var(--sd-spacing-2,.5rem)}:host([orientation=vertical]) ::slotted(sd-4-6-1-checkbox:last-of-type){margin-bottom:var(--sd-spacing-0,0)}:host([orientation=horizontal]) ::slotted(sd-4-6-1-checkbox){margin-right:var(--sd-spacing-6,1.5rem)}:host([orientation=horizontal]) ::slotted(sd-4-6-1-checkbox:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-4-6-1-checkbox){margin-right:var(--sd-spacing-4,1rem)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-4-6-1-checkbox:last-of-type){margin-right:var(--sd-spacing-0,0)}`
+  css`:host{display:block}:host([orientation=vertical]) ::slotted(sd-4-6-2-checkbox){display:flex;margin-bottom:var(--sd-spacing-2,.5rem)}:host([orientation=vertical]) ::slotted(sd-4-6-2-checkbox:last-of-type){margin-bottom:var(--sd-spacing-0,0)}:host([orientation=horizontal]) ::slotted(sd-4-6-2-checkbox){margin-right:var(--sd-spacing-6,1.5rem)}:host([orientation=horizontal]) ::slotted(sd-4-6-2-checkbox:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-4-6-2-checkbox){margin-right:var(--sd-spacing-4,1rem)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-4-6-2-checkbox:last-of-type){margin-right:var(--sd-spacing-0,0)}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
@@ -100,7 +100,7 @@ __decorateClass([
   watch("invalid", { waitUntilFirstUpdate: true })
 ], SdCheckboxGroup.prototype, "handleInvalid", 1);
 SdCheckboxGroup = __decorateClass([
-  customElement("sd-4-6-1-checkbox-group")
+  customElement("sd-4-6-2-checkbox-group")
 ], SdCheckboxGroup);
 
 export {

package/dist-versioned/chunks/chunk.33Z66RGK.js

@@ -64,7 +64,7 @@ __decorateClass([
   query('[part="base"]')
 ], SdTeaserMedia.prototype, "teaserMedia", 2);
 SdTeaserMedia = __decorateClass([
-  customElement("sd-4-6-1-teaser-media")
+  customElement("sd-4-6-2-teaser-media")
 ], SdTeaserMedia);
 
 export {

package/dist-versioned/chunks/chunk.4FGGIABU.js

@@ -126,7 +126,7 @@ __decorateClass([
   watch(["name", "src", "library"])
 ], SdIcon.prototype, "setIcon", 1);
 SdIcon = __decorateClass([
-  customElement("sd-4-6-1-icon")
+  customElement("sd-4-6-2-icon")
 ], SdIcon);
 
 export {