@solid-design-system/components 4.6.9 → 4.6.11

package/dist/chunks/{chunk.7PDAG24K.js → chunk.G2S4374K.js}

@@ -204,13 +204,13 @@ var SdDrawer = class extends SolidElement {
     )}" 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(
+    )}" @click="${() => this.requestClose("overlay")}"></div><div part="panel" class="${cx(
       "absolute flex flex-col gap-4 z-10 max-w-full max-h-full bg-white shadow-lg overflow-auto pointer-events-auto focus:outline-none",
       {
         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-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>`;
+    )}" 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 focus-visible:focus-outline !-outline-offset-2" 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/chunks/{chunk.IOAEHG5C.js → chunk.VLYSJHBZ.js}

@@ -36,6 +36,7 @@ import {
 
 // src/components/dialog/dialog.ts
 import { css, html } from "lit";
+import { ifDefined } from "lit-html/directives/if-defined.js";
 import { property, query } from "lit/decorators.js";
 import cx from "classix";
 var SdDialog = class extends SolidElement {
@@ -170,7 +171,7 @@ var SdDialog = class extends SolidElement {
     )}"><div part="overlay" class="fixed inset-0 bg-primary-800 opacity-90" @click="${() => this.requestClose("overlay")}" tabindex="-1"></div><div part="panel" class="${cx(
       "flex flex-col z-20 bg-white py-4 sm:py-8 relative gap-6 focus-visible:focus-outline-inverted overflow-y-auto",
       this.open && "flex opacity-100"
-    )}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${this.headline}" aria-labelledby="title" tabindex="0"><header part="header" class="flex flex-grow-0 flex-shrink-0 basis-auto px-6 sm:px-10"><h2 part="title" class="flex-auto m-0" id="title">${this.headline.length > 0 ? html`<span class="sd-headline sd-headline--size-3xl leading-tight">${this.headline}</span>` : html`<slot name="headline"></slot>`}</h2>${!this.noCloseButton ? html`<sd-button part="close-button" variant="tertiary" exportparts="base:close-button__base" class="${cx("absolute top-2 right-2")}" name="x-lg" @click="${() => this.requestClose("close-button")}" type="button"><sd-icon label="${this.localize.term("close")}" name="close" library="system" color="currentColor"></sd-icon></sd-button>` : ""}</header><main part="body" class="flex flex-auto overflow-auto w-full px-6 sm:px-10"><slot></slot></main><footer part="footer" class="flex flex-grow-0 flex-shrink-0 basis-auto ml-auto gap-4 px-6 sm:px-10"><slot name="footer"></slot></footer></div></div>`;
+    )}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${ifDefined(this.headline ? this.headline : void 0)}" aria-labelledby="${ifDefined(!this.headline ? "title" : void 0)}" tabindex="0"><header part="header" class="flex flex-grow-0 flex-shrink-0 basis-auto px-6 sm:px-10"><h2 part="title" class="flex-auto m-0" id="title">${this.headline.length > 0 ? html`<span class="sd-headline sd-headline--size-3xl leading-tight">${this.headline}</span>` : html`<slot name="headline"></slot>`}</h2>${!this.noCloseButton ? html`<sd-button part="close-button" variant="tertiary" exportparts="base:close-button__base" class="${cx("absolute top-2 right-2")}" name="x-lg" @click="${() => this.requestClose("close-button")}" type="button"><sd-icon label="${this.localize.term("close")}" name="close" library="system" color="currentColor"></sd-icon></sd-button>` : ""}</header><main part="body" class="flex flex-auto overflow-auto w-full px-6 sm:px-10"><slot></slot></main><footer part="footer" class="flex flex-grow-0 flex-shrink-0 basis-auto ml-auto gap-4 px-6 sm:px-10"><slot name="footer"></slot></footer></div></div>`;
   }
 };
 SdDialog.styles = [

package/dist/components/dialog/dialog.js

@@ -1,6 +1,6 @@
 import {
   SdDialog
-} from "../../chunks/chunk.IOAEHG5C.js";
+} from "../../chunks/chunk.VLYSJHBZ.js";
 import "../../chunks/chunk.UFBRSKVR.js";
 import "../../chunks/chunk.XHCTCU2Q.js";
 import "../../chunks/chunk.WDWV53JP.js";

package/dist/components/drawer/drawer.js

@@ -1,6 +1,6 @@
 import {
   SdDrawer
-} from "../../chunks/chunk.7PDAG24K.js";
+} from "../../chunks/chunk.G2S4374K.js";
 import "../../chunks/chunk.UFBRSKVR.js";
 import "../../chunks/chunk.XHCTCU2Q.js";
 import "../../chunks/chunk.WDWV53JP.js";

package/dist/custom-elements.json

@@ -1582,6 +1582,198 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/brandshape/brandshape.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SdBrandshape",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "Middle content wrapper.",
+              "name": "content"
+            },
+            {
+              "description": "Top shape.",
+              "name": "shape-top"
+            },
+            {
+              "description": "Middle shape.",
+              "name": "shape-middle"
+            },
+            {
+              "description": "Bottom shape.",
+              "name": "shape-bottom"
+            },
+            {
+              "description": "Container for border and image variant.",
+              "name": "stylized-container"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The content inside the brandshape.",
+              "name": ""
+            },
+            {
+              "description": "The image slot for the 'image' variant.",
+              "name": "image"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "| 'neutral-100'\n    | 'primary'\n    | 'white'\n    | 'border-primary'\n    | 'border-white'\n    | 'image'"
+              },
+              "default": "'primary'",
+              "description": "The brandshape's theme variant.",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "shapes",
+              "type": {
+                "text": "('top' | 'middle' | 'bottom')[]"
+              },
+              "default": "['top', 'middle', 'bottom']",
+              "description": "Defines which shapes of the brandshape should be displayed.",
+              "attribute": "shapes"
+            },
+            {
+              "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": "variant",
+              "type": {
+                "text": "| 'neutral-100'\n    | 'primary'\n    | 'white'\n    | 'border-primary'\n    | 'border-white'\n    | 'image'"
+              },
+              "default": "'primary'",
+              "description": "The brandshape's theme variant.",
+              "fieldName": "variant"
+            },
+            {
+              "name": "shapes",
+              "type": {
+                "text": "('top' | 'middle' | 'bottom')[]"
+              },
+              "default": "['top', 'middle', 'bottom']",
+              "description": "Defines which shapes of the brandshape should be displayed.",
+              "fieldName": "shapes"
+            },
+            {
+              "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": "The Brandshape highlights a piece of content.",
+          "documentation": "https://solid.union-investment.com/[storybook-brandshape]/brandshape",
+          "status": "stable",
+          "since": "1.4",
+          "tagName": "sd-brandshape",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SdBrandshape",
+            "module": "components/brandshape/brandshape.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "sd-brandshape",
+          "declaration": {
+            "name": "SdBrandshape",
+            "module": "components/brandshape/brandshape.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/button/button.js",
@@ -15443,198 +15635,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/brandshape/brandshape.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SdBrandshape",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "Middle content wrapper.",
-              "name": "content"
-            },
-            {
-              "description": "Top shape.",
-              "name": "shape-top"
-            },
-            {
-              "description": "Middle shape.",
-              "name": "shape-middle"
-            },
-            {
-              "description": "Bottom shape.",
-              "name": "shape-bottom"
-            },
-            {
-              "description": "Container for border and image variant.",
-              "name": "stylized-container"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The content inside the brandshape.",
-              "name": ""
-            },
-            {
-              "description": "The image slot for the 'image' variant.",
-              "name": "image"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "| 'neutral-100'\n    | 'primary'\n    | 'white'\n    | 'border-primary'\n    | 'border-white'\n    | 'image'"
-              },
-              "default": "'primary'",
-              "description": "The brandshape's theme variant.",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "shapes",
-              "type": {
-                "text": "('top' | 'middle' | 'bottom')[]"
-              },
-              "default": "['top', 'middle', 'bottom']",
-              "description": "Defines which shapes of the brandshape should be displayed.",
-              "attribute": "shapes"
-            },
-            {
-              "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": "variant",
-              "type": {
-                "text": "| 'neutral-100'\n    | 'primary'\n    | 'white'\n    | 'border-primary'\n    | 'border-white'\n    | 'image'"
-              },
-              "default": "'primary'",
-              "description": "The brandshape's theme variant.",
-              "fieldName": "variant"
-            },
-            {
-              "name": "shapes",
-              "type": {
-                "text": "('top' | 'middle' | 'bottom')[]"
-              },
-              "default": "['top', 'middle', 'bottom']",
-              "description": "Defines which shapes of the brandshape should be displayed.",
-              "fieldName": "shapes"
-            },
-            {
-              "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": "The Brandshape highlights a piece of content.",
-          "documentation": "https://solid.union-investment.com/[storybook-brandshape]/brandshape",
-          "status": "stable",
-          "since": "1.4",
-          "tagName": "sd-brandshape",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SdBrandshape",
-            "module": "components/brandshape/brandshape.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "sd-brandshape",
-          "declaration": {
-            "name": "SdBrandshape",
-            "module": "components/brandshape/brandshape.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/teaser-media/teaser-media.js",
@@ -17168,7 +17168,7 @@
   "package": {
     "name": "@solid-design-system/components",
     "description": "Solid Design System: Components",
-    "version": "4.6.9",
+    "version": "4.6.11",
     "author": "Union Investment",
     "homepage": "https://solid-design-system.fe.union-investment.de/docs/",
     "license": "MIT"

package/dist/solid-components.js

@@ -109,13 +109,13 @@ import "./chunks/chunk.WBJBQ4QI.js";
 import "./chunks/chunk.UIQBHPD3.js";
 import {
   SdDialog
-} from "./chunks/chunk.IOAEHG5C.js";
+} from "./chunks/chunk.VLYSJHBZ.js";
 import {
   SdDivider
 } from "./chunks/chunk.EZKDJFKX.js";
 import {
   SdDrawer
-} from "./chunks/chunk.7PDAG24K.js";
+} from "./chunks/chunk.G2S4374K.js";
 import "./chunks/chunk.UFBRSKVR.js";
 import "./chunks/chunk.XHCTCU2Q.js";
 import "./chunks/chunk.WDWV53JP.js";

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

@@ -222,6 +222,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-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.",
@@ -2633,50 +2677,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-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.",