npm - @solid-design-system/components - Versions diffs - 6.21.2 → 6.22.0 - Mend

@solid-design-system/components 6.21.2 → 6.22.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 (635) hide show

package/dist/chunks/{chunk.ZOJIEPWP.js → chunk.2PFOTMKD.js} RENAMED Viewed

@@ -11,7 +11,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.C5M5Z6EY.js";
+} from "./chunk.H53WQBDK.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.DYR6RQ4I.js → chunk.2XO44VKK.js} RENAMED Viewed

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.C5M5Z6EY.js";
+} from "./chunk.H53WQBDK.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.234WMPXN.js → chunk.3MUWC7ZQ.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.C5M5Z6EY.js";
+} from "./chunk.H53WQBDK.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.X3SO46EU.js → chunk.3NFW33UT.js} RENAMED Viewed

@@ -18,7 +18,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.C5M5Z6EY.js";
+} from "./chunk.H53WQBDK.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.XJDIF3TO.js → chunk.3P3ZLPSI.js} RENAMED Viewed

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.C5M5Z6EY.js";
+} from "./chunk.H53WQBDK.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.UCHOLQ5K.js → chunk.4CYDINDB.js} RENAMED Viewed

@@ -30,7 +30,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.C5M5Z6EY.js";
+} from "./chunk.H53WQBDK.js";
 import {
   animateTo,
   stopAnimations

package/dist/chunks/{chunk.VNBBYBKG.js → chunk.5NTF57TJ.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.C5M5Z6EY.js";
+} from "./chunk.H53WQBDK.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.PBIXMTMH.js → chunk.6XTGETVW.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.C5M5Z6EY.js";
+} from "./chunk.H53WQBDK.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.3XB3MDZA.js → chunk.7AGLFNJK.js} RENAMED Viewed

@@ -1,13 +1,13 @@
 import {
   SdAccordion
-} from "./chunk.JTLSKGYA.js";
+} from "./chunk.UI7JLJDL.js";
 import {
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
 import {
   SolidElement,
   customElement
-} from "./chunk.C5M5Z6EY.js";
+} from "./chunk.H53WQBDK.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.AQVFMVTN.js → chunk.7BSLFKU5.js} RENAMED Viewed

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.C5M5Z6EY.js";
+} from "./chunk.H53WQBDK.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -27,6 +27,7 @@ var SdNavigationItem = class extends SolidElement {
     this.size = "md";
     this.current = false;
     this.disabled = false;
+    this.stacked = false;
     this.chevron = false;
     this.relaxed = false;
     this.divider = false;
@@ -58,6 +59,9 @@ var SdNavigationItem = class extends SolidElement {
       return false;
     });
   }
+  get isStackedHorizontal() {
+    return !this.vertical && this.stacked;
+  }
   handleClickButton(event) {
     if (this.disabled) {
       event.preventDefault();
@@ -122,28 +126,38 @@ var SdNavigationItem = class extends SolidElement {
       description: this.hasSlotController.test("description"),
       children: this.hasSlotController.test("children")
     };
-    const horizontalPadding = this.vertical ? "py-3" : "py-2";
+    const horizontalPadding = this.vertical ? "py-3" : this.isStackedHorizontal ? "pt-1 pb-1" : "py-2";
     const root = html`<${tag} part="base" class="${cx(
       "flex items-center cursor-pointer relative focus-visible:focus-outline group hover:bg-neutral-200 transition-colors duration-fast ease-in-out min-h-[48px] navigable-border-radius",
-      { md: "navigable-font-size", lg: "text-lg", sm: "text-[14px]" }[this.size],
+      this.isStackedHorizontal ? "text-xs leading-4.5" : { md: "navigable-font-size", lg: "text-lg", sm: "text-[14px]" }[this.size],
       this.disabled ? "text-neutral-500 pointer-events-none" : "sd-navigation-item-color-text",
-      this.current ? "font-bold sd-navigation-item--current-color-text" : "choice-control-font-weight",
+      this.current && !this.disabled && "sd-navigation-item--current-color-text",
+      this.current && !this.isStackedHorizontal && "font-bold",
+      !this.current && !this.isStackedHorizontal && "choice-control-font-weight",
       !isAccordion && "w-full",
       this.divider && this.vertical && "mt-0.25",
-      !this.vertical && "inline-flex items-center",
+      !this.vertical && (this.isStackedHorizontal ? "inline-flex flex-col items-center justify-center text-center rounded-full wrap" : "inline-flex items-center"),
       !this.separated && "hover:bg-neutral-200 group transition-colors duration-fast ease-in-out min-h-[48px]",
-      isIconOnly ? "justify-center aspect-square p-3" : "px-4"
+      isIconOnly ? "justify-center aspect-square p-3" : this.isStackedHorizontal ? "px-8" : "px-4"
     )}" aria-current="${ifDefined(this.current ? "page" : void 0)}" aria-disabled="${this.disabled}" aria-labelledby="content" aria-describedby="description" ?disabled="${ifDefined(isButton ? this.disabled : void 0)}" 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)}" tabindex="${this.disabled ? "-1" : "0"}" @click="${this.separated ? void 0 : isAccordion ? this.handleClickSummary : isButton ? this.handleClickButton : void 0}"><div part="current-indicator" class="${cx(
-      "absolute bg-accent left-0 pointer-events-none navigable__current-indicator-border-radius",
-      this.vertical ? "navigable__current-indicator-width h-[calc(100%-16px)] top-2 group-hover:h-full group-hover:top-0" : "navigable__current-indicator-height w-[calc(100%-16px)] bottom-0 left-2 group-hover:w-full group-hover:left-0 transition-all",
+      "absolute bg-accent pointer-events-none navigable__current-indicator-border-radius",
+      this.vertical ? "navigable__current-indicator-width h-[calc(100%-16px)] top-2 left-0 group-hover:h-full group-hover:top-0" : this.isStackedHorizontal ? "h-[2px] left-6 right-6 bottom-0" : "navigable__current-indicator-height w-[calc(100%-16px)] left-2 bottom-0 group-hover:w-full group-hover:left-0 transition-all",
       this.disabled && "bg-neutral-500"
-    )}"></div><div class="inline-flex flex-col justify-center gap-1 w-full h-full"><span part="content-area" class="${cx(
+    )}"></div><div class="${cx(
+      "inline-flex justify-center gap-1 w-full h-full",
+      this.isStackedHorizontal ? "flex-col items-center" : "flex-col"
+    )}"><span part="content-area" class="${cx(
       "relative inline-flex justify-between items-center",
       isAccordion ? "grow" : "w-full",
+      this.isStackedHorizontal && "justify-center",
       slots["description"] && "pt-3",
       !slots["description"] && !this.separated && horizontalPadding,
       this.calculatePaddingX
-    )}">${this.divider && this.vertical ? html`<sd-divider part="divider" class="${cx("w-full transition-all absolute -top-0.25 left-0", this.calculatePaddingX)}"></sd-divider>` : ""} <span id="content" part="content-container" class="inline-flex items-center flex-auto"><slot part="content" class="inline-flex text-start"></slot></span>${this.chevron || slots["children"] && this.vertical && !this.separated ? html`<sd-icon name="chevron-down" part="chevron" library="_internal" color="currentColor" class="${cx(
+    )}">${this.divider && this.vertical ? html`<sd-divider part="divider" class="${cx("w-full transition-all absolute -top-0.25 left-0", this.calculatePaddingX)}"></sd-divider>` : ""} <span id="content" part="content-container" class="${cx(
+      this.vertical ? "inline-flex flex-auto items-center gap-2" : this.isStackedHorizontal ? "inline-flex items-center text-center" : "inline-flex flex-auto flex-col items-center justify-center gap-1 text-center"
+    )}"><slot part="content" class="${cx(
+      this.vertical ? "inline-flex items-center gap-2" : "inline-flex flex-col items-center justify-center gap-1 text-center"
+    )}"></slot></span>${this.chevron || slots["children"] && this.vertical && !this.separated ? html`<sd-icon name="chevron-down" part="chevron" library="_internal" color="currentColor" class="${cx(
       "h-6 w-6 ml-2 transition-all",
       isAccordion ? this.open ? "rotate-180" : "rotate-0" : "rotate-[270deg]"
     )}"></sd-icon>` : ""} </span>${slots["description"] && this.vertical ? html`<slot id="description" name="description" part="description" class="${cx(
@@ -169,7 +183,7 @@ var SdNavigationItem = class extends SolidElement {
 SdNavigationItem.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
-:host{position:relative;box-sizing:border-box;display:inline-block}:host([vertical]){display:block}.sd-navigation-item--current-color-text{color:rgb(var(--sd-navigation-item--current-color-text,var(--sd-navigation-item-color-text)))}details summary::-webkit-details-marker{display:none}[part=current-indicator]{--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x) var(--tw-scale-y);opacity:var(--sd-opacity-0);--tw-duration:var(--sd-duration-fast, 150ms);transition-duration:var(--sd-duration-fast,150ms);transition:width var(--sd-duration-fast) ease-in-out,height var(--sd-duration-fast) ease-in-out,left var(--sd-duration-fast) ease-in-out,top var(--sd-duration-fast) ease-in-out,opacity var(--sd-duration-fast) ease-in-out,transform var(--sd-duration-fast) ease-in-out var(--sd-duration-fast)}:host([current]) [part=current-indicator]{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y);opacity:var(--sd-opacity-100);transition:width var(--sd-duration-fast) ease-in-out,height var(--sd-duration-fast) ease-in-out,left var(--sd-duration-fast) ease-in-out,top var(--sd-duration-fast) ease-in-out,transform var(--sd-duration-fast) ease-in-out}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-duration{syntax:"*";inherits:false}`
+:host{position:relative;box-sizing:border-box;display:inline-block}:host([vertical]){display:block}:host([stacked]:not([vertical])) ::slotted(sd-icon){height:var(--sd-spacing-6);width:var(--sd-spacing-6)}.sd-navigation-item--current-color-text{color:rgb(var(--sd-navigation-item--current-color-text,var(--sd-navigation-item-color-text)))}details summary::-webkit-details-marker{display:none}[part=current-indicator]{--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x) var(--tw-scale-y);opacity:var(--sd-opacity-0);--tw-duration:var(--sd-duration-fast, 150ms);transition-duration:var(--sd-duration-fast,150ms);transition:width var(--sd-duration-fast) ease-in-out,height var(--sd-duration-fast) ease-in-out,left var(--sd-duration-fast) ease-in-out,top var(--sd-duration-fast) ease-in-out,opacity var(--sd-duration-fast) ease-in-out,transform var(--sd-duration-fast) ease-in-out var(--sd-duration-fast)}:host([current]) [part=current-indicator]{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y);opacity:var(--sd-opacity-100);transition:width var(--sd-duration-fast) ease-in-out,height var(--sd-duration-fast) ease-in-out,left var(--sd-duration-fast) ease-in-out,top var(--sd-duration-fast) ease-in-out,transform var(--sd-duration-fast) ease-in-out}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-duration{syntax:"*";inherits:false}`
 ];
 __decorateClass([
   query('[part="base"]')
@@ -198,6 +212,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdNavigationItem.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdNavigationItem.prototype, "stacked", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdNavigationItem.prototype, "chevron", 2);

package/dist/chunks/{chunk.PVMZQVCM.js → chunk.7BT4WAQS.js} RENAMED Viewed

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.C5M5Z6EY.js";
+} from "./chunk.H53WQBDK.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.LQ73NDCS.js → chunk.AGSJ3MWY.js} RENAMED Viewed

@@ -12,7 +12,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.C5M5Z6EY.js";
+} from "./chunk.H53WQBDK.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.BOLOX4WN.js → chunk.AJ6IUEXD.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.C5M5Z6EY.js";
+} from "./chunk.H53WQBDK.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.S4HQL24U.js → chunk.AQ5RLVDO.js} RENAMED Viewed

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.C5M5Z6EY.js";
+} from "./chunk.H53WQBDK.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.GH6RJCYI.js → chunk.B4TM2WST.js} RENAMED Viewed

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.C5M5Z6EY.js";
+} from "./chunk.H53WQBDK.js";
 import {
   __decorateClass,
   __spreadValues

package/dist/chunks/{chunk.BDRCNAP2.js → chunk.BR5PPGBX.js} RENAMED Viewed

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.C5M5Z6EY.js";
+} from "./chunk.H53WQBDK.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.4GT63TFU.js → chunk.BS2ZPKOG.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.C5M5Z6EY.js";
+} from "./chunk.H53WQBDK.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.5BYGGDHP.js → chunk.C7RAFK2U.js} RENAMED Viewed

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.C5M5Z6EY.js";
+} from "./chunk.H53WQBDK.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.2IGM5O3Z.js → chunk.CMHJNHR6.js} RENAMED Viewed

@@ -35,7 +35,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.C5M5Z6EY.js";
+} from "./chunk.H53WQBDK.js";
 import {
   animateTo,
   stopAnimations

package/dist/chunks/{chunk.XLMNB54R.js → chunk.D2XKPNOP.js} RENAMED Viewed

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.C5M5Z6EY.js";
+} from "./chunk.H53WQBDK.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.CGWCE53G.js → chunk.DG6HQUYC.js} RENAMED Viewed

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.C5M5Z6EY.js";
+} from "./chunk.H53WQBDK.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.LXEDTKMG.js → chunk.DYG4FWRG.js} RENAMED Viewed

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.C5M5Z6EY.js";
+} from "./chunk.H53WQBDK.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.3JPUXY3E.js → chunk.EDHEUF6G.js} RENAMED Viewed

@@ -26,7 +26,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.C5M5Z6EY.js";
+} from "./chunk.H53WQBDK.js";
 import {
   animateTo,
   stopAnimations

package/dist/chunks/{chunk.WUVJOWM6.js → chunk.EEEIIJMB.js} RENAMED Viewed

@@ -27,7 +27,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.C5M5Z6EY.js";
+} from "./chunk.H53WQBDK.js";
 import {
   animateTo,
   stopAnimations

package/dist/chunks/{chunk.D2M6PTUJ.js → chunk.EXZ6VFXN.js} RENAMED Viewed

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.C5M5Z6EY.js";
+} from "./chunk.H53WQBDK.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.B747IT2V.js → chunk.FRLOS6P7.js} RENAMED Viewed

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.C5M5Z6EY.js";
+} from "./chunk.H53WQBDK.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.LS547AKE.js → chunk.G5R47M2B.js} RENAMED Viewed

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.C5M5Z6EY.js";
+} from "./chunk.H53WQBDK.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.ZOE6NEFW.js → chunk.GFHNKXRG.js} RENAMED Viewed

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.C5M5Z6EY.js";
+} from "./chunk.H53WQBDK.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.PCXIG7RW.js → chunk.H3SVUQP3.js} RENAMED Viewed

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.C5M5Z6EY.js";
+} from "./chunk.H53WQBDK.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";