npm - @solid-design-system/components - Versions diffs - 6.5.2 → 6.7.0 - Mend

@solid-design-system/components 6.5.2 → 6.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (653) hide show

package/dist-versioned/chunks/{chunk.L6ZE3RXX.js → chunk.FH7IYLFW.js} RENAMED Viewed

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.TNJNUASM.js";
+} from "./chunk.H7FDVZRQ.js";
 import {
   __decorateClass,
   __spreadValues
@@ -37,8 +37,8 @@ var SdTabGroup = class extends SolidElement {
   }
   connectedCallback() {
     const whenAllDefined = Promise.all([
-      customElements.whenDefined("sd-6-5-2-tab"),
-      customElements.whenDefined("sd-6-5-2-tab-panel")
+      customElements.whenDefined("sd-6-7-0-tab"),
+      customElements.whenDefined("sd-6-7-0-tab-panel")
     ]);
     super.connectedCallback();
     this.resizeObserver = new ResizeObserver(() => {
@@ -86,20 +86,20 @@ var SdTabGroup = class extends SolidElement {
   }
   getAllTabs(options = { includeDisabled: true }) {
     const slot = this.shadowRoot.querySelector('slot[name="nav"]');
-    return Array.from(slot.assignedElements()).map((el) => el.tagName.toLocaleLowerCase() === "sd-6-5-2-tab" ? el : el.querySelector("sd-6-5-2-tab")).filter((el) => {
-      return el && options.includeDisabled ? el.tagName.toLowerCase() === "sd-6-5-2-tab" : el.tagName.toLowerCase() === "sd-6-5-2-tab" && !el.disabled;
+    return Array.from(slot.assignedElements()).map((el) => el.tagName.toLocaleLowerCase() === "sd-6-7-0-tab" ? el : el.querySelector("sd-6-7-0-tab")).filter((el) => {
+      return el && options.includeDisabled ? el.tagName.toLowerCase() === "sd-6-7-0-tab" : el.tagName.toLowerCase() === "sd-6-7-0-tab" && !el.disabled;
     });
   }
   getAllPanels() {
-    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-6-5-2-tab-panel");
+    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-6-7-0-tab-panel");
   }
   getActiveTab() {
     return this.tabs.find((t) => t.matches(":focus"));
   }
   handleClick(event) {
     const target = event.target;
-    const tab = target.closest("sd-6-5-2-tab");
-    const tabGroup = tab == null ? void 0 : tab.closest("sd-6-5-2-tab-group");
+    const tab = target.closest("sd-6-7-0-tab");
+    const tabGroup = tab == null ? void 0 : tab.closest("sd-6-7-0-tab-group");
     if (tabGroup !== this) {
       return;
     }
@@ -109,8 +109,8 @@ var SdTabGroup = class extends SolidElement {
   }
   handleKeyDown(event) {
     const target = event.target;
-    const tab = target.closest("sd-6-5-2-tab");
-    const tabGroup = tab == null ? void 0 : tab.closest("sd-6-5-2-tab-group");
+    const tab = target.closest("sd-6-7-0-tab");
+    const tabGroup = tab == null ? void 0 : tab.closest("sd-6-7-0-tab-group");
     if (tabGroup !== this) {
       return;
     }
@@ -137,7 +137,7 @@ var SdTabGroup = class extends SolidElement {
     if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
       const activeEl = this.tabs.find((t) => t.matches(":focus"));
       const isRtl = this.localize.dir() === "rtl";
-      if ((activeEl == null ? void 0 : activeEl.tagName.toLowerCase()) === "sd-6-5-2-tab") {
+      if ((activeEl == null ? void 0 : activeEl.tagName.toLowerCase()) === "sd-6-7-0-tab") {
         let index = this.tabs.indexOf(activeEl);
         if (event.key === "Home") {
           index = 0;
@@ -258,16 +258,16 @@ var SdTabGroup = class extends SolidElement {
     return html`<div part="base" class="${cx("flex flex-col rounded-none")}" @click="${this.handleClick}" @keydown="${this.handleKeyDown}"><div part="nav" class="${cx(this.hasScrollControls && "relative py-0 px-12")}">${this.hasScrollControls ? html`<button part="scroll-button--start" exportparts="base:scroll-button__base" tabindex="-1" aria-hidden="true" disabled="${ifDefined(!this.canScroll.left || void 0)}" class="${cx(
       "sd-interactive flex items-center justify-center absolute top-0 bottom-0 left-0 !outline-offset-0 border-b border-neutral-400 z-10",
       this.localize.dir() === "rtl" && "left-auto right-0"
-    )}" @click="${this.handleScrollToStart}"><sd-6-5-2-icon library="_internal" name="${isRtl ? "chevron-up" : "chevron-down"}" label="previous" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-6-5-2-icon></button>` : ""}<div part="scroll-container" class="flex overflow-x-auto focus-visible:focus-outline !outline-offset-0"><div part="tabs" class="${cx("flex flex-auto relative flex-row")}" role="tablist">${((_a = this.activeTab) == null ? void 0 : _a.variant) !== "container" ? html`<div part="active-tab-indicator" id="indicator" class="absolute h-1 bg-accent bottom-0 transition-[transform,width] duration-medium ease-in-out z-30 navigable__current-indicator-height navigable__current-indicator-border-radius"></div>` : ""}<div part="separation" class="border-neutral-400 absolute w-full h-0.25 bottom-0 border-b z-10"></div><slot name="nav" @slotchange="${this.syncTabsAndPanels}"></slot></div></div>${this.hasScrollControls ? html`<button part="scroll-button--end" exportparts="base:scroll-button__base" tabindex="-1" aria-hidden="true" disabled="${ifDefined(!this.canScroll.right || void 0)}" class="${cx(
+    )}" @click="${this.handleScrollToStart}"><sd-6-7-0-icon library="_internal" name="${isRtl ? "chevron-up" : "chevron-down"}" label="previous" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-6-7-0-icon></button>` : ""}<div part="scroll-container" class="flex overflow-x-auto focus-visible:focus-outline !outline-offset-0"><div part="tabs" class="${cx("flex flex-auto relative flex-row")}" role="tablist">${((_a = this.activeTab) == null ? void 0 : _a.variant) !== "container" ? html`<div part="active-tab-indicator" id="indicator" class="absolute h-1 bg-accent bottom-0 transition-[transform,width] duration-medium ease-in-out z-30 navigable__current-indicator-height navigable__current-indicator-border-radius"></div>` : ""}<div part="separation" class="border-neutral-400 absolute w-full h-0.25 bottom-0 border-b z-10"></div><slot name="nav" @slotchange="${this.syncTabsAndPanels}"></slot></div></div>${this.hasScrollControls ? html`<button part="scroll-button--end" exportparts="base:scroll-button__base" tabindex="-1" aria-hidden="true" disabled="${ifDefined(!this.canScroll.right || void 0)}" class="${cx(
       "sd-interactive flex items-center justify-center absolute top-0 bottom-0 right-0 !outline-offset-0 border-b border-neutral-400 z-10",
       this.localize.dir() === "rtl" && "right-auto left-0"
-    )}" @click="${this.handleScrollToEnd}"><sd-6-5-2-icon library="_internal" name="${isRtl ? "chevron-down" : "chevron-up"}" label="next" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-6-5-2-icon></button>` : ""}</div><slot part="body" class="${cx("block auto py-8 px-6", this.variant === "container" && "border border-neutral-400 border-t-0")}" @slotchange="${this.syncTabsAndPanels}"></slot></div>`;
+    )}" @click="${this.handleScrollToEnd}"><sd-6-7-0-icon library="_internal" name="${isRtl ? "chevron-down" : "chevron-up"}" label="next" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-6-7-0-icon></button>` : ""}</div><slot part="body" class="${cx("block auto py-8 px-6", this.variant === "container" && "border border-neutral-400 border-t-0")}" @slotchange="${this.syncTabsAndPanels}"></slot></div>`;
   }
 };
 SdTabGroup.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{box-sizing:border-box;display:block}[part=scroll-container]{scrollbar-width:none}[part=scroll-container]::-webkit-scrollbar{height:calc(var(--sd-spacing-1) * 0);width:calc(var(--sd-spacing-1) * 0)}::slotted(sd-6-5-2-tab-panel){--padding:1rem 0}::slotted(sd-6-5-2-tab-panel:focus-visible){outline-style:solid;outline-offset:2px;outline-width:2px;outline-color:rgba(var(--outline-color-primary))}`
+:host{box-sizing:border-box;display:block}[part=scroll-container]{scrollbar-width:none}[part=scroll-container]::-webkit-scrollbar{height:calc(var(--sd-spacing-1) * 0);width:calc(var(--sd-spacing-1) * 0)}::slotted(sd-6-7-0-tab-panel){--padding:1rem 0}::slotted(sd-6-7-0-tab-panel:focus-visible){outline-style:solid;outline-offset:2px;outline-width:2px;outline-color:rgba(var(--outline-color-primary))}`
 ];
 __decorateClass([
   query("[part=base]")
@@ -300,7 +300,7 @@ __decorateClass([
   debounce(20)
 ], SdTabGroup.prototype, "handleScroll", 1);
 SdTabGroup = __decorateClass([
-  customElement("sd-6-5-2-tab-group")
+  customElement("sd-6-7-0-tab-group")
 ], SdTabGroup);
 export {

package/dist-versioned/chunks/{chunk.5XWO3USG.js → chunk.FHD6XY2M.js} RENAMED Viewed

@@ -13,7 +13,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.TNJNUASM.js";
+} from "./chunk.H7FDVZRQ.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -111,6 +111,9 @@ var SdTextarea = class extends SolidElement {
     this.formControlController.updateValidity();
     this.setTextareaHeight();
   }
+  handleSizeChange() {
+    this.size = this.floatingLabel && this.size === "sm" ? "md" : this.size;
+  }
   /** Sets focus on the textarea. */
   focus(options) {
     this.textarea.focus(options);
@@ -187,7 +190,15 @@ var SdTextarea = class extends SolidElement {
       md: "text-lg top-2",
       lg: "text-xl top-2"
     }[this.size];
-    return html`<div part="form-control" class="flex flex-col h-full text-left">${hasLabel && !this.floatingLabel || hasTooltip ? html`<div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx(hasLabel ? "inline-block form-control-color-text" : "hidden", textSize)}" for="input" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label> ${slots["tooltip"] ? html`<slot name="tooltip"></slot>` : ""}</div>` : null}<div part="form-control-input" class="${cx("relative h-full w-full", this.disabled && "cursor-not-allowed")}"><div part="border" class="${cx(
+    return html`<div part="form-control" class="flex flex-col h-full text-left">${hasLabel && !this.floatingLabel || hasTooltip ? html`<div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx(hasLabel ? "inline-block form-control-color-text" : "hidden", textSize)}" for="input" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label> ${slots["tooltip"] ? html`<slot name="tooltip"></slot>` : ""}</div>` : null}<div part="form-control-input" class="${cx("relative h-full w-full", this.disabled && "cursor-not-allowed")}">${hasLabel && this.floatingLabel ? html`<label id="label" part="form-control-floating-label" class="${cx(
+      "absolute left-4 z-20 pointer-events-none transition-all duration-200",
+      textSize,
+      !isFloatingLabelActive ? "top-2.5" : "top-2 text-xs"
+    )}" for="input"><span class="${cx(
+      "leading-none",
+      (this.visuallyDisabled || this.disabled) && "text-neutral-500",
+      isFloatingLabelActive && !this.visuallyDisabled && !this.disabled && "form-control--filled__floating-label-color-text"
+    )}">${this.label}</span></label>` : null}<div part="border" class="${cx(
       "absolute w-full h-full pointer-events-none border rounded-default transition-[border] duration-medium ease-in-out",
       {
         disabled: "border-neutral-500",
@@ -200,15 +211,7 @@ var SdTextarea = class extends SolidElement {
         valid: "border-success",
         default: "form-control-color-border"
       }[textareaState]
-    )}">${hasLabel && this.floatingLabel ? html`<label id="label" part="form-control-floating-label" class="${cx(
-      "absolute left-4 z-20 pointer-events-none transition-all duration-200",
-      textSize,
-      !isFloatingLabelActive ? "top-2.5 text-base" : this.size === "lg" ? "top-2 text-xs" : "top-1 text-xs"
-    )}" for="input"><span class="${cx(
-      "leading-none",
-      (this.visuallyDisabled || this.disabled) && "text-neutral-500",
-      isFloatingLabelActive && !this.visuallyDisabled && !this.disabled && "form-control--filled__floating-label-color-text"
-    )}">${this.label}</span></label>` : null}</div><div part="base" class="${cx(
+    )}"></div><div part="base" class="${cx(
       "textarea h-full flex items-top rounded-default group transition-colors duration-medium hover:duration-fast ease-in-out",
       this.floatingLabel && "pt-6",
       {
@@ -221,15 +224,15 @@ var SdTextarea = class extends SolidElement {
       textareaState === "disabled" || textareaState === "visuallyDisabled" ? "text-neutral-500" : "form-control-color-text",
       ["invalid", "activeInvalid"].includes(textareaState) && "form-control--invalid-color-background"
     )}"><textarea part="textarea" id="input" class="${cx(
-      "ps-4 flex-grow focus:outline-none bg-transparent placeholder:text-neutral-700 resize-none group-has-[sd-6-5-2-icon]:pe-8",
+      "ps-4 flex-grow focus:outline-none bg-transparent placeholder:text-neutral-700 resize-none group-has-[sd-6-7-0-icon]:pe-8",
       {
-        sm: this.floatingLabel ? "pb-1" : "py-1",
-        md: this.floatingLabel ? "pb-1" : "py-1",
-        lg: this.floatingLabel ? "pb-2" : "py-2"
+        sm: isFloatingLabelActive ? "pb-1" : "py-2",
+        md: isFloatingLabelActive ? "pb-1" : "py-2",
+        lg: isFloatingLabelActive ? "pb-2" : "py-2"
       }[this.size],
       this.disabled && "cursor-not-allowed",
       textSize
-    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?visually-disabled="${this.visuallyDisabled}" placeholder="${!this.floatingLabel || isFloatingLabelActive ? ifDefined(this.placeholder) : ""}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-6-5-2-icon class="${cx("text-error absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="risk" part="invalid-icon"></sd-6-5-2-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-6-5-2-icon class="${cx("text-success absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-6-5-2-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText && !this.showInvalidStyle ? "block" : "hidden")}" aria-hidden="${!hasHelpText || this.showInvalidStyle}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage(this.size)}`;
+    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?visually-disabled="${this.visuallyDisabled}" placeholder="${!this.floatingLabel || isFloatingLabelActive ? ifDefined(this.placeholder) : ""}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-6-7-0-icon class="${cx("text-error absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="risk" part="invalid-icon"></sd-6-7-0-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-6-7-0-icon class="${cx("text-success absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-6-7-0-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText && !this.showInvalidStyle ? "block" : "hidden")}" aria-hidden="${!hasHelpText || this.showInvalidStyle}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage(this.size)}`;
   }
 };
 /**
@@ -346,8 +349,11 @@ __decorateClass([
 __decorateClass([
   watch("value", { waitUntilFirstUpdate: true })
 ], SdTextarea.prototype, "handleValueChange", 1);
+__decorateClass([
+  watch(["size", "floatingLabel"])
+], SdTextarea.prototype, "handleSizeChange", 1);
 SdTextarea = __decorateClass([
-  customElement("sd-6-5-2-textarea")
+  customElement("sd-6-7-0-textarea")
 ], SdTextarea);
 export {

package/dist-versioned/chunks/{chunk.2EWH2DC2.js → chunk.FJ3FPGND.js} RENAMED Viewed

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.TNJNUASM.js";
+} from "./chunk.H7FDVZRQ.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -56,7 +56,7 @@ __decorateClass([
   property({ type: String, reflect: true })
 ], SdLoader.prototype, "color", 2);
 SdLoader = __decorateClass([
-  customElement("sd-6-5-2-loader")
+  customElement("sd-6-7-0-loader")
 ], SdLoader);
 export {

package/dist-versioned/chunks/{chunk.PBXAIJQ4.js → chunk.GAZNGQ6X.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.TNJNUASM.js";
+} from "./chunk.H7FDVZRQ.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -87,7 +87,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-6-5-2-button part="front-button" size="md" variant="${{
+    )}"></div><sd-6-7-0-button part="front-button" size="md" variant="${{
       primary: "tertiary",
       "primary-100": "tertiary",
       "gradient-light": "primary",
@@ -97,7 +97,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-6-5-2-icon library="_internal" name="reload" label="Flip to Back"></sd-6-5-2-icon></sd-6-5-2-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-6-7-0-icon library="_internal" name="reload" label="Flip to Back"></sd-6-7-0-icon></sd-6-7-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",
@@ -130,7 +130,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-6-5-2-button size="md" part="back-button" variant="${{
+    )}"></div><sd-6-7-0-button size="md" part="back-button" variant="${{
       primary: "tertiary",
       "primary-100": "tertiary",
       "gradient-light": "primary",
@@ -140,7 +140,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-6-5-2-icon library="_internal" name="reload" label="Flip to Front"></sd-6-5-2-icon></sd-6-5-2-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-6-7-0-icon library="_internal" name="reload" label="Flip to Front"></sd-6-7-0-icon></sd-6-7-0-button></div></div>`;
   }
 };
 /**
@@ -177,7 +177,7 @@ __decorateClass([
   state()
 ], SdFlipcard.prototype, "activeSide", 2);
 SdFlipcard = __decorateClass([
-  customElement("sd-6-5-2-flipcard")
+  customElement("sd-6-7-0-flipcard")
 ], SdFlipcard);
 export {

package/dist-versioned/chunks/{chunk.YATRFNET.js → chunk.GMYIZ3J2.js} RENAMED Viewed

@@ -11,7 +11,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.TNJNUASM.js";
+} from "./chunk.H7FDVZRQ.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -163,48 +163,48 @@ var SdButton = class extends SolidElement {
        * */
       {
         /* sizes, fonts */
-        sm: `sd-6-5-2-button--size-sm-font-size sd-6-5-2-button-font-weight sd-6-5-2-button--size-sm-border-radius varspacing-8 ${hasBorder ? "py-[0.281rem] px-[0.938rem]" : "sd-6-5-2-button--size-sm-padding-block px-4"}`,
-        md: `sd-6-5-2-button--size-md-font-size sd-6-5-2-button-font-weight sd-6-5-2-button--size-md-border-radius varspacing-10 ${hasBorder ? "py-[0.438rem] px-[0.938rem]" : "sd-6-5-2-button--size-md-padding-block px-4"}`,
-        lg: `sd-6-5-2-button--size-lg-font-size sd-6-5-2-button-font-weight sd-6-5-2-button--size-lg-border-radius varspacing-12 ${hasBorder ? "py-[0.688rem] px-[0.938rem]" : "sd-6-5-2-button--size-lg-padding-block px-4"}`
+        sm: `sd-6-7-0-button--size-sm-font-size sd-6-7-0-button-font-weight sd-6-7-0-button--size-sm-border-radius varspacing-8 ${hasBorder ? "py-[0.281rem] px-[0.938rem]" : "sd-6-7-0-button--size-sm-padding-block px-4"}`,
+        md: `sd-6-7-0-button--size-md-font-size sd-6-7-0-button-font-weight sd-6-7-0-button--size-md-border-radius varspacing-10 ${hasBorder ? "py-[0.438rem] px-[0.938rem]" : "sd-6-7-0-button--size-md-padding-block px-4"}`,
+        lg: `sd-6-7-0-button--size-lg-font-size sd-6-7-0-button-font-weight sd-6-7-0-button--size-lg-border-radius varspacing-12 ${hasBorder ? "py-[0.688rem] px-[0.938rem]" : "sd-6-7-0-button--size-lg-padding-block px-4"}`
       }[this.size],
       {
         /* variants */
-        primary: !this.inverted ? `${this.visuallyDisabled ? "bg-neutral-500 border-neutral-500 hover:bg-neutral-500 text-white" : "sd-6-5-2-button--primary--default-color-background border-transparent sd-6-5-2-button--primary--default-color-text hover:text-primary-100 active:sd-6-5-2-button--primary--active-color-text"}
-          disabled:bg-neutral-500 disabled:text-white` : `${this.visuallyDisabled ? "bg-neutral-500 text-white border-neutral-500 hover:bg-neutral-500 active:bg-neutral-500" : "sd-6-5-2-button--primary--inverted--default-color-text sd-6-5-2-button--primary--inverted--default-color-background border-white hover:sd-6-5-2-button--primary--inverted--hover-color-text active:sd-6-5-2-button--primary--inverted--active-color-text active:sd-6-5-2-button--primary--inverted--active-color-background"}
-          disabled:sd-6-5-2-button--inverted--disabled-color-background disabled:sd-6-5-2-button--inverted--disabled-color-border disabled:text-white`,
-        secondary: !this.inverted ? `border ${this.visuallyDisabled ? "sd-6-5-2-button--secondary--disabled-color-text border-neutral-500 hover:text-neutral-500 hover:border-neutral-500 active:text-neutral-500 active:border-neutral-500" : "sd-6-5-2-button--secondary--default-color-text border-primary hover:text-primary-500 hover:border-primary-500 active:text-primary-800 active:border-primary-800"}
-          disabled:sd-6-5-2-button--secondary--disabled-color-text 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 sd-6-5-2-button--secondary--inverted--color-border hover:sd-6-5-2-button--secondary--inverted--hover-color-text hover:border-primary-100 active:text-primary-200"}
-          disabled:sd-6-5-2-button--inverted--disabled-color-border disabled:sd-6-5-2-button--inverted--disabled-color-text`,
-        tertiary: !this.inverted ? `border-transparent ${this.visuallyDisabled ? "sd-6-5-2-button--tertiary--disabled-color-text hover:text-neutral-500 active:text-neutral-500" : "sd-6-5-2-button--tertiary--default-color-text hover:text-primary-500 active:text-primary-800"}
-          disabled:sd-6-5-2-button--tertiary--disabled-color-text` : `border-transparent  ${this.visuallyDisabled ? "text-neutral-600 hover:text-neutral-600 active:text-neutral-600" : "text-white hover:sd-6-5-2-button--tertiary--inverted--hover-color-text hover:sd-6-5-2-button--tertiary--inverted--hover-color-background active:text-primary-200"}
-          disabled:sd-6-5-2-button--inverted--disabled-color-text`,
+        primary: !this.inverted ? `${this.visuallyDisabled ? "bg-neutral-500 border-neutral-500 hover:bg-neutral-500 text-white" : "sd-6-7-0-button--primary--default-color-background border-transparent sd-6-7-0-button--primary--default-color-text hover:text-primary-100 active:sd-6-7-0-button--primary--active-color-text"}
+          disabled:bg-neutral-500 disabled:text-white` : `${this.visuallyDisabled ? "bg-neutral-500 text-white border-neutral-500 hover:bg-neutral-500 active:bg-neutral-500" : "sd-6-7-0-button--primary--inverted--default-color-text sd-6-7-0-button--primary--inverted--default-color-background border-white hover:sd-6-7-0-button--primary--inverted--hover-color-text active:sd-6-7-0-button--primary--inverted--active-color-text active:sd-6-7-0-button--primary--inverted--active-color-background"}
+          disabled:sd-6-7-0-button--inverted--disabled-color-background disabled:sd-6-7-0-button--inverted--disabled-color-border disabled:text-white`,
+        secondary: !this.inverted ? `border ${this.visuallyDisabled ? "sd-6-7-0-button--secondary--disabled-color-text border-neutral-500 hover:text-neutral-500 hover:border-neutral-500 active:text-neutral-500 active:border-neutral-500" : "sd-6-7-0-button--secondary--default-color-text border-primary hover:text-primary-500 hover:border-primary-500 active:text-primary-800 active:border-primary-800"}
+          disabled:sd-6-7-0-button--secondary--disabled-color-text 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 sd-6-7-0-button--secondary--inverted--color-border hover:sd-6-7-0-button--secondary--inverted--hover-color-text hover:border-primary-100 active:text-primary-200"}
+          disabled:sd-6-7-0-button--inverted--disabled-color-border disabled:sd-6-7-0-button--inverted--disabled-color-text`,
+        tertiary: !this.inverted ? `border-transparent ${this.visuallyDisabled ? "sd-6-7-0-button--tertiary--disabled-color-text hover:text-neutral-500 active:text-neutral-500" : "sd-6-7-0-button--tertiary--default-color-text hover:text-primary-500 active:text-primary-800"}
+          disabled:sd-6-7-0-button--tertiary--disabled-color-text` : `border-transparent  ${this.visuallyDisabled ? "text-neutral-600 hover:text-neutral-600 active:text-neutral-600" : "text-white hover:sd-6-7-0-button--tertiary--inverted--hover-color-text hover:sd-6-7-0-button--tertiary--inverted--hover-color-background active:text-primary-200"}
+          disabled:sd-6-7-0-button--inverted--disabled-color-text`,
         cta: `${this.visuallyDisabled ? "bg-neutral-500 border-neutral-500 hover:bg-neutral-500 active:bg-neutral-500" : "bg-accent border-transparent"}
-          ${!this.inverted ? "text-white disabled:bg-neutral-500 disabled:border-neutral-500 disabled:text-white" : "sd-6-5-2-button--cta--inverted--default-color-background sd-6-5-2-button--cta--inverted--default-color-text hover:sd-6-5-2-button--cta--inverted--hover-color-text active:sd-6-5-2-button--cta--inverted--active-color-text disabled:sd-6-5-2-button--inverted--disabled-color-background disabled:sd-6-5-2-button--inverted--disabled-color-border disabled:text-white"}`
+          ${!this.inverted ? "text-white disabled:bg-neutral-500 disabled:border-neutral-500 disabled:text-white" : "sd-6-7-0-button--cta--inverted--default-color-background sd-6-7-0-button--cta--inverted--default-color-text hover:sd-6-7-0-button--cta--inverted--hover-color-text active:sd-6-7-0-button--cta--inverted--active-color-text disabled:sd-6-7-0-button--inverted--disabled-color-background disabled:sd-6-7-0-button--inverted--disabled-color-border 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}"><div part="motion-wrapper" class="${cx(
       "absolute inset-0 -z-10 overflow-hidden pointer-events-none ",
       (this.disabled || this.visuallyDisabled) && "hidden",
       {
         /* sizes, fonts */
-        sm: `sd-6-5-2-button--size-sm-border-radius`,
-        md: `sd-6-5-2-button--size-md-border-radius`,
-        lg: `sd-6-5-2-button--size-lg-border-radius`
+        sm: `sd-6-7-0-button--size-sm-border-radius`,
+        md: `sd-6-7-0-button--size-md-border-radius`,
+        lg: `sd-6-7-0-button--size-lg-border-radius`
       }[this.size]
     )}"><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 ? "sd-6-5-2-button--primary--hover-color-background group-active:bg-primary-800" : "sd-6-5-2-button--primary--inverted--hover-color-background group-active:bg-primary-200",
-        secondary: !this.inverted ? "sd-6-5-2-button--secondary--hover-color-background group-active:sd-6-5-2-button--secondary--active-color-background" : "bg-primary-500 group-active:sd-6-5-2-button--secondary--inverted--active-color-background",
-        tertiary: !this.inverted ? "sd-6-5-2-button--tertiary--hover-color-background group-active:sd-6-5-2-button--tertiary--active-color-background" : "bg-primary-500 group-active:sd-6-5-2-button--tertiary--inverted--active-color-background",
-        cta: !this.inverted ? "bg-accent-550 group-active:bg-accent-700" : "sd-6-5-2-button--cta--inverted--hover-color-background group-active:sd-6-5-2-button--cta--inverted--active-color-background"
+        primary: !this.inverted ? "sd-6-7-0-button--primary--hover-color-background group-active:bg-primary-800" : "sd-6-7-0-button--primary--inverted--hover-color-background group-active:bg-primary-200",
+        secondary: !this.inverted ? "sd-6-7-0-button--secondary--hover-color-background group-active:sd-6-7-0-button--secondary--active-color-background" : "bg-primary-500 group-active:sd-6-7-0-button--secondary--inverted--active-color-background",
+        tertiary: !this.inverted ? "sd-6-7-0-button--tertiary--hover-color-background group-active:sd-6-7-0-button--tertiary--active-color-background" : "bg-primary-500 group-active:sd-6-7-0-button--tertiary--inverted--active-color-background",
+        cta: !this.inverted ? "bg-accent-550 group-active:bg-accent-700" : "sd-6-7-0-button--cta--inverted--hover-color-background group-active:sd-6-7-0-button--cta--inverted--active-color-background"
       }[this.variant]
     )}"></div><div class="${cx(
       "absolute w-full h-full mt-[22%]",
       {
-        primary: !this.inverted ? "sd-6-5-2-button--primary--hover-color-background group-active:bg-primary-800" : "sd-6-5-2-button--primary--inverted--hover-color-background group-active:bg-primary-200",
-        secondary: !this.inverted ? "sd-6-5-2-button--secondary--hover-color-background group-active:sd-6-5-2-button--secondary--active-color-background" : "bg-primary-500 group-active:sd-6-5-2-button--secondary--inverted--active-color-background",
-        tertiary: !this.inverted ? "sd-6-5-2-button--tertiary--hover-color-background group-active:sd-6-5-2-button--tertiary--active-color-background" : "bg-primary-500 group-active:sd-6-5-2-button--tertiary--inverted--active-color-background",
-        cta: !this.inverted ? "bg-accent-550 group-active:bg-accent-700" : "sd-6-5-2-button--cta--inverted--hover-color-background group-active:sd-6-5-2-button--cta--inverted--active-color-background"
+        primary: !this.inverted ? "sd-6-7-0-button--primary--hover-color-background group-active:bg-primary-800" : "sd-6-7-0-button--primary--inverted--hover-color-background group-active:bg-primary-200",
+        secondary: !this.inverted ? "sd-6-7-0-button--secondary--hover-color-background group-active:sd-6-7-0-button--secondary--active-color-background" : "bg-primary-500 group-active:sd-6-7-0-button--secondary--inverted--active-color-background",
+        tertiary: !this.inverted ? "sd-6-7-0-button--tertiary--hover-color-background group-active:sd-6-7-0-button--tertiary--active-color-background" : "bg-primary-500 group-active:sd-6-7-0-button--tertiary--inverted--active-color-background",
+        cta: !this.inverted ? "bg-accent-550 group-active:bg-accent-700" : "sd-6-7-0-button--cta--inverted--hover-color-background group-active:sd-6-7-0-button--cta--inverted--active-color-background"
       }[this.variant]
     )}"></div></div></div><slot name="icon-left" part="icon-left" class="${cx(
       "flex flex-auto items-center justify-end pointer-events-none",
@@ -228,7 +228,7 @@ var SdButton = class extends SolidElement {
         md: "ml-2",
         lg: "ml-2"
       }[this.size]
-    )}"></slot>${this.loading ? html`<sd-6-5-2-loader class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-6-5-2-loader>` : ""}</${tag}>`;
+    )}"></slot>${this.loading ? html`<sd-6-7-0-loader class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-6-7-0-loader>` : ""}</${tag}>`;
   }
 };
 /**
@@ -237,13 +237,13 @@ var SdButton = class extends SolidElement {
 SdButton.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
-:host{position:relative;z-index:0;display:inline-block;width:auto;cursor:pointer}::slotted(sd-6-5-2-badge){pointer-events:none;position:absolute;top:calc(var(--sd-spacing-1) * 0);right:calc(var(--sd-spacing-1) * 0);--tw-translate-x:calc(1/2 * 100%)!important;--tw-translate-y:calc(calc(1/2 * 100%) * -1)!important;translate:var(--tw-translate-x) var(--tw-translate-y)!important}::slotted(sd-6-5-2-icon),sd-6-5-2-loader{font-size:calc(var(--tw-varspacing)/ 2)}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}`
+:host{position:relative;z-index:0;display:inline-block;width:auto;cursor:pointer}::slotted(sd-6-7-0-badge){pointer-events:none;position:absolute;top:calc(var(--sd-spacing-1) * 0);right:calc(var(--sd-spacing-1) * 0);--tw-translate-x:calc(1/2 * 100%)!important;--tw-translate-y:calc(calc(1/2 * 100%) * -1)!important;translate:var(--tw-translate-x) var(--tw-translate-y)!important}::slotted(sd-6-7-0-icon),sd-6-7-0-loader{font-size:calc(var(--tw-varspacing)/ 2)}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}`
 ];
 __decorateClass([
   query("a, button")
 ], SdButton.prototype, "button", 2);
 __decorateClass([
-  queryAssignedElements({ selector: "sd-6-5-2-icon" })
+  queryAssignedElements({ selector: "sd-6-7-0-icon" })
 ], SdButton.prototype, "_iconsInDefaultSlot", 2);
 __decorateClass([
   state()
@@ -309,7 +309,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdButton.prototype, "handleDisabledChange", 1);
 SdButton = __decorateClass([
-  customElement("sd-6-5-2-button")
+  customElement("sd-6-7-0-button")
 ], SdButton);
 export {