@solid-design-system/components 5.8.4 → 5.9.0

package/dist-versioned/chunks/chunk.KEJFWGZI.js

@@ -0,0 +1,229 @@
+// src/components/menu-item/submenu-controller.ts
+import { createRef, ref } from "lit/directives/ref.js";
+import { html } from "lit";
+var SubmenuController = class {
+  constructor(host, hasSlotController) {
+    this.popupRef = createRef();
+    this.enableSubmenuTimer = -1;
+    this.isConnected = false;
+    this.isPopupConnected = false;
+    this.skidding = 0;
+    this.submenuOpenDelay = 100;
+    // Set the safe triangle cursor position
+    this.handleMouseMove = (event) => {
+      this.host.style.setProperty("--safe-triangle-cursor-x", `${event.clientX}px`);
+      this.host.style.setProperty("--safe-triangle-cursor-y", `${event.clientY}px`);
+    };
+    this.handleMouseOver = () => {
+      if (this.hasSlotController.test("submenu")) {
+        this.enableSubmenu();
+      }
+    };
+    // Focus on the first menu-item of a submenu.
+    this.handleKeyDown = (event) => {
+      switch (event.key) {
+        case "Escape":
+        case "Tab":
+          this.disableSubmenu();
+          break;
+        case "ArrowLeft":
+          if (event.target !== this.host) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.host.focus();
+            this.disableSubmenu();
+          }
+          break;
+        case "ArrowRight":
+        case "Enter":
+        case " ":
+          this.handleSubmenuEntry(event);
+          break;
+        default:
+          break;
+      }
+    };
+    this.handleClick = (event) => {
+      var _a;
+      if (event.target === this.host) {
+        event.preventDefault();
+        event.stopPropagation();
+      } else if (event.target instanceof Element && (event.target.tagName === "sd-5-9-0-menu-item" || ((_a = event.target.role) == null ? void 0 : _a.startsWith("menuitem")))) {
+        const type = event.target.getAttribute("type");
+        if (type !== "checkbox") {
+          this.disableSubmenu();
+        }
+      }
+    };
+    // Close this submenu on focus outside of the parent or any descendants.
+    this.handleFocusOut = (event) => {
+      if (event.relatedTarget && event.relatedTarget instanceof Element && this.host.contains(event.relatedTarget)) {
+        return;
+      }
+      this.disableSubmenu();
+    };
+    // Prevent the parent menu-item from getting focus on mouse movement on the submenu
+    this.handlePopupMouseover = (event) => {
+      event.stopPropagation();
+    };
+    // Set the safe triangle values for the submenu when the position changes
+    this.handlePopupReposition = () => {
+      const submenuSlot = this.host.renderRoot.querySelector("slot[name='submenu']");
+      const menu = submenuSlot == null ? void 0 : submenuSlot.assignedElements({ flatten: true }).filter((el) => el.localName === "sd-5-9-0-menu")[0];
+      const isRtl = getComputedStyle(this.host).direction === "rtl";
+      if (!menu) {
+        return;
+      }
+      const { left, top, width, height } = menu.getBoundingClientRect();
+      this.host.style.setProperty("--safe-triangle-submenu-start-x", `${isRtl ? left + width : left}px`);
+      this.host.style.setProperty("--safe-triangle-submenu-start-y", `${top}px`);
+      this.host.style.setProperty("--safe-triangle-submenu-end-x", `${isRtl ? left + width : left}px`);
+      this.host.style.setProperty("--safe-triangle-submenu-end-y", `${top + height}px`);
+    };
+    (this.host = host).addController(this);
+    this.hasSlotController = hasSlotController;
+  }
+  hostConnected() {
+    if (this.hasSlotController.test("submenu") && !this.host.disabled) {
+      this.addListeners();
+    }
+  }
+  hostDisconnected() {
+    this.removeListeners();
+  }
+  hostUpdated() {
+    if (this.hasSlotController.test("submenu") && !this.host.disabled) {
+      this.addListeners();
+      this.updateSkidding();
+    } else {
+      this.removeListeners();
+    }
+  }
+  addListeners() {
+    if (!this.isConnected) {
+      this.host.addEventListener("mousemove", this.handleMouseMove);
+      this.host.addEventListener("mouseover", this.handleMouseOver);
+      this.host.addEventListener("keydown", this.handleKeyDown);
+      this.host.addEventListener("click", this.handleClick);
+      this.host.addEventListener("focusout", this.handleFocusOut);
+      this.isConnected = true;
+    }
+    if (!this.isPopupConnected) {
+      if (this.popupRef.value) {
+        this.popupRef.value.addEventListener("mouseover", this.handlePopupMouseover);
+        this.popupRef.value.addEventListener("sd-reposition", this.handlePopupReposition);
+        this.isPopupConnected = true;
+      }
+    }
+  }
+  removeListeners() {
+    if (this.isConnected) {
+      this.host.removeEventListener("mousemove", this.handleMouseMove);
+      this.host.removeEventListener("mouseover", this.handleMouseOver);
+      this.host.removeEventListener("keydown", this.handleKeyDown);
+      this.host.removeEventListener("click", this.handleClick);
+      this.host.removeEventListener("focusout", this.handleFocusOut);
+      this.isConnected = false;
+    }
+    if (this.isPopupConnected) {
+      if (this.popupRef.value) {
+        this.popupRef.value.removeEventListener("mouseover", this.handlePopupMouseover);
+        this.popupRef.value.removeEventListener("sd-reposition", this.handlePopupReposition);
+        this.isPopupConnected = false;
+      }
+    }
+  }
+  handleSubmenuEntry(event) {
+    const submenuSlot = this.host.renderRoot.querySelector("slot[name='submenu']");
+    if (!submenuSlot) {
+      console.error("Cannot activate a submenu if no corresponding menuitem can be found.", this);
+      return;
+    }
+    let menuItems = null;
+    for (const elt of submenuSlot.assignedElements()) {
+      menuItems = elt.querySelectorAll("sd-5-9-0-menu-item, [role^='menuitem']");
+      if (menuItems.length !== 0) {
+        break;
+      }
+    }
+    if (!menuItems || menuItems.length === 0) {
+      return;
+    }
+    menuItems[0].setAttribute("tabindex", "0");
+    for (let i = 1; i !== menuItems.length; ++i) {
+      menuItems[i].setAttribute("tabindex", "-1");
+    }
+    if (this.popupRef.value) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (this.popupRef.value.active) {
+        if (menuItems[0] instanceof HTMLElement) {
+          menuItems[0].focus();
+        }
+      } else {
+        this.enableSubmenu(false);
+        this.host.updateComplete.then(() => {
+          if (menuItems[0] instanceof HTMLElement) {
+            menuItems[0].focus();
+          }
+        });
+        this.host.requestUpdate();
+      }
+    }
+  }
+  setSubmenuState(state) {
+    if (this.popupRef.value) {
+      if (this.popupRef.value.active !== state) {
+        this.popupRef.value.active = state;
+        this.host.requestUpdate();
+      }
+    }
+  }
+  // Shows the submenu. Supports disabling the opening delay, e.g. for keyboard events that want to set the focus to the
+  // newly opened menu.
+  enableSubmenu(delay = true) {
+    if (delay) {
+      window.clearTimeout(this.enableSubmenuTimer);
+      this.enableSubmenuTimer = window.setTimeout(() => {
+        this.setSubmenuState(true);
+      }, this.submenuOpenDelay);
+    } else {
+      this.setSubmenuState(true);
+    }
+  }
+  disableSubmenu() {
+    window.clearTimeout(this.enableSubmenuTimer);
+    this.setSubmenuState(false);
+  }
+  // Calculate the space the top of a menu takes-up, for aligning the popup menu-item with the activating element.
+  updateSkidding() {
+    var _a;
+    if (!((_a = this.host.parentElement) == null ? void 0 : _a.computedStyleMap)) {
+      return;
+    }
+    const styleMap = this.host.parentElement.computedStyleMap();
+    const attrs = ["padding-top", "border-top-width", "margin-top"];
+    const skidding = attrs.reduce((accumulator, attr) => {
+      var _a2;
+      const styleValue = (_a2 = styleMap.get(attr)) != null ? _a2 : new CSSUnitValue(0, "px");
+      const unitValue = styleValue instanceof CSSUnitValue ? styleValue : new CSSUnitValue(0, "px");
+      const pxValue = unitValue.to("px");
+      return accumulator - pxValue.value;
+    }, 0);
+    this.skidding = skidding;
+  }
+  isExpanded() {
+    return this.popupRef.value ? this.popupRef.value.active : false;
+  }
+  renderSubmenu() {
+    const isRtl = getComputedStyle(this.host).direction === "rtl";
+    if (!this.isConnected) {
+      return html`<slot name="submenu" hidden></slot>`;
+    }
+    return html`<sd-5-9-0-popup ${ref(this.popupRef)} placement="${isRtl ? "left-start" : "right-start"}" anchor="anchor" flip flip-fallback-strategy="best-fit" skidding="${this.skidding}" strategy="fixed" auto-size="vertical" auto-size-padding="10"><slot name="submenu"></slot></sd-5-9-0-popup>`;
+  }
+};
+
+export {
+  SubmenuController
+};

package/dist-versioned/chunks/{chunk.6FBOYPMX.js → chunk.KFVC6XFD.js}

@@ -1,13 +1,13 @@
 import {
   HasSlotController
-} from "./chunk.YEZS5ZR2.js";
+} from "./chunk.IVMQWO2L.js";
 import {
   watch
 } from "./chunk.X2OQMWGY.js";
 import {
   SolidElement,
   customElement
-} from "./chunk.HY3LORT5.js";
+} from "./chunk.PP5IDYES.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -93,7 +93,7 @@ var SdOption = class extends SolidElement {
     )}"></span> ${this.checkbox ? html`<span id="control" part="control ${this.selected ? " control--checked" : "control--unchecked"}" class="${cx(
       "relative flex flex-shrink-0 items-center justify-center border rounded-sm h-4 w-4 mr-2",
       this.disabled ? "border-neutral-500" : this.selected ? "bg-accent border-accent" : "border-neutral-800"
-    )}">${this.selected ? html`<sd-5-8-4-icon part="checked-icon" class="text-white w-3 h-3" library="_internal" name="status-check"></sd-5-8-4-icon>` : ""}</span>` : ""} ${slots["left"] ? html`<slot name="left" part="left" class="inline-flex mr-2"></slot>` : ""}<slot part="label" class="inline-block flex-grow" @slotchange="${this.handleDefaultSlotChange}"></slot>${slots["right"] ? html`<slot name="right" part="right" class="inline-flex ml-2"></slot>` : ""}</div>`;
+    )}">${this.selected ? html`<sd-5-9-0-icon part="checked-icon" class="text-white w-3 h-3" library="_internal" name="status-check"></sd-5-9-0-icon>` : ""}</span>` : ""} ${slots["left"] ? html`<slot name="left" part="left" class="inline-flex mr-2"></slot>` : ""}<slot part="label" class="inline-block flex-grow" @slotchange="${this.handleDefaultSlotChange}"></slot>${slots["right"] ? html`<slot name="right" part="right" class="inline-flex ml-2"></slot>` : ""}</div>`;
   }
 };
 /**
@@ -140,7 +140,7 @@ __decorateClass([
   watch("value")
 ], SdOption.prototype, "handleValueChange", 1);
 SdOption = __decorateClass([
-  customElement("sd-5-8-4-option")
+  customElement("sd-5-9-0-option")
 ], SdOption);
 
 export {

package/dist-versioned/chunks/chunk.KVKRZJS7.js

@@ -15,7 +15,7 @@ var FormControlController = class {
       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-5-8-4-button";
+      const isButton = this.host.tagName.toLowerCase() === "sd-5-9-0-button";
       if (!disabled && !isButton && typeof name === "string" && name.length > 0 && typeof value !== "undefined") {
         if (Array.isArray(value)) {
           value.forEach((val) => {
@@ -40,7 +40,7 @@ var FormControlController = class {
         event.stopImmediatePropagation();
         const invalidElements = (_b = this.form) == null ? void 0 : _b.querySelectorAll("[data-invalid]");
         const sdRadioGroups = Array.from(invalidElements).filter(
-          (element) => element.tagName.toLowerCase() === "sd-5-8-4-radio-group"
+          (element) => element.tagName.toLowerCase() === "sd-5-9-0-radio-group"
         );
         sdRadioGroups.forEach((radioGroup) => {
           var _a2, _b2;
@@ -88,7 +88,7 @@ var FormControlController = class {
       },
       reportValidity: (input) => typeof input.reportValidity === "function" ? input.reportValidity() : true,
       setValue: (input, value) => input.value = value,
-      assumeInteractionOn: ["sd-5-8-4-input"]
+      assumeInteractionOn: ["sd-5-9-0-input"]
     }, options);
   }
   hostConnected() {

package/dist-versioned/chunks/{chunk.FKBZQOFQ.js → chunk.MEDUZPGV.js}

@@ -4,14 +4,14 @@ import {
 } from "./chunk.KVKRZJS7.js";
 import {
   HasSlotController
-} from "./chunk.YEZS5ZR2.js";
+} from "./chunk.IVMQWO2L.js";
 import {
   watch
 } from "./chunk.X2OQMWGY.js";
 import {
   SolidElement,
   customElement
-} from "./chunk.HY3LORT5.js";
+} from "./chunk.PP5IDYES.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -221,7 +221,7 @@ var SdButton = class extends SolidElement {
         md: "ml-2",
         lg: "ml-2"
       }[this.size]
-    )}"></slot>${this.loading ? html`<sd-5-8-4-spinner class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-5-8-4-spinner>` : ""}</${tag}>`;
+    )}"></slot>${this.loading ? html`<sd-5-9-0-spinner class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-5-9-0-spinner>` : ""}</${tag}>`;
   }
 };
 /**
@@ -229,13 +229,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);z-index:0}sd-5-8-4-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-5-8-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-5-8-4-icon),sd-5-8-4-spinner{font-size:calc(var(--tw-varspacing)/2)}`
+  css`:host{cursor:pointer;display:inline-block;position:relative;width:var(--sd-spacing-auto,auto);z-index:0}sd-5-9-0-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-5-9-0-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-5-9-0-icon),sd-5-9-0-spinner{font-size:calc(var(--tw-varspacing)/2)}`
 ];
 __decorateClass([
   query("a, button")
 ], SdButton.prototype, "button", 2);
 __decorateClass([
-  queryAssignedElements({ selector: "sd-5-8-4-icon" })
+  queryAssignedElements({ selector: "sd-5-9-0-icon" })
 ], SdButton.prototype, "_iconsInDefaultSlot", 2);
 __decorateClass([
   state()
@@ -301,7 +301,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdButton.prototype, "handleDisabledChange", 1);
 SdButton = __decorateClass([
-  customElement("sd-5-8-4-button")
+  customElement("sd-5-9-0-button")
 ], SdButton);
 
 export {

package/dist-versioned/chunks/{chunk.FZ6HADPO.js → chunk.MEHX7EVL.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.HY3LORT5.js";
+} from "./chunk.PP5IDYES.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -118,7 +118,7 @@ var SdCheckbox = class extends SolidElement {
   render() {
     const checkboxState = this.disabled && this.indeterminate ? "disabledIndeterminate" : this.disabled && this.checked ? "disabledChecked" : this.disabled ? "disabled" : this.visuallyDisabled ? "visuallyDisabled" : this.showInvalidStyle && this.indeterminate ? "invalidIndeterminate" : this.showInvalidStyle ? "invalid" : this.checked || this.indeterminate ? "filled" : "default";
     return html`<label part="base" class="${cx(
-      "sd-5-8-4-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
+      "sd-5-9-0-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
       (this.disabled || this.visuallyDisabled) && "hover:cursor-not-allowed",
       {
         /* sizes, fonts */
@@ -157,7 +157,7 @@ var SdCheckbox = class extends SolidElement {
         filled: "bg-accent group-hover:bg-accent-550",
         default: "hover:bg-neutral-200 group-hover:bg-neutral-200 bg-white"
       }[checkboxState]
-    )}"></div></div>${this.checked ? html`<sd-5-8-4-icon part="checked-icon" class="text-white w-3 h-3" library="_internal" name="status-check"></sd-5-8-4-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-5-8-4-icon part="indeterminate-icon" class="text-white w-3 h-3" library="_internal" name="status-minus"></sd-5-8-4-icon>` : ""} </span><span part="label" id="label" class="${cx(
+    )}"></div></div>${this.checked ? html`<sd-5-9-0-icon part="checked-icon" class="text-white w-3 h-3" library="_internal" name="status-check"></sd-5-9-0-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-5-9-0-icon part="indeterminate-icon" class="text-white w-3 h-3" library="_internal" name="status-minus"></sd-5-9-0-icon>` : ""} </span><span part="label" id="label" class="${cx(
       "select-none inline-block ml-2",
       this.disabled || this.visuallyDisabled ? "text-neutral-500" : this.showInvalidStyle ? "text-error" : "text-black"
     )}"><slot></slot></span></label> ${this.formControlController.renderInvalidMessage()}`;
@@ -219,7 +219,7 @@ __decorateClass([
   watch(["checked", "indeterminate"], { waitUntilFirstUpdate: true })
 ], SdCheckbox.prototype, "handleStateChange", 1);
 SdCheckbox = __decorateClass([
-  customElement("sd-5-8-4-checkbox")
+  customElement("sd-5-9-0-checkbox")
 ], SdCheckbox);
 
 export {

package/dist-versioned/chunks/{chunk.3D4DMXRR.js → chunk.MQ5VT5VP.js}

@@ -1,13 +1,13 @@
 import {
   HasSlotController
-} from "./chunk.YEZS5ZR2.js";
+} from "./chunk.IVMQWO2L.js";
 import {
   LocalizeController
 } from "./chunk.YKM42GKF.js";
 import {
   SolidElement,
   customElement
-} from "./chunk.HY3LORT5.js";
+} from "./chunk.PP5IDYES.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -98,7 +98,7 @@ var SdVideo = class extends SolidElement {
       this.playing ? "opacity-0" : "opacity-100",
       this.isBelowBreakpoint ? "w-[48px] h-[48px]" : "w-[96px] h-[96px]",
       "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 p-4 bg-white bg-opacity-75 rounded-full play-pause-transition outline-2 outline-offset-2 group-focus-visible:outline"
-    )}"><slot name="play-icon" part="play-icon" class="${cx(this.isBelowBreakpoint ? "text-[2rem]" : "text-[4rem]")}"><sd-5-8-4-icon id="default-play-icon" library="_internal" name="start"></sd-5-8-4-icon></slot></div></button> ${this.hasSlotController.test("poster") ? html`<div part="poster-wrapper" class="absolute left-0 top-0 w-full z-10 overflow-hidden"><slot name="poster" role="presentation"></slot></div>` : null}<slot></slot></div>`;
+    )}"><slot name="play-icon" part="play-icon" class="${cx(this.isBelowBreakpoint ? "text-[2rem]" : "text-[4rem]")}"><sd-5-9-0-icon id="default-play-icon" library="_internal" name="start"></sd-5-9-0-icon></slot></div></button> ${this.hasSlotController.test("poster") ? html`<div part="poster-wrapper" class="absolute left-0 top-0 w-full z-10 overflow-hidden"><slot name="poster" role="presentation"></slot></div>` : null}<slot></slot></div>`;
   }
 };
 SdVideo.styles = [
@@ -115,7 +115,7 @@ __decorateClass([
   property({ type: Boolean })
 ], SdVideo.prototype, "isBelowBreakpoint", 2);
 SdVideo = __decorateClass([
-  customElement("sd-5-8-4-video")
+  customElement("sd-5-9-0-video")
 ], SdVideo);
 
 export {

package/dist-versioned/chunks/{chunk.7VREM4PD.js → chunk.N3MU3643.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.HY3LORT5.js";
+} from "./chunk.PP5IDYES.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -71,7 +71,7 @@ __decorateClass([
   debounce(100)
 ], SdHeader.prototype, "updateCalculatedHeight", 1);
 SdHeader = __decorateClass([
-  customElement("sd-5-8-4-header")
+  customElement("sd-5-9-0-header")
 ], SdHeader);
 
 export {

package/dist-versioned/chunks/{chunk.J44XCBXL.js → chunk.N7WBIQUG.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.HY3LORT5.js";
+} from "./chunk.PP5IDYES.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -85,7 +85,7 @@ var SdFlipcard = class extends SolidElement {
         "gradient-light": this.placement === "top" ? "bg-gradient-to-b from-white/60 to-white/0 mb-auto" : "bg-gradient-to-t from-white/60 to-white/0 mt-auto",
         "gradient-dark": this.placement === "bottom" ? "bg-gradient-to-t from-primary-800/60 to-primary-800/0 mt-auto" : "bg-gradient-to-b from-primary-800/60 to-primary-800/0 mb-auto"
       }[this.frontVariant]
-    )}"></div><sd-5-8-4-button part="front-button" size="md" variant="${{
+    )}"></div><sd-5-9-0-button part="front-button" size="md" variant="${{
       primary: "tertiary",
       "primary-100": "tertiary",
       "gradient-light": "primary",
@@ -95,7 +95,7 @@ var SdFlipcard = class extends SolidElement {
       "primary-100": false,
       "gradient-light": true,
       "gradient-dark": true
-    }[this.frontVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipFront}" @keydown="${this.handleFrontKeydown}"><sd-5-8-4-icon library="_internal" name="reload" label="Flip to Back"></sd-5-8-4-icon></sd-5-8-4-button></div><div part="back" tabindex="0" aria-hidden="${this.activeSide === "front"}" inert="${ifDefined(this.activeSide === "front" || void 0)}" class="${cx(
+    }[this.frontVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipFront}" @keydown="${this.handleFrontKeydown}"><sd-5-9-0-icon library="_internal" name="reload" label="Flip to Back"></sd-5-9-0-icon></sd-5-9-0-button></div><div part="back" tabindex="0" aria-hidden="${this.activeSide === "front"}" inert="${ifDefined(this.activeSide === "front" || void 0)}" class="${cx(
       "flip-card__side flip-card__side--back overflow-hidden transition-transform duration-1000 ease-in-out",
       "flex focus-visible:focus-outline",
       "absolute top-0 left-0 w-full h-full justify-end text-left",
@@ -128,7 +128,7 @@ var SdFlipcard = class extends SolidElement {
         "gradient-light": this.placement === "top" ? "bg-gradient-to-b from-white/60 to-white/0 mb-auto" : "bg-gradient-to-t from-white/60 to-white/0 mt-auto",
         "gradient-dark": this.placement === "bottom" ? "bg-gradient-to-t from-primary-800/60 to-primary-800/0 mt-auto" : "bg-gradient-to-b from-primary-800/60 to-primary-800/0 mb-auto"
       }[this.backVariant]
-    )}"></div><sd-5-8-4-button size="md" part="back-button" variant="${{
+    )}"></div><sd-5-9-0-button size="md" part="back-button" variant="${{
       primary: "tertiary",
       "primary-100": "tertiary",
       "gradient-light": "primary",
@@ -138,7 +138,7 @@ var SdFlipcard = class extends SolidElement {
       "primary-100": false,
       "gradient-light": true,
       "gradient-dark": true
-    }[this.backVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipBack}" @keydown="${this.handleBackKeydown}"><sd-5-8-4-icon library="_internal" name="reload" label="Flip to Front"></sd-5-8-4-icon></sd-5-8-4-button></div></div>`;
+    }[this.backVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipBack}" @keydown="${this.handleBackKeydown}"><sd-5-9-0-icon library="_internal" name="reload" label="Flip to Front"></sd-5-9-0-icon></sd-5-9-0-button></div></div>`;
   }
 };
 /**
@@ -170,7 +170,7 @@ __decorateClass([
   state()
 ], SdFlipcard.prototype, "activeSide", 2);
 SdFlipcard = __decorateClass([
-  customElement("sd-5-8-4-flipcard")
+  customElement("sd-5-9-0-flipcard")
 ], SdFlipcard);
 
 export {

package/dist-versioned/chunks/{chunk.UVVLW7XN.js → chunk.P4UKJXBL.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.HY3LORT5.js";
+} from "./chunk.PP5IDYES.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -38,12 +38,12 @@ var SdBreadcrumbItem = class extends SolidElement {
     requestAnimationFrame(() => this.handleCurrentChange());
   }
   render() {
-    return html`<sd-5-8-4-link part="base" href="${ifDefined(!this.current ? this.href : void 0)}" target="${this.target}" standalone class="text-nowrap"><slot></slot></sd-5-8-4-link>`;
+    return html`<sd-5-9-0-link part="base" href="${ifDefined(!this.current ? this.href : void 0)}" target="${this.target}" standalone class="text-nowrap"><slot></slot></sd-5-9-0-link>`;
   }
 };
 SdBreadcrumbItem.styles = [
   ...SolidElement.styles,
-  css`:host{align-items:center;display:inline-flex}sd-5-8-4-link::part(base){align-items:center}sd-5-8-4-link::part(icon-left){display:inline-flex;margin-right:var(--sd-spacing-0,0)}sd-5-8-4-link sd-5-8-4-icon{margin:var(--sd-spacing-0,0)}:host([current]) sd-5-8-4-link::part(base){--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-700,104 104 104)/var(--tw-text-opacity,1))}:host([current]) sd-5-8-4-link::part(label){text-decoration-line:none}`
+  css`:host{align-items:center;display:inline-flex}sd-5-9-0-link::part(base){align-items:center}sd-5-9-0-link::part(icon-left){display:inline-flex;margin-right:var(--sd-spacing-0,0)}sd-5-9-0-link sd-5-9-0-icon{margin:var(--sd-spacing-0,0)}:host([current]) sd-5-9-0-link::part(base){--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-700,104 104 104)/var(--tw-text-opacity,1))}:host([current]) sd-5-9-0-link::part(label){text-decoration-line:none}`
 ];
 __decorateClass([
   query('[part="base"]')
@@ -61,7 +61,7 @@ __decorateClass([
   watch("current")
 ], SdBreadcrumbItem.prototype, "handleCurrentChange", 1);
 SdBreadcrumbItem = __decorateClass([
-  customElement("sd-5-8-4-breadcrumb-item")
+  customElement("sd-5-9-0-breadcrumb-item")
 ], SdBreadcrumbItem);
 
 export {