@solid-design-system/components 4.6.7 → 4.6.9

package/dist/solid-components.js

@@ -13,22 +13,22 @@ import {
 } from "./chunks/chunk.CKKINYND.js";
 import {
   SdTextarea
-} from "./chunks/chunk.ISZXPWVC.js";
+} from "./chunks/chunk.A4FCES75.js";
 import {
   SdTooltip
-} from "./chunks/chunk.TGTE644Y.js";
+} from "./chunks/chunk.64DOW5GT.js";
 import {
   SdVideo
-} from "./chunks/chunk.J67NOH2J.js";
+} from "./chunks/chunk.DHGILA5W.js";
 import {
   SdScrollable
-} from "./chunks/chunk.3PS24RCT.js";
+} from "./chunks/chunk.6W262L3F.js";
 import {
   SdSelect
-} from "./chunks/chunk.WZWSOE2S.js";
+} from "./chunks/chunk.TPRFXGPO.js";
 import {
   SdStep
-} from "./chunks/chunk.IBTGZ65I.js";
+} from "./chunks/chunk.JVH7QA7V.js";
 import {
   SdStepGroup
 } from "./chunks/chunk.SWZ7YNPJ.js";
@@ -37,37 +37,40 @@ import {
 } from "./chunks/chunk.OJPVJA2S.js";
 import {
   SdTab
-} from "./chunks/chunk.EATARJOL.js";
+} from "./chunks/chunk.5NUL7XZO.js";
 import {
   SdTabGroup
-} from "./chunks/chunk.YELMYFWG.js";
+} from "./chunks/chunk.IFVMGJPH.js";
 import {
   SdNotification
-} from "./chunks/chunk.6WU4LF5Z.js";
+} from "./chunks/chunk.ZDKRIMUK.js";
 import {
   SdOptgroup
-} from "./chunks/chunk.DIVJNSSG.js";
+} from "./chunks/chunk.7GIAGNCP.js";
 import {
   SdOption
-} from "./chunks/chunk.ILPAMBSC.js";
+} from "./chunks/chunk.ZEC66JCL.js";
+import {
+  SdPopup
+} from "./chunks/chunk.CTZX4JSW.js";
 import {
   SdQuickfact
-} from "./chunks/chunk.PTZRO2RN.js";
+} from "./chunks/chunk.JH33Y6NI.js";
 import {
   SdRadioButton
-} from "./chunks/chunk.I2AG6P7E.js";
+} from "./chunks/chunk.MWFRUUKN.js";
 import {
   SdRadioGroup
-} from "./chunks/chunk.PQNIAIWQ.js";
+} from "./chunks/chunk.TYYOT3JJ.js";
 import {
   SdRadio
-} from "./chunks/chunk.VSY4EUFN.js";
+} from "./chunks/chunk.BALWGQRW.js";
 import {
   SdInclude
 } from "./chunks/chunk.TZPIUQJ5.js";
 import {
   SdInput
-} from "./chunks/chunk.O3TREWCC.js";
+} from "./chunks/chunk.QWW7D2EF.js";
 import {
   SdLink
 } from "./chunks/chunk.JEZFJKCR.js";
@@ -76,13 +79,13 @@ import {
 } from "./chunks/chunk.YKFNELUH.js";
 import {
   SdNavigationItem
-} from "./chunks/chunk.ZGKB7QGK.js";
+} from "./chunks/chunk.KXI7DQT7.js";
 import {
   SdDropdown
-} from "./chunks/chunk.ML4MIKYQ.js";
+} from "./chunks/chunk.6KFGIUGJ.js";
 import {
   SdExpandable
-} from "./chunks/chunk.R24LPR7A.js";
+} from "./chunks/chunk.4FJAHWKR.js";
 import {
   SdFlipcard
 } from "./chunks/chunk.UHYIMTVH.js";
@@ -94,29 +97,26 @@ import {
 } from "./chunks/chunk.6VCNAVH4.js";
 import {
   SdCheckboxGroup
-} from "./chunks/chunk.WCLY7RG6.js";
+} from "./chunks/chunk.LY4LB7WU.js";
 import {
   SdCombobox
-} from "./chunks/chunk.V5TII4MB.js";
+} from "./chunks/chunk.XHFS2AN7.js";
 import {
   SdTag
-} from "./chunks/chunk.EJMQUF44.js";
-import {
-  SdPopup
-} from "./chunks/chunk.CTZX4JSW.js";
+} from "./chunks/chunk.CJL7IBJC.js";
 import "./chunks/chunk.GI7VDIWX.js";
 import "./chunks/chunk.WBJBQ4QI.js";
 import "./chunks/chunk.UIQBHPD3.js";
 import {
   SdDialog
-} from "./chunks/chunk.ZKKB55C5.js";
+} from "./chunks/chunk.IOAEHG5C.js";
 import {
   SdDivider
 } from "./chunks/chunk.EZKDJFKX.js";
 import {
   SdDrawer
-} from "./chunks/chunk.TDFVAXJF.js";
-import "./chunks/chunk.VBQLCQSN.js";
+} from "./chunks/chunk.7PDAG24K.js";
+import "./chunks/chunk.UFBRSKVR.js";
 import "./chunks/chunk.XHCTCU2Q.js";
 import "./chunks/chunk.WDWV53JP.js";
 import {
@@ -125,17 +125,10 @@ import {
 import {
   SdBrandshape
 } from "./chunks/chunk.AOWIHO7B.js";
-import {
-  SdButton
-} from "./chunks/chunk.X54F4QNG.js";
-import {
-  SdSpinner
-} from "./chunks/chunk.LA5LTAEA.js";
-import "./chunks/chunk.KVKRZJS7.js";
 import "./chunks/chunk.HP5TMUCE.js";
 import {
   SdCarousel
-} from "./chunks/chunk.WFNCHKPE.js";
+} from "./chunks/chunk.OXCJX3LE.js";
 import "./chunks/chunk.F4VGSDIW.js";
 import "./chunks/chunk.2LMWBUBT.js";
 import "./chunks/chunk.NOWCQZBS.js";
@@ -147,8 +140,25 @@ import {
 } from "./chunks/chunk.Q7SDLREI.js";
 import {
   SdAccordion
-} from "./chunks/chunk.T4ZCLZI2.js";
+} from "./chunks/chunk.35D7BDRG.js";
 import "./chunks/chunk.N4LHE3QK.js";
+import "./chunks/chunk.EY4JPJJQ.js";
+import "./chunks/chunk.B4BZKR24.js";
+import {
+  SdAnimation
+} from "./chunks/chunk.7T42VK6H.js";
+import "./chunks/chunk.TJOP7HQP.js";
+import {
+  SdAudio
+} from "./chunks/chunk.BO6G26AO.js";
+import {
+  SdButton
+} from "./chunks/chunk.ZE3C43AX.js";
+import {
+  SdSpinner
+} from "./chunks/chunk.LA5LTAEA.js";
+import "./chunks/chunk.KVKRZJS7.js";
+import "./chunks/chunk.YEZS5ZR2.js";
 import {
   SdIcon
 } from "./chunks/chunk.PS2S6VDP.js";
@@ -161,22 +171,12 @@ import "./chunks/chunk.RPB53XXV.js";
 import "./chunks/chunk.7VPFFNHR.js";
 import "./chunks/chunk.4TPOL3LB.js";
 import "./chunks/chunk.XS4QJO4N.js";
-import "./chunks/chunk.EY4JPJJQ.js";
-import "./chunks/chunk.B4BZKR24.js";
-import {
-  SdAnimation
-} from "./chunks/chunk.OX2URSR7.js";
-import "./chunks/chunk.X2OQMWGY.js";
-import "./chunks/chunk.TJOP7HQP.js";
-import {
-  SdAudio
-} from "./chunks/chunk.VMVFMQ3Q.js";
-import "./chunks/chunk.YEZS5ZR2.js";
 import {
   LocalizeController
 } from "./chunks/chunk.YKM42GKF.js";
 import "./chunks/chunk.G4WRYNRZ.js";
 import "./chunks/chunk.L4ICI7XS.js";
+import "./chunks/chunk.X2OQMWGY.js";
 import "./chunks/chunk.TXYWAHFM.js";
 import "./chunks/chunk.POFWU6ZT.js";
 import "./chunks/chunk.S3NI7NKU.js";

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

@@ -222,50 +222,6 @@
         }
       ]
     },
-    {
-      "name": "sd-brandshape",
-      "description": "The Brandshape highlights a piece of 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 content inside the brandshape.\n- **image** - The image slot for the 'image' variant.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - Middle content wrapper.\n- **shape-top** - Top shape.\n- **shape-middle** - Middle shape.\n- **shape-bottom** - Bottom shape.\n- **stylized-container** - Container for border and image variant.",
-      "attributes": [
-        {
-          "name": "variant",
-          "description": "The brandshape's theme variant.",
-          "values": [
-            { "name": "" },
-            { "name": "neutral-100" },
-            { "name": "primary" },
-            { "name": "white" },
-            { "name": "border-primary" },
-            { "name": "border-white" },
-            { "name": "image" }
-          ]
-        },
-        {
-          "name": "shapes",
-          "description": "Defines which shapes of the brandshape should be displayed.",
-          "values": [
-            { "name": "('top'" },
-            { "name": "middle" },
-            { "name": "'bottom')[]" }
-          ]
-        },
-        {
-          "name": "dir",
-          "description": "The element's directionality.",
-          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
-        },
-        {
-          "name": "lang",
-          "description": "The element's language.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-brandshape--docs"
-        }
-      ]
-    },
     {
       "name": "sd-button",
       "description": "Buttons represent actions that are available to the user.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-focus** - Emitted when the button gains focus.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The button's label.\n- **icon-left** - A prefix icon or similar element.\n- **icon-right** - A suffix icon or similar element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon-left** - The container that wraps the left icon area.\n- **label** - The button's label.\n- **icon-right** - The container that wraps the right icon area.",
@@ -910,6 +866,11 @@
           "description": "By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.",
           "values": []
         },
+        {
+          "name": "containingElement",
+          "description": "The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other\ncomponents that use a dropdown internally.",
+          "values": [{ "name": "HTMLElement" }]
+        },
         {
           "name": "distance",
           "description": "The distance in pixels from which to offset the panel away from its trigger. This defaults to `0` for `rounded=false` and to a minimum of `1` for `rounded=true`.",
@@ -2474,6 +2435,11 @@
           "description": "Disables the tab and prevents selection.",
           "values": []
         },
+        {
+          "name": "visually-disabled",
+          "description": "Styles the tab as if it was disabled and enables aria-disabled",
+          "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.",
@@ -2667,6 +2633,50 @@
         }
       ]
     },
+    {
+      "name": "sd-brandshape",
+      "description": "The Brandshape highlights a piece of 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 content inside the brandshape.\n- **image** - The image slot for the 'image' variant.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - Middle content wrapper.\n- **shape-top** - Top shape.\n- **shape-middle** - Middle shape.\n- **shape-bottom** - Bottom shape.\n- **stylized-container** - Container for border and image variant.",
+      "attributes": [
+        {
+          "name": "variant",
+          "description": "The brandshape's theme variant.",
+          "values": [
+            { "name": "" },
+            { "name": "neutral-100" },
+            { "name": "primary" },
+            { "name": "white" },
+            { "name": "border-primary" },
+            { "name": "border-white" },
+            { "name": "image" }
+          ]
+        },
+        {
+          "name": "shapes",
+          "description": "Defines which shapes of the brandshape should be displayed.",
+          "values": [
+            { "name": "('top'" },
+            { "name": "middle" },
+            { "name": "'bottom')[]" }
+          ]
+        },
+        {
+          "name": "dir",
+          "description": "The element's directionality.",
+          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
+        },
+        {
+          "name": "lang",
+          "description": "The element's language.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-brandshape--docs"
+        }
+      ]
+    },
     {
       "name": "sd-teaser-media",
       "description": "Teasers group information into flexible containers so users can browse a collection of related items and actions.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - An optional main content slot.\n- **media** - An optional media slot.\n- **meta** - An optional meta slot.\n- **expandable** - An optional expandable slot, <strong>not</strong> shown on small devices.\n- **headline** - headline slot.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **media** - The container that wraps the media.\n- **content** - The container that wraps the content.\n- **meta** -  The container that wraps the meta.\n- **headline** - The container that wraps the headline.\n- **expandable** - The container that wraps the expandable.\n- **main** - The container that wraps the main content.",

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.7",
+  "version": "4.6.9",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -567,72 +567,6 @@
             "events": []
           }
         },
-        {
-          "name": "sd-brandshape",
-          "description": "The Brandshape highlights a piece of 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 content inside the brandshape.\n- **image** - The image slot for the 'image' variant.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - Middle content wrapper.\n- **shape-top** - Top shape.\n- **shape-middle** - Middle shape.\n- **shape-bottom** - Bottom shape.\n- **stylized-container** - Container for border and image variant.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "variant",
-              "description": "The brandshape's theme variant.",
-              "value": {
-                "type": "| 'neutral-100'\n    | 'primary'\n    | 'white'\n    | 'border-primary'\n    | 'border-white'\n    | 'image'",
-                "default": "'primary'"
-              }
-            },
-            {
-              "name": "shapes",
-              "description": "Defines which shapes of the brandshape should be displayed.",
-              "value": {
-                "type": "('top' | 'middle' | 'bottom')[]",
-                "default": "['top', 'middle', 'bottom']"
-              }
-            },
-            {
-              "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": "The content inside the brandshape." },
-            {
-              "name": "image",
-              "description": "The image slot for the 'image' variant."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "variant",
-                "description": "The brandshape's theme variant.",
-                "type": "| 'neutral-100'\n    | 'primary'\n    | 'white'\n    | 'border-primary'\n    | 'border-white'\n    | 'image'"
-              },
-              {
-                "name": "shapes",
-                "description": "Defines which shapes of the brandshape should be displayed.",
-                "type": "('top' | 'middle' | 'bottom')[]"
-              },
-              {
-                "name": "dir",
-                "description": "The element's directionality.",
-                "type": "'ltr' | 'rtl' | 'auto'"
-              },
-              {
-                "name": "lang",
-                "description": "The element's language.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "sd-button",
           "description": "Buttons represent actions that are available to the user.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-focus** - Emitted when the button gains focus.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The button's label.\n- **icon-left** - A prefix icon or similar element.\n- **icon-right** - A suffix icon or similar element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon-left** - The container that wraps the left icon area.\n- **label** - The button's label.\n- **icon-right** - The container that wraps the right icon area.",
@@ -2146,6 +2080,11 @@
               "description": "By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "containingElement",
+              "description": "The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other\ncomponents that use a dropdown internally.",
+              "value": { "type": "HTMLElement | undefined" }
+            },
             {
               "name": "distance",
               "description": "The distance in pixels from which to offset the panel away from its trigger. This defaults to `0` for `rounded=false` and to a minimum of `1` for `rounded=true`.",
@@ -5694,6 +5633,11 @@
               "description": "Disables the tab and prevents selection.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "visually-disabled",
+              "description": "Styles the tab as if it was disabled and enables aria-disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "panel",
               "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tab group.",
@@ -5735,6 +5679,11 @@
                 "description": "Disables the tab and prevents selection.",
                 "type": "boolean"
               },
+              {
+                "name": "visuallyDisabled",
+                "description": "Styles the tab as if it was disabled and enables aria-disabled",
+                "type": "boolean"
+              },
               {
                 "name": "panel",
                 "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tab group.",
@@ -6102,6 +6051,72 @@
             "events": []
           }
         },
+        {
+          "name": "sd-brandshape",
+          "description": "The Brandshape highlights a piece of 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 content inside the brandshape.\n- **image** - The image slot for the 'image' variant.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - Middle content wrapper.\n- **shape-top** - Top shape.\n- **shape-middle** - Middle shape.\n- **shape-bottom** - Bottom shape.\n- **stylized-container** - Container for border and image variant.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "description": "The brandshape's theme variant.",
+              "value": {
+                "type": "| 'neutral-100'\n    | 'primary'\n    | 'white'\n    | 'border-primary'\n    | 'border-white'\n    | 'image'",
+                "default": "'primary'"
+              }
+            },
+            {
+              "name": "shapes",
+              "description": "Defines which shapes of the brandshape should be displayed.",
+              "value": {
+                "type": "('top' | 'middle' | 'bottom')[]",
+                "default": "['top', 'middle', 'bottom']"
+              }
+            },
+            {
+              "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": "The content inside the brandshape." },
+            {
+              "name": "image",
+              "description": "The image slot for the 'image' variant."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "variant",
+                "description": "The brandshape's theme variant.",
+                "type": "| 'neutral-100'\n    | 'primary'\n    | 'white'\n    | 'border-primary'\n    | 'border-white'\n    | 'image'"
+              },
+              {
+                "name": "shapes",
+                "description": "Defines which shapes of the brandshape should be displayed.",
+                "type": "('top' | 'middle' | 'bottom')[]"
+              },
+              {
+                "name": "dir",
+                "description": "The element's directionality.",
+                "type": "'ltr' | 'rtl' | 'auto'"
+              },
+              {
+                "name": "lang",
+                "description": "The element's language.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "sd-teaser-media",
           "description": "Teasers group information into flexible containers so users can browse a collection of related items and actions.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - An optional main content slot.\n- **media** - An optional media slot.\n- **meta** - An optional meta slot.\n- **expandable** - An optional expandable slot, <strong>not</strong> shown on small devices.\n- **headline** - headline slot.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **media** - The container that wraps the media.\n- **content** - The container that wraps the content.\n- **meta** -  The container that wraps the meta.\n- **headline** - The container that wraps the headline.\n- **expandable** - The container that wraps the expandable.\n- **main** - The container that wraps the main content.",

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

package/dist-versioned/chunks/{chunk.T4ZCLZI2.js → chunk.35D7BDRG.js}

@@ -10,12 +10,12 @@ import {
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
-import {
-  watch
-} from "./chunk.X2OQMWGY.js";
 import {
   LocalizeController
 } from "./chunk.YKM42GKF.js";
+import {
+  watch
+} from "./chunk.X2OQMWGY.js";
 import {
   SolidElement,
   customElement
@@ -142,7 +142,7 @@ var SdAccordion = class extends SolidElement {
     )}"></div><slot name="summary" part="summary" class="flex flex-auto items-center text-left">${this.summary}</slot><span part="summary-icon" class="${cx(
       "flex flex-grow-0 flex-shrink-0 flex-auto items-center transition-all ease-in-out duration-300 text-xl",
       this.open && "rotate-180"
-    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-4-6-7-icon library="system" name="chevron-down"></sd-4-6-7-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-4-6-7-icon library="system" name="chevron-down"></sd-4-6-7-icon></slot></span></summary><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></details>`;
+    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-4-6-9-icon library="system" name="chevron-down"></sd-4-6-9-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-4-6-9-icon library="system" name="chevron-down"></sd-4-6-9-icon></slot></span></summary><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></details>`;
   }
 };
 SdAccordion.styles = [
@@ -168,7 +168,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdAccordion.prototype, "handleOpenChange", 1);
 SdAccordion = __decorateClass([
-  customElement("sd-4-6-7-accordion")
+  customElement("sd-4-6-9-accordion")
 ], SdAccordion);
 setDefaultAnimation("accordion.show", {
   keyframes: [

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

@@ -98,7 +98,7 @@ __decorateClass([
   state()
 ], SdTeaser.prototype, "_orientation", 2);
 SdTeaser = __decorateClass([
-  customElement("sd-4-6-7-teaser")
+  customElement("sd-4-6-9-teaser")
 ], SdTeaser);
 
 export {

package/dist-versioned/chunks/{chunk.R24LPR7A.js → chunk.4FJAHWKR.js}

@@ -1,12 +1,12 @@
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
-import {
-  watch
-} from "./chunk.X2OQMWGY.js";
 import {
   LocalizeController
 } from "./chunk.YKM42GKF.js";
+import {
+  watch
+} from "./chunk.X2OQMWGY.js";
 import {
   SolidElement,
   customElement
@@ -72,7 +72,7 @@ var SdExpandable = class extends SolidElement {
       "sd-interactive sd-interactive--reset",
       this.inverted && "sd-interactive--inverted",
       !this.inverted ? "!focus-visible:focus-outline" : "!focus-visible:focus-outline-inverted"
-    )}" @click="${this.onToggleClick}" aria-expanded="${this.open}"><div class="${cx("h-full justify-center w-full text-base flex items-center toggle")}">${this.open ? html`<slot name="toggle-open"><sd-4-6-7-icon class="mr-2 text-xl" library="system" name="chevron-up"></sd-4-6-7-icon>${this.localize.term("showLess")}</slot>` : html`<slot name="toggle-closed"><sd-4-6-7-icon class="mr-2 text-xl" library="system" name="chevron-down"></sd-4-6-7-icon>${this.localize.term("showMore")}</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>`;
+    )}" @click="${this.onToggleClick}" aria-expanded="${this.open}"><div class="${cx("h-full justify-center w-full text-base flex items-center toggle")}">${this.open ? html`<slot name="toggle-open"><sd-4-6-9-icon class="mr-2 text-xl" library="system" name="chevron-up"></sd-4-6-9-icon>${this.localize.term("showLess")}</slot>` : html`<slot name="toggle-closed"><sd-4-6-9-icon class="mr-2 text-xl" library="system" name="chevron-down"></sd-4-6-9-icon>${this.localize.term("showMore")}</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();
@@ -109,7 +109,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdExpandable.prototype, "onOpenChange", 1);
 SdExpandable = __decorateClass([
-  customElement("sd-4-6-7-expandable")
+  customElement("sd-4-6-9-expandable")
 ], SdExpandable);
 
 export {