@solid-design-system/components 4.6.18 → 4.7.1

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

package/dist-versioned/chunks/{chunk.EY4JPJJQ.js → chunk.25AH7KN2.js}

@@ -4,13 +4,22 @@ import {
 } from "./chunk.S3NI7NKU.js";
 
 // src/internal/animate.ts
+function cssVar(expression, el) {
+  const match = /var\((--[\w-]+)(?:,\s*([^)]+))?\)/.exec(expression);
+  if (!match) return expression;
+  const [, variable, fallback] = match;
+  const value = getComputedStyle(el).getPropertyValue(variable).trim();
+  return value || fallback || "";
+}
 function animateTo(el, keyframes, options) {
   return new Promise((resolve) => {
     if ((options == null ? void 0 : options.duration) === Infinity) {
       throw new Error("Promise-based animations must be finite.");
     }
+    const reducedMotion = prefersReducedMotion();
+    const duration = typeof options.duration === "string" ? parseDuration(cssVar(options.duration, el)) : options.duration;
     const animation = el.animate(keyframes, __spreadProps(__spreadValues({}, options), {
-      duration: prefersReducedMotion() ? 0 : options.duration
+      duration: reducedMotion && (options == null ? void 0 : options.reducedMotion) !== "allow" ? 0 : duration
     }));
     animation.addEventListener("cancel", resolve, { once: true });
     animation.addEventListener("finish", resolve, { once: true });
@@ -49,6 +58,7 @@ function shimKeyframesHeightAuto(keyframes, calculatedHeight) {
 }
 
 export {
+  cssVar,
   animateTo,
   parseDuration,
   prefersReducedMotion,

package/dist-versioned/chunks/{chunk.SLGJ34KM.js → chunk.34ZYNTK2.js}

@@ -10,10 +10,6 @@ import {
   getAnimation,
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
-import {
-  animateTo,
-  stopAnimations
-} from "./chunk.EY4JPJJQ.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
@@ -29,7 +25,11 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
+import {
+  animateTo,
+  stopAnimations
+} from "./chunk.25AH7KN2.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -65,6 +65,9 @@ var SdDialog = class extends SolidElement {
     super.disconnectedCallback();
     unlockBodyScrolling(this);
   }
+  get prefersReducedMotion() {
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  }
   requestClose(source) {
     const sdRequestClose = this.emit("sd-request-close", {
       cancelable: true,
@@ -115,7 +118,7 @@ var SdDialog = class extends SolidElement {
           autoFocusTarget.setAttribute("autofocus", "");
         }
       });
-      const panelAnimation = getAnimation(this, "dialog.show", { dir: this.localize.dir() });
+      const panelAnimation = this.prefersReducedMotion ? getAnimation(this, "dialog.showReducedMotion", { dir: this.localize.dir() }) : getAnimation(this, "dialog.show", { dir: this.localize.dir() });
       const overlayAnimation = getAnimation(this, "dialog.overlay.show", { dir: this.localize.dir() });
       await Promise.all([
         animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),
@@ -127,7 +130,7 @@ var SdDialog = class extends SolidElement {
       this.removeOpenListeners();
       this.modal.deactivate();
       await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);
-      const panelAnimation = getAnimation(this, "dialog.hide", { dir: this.localize.dir() });
+      const panelAnimation = this.prefersReducedMotion ? getAnimation(this, "dialog.hideReducedMotion", { dir: this.localize.dir() }) : getAnimation(this, "dialog.hide", { dir: this.localize.dir() });
       const overlayAnimation = getAnimation(this, "dialog.overlay.hide", { dir: this.localize.dir() });
       await Promise.all([
         animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {
@@ -171,7 +174,7 @@ var SdDialog = class extends SolidElement {
     )}"><div part="overlay" class="fixed inset-0 bg-primary-800 opacity-90" @click="${() => this.requestClose("overlay")}" tabindex="-1"></div><div part="panel" class="${cx(
       "flex flex-col z-20 bg-white py-4 sm:py-8 relative gap-6 focus-visible:focus-outline-inverted overflow-y-auto",
       this.open && "flex opacity-100"
-    )}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${ifDefined(this.headline ? this.headline : void 0)}" aria-labelledby="${ifDefined(!this.headline ? "title" : void 0)}" tabindex="0"><header part="header" class="flex flex-grow-0 flex-shrink-0 basis-auto px-6 sm:px-10"><h2 part="title" class="flex-auto m-0" id="title">${this.headline.length > 0 ? html`<span class="sd-headline sd-headline--size-3xl leading-tight">${this.headline}</span>` : html`<slot name="headline"></slot>`}</h2>${!this.noCloseButton ? html`<sd-4-6-18-button part="close-button" variant="tertiary" exportparts="base:close-button__base" class="${cx("absolute top-2 right-2")}" name="x-lg" @click="${() => this.requestClose("close-button")}" type="button"><sd-4-6-18-icon label="${this.localize.term("close")}" name="close" library="system" color="currentColor"></sd-4-6-18-icon></sd-4-6-18-button>` : ""}</header><main part="body" class="flex flex-auto overflow-auto w-full px-6 sm:px-10"><slot></slot></main><footer part="footer" class="flex flex-grow-0 flex-shrink-0 basis-auto ml-auto gap-4 px-6 sm:px-10"><slot name="footer"></slot></footer></div></div>`;
+    )}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${ifDefined(this.headline ? this.headline : void 0)}" aria-labelledby="${ifDefined(!this.headline ? "title" : void 0)}" tabindex="0"><header part="header" class="flex flex-grow-0 flex-shrink-0 basis-auto px-6 sm:px-10"><h2 part="title" class="flex-auto m-0" id="title">${this.headline.length > 0 ? html`<span class="sd-headline sd-headline--size-3xl leading-tight">${this.headline}</span>` : html`<slot name="headline"></slot>`}</h2>${!this.noCloseButton ? html`<sd-4-7-1-button part="close-button" variant="tertiary" exportparts="base:close-button__base" class="${cx("absolute top-2 right-2")}" name="x-lg" @click="${() => this.requestClose("close-button")}" type="button"><sd-4-7-1-icon label="${this.localize.term("close")}" name="close" library="system" color="currentColor"></sd-4-7-1-icon></sd-4-7-1-button>` : ""}</header><main part="body" class="flex flex-auto overflow-auto w-full px-6 sm:px-10"><slot></slot></main><footer part="footer" class="flex flex-grow-0 flex-shrink-0 basis-auto ml-auto gap-4 px-6 sm:px-10"><slot name="footer"></slot></footer></div></div>`;
   }
 };
 SdDialog.styles = [
@@ -200,21 +203,29 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdDialog.prototype, "handleOpenChange", 1);
 SdDialog = __decorateClass([
-  customElement("sd-4-6-18-dialog")
+  customElement("sd-4-7-1-dialog")
 ], SdDialog);
 setDefaultAnimation("dialog.show", {
   keyframes: [
-    { opacity: 0, scale: 0.8 },
-    { opacity: 1, scale: 1 }
+    { opacity: 0, transform: "translate(-50%, 100%)" },
+    { opacity: 1, transform: "translate(0, 0)" }
   ],
-  options: { duration: 250, easing: "ease" }
+  options: { duration: "var(--sd-duration-medium, 300)", easing: "ease-in-out" }
+});
+setDefaultAnimation("dialog.showReducedMotion", {
+  keyframes: [{ opacity: 0 }, { opacity: 1 }],
+  options: { duration: "var(--sd-duration-medium, 300)", easing: "ease-in-out", reducedMotion: "allow" }
 });
 setDefaultAnimation("dialog.hide", {
   keyframes: [
-    { opacity: 1, scale: 1 },
-    { opacity: 0, scale: 0.8 }
+    { opacity: 1, transform: "translate(0, 0)" },
+    { opacity: 0, transform: "translate(50%, -100%)" }
   ],
-  options: { duration: 250, easing: "ease" }
+  options: { duration: "var(--sd-duration-fast, 150)", easing: "ease-in-out" }
+});
+setDefaultAnimation("dialog.hideReducedMotion", {
+  keyframes: [{ opacity: 1 }, { opacity: 0 }],
+  options: { duration: "var(--sd-duration-fast, 150)", easing: "ease-in-out", reducedMotion: "allow" }
 });
 setDefaultAnimation("dialog.denyClose", {
   keyframes: [{ scale: 1 }, { scale: 1.02 }, { scale: 1 }],
@@ -222,11 +233,11 @@ setDefaultAnimation("dialog.denyClose", {
 });
 setDefaultAnimation("dialog.overlay.show", {
   keyframes: [{ opacity: 0 }, { opacity: 1 }],
-  options: { duration: 250 }
+  options: { duration: "var(--sd-duration-medium, 300)", easing: "ease-in-out", reducedMotion: "allow" }
 });
 setDefaultAnimation("dialog.overlay.hide", {
   keyframes: [{ opacity: 1 }, { opacity: 0 }],
-  options: { duration: 250 }
+  options: { duration: "var(--sd-duration-fast, 150)", easing: "ease-in-out", reducedMotion: "allow" }
 });
 
 export {

package/dist-versioned/chunks/{chunk.EEICCCWB.js → chunk.4JMANJQA.js}

@@ -11,7 +11,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -149,9 +149,9 @@ var SdButton = class extends SolidElement {
       "icon-only": this._iconsInDefaultSlot.length > 0
     };
     return html`<${tag} part="base" class="${cx(
-      `font-md leading-[calc(var(--tw-varspacing)-2px)] no-underline
+      `group relative z-10 font-md leading-[calc(var(--tw-varspacing)-2px)] no-underline
         w-full h-varspacing whitespace-nowrap align-middle inline-flex items-stretch justify-center
-        border transition-colors duration-200 ease-in-out rounded-default
+        transition-colors duration-fast ease-in-out rounded-default
         select-none cursor-[inherit]`,
       !this.inverted ? "focus-visible:focus-outline" : "focus-visible:focus-outline-inverted",
       this.loading && "relative cursor-wait",
@@ -168,19 +168,38 @@ var SdButton = class extends SolidElement {
       }[this.size],
       {
         /* variants */
-        primary: !this.inverted ? `text-white border-transparent ${this.visuallyDisabled ? "bg-neutral-500 hover:bg-neutral-500 hover:bg-neutral-500" : "bg-primary hover:bg-primary-500 hover:text-primary-100 active:text-primary-200 active:bg-primary-800"}
-          disabled:bg-neutral-500` : `border-transparent ${this.visuallyDisabled ? "bg-neutral-500 text-white hover:bg-neutral-500 active:bg-neutral-500" : "text-primary bg-white hover:text-primary-500 hover:bg-primary-100 active:text-primary-800 active:bg-primary-200"}
+        primary: !this.inverted ? `text-white ${this.visuallyDisabled ? "bg-neutral-500 hover:bg-neutral-500" : "bg-primary hover:text-primary-100 active:text-primary-200"}
+          disabled:bg-neutral-500` : `${this.visuallyDisabled ? "bg-neutral-500 text-white hover:bg-neutral-500 active:bg-neutral-500" : "text-primary bg-white hover:text-primary-500 active:text-primary-800"}
           disabled:bg-neutral-600 disabled:text-white`,
-        secondary: !this.inverted ? `${this.visuallyDisabled ? "text-neutral-500 border-neutral-500 hover:text-neutral-500 hover:border-neutral-500 active:text-neutral-500 active:border-neutral-500" : "text-primary border-primary hover:text-primary-500 hover:border-primary-500 hover:bg-primary-100 active:text-primary-800 active:border-primary-800 active:bg-primary-200"}
-          disabled:text-neutral-500 disabled:border-neutral-500` : `${this.visuallyDisabled ? "text-neutral-600 border-neutral-600 hover:text-neutral-600 hover:border-neutral-600 active:text-neutral-600 active:border-neutral-600" : "text-white border-white hover:text-primary-100 hover:bg-primary-500 hover:border-primary-100 active:text-primary-200 active:bg-primary-800 active:border-primary-200"}
+        secondary: !this.inverted ? `border ${this.visuallyDisabled ? "text-neutral-500 border-neutral-500 hover:text-neutral-500 hover:border-neutral-500 active:text-neutral-500 active:border-neutral-500" : "text-primary border-primary hover:text-primary-500 hover:border-primary-500 active:text-primary-800 active:border-primary-800"}
+          disabled:text-neutral-500 disabled:border-neutral-500` : `border ${this.visuallyDisabled ? "text-neutral-600 border-neutral-600 hover:text-neutral-600 hover:border-neutral-600 active:text-neutral-600 active:border-neutral-600" : "text-white border-white hover:text-primary-100 hover:border-primary-100 active:text-primary-200"}
           disabled:text-neutral-600 disabled:border-neutral-600`,
-        tertiary: !this.inverted ? `border-transparent ${this.visuallyDisabled ? "text-neutral-500 hover:text-neutral-500 active:text-neutral-500" : "text-primary hover:text-primary-500 hover:bg-primary-100 active:text-primary-800 active:bg-primary-200"}
-          disabled:text-neutral-500` : `border-transparent ${this.visuallyDisabled ? "text-neutral-600 hover:text-neutral-600 active:text-neutral-600" : "text-white hover:text-primary-100 hover:bg-primary-500 active:text-primary-200 active:bg-primary-800"}
+        tertiary: !this.inverted ? `${this.visuallyDisabled ? "text-neutral-500 hover:text-neutral-500 active:text-neutral-500" : "text-primary hover:text-primary-500 active:text-primary-800"}
+          disabled:text-neutral-500` : `${this.visuallyDisabled ? "text-neutral-600 hover:text-neutral-600 active:text-neutral-600" : "text-white hover:text-primary-100 active:text-primary-200"}
           disabled:text-neutral-600`,
-        cta: `text-white ${this.visuallyDisabled ? "bg-neutral-500 hover:bg-neutral-500 active:bg-neutral-500" : "bg-accent-500 border-transparent hover:bg-accent-550 active:bg-accent-700"}
+        cta: `text-white ${this.visuallyDisabled ? "bg-neutral-500 hover:bg-neutral-500 active:bg-neutral-500" : "bg-accent-500"}
           ${!this.inverted ? "disabled:bg-neutral-500" : "disabled:bg-neutral-600"} disabled:text-white`
       }[this.variant]
-    )}" ?disabled="${ifDefined(isLink ? void 0 : this.disabled)}" type="${ifDefined(isLink ? void 0 : this.type)}" title="${this.title}" name="${ifDefined(isLink ? void 0 : this.name)}" value="${ifDefined(isLink ? void 0 : this.value)}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}" rel="${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}" role="${ifDefined(isLink ? void 0 : "button")}" aria-disabled="${this.disabled || this.visuallyDisabled ? "true" : "false"}" aria-labelledby="content" tabindex="${this.disabled ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @invalid="${this.isButton() ? this.handleInvalid : null}" @click="${this.handleClick}"><slot name="icon-left" part="icon-left" class="${cx(
+    )}" ?disabled="${ifDefined(isLink ? void 0 : this.disabled)}" type="${ifDefined(isLink ? void 0 : this.type)}" title="${this.title}" name="${ifDefined(isLink ? void 0 : this.name)}" value="${ifDefined(isLink ? void 0 : this.value)}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}" rel="${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}" role="${ifDefined(isLink ? void 0 : "button")}" aria-disabled="${this.disabled || this.visuallyDisabled ? "true" : "false"}" aria-labelledby="content" tabindex="${this.disabled ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @invalid="${this.isButton() ? this.handleInvalid : null}" @click="${this.handleClick}"><div part="motion-wrapper" class="${cx(
+      "absolute inset-0 rounded-default -z-10 overflow-hidden pointer-events-none ",
+      (this.disabled || this.visuallyDisabled) && "hidden"
+    )}"><div class="absolute inset-0 w-full h-full transition-all duration-fast translate-y-full group-hover:translate-y-0 group-hover:mt-[-22%] mt-[11%]"><div class="${cx(
+      "absolute right-0 min-w-full min-h-full aspect-square skew-y-[-11deg] mt-[11%]",
+      {
+        primary: !this.inverted ? "bg-primary-500 group-active:bg-primary-800" : "bg-primary-100 group-active:bg-primary-200",
+        secondary: !this.inverted ? "bg-primary-100 group-active:bg-primary-200" : "bg-primary-500 group-active:bg-primary-800",
+        tertiary: !this.inverted ? "bg-primary-100 group-active:bg-primary-200" : "bg-primary-500 group-active:bg-primary-800",
+        cta: "bg-accent-550 group-active:bg-accent-700"
+      }[this.variant]
+    )}"></div><div class="${cx(
+      "absolute w-full h-full mt-[22%]",
+      {
+        primary: !this.inverted ? "bg-primary-500 group-active:bg-primary-800" : "bg-primary-100 group-active:bg-primary-200",
+        secondary: !this.inverted ? "bg-primary-100 group-active:bg-primary-200" : "bg-primary-500 group-active:bg-primary-800",
+        tertiary: !this.inverted ? "bg-primary-100 group-active:bg-primary-200" : "bg-primary-500 group-active:bg-primary-800",
+        cta: "bg-accent-550 group-active:bg-accent-700"
+      }[this.variant]
+    )}"></div></div></div><slot name="icon-left" part="icon-left" class="${cx(
       "flex flex-auto items-center pointer-events-none",
       slots["icon-only"] && "hidden",
       this.loading && "invisible",
@@ -202,7 +221,7 @@ var SdButton = class extends SolidElement {
         md: "ml-2",
         lg: "ml-2"
       }[this.size]
-    )}"></slot>${this.loading ? html`<sd-4-6-18-spinner class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-4-6-18-spinner>` : ""}</${tag}>`;
+    )}"></slot>${this.loading ? html`<sd-4-7-1-spinner class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-4-7-1-spinner>` : ""}</${tag}>`;
   }
 };
 /**
@@ -210,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)}sd-4-6-18-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-4-6-18-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-6-18-icon),sd-4-6-18-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-7-1-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-4-7-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-7-1-icon),sd-4-7-1-spinner{font-size:calc(var(--tw-varspacing)/2)}`
 ];
 __decorateClass([
   query("a, button")
 ], SdButton.prototype, "button", 2);
 __decorateClass([
-  queryAssignedElements({ selector: "sd-4-6-18-icon" })
+  queryAssignedElements({ selector: "sd-4-7-1-icon" })
 ], SdButton.prototype, "_iconsInDefaultSlot", 2);
 __decorateClass([
   state()
@@ -282,7 +301,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdButton.prototype, "handleDisabledChange", 1);
 SdButton = __decorateClass([
-  customElement("sd-4-6-18-button")
+  customElement("sd-4-7-1-button")
 ], SdButton);
 
 export {

package/dist-versioned/chunks/{chunk.O7I7F6Q2.js → chunk.52C5F7DJ.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -137,7 +137,7 @@ __decorateClass([
   state()
 ], SdBrandshape.prototype, "componentBreakpoint", 2);
 SdBrandshape = __decorateClass([
-  customElement("sd-4-6-18-brandshape")
+  customElement("sd-4-7-1-brandshape")
 ], SdBrandshape);
 
 export {

package/dist-versioned/chunks/{chunk.DWHZP4ID.js → chunk.56N3RSAE.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -72,7 +72,7 @@ var SdExpandable = class extends SolidElement {
       "sd-interactive sd-interactive--reset",
       this.inverted && "sd-interactive--inverted",
       !this.inverted ? "!focus-visible:focus-outline" : "!focus-visible:focus-outline-inverted"
-    )}" @click="${this.onToggleClick}" aria-expanded="${this.open}"><div class="${cx("h-full justify-center w-full text-base flex items-center toggle")}">${this.open ? html`<slot name="toggle-open"><sd-4-6-18-icon class="mr-2 text-xl" library="system" name="chevron-up"></sd-4-6-18-icon>${this.localize.term("showLess")}</slot>` : html`<slot name="toggle-closed"><sd-4-6-18-icon class="mr-2 text-xl" library="system" name="chevron-down"></sd-4-6-18-icon>${this.localize.term("showMore")}</slot>`}</div></button><details part="details" ?inert="${ifDefined(!this.open)}"><summary part="summary" aria-hidden="true" class="cursor-pointer overflow-hidden list-none"><slot name="clone"></slot></summary><div part="content" class="content content-preview overflow-hidden relative"><slot></slot></div></details></div>`;
+    )}" @click="${this.onToggleClick}" aria-expanded="${this.open}"><div class="${cx("h-full justify-center w-full text-base flex items-center toggle")}">${this.open ? html`<slot name="toggle-open"><sd-4-7-1-icon class="mr-2 text-xl" library="system" name="chevron-up"></sd-4-7-1-icon>${this.localize.term("showLess")}</slot>` : html`<slot name="toggle-closed"><sd-4-7-1-icon class="mr-2 text-xl" library="system" name="chevron-down"></sd-4-7-1-icon>${this.localize.term("showMore")}</slot>`}</div></button><details part="details" ?inert="${ifDefined(!this.open)}"><summary part="summary" aria-hidden="true" class="cursor-pointer overflow-hidden list-none"><slot name="clone"></slot></summary><div part="content" class="content content-preview overflow-hidden relative"><slot></slot></div></details></div>`;
   }
   firstUpdated() {
     this.cloneContentToLightDOM();
@@ -109,7 +109,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdExpandable.prototype, "onOpenChange", 1);
 SdExpandable = __decorateClass([
-  customElement("sd-4-6-18-expandable")
+  customElement("sd-4-7-1-expandable")
 ], SdExpandable);
 
 export {

package/dist-versioned/chunks/{chunk.TQJ46AIM.js → chunk.5JQXTFQP.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.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-4-6-18-button part="front-button" size="md" variant="${{
+    )}"></div><sd-4-7-1-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-4-6-18-icon library="system" name="reload" label="Flip to Back"></sd-4-6-18-icon></sd-4-6-18-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-4-7-1-icon library="system" name="reload" label="Flip to Back"></sd-4-7-1-icon></sd-4-7-1-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-4-6-18-button size="md" part="back-button" variant="${{
+    )}"></div><sd-4-7-1-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-4-6-18-icon library="system" name="reload" label="Flip to Front"></sd-4-6-18-icon></sd-4-6-18-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-4-7-1-icon library="system" name="reload" label="Flip to Front"></sd-4-7-1-icon></sd-4-7-1-button></div></div>`;
   }
 };
 /**
@@ -170,7 +170,7 @@ __decorateClass([
   state()
 ], SdFlipcard.prototype, "activeSide", 2);
 SdFlipcard = __decorateClass([
-  customElement("sd-4-6-18-flipcard")
+  customElement("sd-4-7-1-flipcard")
 ], SdFlipcard);
 
 export {