@solid-design-system/components 4.0.0-next.1 → 4.0.0-next.3

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.JIKTGTDS.js → chunk.4RGGPCD5.js}

@@ -21,7 +21,7 @@ var SdDivider = class extends SolidElement {
     this.setAttribute("role", "separator");
   }
   render() {
-    return html`<hr part="main" class="${cx(
+    return html`<hr part="main" aria-orientation="${this.orientation}" class="${cx(
       this.inverted ? "border-primary-400" : "border-neutral-400",
       this.orientation === "horizontal" ? "border-t w-full" : " border-l h-full"
     )}">`;

package/dist/chunks/{chunk.4WYIZLVF.js → chunk.EKFRFDTB.js}

@@ -1,6 +1,6 @@
 import {
   SdDivider
-} from "./chunk.JIKTGTDS.js";
+} from "./chunk.4RGGPCD5.js";
 import {
   watch
 } from "./chunk.X2OQMWGY.js";

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/divider/divider.js

@@ -1,6 +1,6 @@
 import {
   SdDivider
-} from "../../chunks/chunk.JIKTGTDS.js";
+} from "../../chunks/chunk.4RGGPCD5.js";
 import "../../chunks/chunk.UDZYWRPT.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/optgroup/optgroup.js

@@ -1,7 +1,7 @@
 import {
   SdOptgroup
-} from "../../chunks/chunk.4WYIZLVF.js";
-import "../../chunks/chunk.JIKTGTDS.js";
+} from "../../chunks/chunk.EKFRFDTB.js";
+import "../../chunks/chunk.4RGGPCD5.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.UDZYWRPT.js";
 import "../../chunks/chunk.S3NI7NKU.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/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.1",
+    "version": "4.0.0-next.3",
     "author": "Union Investment",
     "homepage": "https://solid-design-system.fe.union-investment.de/docs/",
     "license": "MIT"

package/dist/solid-components.js

@@ -40,13 +40,13 @@ import {
 } from "./chunks/chunk.6CUAQSFA.js";
 import {
   SdOptgroup
-} from "./chunks/chunk.4WYIZLVF.js";
+} from "./chunks/chunk.EKFRFDTB.js";
 import {
   SdOption
 } from "./chunks/chunk.SSH6ATRK.js";
 import {
   SdQuickfact
-} from "./chunks/chunk.6JI7NL3E.js";
+} from "./chunks/chunk.4JZQQD4L.js";
 import {
   SdRadioButton
 } from "./chunks/chunk.MTSAWJLV.js";
@@ -112,7 +112,7 @@ import {
 } from "./chunks/chunk.727ERQ4F.js";
 import {
   SdDivider
-} from "./chunks/chunk.JIKTGTDS.js";
+} from "./chunks/chunk.4RGGPCD5.js";
 import {
   SdDrawer
 } from "./chunks/chunk.U6RY25TF.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.1",
+  "version": "4.0.0-next.3",
   "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-1-select', { detail: { item } });
+        this.emit('sd-4-0-0-next-3-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-1-divider) {
+  ::slotted(sd-4-0-0-next-3-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-1-icon name="check" library="system" aria-hidden="true"></sd-4-0-0-next-1-icon>
+          <sd-4-0-0-next-3-icon name="check" library="system" aria-hidden="true"></sd-4-0-0-next-3-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-1-icon name="chevron-right" library="system" aria-hidden="true"></sd-4-0-0-next-1-icon>
+          <sd-4-0-0-next-3-icon name="chevron-right" library="system" aria-hidden="true"></sd-4-0-0-next-3-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-1-switch")
+  customElement("sd-4-0-0-next-3-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-1-icon")
+  customElement("sd-4-0-0-next-3-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-1-icon name="status-check" library="system"></sd-4-0-0-next-1-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-3-icon name="status-check" library="system"></sd-4-0-0-next-3-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-1-step")
+  customElement("sd-4-0-0-next-3-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-3-icon library="system" name="chevron-down"></sd-4-0-0-next-3-icon>
+            </slot>
+            <slot name="collapse-icon" class=${cx(!this.open && "hidden")}>
+              <sd-4-0-0-next-3-icon library="system" name="chevron-down"></sd-4-0-0-next-3-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-3-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-1-spinner class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-4-0-0-next-1-spinner>` : ""}</${tag}>`;
+    )}"></slot>${this.loading ? html`<sd-4-0-0-next-3-spinner class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-4-0-0-next-3-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-1-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-4-0-0-next-1-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-1-icon),sd-4-0-0-next-1-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-3-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-4-0-0-next-3-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-3-icon),sd-4-0-0-next-3-spinner{font-size:calc(var(--tw-varspacing)/2)}`
 ];
 __decorateClass([
   query("a, button")
 ], SdButton.prototype, "button", 2);
 __decorateClass([
-  queryAssignedElements({ selector: "sd-4-0-0-next-1-icon" })
+  queryAssignedElements({ selector: "sd-4-0-0-next-3-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-1-button")
+  customElement("sd-4-0-0-next-3-button")
 ], SdButton);
 
 export {

package/dist-versioned/chunks/{chunk.JIKTGTDS.js → chunk.4RGGPCD5.js}

@@ -21,7 +21,7 @@ var SdDivider = class extends SolidElement {
     this.setAttribute("role", "separator");
   }
   render() {
-    return html`<hr part="main" class="${cx(
+    return html`<hr part="main" aria-orientation="${this.orientation}" class="${cx(
       this.inverted ? "border-primary-400" : "border-neutral-400",
       this.orientation === "horizontal" ? "border-t w-full" : " border-l h-full"
     )}">`;
@@ -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-1-divider[orientation=horizontal]){display:block}:host(sd-4-0-0-next-1-divider[orientation=vertical]){display:inline-block}`
+  css`:host{margin:var(--sd-spacing-0,0)}:host(sd-4-0-0-next-3-divider[orientation=horizontal]){display:block}:host(sd-4-0-0-next-3-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-1-divider")
+  customElement("sd-4-0-0-next-3-divider")
 ], SdDivider);
 
 export {