@solid-design-system/components 1.6.0 → 1.7.0

package/dist/versioned-components/es/teaser.js

@@ -1 +1 @@
-import{x as t,i as e}from"./lit-element.js";import{S as i,n as r,e as s}from"./solid-element.js";import{t as a}from"./state.js";import{i as o}from"./query.js";import{H as n}from"./slot.js";import{t as l}from"./classix.js";var h=Object.defineProperty,d=Object.getOwnPropertyDescriptor,p=(t,e,i,r)=>{for(var s,a=r>1?void 0:r?d(e,i):e,o=t.length-1;o>=0;o--)(s=t[o])&&(a=(r?s(e,i,a):s(a))||a);return r&&a&&h(e,i,a),a};let c=class extends i{constructor(){super(...arguments),this.variant="white",this.breakpoint=448,this.inset=!1,this.hasSlotController=new n(this,"[default]","media","meta","headline")}connectedCallback(){super.connectedCallback(),0===this.breakpoint?this._orientation="horizontal":9999===this.breakpoint?this._orientation="vertical":window.ResizeObserver&&(this.resizeObserver=new ResizeObserver((()=>this.updateOrientation())),this.resizeObserver.observe(this))}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver&&this.resizeObserver.disconnect()}updated(t){super.updated(t),t.has("breakpoint")&&this.updateOrientation()}updateOrientation(){this._orientation=this.offsetWidth>=this.breakpoint?"horizontal":"vertical"}render(){"white border-neutral-300"===this.variant&&(this.inset=!0);const e=this.hasSlotController.test("[default]"),i=this.hasSlotController.test("media"),r=this.hasSlotController.test("meta");return this.hasSlotController.test("headline"),t`<div class="${l("flex",{white:"bg-white","white border-neutral-300":"bg-white border border-neutral-300","neutral-100":"bg-neutral-100",primary:"bg-primary text-white","primary-100":"bg-primary-100"}[this.variant],"vertical"===this._orientation&&"flex-col","horizontal"===this._orientation&&"flex-row gap-8","horizontal"===this._orientation&&this.inset&&"py-8 px-10")}" part="base"><div style="${"horizontal"===this._orientation?"width: var(--distribution-media, 100%);":""}" class="${l(!this.inset&&"vertical"===this._orientation&&"mb-4",!i&&"hidden")}" part="media"><slot name="media"></slot></div><div style="${"horizontal"===this._orientation?"width: var(--distribution-content, 100%); "+(this.inset?"width: var(--distribution-content, calc(100% - 2rem));":""):""}" class="${l("flex flex-col text-left","horizontal"===this._orientation&&"flex flex-col","vertical"===this._orientation&&this.inset&&"m-4")}" part="content"><div part="meta" class="${l("gap-2 mb-4",!r&&"hidden")}"><slot name="meta"></slot></div><div part="headline" class="${l("text-lg font-bold m-0","primary"===this.variant?"text-white":"text-black")}"><slot name="headline">Always insert one semantically correct heading element here (e. g. &lt;h2>)</slot></div><div part="main" class="${l(!e&&"hidden")}"><slot></slot></div></div></div>`}};c.styles=[i.styles,e`:host{display:block}::slotted(*){margin:0}::slotted([slot=headline]){font-size:var(--sd-font-size-lg,1.25rem)!important;font-weight:700;margin:0!important}`],p([r({reflect:!0})],c.prototype,"variant",2),p([r({reflect:!0,type:Number})],c.prototype,"breakpoint",2),p([r({type:Boolean,reflect:!0})],c.prototype,"inset",2),p([o('[part="base"]')],c.prototype,"teaser",2),p([a()],c.prototype,"_orientation",2),c=p([s("sd-1-6-0-teaser")],c);export{c as default};
+import{x as t,i as e}from"./lit-element.js";import{S as i,n as r,e as s}from"./solid-element.js";import{t as a}from"./state.js";import{i as o}from"./query.js";import{H as n}from"./slot.js";import{t as l}from"./classix.js";var h=Object.defineProperty,d=Object.getOwnPropertyDescriptor,p=(t,e,i,r)=>{for(var s,a=r>1?void 0:r?d(e,i):e,o=t.length-1;o>=0;o--)(s=t[o])&&(a=(r?s(e,i,a):s(a))||a);return r&&a&&h(e,i,a),a};let c=class extends i{constructor(){super(...arguments),this.variant="white",this.breakpoint=448,this.inset=!1,this.hasSlotController=new n(this,"[default]","media","meta","headline")}connectedCallback(){super.connectedCallback(),0===this.breakpoint?this._orientation="horizontal":9999===this.breakpoint?this._orientation="vertical":window.ResizeObserver&&(this.resizeObserver=new ResizeObserver((()=>this.updateOrientation())),this.resizeObserver.observe(this))}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver&&this.resizeObserver.disconnect()}updated(t){super.updated(t),t.has("breakpoint")&&this.updateOrientation()}updateOrientation(){this._orientation=this.offsetWidth>=this.breakpoint?"horizontal":"vertical"}render(){"white border-neutral-300"===this.variant&&(this.inset=!0);const e=this.hasSlotController.test("[default]"),i=this.hasSlotController.test("media"),r=this.hasSlotController.test("meta");return this.hasSlotController.test("headline"),t`<div class="${l("flex",{white:"bg-white","white border-neutral-300":"bg-white border border-neutral-300","neutral-100":"bg-neutral-100",primary:"bg-primary text-white","primary-100":"bg-primary-100"}[this.variant],"vertical"===this._orientation&&"flex-col","horizontal"===this._orientation&&"flex-row gap-8","horizontal"===this._orientation&&this.inset&&"py-8 px-10")}" part="base"><div style="${"horizontal"===this._orientation?"width: var(--distribution-media, 100%);":""}" class="${l(!this.inset&&"vertical"===this._orientation&&"mb-4",!i&&"hidden")}" part="media"><slot name="media"></slot></div><div style="${"horizontal"===this._orientation?"width: var(--distribution-content, 100%); "+(this.inset?"width: var(--distribution-content, calc(100% - 2rem));":""):""}" class="${l("flex flex-col text-left","horizontal"===this._orientation&&"flex flex-col","vertical"===this._orientation&&this.inset&&"m-4")}" part="content"><div part="meta" class="${l("gap-2 mb-4",!r&&"hidden")}"><slot name="meta"></slot></div><div part="headline" class="${l("text-lg font-bold m-0","primary"===this.variant?"text-white":"text-black")}"><slot name="headline">Always insert one semantically correct heading element here (e. g. &lt;h2>)</slot></div><div part="main" class="${l(!e&&"hidden")}"><slot></slot></div></div></div>`}};c.styles=[i.styles,e`:host{display:block}::slotted(*){margin:0}::slotted([slot=headline]){font-size:var(--sd-font-size-lg,1.25rem)!important;font-weight:700;margin:0!important}`],p([r({reflect:!0})],c.prototype,"variant",2),p([r({reflect:!0,type:Number})],c.prototype,"breakpoint",2),p([r({type:Boolean,reflect:!0})],c.prototype,"inset",2),p([o('[part="base"]')],c.prototype,"teaser",2),p([a()],c.prototype,"_orientation",2),c=p([s("sd-1-7-0-teaser")],c);export{c as default};

package/dist/versioned-package/components/accordion/accordion.d.ts

@@ -18,6 +18,6 @@ export default class SdAccordion extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-6-0-accordion': SdAccordion;
+        'sd-1-7-0-accordion': SdAccordion;
     }
 }

package/dist/versioned-package/components/accordion/accordion.js

@@ -105,7 +105,7 @@ let SdAccordion = class extends SolidElement {
     )}" role="button" aria-expanded="${this.open ? "true" : "false"}" aria-controls="content" tabindex="0" @click="${this.handleSummaryClick}" @keydown="${this.handleSummaryKeyDown}"><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-1-6-0-icon library="system" name="chevron-down"></sd-1-6-0-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-1-6-0-icon library="system" name="chevron-down"></sd-1-6-0-icon></slot></span></header><div part="content" id="content" class="overflow-hidden"><slot class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></div>`;
+    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-1-7-0-icon library="system" name="chevron-down"></sd-1-7-0-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-1-7-0-icon library="system" name="chevron-down"></sd-1-7-0-icon></slot></span></header><div part="content" id="content" class="overflow-hidden"><slot class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></div>`;
   }
 };
 SdAccordion.styles = [
@@ -131,7 +131,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdAccordion.prototype, "handleOpenChange", 1);
 SdAccordion = __decorateClass([
-  customElement("sd-1-6-0-accordion")
+  customElement("sd-1-7-0-accordion")
 ], SdAccordion);
 setDefaultAnimation("accordion.show", {
   keyframes: [

package/dist/versioned-package/components/accordion-group/accordion-group.d.ts

@@ -11,6 +11,6 @@ export default class SdAccordionGroup extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-6-0-accordion-group': SdAccordionGroup;
+        'sd-1-7-0-accordion-group': SdAccordionGroup;
     }
 }

package/dist/versioned-package/components/accordion-group/accordion-group.js

@@ -47,16 +47,16 @@ let SdAccordionGroup = class extends SolidElement {
 SdAccordionGroup.styles = [
   componentStyles,
   SolidElement.styles,
-  css`:host{display:block}::slotted(sd-1-6-0-accordion:not(:first-of-type)){margin-top:-1px}`
+  css`:host{display:block}::slotted(sd-1-7-0-accordion:not(:first-of-type)){margin-top:-1px}`
 ];
 __decorateClass([
-  queryAssignedElements({ selector: "sd-1-6-0-accordion" })
+  queryAssignedElements({ selector: "sd-1-7-0-accordion" })
 ], SdAccordionGroup.prototype, "_accordionsInDefaultSlot", 2);
 __decorateClass([
   property({ attribute: "close-others", type: Boolean })
 ], SdAccordionGroup.prototype, "closeOthers", 2);
 SdAccordionGroup = __decorateClass([
-  customElement("sd-1-6-0-accordion-group")
+  customElement("sd-1-7-0-accordion-group")
 ], SdAccordionGroup);
 export {
   SdAccordionGroup as default

package/dist/versioned-package/components/badge/badge.d.ts

@@ -8,6 +8,6 @@ export default class SdBadge extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-6-0-badge': SdBadge;
+        'sd-1-7-0-badge': SdBadge;
     }
 }

package/dist/versioned-package/components/badge/badge.js

@@ -52,7 +52,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdBadge.prototype, "inverted", 2);
 SdBadge = __decorateClass([
-  customElement("sd-1-6-0-badge")
+  customElement("sd-1-7-0-badge")
 ], SdBadge);
 export {
   SdBadge as default

package/dist/versioned-package/components/brandshape/brandshape.d.ts

@@ -22,6 +22,6 @@ export default class SdBrandshape extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-6-0-brandshape': SdBrandshape;
+        'sd-1-7-0-brandshape': SdBrandshape;
     }
 }

package/dist/versioned-package/components/brandshape/brandshape.js

@@ -122,7 +122,7 @@ __decorateClass([
   state()
 ], SdBrandshape.prototype, "componentBreakpoint", 2);
 SdBrandshape = __decorateClass([
-  customElement("sd-1-6-0-brandshape")
+  customElement("sd-1-7-0-brandshape")
 ], SdBrandshape);
 export {
   SdBrandshape as default

package/dist/versioned-package/components/button/button.d.ts

@@ -43,6 +43,6 @@ export default class SdButton extends SolidElement implements SolidFormControl {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-6-0-button': SdButton;
+        'sd-1-7-0-button': SdButton;
     }
 }

package/dist/versioned-package/components/button/button.js

@@ -190,19 +190,19 @@ let SdButton = class extends SolidElement {
         md: "ml-2",
         lg: "ml-2"
       }[this.size]
-    )}"></slot>${this.loading ? html`<sd-1-6-0-spinner class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-1-6-0-spinner>` : ""}</${tag}>`;
+    )}"></slot>${this.loading ? html`<sd-1-7-0-spinner class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-1-7-0-spinner>` : ""}</${tag}>`;
   }
 };
 SdButton.styles = [
   componentStyles,
   SolidElement.styles,
-  css`:host{display:inline-block;position:relative;width:auto;cursor:pointer}sd-1-6-0-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-1-6-0-badge){position:absolute;top:0;right:0;translate:50% -50%;pointer-events:none}::slotted(sd-1-6-0-icon),sd-1-6-0-spinner{font-size:calc(var(--tw-varspacing)/ 2)}`
+  css`:host{display:inline-block;position:relative;width:auto;cursor:pointer}sd-1-7-0-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-1-7-0-badge){position:absolute;top:0;right:0;translate:50% -50%;pointer-events:none}::slotted(sd-1-7-0-icon),sd-1-7-0-spinner{font-size:calc(var(--tw-varspacing)/ 2)}`
 ];
 __decorateClass([
   query("a, button")
 ], SdButton.prototype, "button", 2);
 __decorateClass([
-  queryAssignedElements({ selector: "sd-1-6-0-icon" })
+  queryAssignedElements({ selector: "sd-1-7-0-icon" })
 ], SdButton.prototype, "_iconsInDefaultSlot", 2);
 __decorateClass([
   state()
@@ -265,7 +265,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdButton.prototype, "handleDisabledChange", 1);
 SdButton = __decorateClass([
-  customElement("sd-1-6-0-button")
+  customElement("sd-1-7-0-button")
 ], SdButton);
 export {
   SdButton as default

package/dist/versioned-package/components/divider/divider.d.ts

@@ -8,6 +8,6 @@ export default class SdDivider extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-6-0-divider': SdDivider;
+        'sd-1-7-0-divider': SdDivider;
     }
 }

package/dist/versioned-package/components/divider/divider.js

@@ -34,7 +34,7 @@ let SdDivider = class extends SolidElement {
 SdDivider.styles = [
   componentStyles,
   SolidElement.styles,
-  css`:host{margin:0}:host(sd-1-6-0-divider[orientation=horizontal]){display:block}:host(sd-1-6-0-divider[orientation=vertical]){display:inline-block}`
+  css`:host{margin:0}:host(sd-1-7-0-divider[orientation=horizontal]){display:block}:host(sd-1-7-0-divider[orientation=vertical]){display:inline-block}`
 ];
 __decorateClass([
   property({ reflect: true })
@@ -43,7 +43,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdDivider.prototype, "inverted", 2);
 SdDivider = __decorateClass([
-  customElement("sd-1-6-0-divider")
+  customElement("sd-1-7-0-divider")
 ], SdDivider);
 export {
   SdDivider as default

package/dist/versioned-package/components/icon/icon.d.ts

@@ -17,6 +17,6 @@ export default class SdIcon extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-6-0-icon': SdIcon;
+        'sd-1-7-0-icon': SdIcon;
     }
 }

package/dist/versioned-package/components/icon/icon.js

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

package/dist/versioned-package/components/include/include.d.ts

@@ -11,6 +11,6 @@ export default class SdInclude extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-6-0-include': SdInclude;
+        'sd-1-7-0-include': SdInclude;
     }
 }

package/dist/versioned-package/components/include/include.js

@@ -65,7 +65,7 @@ __decorateClass([
   watch("src")
 ], SdInclude.prototype, "handleSrcChange", 1);
 SdInclude = __decorateClass([
-  customElement("sd-1-6-0-include")
+  customElement("sd-1-7-0-include")
 ], SdInclude);
 export {
   SdInclude as default

package/dist/versioned-package/components/link/link.d.ts

@@ -17,6 +17,6 @@ export default class SdLink extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-6-0-link': SdLink;
+        'sd-1-7-0-link': SdLink;
     }
 }

package/dist/versioned-package/components/link/link.js

@@ -76,7 +76,7 @@ let SdLink = class extends SolidElement {
 };
 SdLink.styles = [
   SolidElement.styles,
-  css`::slotted(sd-1-6-0-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-1-6-0-icon){font-size:1rem}:host([size=lg][standalone]) ::slotted(sd-1-6-0-icon){font-size:1.5rem}`
+  css`::slotted(sd-1-7-0-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-1-7-0-icon){font-size:1rem}:host([size=lg][standalone]) ::slotted(sd-1-7-0-icon){font-size:1.5rem}`
 ];
 __decorateClass([
   query("a")
@@ -100,7 +100,7 @@ __decorateClass([
   property()
 ], SdLink.prototype, "download", 2);
 SdLink = __decorateClass([
-  customElement("sd-1-6-0-link")
+  customElement("sd-1-7-0-link")
 ], SdLink);
 export {
   SdLink as default

package/dist/versioned-package/components/spinner/spinner.d.ts

@@ -7,6 +7,6 @@ export default class SdSpinner extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-6-0-spinner': SdSpinner;
+        'sd-1-7-0-spinner': SdSpinner;
     }
 }

package/dist/versioned-package/components/spinner/spinner.js

@@ -39,7 +39,7 @@ __decorateClass([
   property({ reflect: true })
 ], SdSpinner.prototype, "color", 2);
 SdSpinner = __decorateClass([
-  customElement("sd-1-6-0-spinner")
+  customElement("sd-1-7-0-spinner")
 ], SdSpinner);
 export {
   SdSpinner as default

package/dist/versioned-package/components/teaser/teaser.js

@@ -97,7 +97,7 @@ __decorateClass([
   state()
 ], SdTeaser.prototype, "_orientation", 2);
 SdTeaser = __decorateClass([
-  customElement("sd-1-6-0-teaser")
+  customElement("sd-1-7-0-teaser")
 ], SdTeaser);
 export {
   SdTeaser as default

package/dist/versioned-package/internal/form.js

@@ -90,7 +90,7 @@ class FormControlController {
     const disabled = this.options.disabled(this.host);
     const name = this.options.name(this.host);
     const value = this.options.value(this.host);
-    const isButton = this.host.tagName.toLowerCase() === "sd-1-6-0-button";
+    const isButton = this.host.tagName.toLowerCase() === "sd-1-7-0-button";
     if (!disabled && !isButton && typeof name === "string" && name.length > 0 && typeof value !== "undefined") {
       if (Array.isArray(value)) {
         value.forEach((val) => {

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

@@ -499,7 +499,7 @@
       "references": []
     },
     {
-      "name": "sd-1-6-0-accordion-group",
+      "name": "sd-1-7-0-accordion-group",
       "description": "Short summary of the component's intended use.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The default slot where `<sd-accordion>` elements are placed.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
       "attributes": [
         {
@@ -511,7 +511,7 @@
       "references": []
     },
     {
-      "name": "sd-1-6-0-accordion",
+      "name": "sd-1-7-0-accordion",
       "description": "Accordion shows a brief summary and expands to show additional content.\n\n\n---\n\n\n\n\n### **Events:**\n - **sd-show** - Emitted when the accordion opens.\n- **sd-after-show** - Emitted after the accordion opens and all animations are complete.\n- **sd-hide** - Emitted when the accordion closes.\n- **sd-after-hide** - Emitted after the accordion closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the accordion.\n- **hide()** - Hides the accordion\n\n### **Slots:**\n - _default_ - The accordion main content.\n- **summary** - The accordion summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sd-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sd-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The header that wraps both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **content** - The accordion content.",
       "attributes": [
         {
@@ -528,7 +528,7 @@
       "references": []
     },
     {
-      "name": "sd-1-6-0-badge",
+      "name": "sd-1-7-0-badge",
       "description": "Badges are used to draw attention and display statuses or counts.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The badge's base wrapper.\n- **content** - The badge's main content.",
       "attributes": [
         {
@@ -570,7 +570,7 @@
       "references": []
     },
     {
-      "name": "sd-1-6-0-brandshape",
+      "name": "sd-1-7-0-brandshape",
       "description": "The Brandshape highlights a piece of content.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The content inside the brandshape.\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.",
       "attributes": [
         {
@@ -607,7 +607,7 @@
       "references": []
     },
     {
-      "name": "sd-1-6-0-button",
+      "name": "sd-1-7-0-button",
       "description": "Buttons represent actions that are available to the user.\n\n\n---\n\n\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-focus** - Emitted when the button gains focus.\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.\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\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.",
       "attributes": [
         {
@@ -779,7 +779,7 @@
       "references": []
     },
     {
-      "name": "sd-1-6-0-divider",
+      "name": "sd-1-7-0-divider",
       "description": "Dividers are used to visually separate or group elements.\n\n\n---\n\n\n",
       "attributes": [
         {
@@ -803,7 +803,7 @@
       "references": []
     },
     {
-      "name": "sd-1-6-0-icon",
+      "name": "sd-1-7-0-icon",
       "description": "Icons are symbols that can be used to represent various options within an application.\n\n\n---\n\n\n\n\n### **Events:**\n - **sd-load** - Emitted when the icon has loaded.\n- **sd-error** - Emitted when the icon fails to load due to an error.",
       "attributes": [
         {
@@ -845,7 +845,7 @@
       "references": []
     },
     {
-      "name": "sd-1-6-0-include",
+      "name": "sd-1-7-0-include",
       "description": "Includes give you the power to embed external HTML files into the page.\n\n\n---\n\n\n\n\n### **Events:**\n - **sd-load** - Emitted when the included file is loaded.\n- **sd-error** - Emitted when the included file fails to load due to an error.",
       "attributes": [
         {
@@ -877,7 +877,7 @@
       "references": []
     },
     {
-      "name": "sd-1-6-0-link",
+      "name": "sd-1-7-0-link",
       "description": "A link component.\n\n\n---\n\n\n\n\n### **Events:**\n - **sd-blur** - Emitted when the link loses focus.\n- **sd-focus** - Emitted when the link gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\n\n### **Slots:**\n - _default_ - The default slot.\n- **icon-left** - The icon to display on the left side of the link.\n- **icon-right** - The icon to display on the right side of the link.\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 link's label.\n- **icon-right** - The container that wraps the right icon area.",
       "attributes": [
         {
@@ -937,7 +937,7 @@
       "references": []
     },
     {
-      "name": "sd-1-6-0-spinner",
+      "name": "sd-1-7-0-spinner",
       "description": "Spinners are used to show the progress of an indeterminate operation.\n\n\n---\n\n\n",
       "attributes": [
         {
@@ -959,7 +959,7 @@
       "references": []
     },
     {
-      "name": "sd-1-6-0-teaser",
+      "name": "sd-1-7-0-teaser",
       "description": "Teasers group information into flexible containers so users can browse a collection of related items and actions.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - An optional main content slot.\n- **media** - An optional media slot.\n- **meta** - An optional meta slot.\n- **headline** - headline slot.\n\n### **CSS Properties:**\n - **--distribution-media** - The distribution ratio of the media. _(default: undefined)_\n- **--distribution-content** - The distribution ratio of the content. _(default: undefined)_\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- **main** - The container that wraps the main content.",
       "attributes": [
         {

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/web-types",
   "name": "@solid-design-system/components",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description-markup": "markdown",
   "framework-config": {
     "enable-when": {
@@ -1136,7 +1136,7 @@
           ]
         },
         {
-          "name": "sd-1-6-0-accordion-group",
+          "name": "sd-1-7-0-accordion-group",
           "description": "",
           "doc-url": "https://solid.union-investment.com/[storybook-link]/accordion-group",
           "js": {
@@ -1166,7 +1166,7 @@
           ]
         },
         {
-          "name": "sd-1-6-0-accordion",
+          "name": "sd-1-7-0-accordion",
           "description": "",
           "doc-url": "https://solid.union-investment.com/[storybook-link]/accordion",
           "js": {
@@ -1249,7 +1249,7 @@
           ]
         },
         {
-          "name": "sd-1-6-0-badge",
+          "name": "sd-1-7-0-badge",
           "description": "",
           "doc-url": "https://solid.union-investment.com/[storybook-link]/badge",
           "js": {
@@ -1303,7 +1303,7 @@
           ]
         },
         {
-          "name": "sd-1-6-0-brandshape",
+          "name": "sd-1-7-0-brandshape",
           "description": "",
           "doc-url": "https://solid.union-investment.com/[storybook-link]/brandshape",
           "js": {
@@ -1392,7 +1392,7 @@
           ]
         },
         {
-          "name": "sd-1-6-0-button",
+          "name": "sd-1-7-0-button",
           "description": "",
           "doc-url": "https://solid.union-investment.com/[storybook-link]/button",
           "js": {
@@ -1731,7 +1731,7 @@
           ]
         },
         {
-          "name": "sd-1-6-0-divider",
+          "name": "sd-1-7-0-divider",
           "description": "",
           "doc-url": "https://solid.union-investment.com/[storybook-link]/divider",
           "js": {
@@ -1771,7 +1771,7 @@
           ]
         },
         {
-          "name": "sd-1-6-0-icon",
+          "name": "sd-1-7-0-icon",
           "description": "",
           "doc-url": "https://solid.union-investment.com/[storybook-link]/icon",
           "js": {
@@ -1880,7 +1880,7 @@
           ]
         },
         {
-          "name": "sd-1-6-0-include",
+          "name": "sd-1-7-0-include",
           "description": "",
           "doc-url": "https://solid.union-investment.com/[storybook-link]/include",
           "js": {
@@ -1951,7 +1951,7 @@
           ]
         },
         {
-          "name": "sd-1-6-0-link",
+          "name": "sd-1-7-0-link",
           "description": "",
           "doc-url": "https://solid.union-investment.com/[storybook-link]/link",
           "js": {
@@ -2078,7 +2078,7 @@
           ]
         },
         {
-          "name": "sd-1-6-0-spinner",
+          "name": "sd-1-7-0-spinner",
           "description": "",
           "doc-url": "https://solid.union-investment.com/[storybook-link]/spinner",
           "js": {
@@ -2108,7 +2108,7 @@
           ]
         },
         {
-          "name": "sd-1-6-0-teaser",
+          "name": "sd-1-7-0-teaser",
           "description": "",
           "doc-url": "https://solid.union-investment.com/[storybook-link]/teaser",
           "js": {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solid-design-system/components",
   "description": "Solid Design System: Components",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "homepage": "https://solid-design-system.fe.union-investment.de/x.x.x/storybook/",
   "author": {
     "name": "Union Investment"
@@ -26,6 +26,12 @@
     "./versioned/*": {
       "import": "./dist/versioned-package/components/*",
       "types": "./dist/versioned-package/solid-components.d.ts"
+    },
+    "./unversioned-styles": {
+      "import": "./dist/styles/solid-styles.css"
+    },
+    "./versioned-styles": {
+      "import": "./dist/versioned-styles/solid-styles.css"
     }
   },
   "files": [
@@ -44,20 +50,20 @@
   "scripts": {
     "start": "echo '❌ Please use `pnpm dev` instead.'",
     "dev": "pnpm storybook",
-    "build": "pnpm build.components && pnpm build.package && pnpm build.storybook && node ./scripts/node-version-components.cjs",
+    "build": "pnpm build.components && pnpm build.package && pnpm build.storybook && node ./scripts/node-version-components.cjs && pnpm build.styles",
     "build.cdn": "pnpm build.components && pnpm build.storybook && node ./scripts/node-version-components.cjs",
     "build.npm": "pnpm build.components && pnpm build.package && node ./scripts/node-version-components.cjs",
     "build.components": "vite build  --config vite.config.js",
+    "build.styles": "vite build  --config vite.config.styles.js",
     "build.package": "pnpm build.package/create-index && vite build --config vite.config.package.js && pnpm build.package/remove-index",
     "build.package/create-index": "node scripts/node-generate-package-index.cjs && echo '✅ Index created'",
     "build.package/remove-index": "node -e \"require('fs').unlinkSync('src/solid-components.package.ts')\" && echo '✅ Index removed'",
-    "build.storybook": "storybook build --output-dir dist/storybook && cp dist/custom-elements.json dist/storybook/custom-elements.json",
-    "build.chromatic": "pnpm build.storybook && pnpm ci.optimize-chromatic",
+    "build.storybook": "storybook build --output-dir dist/storybook && vite-node scripts/node-optimize-storybook.js",
+    "build.chromatic": "pnpm build.storybook && node ./scripts/node-optimize-chromatic.cjs",
     "preview": "vite preview",
-    "verify": "pnpm ts.verify && pnpm build && echo '✅ Build verified' && pnpm ci.optimize-chromatic && echo '✅ Chromatic optimization verified' && pnpm test.verify && echo '✅ Test verified'",
+    "verify": "pnpm ts.verify && pnpm build && echo '✅ Build verified' && node ./scripts/node-optimize-chromatic.cjs && echo '✅ Chromatic optimization verified' && pnpm test.verify && echo '✅ Test verified'",
     "ts.verify": "tsc --noEmit --project ./tsconfig.json && echo '✅ TypeScript verified'",
     "plop": "plop --plopfile scripts/plop/plopfile.js",
-    "ci.optimize-chromatic": "node ./scripts/storybook/optimize-chromatic.cjs",
     "test": "pnpm build.components && web-test-runner --group default",
     "test.verify": "web-test-runner --group default",
     "test.component": "web-test-runner -- --watch --group",
@@ -85,17 +91,17 @@
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-essentials": "^7.0.20",
-    "@storybook/addon-interactions": "^7.0.26",
-    "@storybook/addon-links": "^7.0.20",
-    "@storybook/addon-mdx-gfm": "^7.0.20",
-    "@storybook/addons": "^7.0.20",
-    "@storybook/blocks": "^7.0.20",
-    "@storybook/jest": "^0.1.0",
+    "@storybook/addon-essentials": "^7.3.2",
+    "@storybook/addon-interactions": "^7.3.2",
+    "@storybook/addon-links": "^7.3.2",
+    "@storybook/addon-mdx-gfm": "^7.3.2",
+    "@storybook/addons": "^7.3.2",
+    "@storybook/blocks": "^7.3.2",
+    "@storybook/jest": "^0.2.1",
     "@storybook/testing-library": "^0.2.0",
-    "@storybook/theming": "^7.0.20",
-    "@storybook/web-components": "^7.0.20",
-    "@storybook/web-components-vite": "^7.0.20",
+    "@storybook/theming": "^7.3.2",
+    "@storybook/web-components": "^7.3.2",
+    "@storybook/web-components-vite": "^7.3.2",
     "@types/mocha": "^10.0.1",
     "@types/sinon": "^10.0.15",
     "@web/test-runner": "^0.16.1",
@@ -119,17 +125,19 @@
     "prettier": "^2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-summary": "^2.0.0",
     "semantic-release": "^19.0.5",
     "semantic-release-monorepo": "^7.0.5",
     "sinon": "^15.1.0",
-    "storybook": "^7.0.20",
+    "storybook": "^7.3.2",
     "storybook-addon-designs": "7.0.0-beta.2",
     "tailwindcss": "^3.3.2",
     "terser": "^5.17.7",
     "typescript": "5.0.4",
     "user-agent-data-types": "^0.3.1",
     "vite": "^4.3.9",
+    "vite-node": "^0.34.2",
     "vite-plugin-cem": "^0.5.0",
     "vite-tsconfig-paths": "^4.2.0"
   },