@solid-design-system/components 4.0.0-next.2 → 4.0.0-next.4

package/dist/chunks/{chunk.6JI7NL3E.js → chunk.4JZQQD4L.js}

@@ -1,6 +1,6 @@
 import {
   SdAccordion
-} from "./chunk.DAM3ICHP.js";
+} from "./chunk.TWXYFPBS.js";
 import {
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
@@ -12,7 +12,8 @@ import {
 } from "./chunk.S3NI7NKU.js";
 
 // src/components/quickfact/quickfact.ts
-import { css, html } from "lit";
+import { css } from "lit";
+import { html, literal } from "lit/static-html.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { property } from "lit/decorators.js";
 import cx from "classix";
@@ -22,17 +23,58 @@ var SdQuickfact = class extends SdAccordion {
     this.expandable = false;
   }
   render() {
-    return html`<div part="base" class="sm:p-6"><header part="header" id="header" class="${cx(
+    const base = this.expandable ? literal`details` : literal`div`;
+    const header = this.expandable ? literal`summary` : literal`div`;
+    return html`
+      <${base} part="base" class="sm:p-6">
+        <${header}
+          part="header"
+          id="header"
+          class=${cx(
       "text-base font-bold items-center focus-visible:focus-outline text-primary relative group flex flex-row hover:bg-transparent gap-3 pb-3 pt-0 px-0 sm:flex-col sm:gap-4 sm:pb-8",
       this.expandable && "cursor-pointer select-none"
-    )}" role="${ifDefined(this.expandable ? "button" : void 0)}" aria-expanded="${ifDefined(this.expandable ? this.open ? "true" : "false" : void 0)}" aria-controls="${ifDefined(this.expandable ? "content" : void 0)}" tabindex="${this.expandable ? "0" : "-1"}" @click="${this.expandable ? this.handleSummaryClick : null}" @keydown="${this.expandable ? this.handleSummaryKeyDown : null}"><div part="icon" class="${cx("flex flex-grow-0 flex-shrink-0 flex-auto items-center", !this.expandable && "cursor-default")}"><slot name="icon"></slot></div><slot name="summary" part="summary" class="${cx(
+    )}
+          role=${ifDefined(this.expandable ? "button" : void 0)}
+          aria-expanded=${ifDefined(this.expandable ? this.open ? "true" : "false" : void 0)}
+          aria-controls=${ifDefined(this.expandable ? "content" : void 0)}
+          tabindex=${this.expandable ? "0" : "-1"}
+          @click=${this.expandable ? this.handleSummaryClick : null}
+          @keydown=${this.expandable ? this.handleSummaryKeyDown : null}
+        >
+          <div
+            part="icon"
+            class=${cx("flex flex-grow-0 flex-shrink-0 flex-auto items-center", !this.expandable && "cursor-default")}
+          >
+            <slot name="icon"></slot>
+          </div>
+          <slot
+            name="summary"
+            part="summary"
+            class=${cx(
       "flex flex-auto items-start text-left text-base leading-normal font-normal sm:leading-tight sm:text-3xl sm:text-center",
       this.expandable ? "text-primary" : "text-black cursor-default"
-    )}">${this.summary}</slot><span part="summary-icon" class="${cx(
+    )}>
+            ${this.summary}
+            </slot>
+          <span
+            part="summary-icon"
+            class=${cx(
       "flex flex-grow-0 flex-shrink-0 flex-auto self-start sm:self-center transition-all ease-in-out duration-300 text-xl sm:text-4xl sm:mt-2",
       this.open && "rotate-180",
       !this.expandable && "hidden"
-    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-icon library="system" name="chevron-down"></sd-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-icon library="system" name="chevron-down"></sd-icon></slot></span></header><div part="content" id="content" class="${cx("overflow-hidden", !this.expandable && "hidden")}"><slot part="content__slot" class="block" role="region" aria-labelledby="header"></slot></div></div>`;
+    )}
+            ><slot name="expand-icon" class=${cx(this.open && "hidden")}>
+              <sd-icon library="system" name="chevron-down"></sd-icon>
+            </slot>
+            <slot name="collapse-icon" class=${cx(!this.open && "hidden")}>
+              <sd-icon library="system" name="chevron-down"></sd-icon> </slot
+          ></span>
+        </${header}>
+        <div part="content" id="content" class=${cx("overflow-hidden", !this.expandable && "hidden")}>
+          <slot part="content__slot" class="block" role="region" aria-labelledby="header"></slot>
+        </div>
+      </${base}>
+    `;
   }
 };
 SdQuickfact.styles = [

package/dist/chunks/{chunk.7BEDTYS7.js → chunk.743FPQRN.js}

@@ -1,6 +1,9 @@
 import {
   watch
 } from "./chunk.X2OQMWGY.js";
+import {
+  HasSlotController
+} from "./chunk.YEZS5ZR2.js";
 import {
   SolidElement,
   customElement
@@ -19,6 +22,7 @@ var SdTab = class extends SolidElement {
     super(...arguments);
     this.attrId = ++id;
     this.componentId = `sd-tab-${this.attrId}`;
+    this.hasSlotController = new HasSlotController(this, "left");
     this.variant = "default";
     this.active = false;
     this.disabled = false;
@@ -44,12 +48,15 @@ var SdTab = class extends SolidElement {
   }
   render() {
     this.id = this.id.length > 0 ? this.id : this.componentId;
+    const slots = {
+      left: this.hasSlotController.test("left")
+    };
     return html`<div part="base" class="${cx(
       "inline-flex min-w-max h-12 px-3 leading-none items-center justify-center whitespace-nowrap select-none cursor-pointer group relative focus-visible:focus-outline outline-2 !-outline-offset-2",
       this.variant === "container" && " rounded-[4px_4px_0_0]",
       this.variant === "container" && this.active && "tab--active-container-border bg-white",
       this.disabled ? "opacity-50 !cursor-not-allowed" : "hover:bg-neutral-200"
-    )}" tabindex="${this.disabled ? "-1" : this.active ? "0" : "-1"}"><slot name="left" class="${cx("pr-2", this.disabled ? "text-neutral-500" : "text-primary")}"></slot><slot class="${cx(this.disabled ? "text-neutral-500" : "text-primary")}"></slot><div part="active-tab-indicator" class="${cx(
+    )}" tabindex="${!this.active || this.disabled ? "-1" : "0"}"><slot name="left" class="${cx(slots.left && "block pr-2", this.disabled ? "text-neutral-500" : "text-primary")}"></slot><slot class="${cx(this.disabled ? "text-neutral-500" : "text-primary")}"></slot><div part="active-tab-indicator" class="${cx(
       (!this.active || this.disabled) && "hidden",
       "absolute bottom-0 h-1 bg-accent",
       this.variant === "default" ? "w-full" : "w-3/4 group-hover:w-full transition-all duration-200 ease-in-out"

package/dist/chunks/{chunk.DAM3ICHP.js → chunk.TWXYFPBS.js}

@@ -25,7 +25,8 @@ import {
 } from "./chunk.S3NI7NKU.js";
 
 // src/components/accordion/accordion.ts
-import { css, html } from "lit";
+import { css } from "lit";
+import { html } from "lit/static-html.js";
 import { property, query } from "lit/decorators.js";
 import cx from "classix";
 var SdAccordion = class extends SolidElement {
@@ -38,8 +39,29 @@ var SdAccordion = class extends SolidElement {
   firstUpdated() {
     this.body.hidden = !this.open;
     this.body.style.height = this.open ? "auto" : "0";
+    if (this.open) {
+      this.accordion.open = true;
+    }
+    this.accordionObserver = new MutationObserver((changes) => {
+      for (const change of changes) {
+        if (change.type === "attributes" && change.attributeName === "open") {
+          if (this.accordion.open) {
+            this.show();
+          } else {
+            this.hide();
+          }
+        }
+      }
+    });
+    this.accordionObserver.observe(this.accordion, { attributes: true });
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    (_a = this.accordionObserver) == null ? void 0 : _a.disconnect();
   }
-  handleSummaryClick() {
+  handleSummaryClick(event) {
+    event.preventDefault();
     if (this.open) {
       this.hide();
     } else {
@@ -66,9 +88,11 @@ var SdAccordion = class extends SolidElement {
   }
   async handleOpenChange() {
     if (this.open) {
+      this.accordion.open = true;
       const slShow = this.emit("sd-show", { cancelable: true });
       if (slShow.defaultPrevented) {
         this.open = false;
+        this.accordion.open = false;
         return;
       }
       await stopAnimations(this.body);
@@ -80,6 +104,7 @@ var SdAccordion = class extends SolidElement {
     } else {
       const slHide = this.emit("sd-hide", { cancelable: true });
       if (slHide.defaultPrevented) {
+        this.accordion.open = true;
         this.open = true;
         return;
       }
@@ -88,6 +113,7 @@ var SdAccordion = class extends SolidElement {
       await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
       this.body.hidden = true;
       this.body.style.height = "auto";
+      this.accordion.open = false;
       this.emit("sd-after-hide");
     }
   }
@@ -108,15 +134,15 @@ var SdAccordion = class extends SolidElement {
     return waitForEvent(this, "sd-after-hide");
   }
   render() {
-    return html`<div part="base" class="border-y border-neutral-400"><header part="header" id="header" class="${cx(
+    return html`<details part="base" class="border-y border-neutral-400"><summary part="header" id="header" class="${cx(
       "flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 py-3 focus-visible:focus-outline text-primary hover:bg-neutral-200 relative group"
-    )}" role="button" aria-expanded="${this.open ? "true" : "false"}" aria-controls="content" tabindex="0" @click="${this.handleSummaryClick}" @keydown="${this.handleSummaryKeyDown}"><div part="summary-border" class="${cx(
+    )}" aria-expanded="${this.open ? "true" : "false"}" aria-controls="content" tabindex="0" @click="${this.handleSummaryClick}" @keydown="${this.handleSummaryKeyDown}"><div part="summary-border" class="${cx(
       !this.open && "opacity-0",
       "w-1 bg-accent absolute left-0 transition-all h-[calc(100%-16px)] group-hover:h-full"
     )}"></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-icon library="system" name="chevron-down"></sd-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-icon library="system" name="chevron-down"></sd-icon></slot></span></header><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></div>`;
+    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-icon library="system" name="chevron-down"></sd-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-icon library="system" name="chevron-down"></sd-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 = [

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

@@ -3,18 +3,20 @@ import { LocalizeController } from '../../utilities/localize';
 import SolidElement from '../../internal/solid-element';
 export default class SdAccordion extends SolidElement {
     localize: LocalizeController;
-    accordion: HTMLElement;
+    accordion: HTMLDetailsElement;
     header: HTMLElement;
     body: HTMLElement;
+    accordionObserver: MutationObserver;
     open: boolean;
     summary: string;
     firstUpdated(): void;
-    protected handleSummaryClick(): void;
+    disconnectedCallback(): void;
+    protected handleSummaryClick(event: MouseEvent): void;
     protected handleSummaryKeyDown(event: KeyboardEvent): void;
     handleOpenChange(): Promise<void>;
     show(): Promise<void>;
     hide(): Promise<void>;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult;
     static styles: import("lit").CSSResult[];
 }
 declare global {

package/dist/components/accordion/accordion.js

@@ -1,6 +1,6 @@
 import {
   SdAccordion
-} from "../../chunks/chunk.DAM3ICHP.js";
+} from "../../chunks/chunk.TWXYFPBS.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.3IT4HBTI.js";
 import "../../chunks/chunk.P52GZVKG.js";

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

@@ -1,7 +1,7 @@
 import {
   SdAccordionGroup
 } from "../../chunks/chunk.IN3GJ5QL.js";
-import "../../chunks/chunk.DAM3ICHP.js";
+import "../../chunks/chunk.TWXYFPBS.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.3IT4HBTI.js";
 import "../../chunks/chunk.P52GZVKG.js";

package/dist/components/quickfact/quickfact.d.ts

@@ -2,7 +2,7 @@ import '../icon/icon';
 import SdAccordion from '../accordion/accordion';
 export default class SdQuickfact extends SdAccordion {
     expandable: boolean;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult;
     static styles: import("lit").CSSResult[];
 }
 declare global {

package/dist/components/quickfact/quickfact.js

@@ -1,7 +1,7 @@
 import {
   SdQuickfact
-} from "../../chunks/chunk.6JI7NL3E.js";
-import "../../chunks/chunk.DAM3ICHP.js";
+} from "../../chunks/chunk.4JZQQD4L.js";
+import "../../chunks/chunk.TWXYFPBS.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.3IT4HBTI.js";
 import "../../chunks/chunk.P52GZVKG.js";

package/dist/components/tab/tab.d.ts

@@ -2,6 +2,7 @@ import SolidElement from '../../internal/solid-element';
 export default class SdTab extends SolidElement {
     private readonly attrId;
     private readonly componentId;
+    private readonly hasSlotController;
     tab: HTMLElement;
     variant: 'default' | 'container';
     active: boolean;

package/dist/components/tab/tab.js

@@ -1,7 +1,8 @@
 import {
   SdTab
-} from "../../chunks/chunk.7BEDTYS7.js";
+} from "../../chunks/chunk.743FPQRN.js";
 import "../../chunks/chunk.X2OQMWGY.js";
+import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.UDZYWRPT.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/custom-elements.json

@@ -65,6 +65,13 @@
               "privacy": "public",
               "default": "new LocalizeController(this)"
             },
+            {
+              "kind": "field",
+              "name": "accordionObserver",
+              "type": {
+                "text": "MutationObserver"
+              }
+            },
             {
               "kind": "field",
               "name": "open",
@@ -10689,6 +10696,17 @@
                 "module": "components/accordion/accordion.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "accordionObserver",
+              "type": {
+                "text": "MutationObserver"
+              },
+              "inheritedFrom": {
+                "name": "SdAccordion",
+                "module": "components/accordion/accordion.js"
+              }
+            },
             {
               "kind": "field",
               "name": "open",
@@ -16642,7 +16660,7 @@
   "package": {
     "name": "@solid-design-system/components",
     "description": "Solid Design System: Components",
-    "version": "4.0.0-next.2",
+    "version": "4.0.0-next.4",
     "author": "Union Investment",
     "homepage": "https://solid-design-system.fe.union-investment.de/docs/",
     "license": "MIT"

package/dist/solid-components.js

@@ -31,7 +31,7 @@ import {
 } from "./chunks/chunk.2IBVAXOX.js";
 import {
   SdTab
-} from "./chunks/chunk.7BEDTYS7.js";
+} from "./chunks/chunk.743FPQRN.js";
 import {
   SdTabGroup
 } from "./chunks/chunk.56SNEGI4.js";
@@ -46,7 +46,7 @@ import {
 } from "./chunks/chunk.SSH6ATRK.js";
 import {
   SdQuickfact
-} from "./chunks/chunk.6JI7NL3E.js";
+} from "./chunks/chunk.4JZQQD4L.js";
 import {
   SdRadioButton
 } from "./chunks/chunk.MTSAWJLV.js";
@@ -147,7 +147,7 @@ import {
 } from "./chunks/chunk.IN3GJ5QL.js";
 import {
   SdAccordion
-} from "./chunks/chunk.DAM3ICHP.js";
+} from "./chunks/chunk.TWXYFPBS.js";
 import "./chunks/chunk.N4LHE3QK.js";
 import {
   SdIcon

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.0.0-next.2",
+  "version": "4.0.0-next.4",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -68,6 +68,7 @@
           "js": {
             "properties": [
               { "name": "localize" },
+              { "name": "accordionObserver", "type": "MutationObserver" },
               {
                 "name": "open",
                 "description": "Indicates whether or not the accordion is open. You can toggle this attribute to show and hide the accordion, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the accordion' open state.",
@@ -4194,6 +4195,7 @@
                 "type": "boolean"
               },
               { "name": "localize" },
+              { "name": "accordionObserver", "type": "MutationObserver" },
               {
                 "name": "open",
                 "description": "Indicates whether or not the accordion is open. You can toggle this attribute to show and hide the accordion, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the accordion' open state.",

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

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

@@ -168,7 +168,7 @@ __decorateClass([
   watch(["checked"], { waitUntilFirstUpdate: true })
 ], SdSwitch.prototype, "handleStateChange", 1);
 SdSwitch = __decorateClass([
-  customElement("sd-4-0-0-next-2-switch")
+  customElement("sd-4-0-0-next-4-switch")
 ], SdSwitch);
 
 export {

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

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

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

@@ -81,7 +81,7 @@ var SdStep = class extends SolidElement {
       !this.disabled && !this.current && !this.notInteractive && "text-primary group-hover:text-primary-500 group-hover:fill-primary-500",
       this.notInteractive && "text-primary",
       this.size === "lg" ? "text-lg" : "text-sm"
-    )}">${!this.disabled && !this.current && !this.notInteractive ? html`<sd-4-0-0-next-2-icon name="status-check" library="system"></sd-4-0-0-next-2-icon>` : html`${this.index}`}</slot></${tag}>${this.noTail ? "" : html`<div part="tail" class="${cx(
+    )}">${!this.disabled && !this.current && !this.notInteractive ? html`<sd-4-0-0-next-4-icon name="status-check" library="system"></sd-4-0-0-next-4-icon>` : html`${this.index}`}</slot></${tag}>${this.noTail ? "" : html`<div part="tail" class="${cx(
       this.orientation === "horizontal" ? "border-t w-full my-auto mr-2" : "border-l flex-grow flex-shrink-0 basis-auto h-full w-[1px] mx-auto",
       !this.disabled && !this.current && !this.notInteractive ? " border-primary group-hover:border-primary-500" : "border-neutral-400"
     )}"></div>`}</div><div part="text-container" class="${cx("mt-4 break-words flex flex-col gap-2", this.orientation === "horizontal" ? "text-center w-40" : "w-max text-left", this.disabled && "!text-neutral-700", this.notInteractive ? "ml-3" : "mr-4")}"><div part="label" id="label" class="${cx("!font-bold sd-paragraph", this.disabled && "!text-neutral-700", !this.disabled && !this.current && !this.notInteractive ? "!text-primary group-hover:!text-primary-500 group-hover:cursor-pointer" : "text-black")}"><slot name="label">${this.label}</slot></div><div part="description" id="description" class="${cx("sd-paragraph sd-paragraph--size-sm", this.disabled && "!text-neutral-700")}">${this.description || html`<slot></slot>`}</div></div></div>`;
@@ -131,7 +131,7 @@ __decorateClass([
   watch("notInteractive")
 ], SdStep.prototype, "handleInteractivityChange", 1);
 SdStep = __decorateClass([
-  customElement("sd-4-0-0-next-2-step")
+  customElement("sd-4-0-0-next-4-step")
 ], SdStep);
 
 export {

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

@@ -0,0 +1,107 @@
+import {
+  SdAccordion
+} from "./chunk.TWXYFPBS.js";
+import {
+  setDefaultAnimation
+} from "./chunk.N4LHE3QK.js";
+import {
+  customElement
+} from "./chunk.UDZYWRPT.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/quickfact/quickfact.ts
+import { css } from "lit";
+import { html, literal } from "lit/static-html.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property } from "lit/decorators.js";
+import cx from "classix";
+var SdQuickfact = class extends SdAccordion {
+  constructor() {
+    super(...arguments);
+    this.expandable = false;
+  }
+  render() {
+    const base = this.expandable ? literal`details` : literal`div`;
+    const header = this.expandable ? literal`summary` : literal`div`;
+    return html`
+      <${base} part="base" class="sm:p-6">
+        <${header}
+          part="header"
+          id="header"
+          class=${cx(
+      "text-base font-bold items-center focus-visible:focus-outline text-primary relative group flex flex-row hover:bg-transparent gap-3 pb-3 pt-0 px-0 sm:flex-col sm:gap-4 sm:pb-8",
+      this.expandable && "cursor-pointer select-none"
+    )}
+          role=${ifDefined(this.expandable ? "button" : void 0)}
+          aria-expanded=${ifDefined(this.expandable ? this.open ? "true" : "false" : void 0)}
+          aria-controls=${ifDefined(this.expandable ? "content" : void 0)}
+          tabindex=${this.expandable ? "0" : "-1"}
+          @click=${this.expandable ? this.handleSummaryClick : null}
+          @keydown=${this.expandable ? this.handleSummaryKeyDown : null}
+        >
+          <div
+            part="icon"
+            class=${cx("flex flex-grow-0 flex-shrink-0 flex-auto items-center", !this.expandable && "cursor-default")}
+          >
+            <slot name="icon"></slot>
+          </div>
+          <slot
+            name="summary"
+            part="summary"
+            class=${cx(
+      "flex flex-auto items-start text-left text-base leading-normal font-normal sm:leading-tight sm:text-3xl sm:text-center",
+      this.expandable ? "text-primary" : "text-black cursor-default"
+    )}>
+            ${this.summary}
+            </slot>
+          <span
+            part="summary-icon"
+            class=${cx(
+      "flex flex-grow-0 flex-shrink-0 flex-auto self-start sm:self-center transition-all ease-in-out duration-300 text-xl sm:text-4xl sm:mt-2",
+      this.open && "rotate-180",
+      !this.expandable && "hidden"
+    )}
+            ><slot name="expand-icon" class=${cx(this.open && "hidden")}>
+              <sd-4-0-0-next-4-icon library="system" name="chevron-down"></sd-4-0-0-next-4-icon>
+            </slot>
+            <slot name="collapse-icon" class=${cx(!this.open && "hidden")}>
+              <sd-4-0-0-next-4-icon library="system" name="chevron-down"></sd-4-0-0-next-4-icon> </slot
+          ></span>
+        </${header}>
+        <div part="content" id="content" class=${cx("overflow-hidden", !this.expandable && "hidden")}>
+          <slot part="content__slot" class="block" role="region" aria-labelledby="header"></slot>
+        </div>
+      </${base}>
+    `;
+  }
+};
+SdQuickfact.styles = [
+  ...SdAccordion.styles,
+  css`:host{display:block}@media (min-width:640px){[part=summary-icon]{font-size:var(--sd-spacing-12,3rem)}}[part=icon]{font-size:var(--sd-spacing-12,3rem)}@media (min-width:640px){[part=icon]{font-size:var(--sd-spacing-24,6rem)}}`
+];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdQuickfact.prototype, "expandable", 2);
+SdQuickfact = __decorateClass([
+  customElement("sd-4-0-0-next-4-quickfact")
+], SdQuickfact);
+setDefaultAnimation("quickfact.show", {
+  keyframes: [
+    { height: "0", opacity: "0" },
+    { height: "auto", opacity: "1" }
+  ],
+  options: { duration: 300, easing: "ease" }
+});
+setDefaultAnimation("quickfact.hide", {
+  keyframes: [
+    { height: "auto", opacity: "1" },
+    { height: "0", opacity: "0" }
+  ],
+  options: { duration: 300, easing: "ease" }
+});
+
+export {
+  SdQuickfact
+};

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

@@ -214,7 +214,7 @@ var SdButton = class extends SolidElement {
         md: "ml-2",
         lg: "ml-2"
       }[this.size]
-    )}"></slot>${this.loading ? html`<sd-4-0-0-next-2-spinner class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-4-0-0-next-2-spinner>` : ""}</${tag}>`;
+    )}"></slot>${this.loading ? html`<sd-4-0-0-next-4-spinner class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-4-0-0-next-4-spinner>` : ""}</${tag}>`;
   }
 };
 /**
@@ -222,13 +222,13 @@ var SdButton = class extends SolidElement {
  */
 SdButton.styles = [
   ...SolidElement.styles,
-  css`:host{cursor:pointer;display:inline-block;position:relative;width:var(--sd-spacing-auto,auto)}sd-4-0-0-next-2-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-4-0-0-next-2-badge){pointer-events:none;position:absolute;right:var(--sd-spacing-0,0);top:var(--sd-spacing-0,0);--tw-translate-x:50%!important;--tw-translate-y:-50%!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}::slotted(sd-4-0-0-next-2-icon),sd-4-0-0-next-2-spinner{font-size:calc(var(--tw-varspacing)/2)}`
+  css`:host{cursor:pointer;display:inline-block;position:relative;width:var(--sd-spacing-auto,auto)}sd-4-0-0-next-4-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-4-0-0-next-4-badge){pointer-events:none;position:absolute;right:var(--sd-spacing-0,0);top:var(--sd-spacing-0,0);--tw-translate-x:50%!important;--tw-translate-y:-50%!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}::slotted(sd-4-0-0-next-4-icon),sd-4-0-0-next-4-spinner{font-size:calc(var(--tw-varspacing)/2)}`
 ];
 __decorateClass([
   query("a, button")
 ], SdButton.prototype, "button", 2);
 __decorateClass([
-  queryAssignedElements({ selector: "sd-4-0-0-next-2-icon" })
+  queryAssignedElements({ selector: "sd-4-0-0-next-4-icon" })
 ], SdButton.prototype, "_iconsInDefaultSlot", 2);
 __decorateClass([
   state()
@@ -291,7 +291,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdButton.prototype, "handleDisabledChange", 1);
 SdButton = __decorateClass([
-  customElement("sd-4-0-0-next-2-button")
+  customElement("sd-4-0-0-next-4-button")
 ], SdButton);
 
 export {

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

@@ -32,7 +32,7 @@ var SdDivider = class extends SolidElement {
  */
 SdDivider.styles = [
   ...SolidElement.styles,
-  css`:host{margin:var(--sd-spacing-0,0)}:host(sd-4-0-0-next-2-divider[orientation=horizontal]){display:block}:host(sd-4-0-0-next-2-divider[orientation=vertical]){display:inline-block}`
+  css`:host{margin:var(--sd-spacing-0,0)}:host(sd-4-0-0-next-4-divider[orientation=horizontal]){display:block}:host(sd-4-0-0-next-4-divider[orientation=vertical]){display:inline-block}`
 ];
 __decorateClass([
   property({ reflect: true })
@@ -41,7 +41,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdDivider.prototype, "inverted", 2);
 SdDivider = __decorateClass([
-  customElement("sd-4-0-0-next-2-divider")
+  customElement("sd-4-0-0-next-4-divider")
 ], SdDivider);
 
 export {