@solid-design-system/components 4.6.0 → 4.6.2

package/dist-versioned/chunks/{chunk.64ZFR4OK.js → chunk.QI3HLIGL.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.2LMWBUBT.js";
 import {
   SdCarouselItem
-} from "./chunk.64BWZ3LX.js";
+} from "./chunk.G22VBGDU.js";
 import {
   prefersReducedMotion
 } from "./chunk.EY4JPJJQ.js";
@@ -19,7 +19,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -56,7 +56,7 @@ var SdCarousel = class extends SolidElement {
     this.pausedAutoplay = false;
     this.autoplayController = new AutoplayController(this, () => this.next());
     this.scrollController = new ScrollController(this);
-    this.slides = this.getElementsByTagName("sd-4-6-0-carousel-item");
+    this.slides = this.getElementsByTagName("sd-4-6-2-carousel-item");
     // determines which slide is displayed
     // A map containing the state of all the slides
     this.intersectionObserverEntries = /* @__PURE__ */ new Map();
@@ -370,7 +370,7 @@ var SdCarousel = class extends SolidElement {
     )}" aria-label="${this.localize.term("previousSlide")}" aria-controls="scroll-container" aria-disabled="${prevEnabled ? "false" : "true"}" @click="${prevEnabled ? (e) => {
       this.previous();
       this.unblockAutoplay(e, this.previousButton);
-    } : null}"><slot name="previous-icon"><sd-4-6-0-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${isLtr ? "chevron-down" : "chevron-up"}"></sd-4-6-0-icon></slot></button> ${this.variant === "dot" ? html`<div part="pagination-dot" role="tablist" class="${cx("carousel__pagination dot flex wrap items-center gap-2")}" aria-controls="scroll-container">${map(range(pagesCount), (index) => {
+    } : null}"><slot name="previous-icon"><sd-4-6-2-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${isLtr ? "chevron-down" : "chevron-up"}"></sd-4-6-2-icon></slot></button> ${this.variant === "dot" ? html`<div part="pagination-dot" role="tablist" class="${cx("carousel__pagination dot flex wrap items-center gap-2")}" aria-controls="scroll-container">${map(range(pagesCount), (index) => {
       const isActive = index + 1 === currentPage;
       return html`<button part="pagination-item ${isActive ? "pagination-item--active" : ""}" class="${cx(
         "carousel__pagination-item",
@@ -393,7 +393,7 @@ var SdCarousel = class extends SolidElement {
     )}" aria-label="${this.localize.term("nextSlide")}" aria-controls="scroll-container" aria-disabled="${nextEnabled ? "false" : "true"}" @click="${nextEnabled ? (e) => {
       this.next();
       this.unblockAutoplay(e, this.nextButton);
-    } : null}"><slot name="next-icon"><sd-4-6-0-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${isLtr ? "chevron-up" : "chevron-down"}"></sd-4-6-0-icon></slot></button></div><button class="${cx(
+    } : null}"><slot name="next-icon"><sd-4-6-2-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${isLtr ? "chevron-up" : "chevron-down"}"></sd-4-6-2-icon></slot></button></div><button class="${cx(
       "ml-6 !rounded-sm",
       "!absolute !right-0 sd-interactive",
       this.inverted ? "sd-interactive--inverted" : "sd-interactive--reset",
@@ -403,12 +403,12 @@ var SdCarousel = class extends SolidElement {
       if (e.detail) {
         this.autoplayControls.blur();
       }
-    }}"><slot name="autoplay-start" class="${cx(!this.pausedAutoplay ? "hidden" : "")}"><sd-4-6-0-icon class="h-6 w-6 grid place-items-center" library="system" name="start"></sd-4-6-0-icon></slot><slot name="autoplay-pause" class="${cx(this.pausedAutoplay ? "hidden" : "")}"><sd-4-6-0-icon class="h-6 w-6 grid place-items-center" library="system" name="pause"></sd-4-6-0-icon></slot></button></div></div>`;
+    }}"><slot name="autoplay-start" class="${cx(!this.pausedAutoplay ? "hidden" : "")}"><sd-4-6-2-icon class="h-6 w-6 grid place-items-center" library="system" name="start"></sd-4-6-2-icon></slot><slot name="autoplay-pause" class="${cx(this.pausedAutoplay ? "hidden" : "")}"><sd-4-6-2-icon class="h-6 w-6 grid place-items-center" library="system" name="pause"></sd-4-6-2-icon></slot></button></div></div>`;
   }
 };
 SdCarousel.styles = [
   ...SolidElement.styles,
-  css`:host{--slide-gap:var(--sl-spacing-medium,1rem);--scroll-hint:0px;display:flex}.carousel{grid-template-areas:". slides ." ". pagination ."}.carousel__pagination{grid-area:pagination}.carousel__slides{grid-area:slides;scrollbar-width:none;--slide-size:calc((100% - (var(--slides-per-page) - 1)*var(--slide-gap))/var(--slides-per-page));-moz-column-gap:var(--slide-gap);column-gap:var(--slide-gap);grid-auto-columns:var(--slide-size);padding-inline:var(--scroll-hint);scroll-padding-inline:var(--scroll-hint)}.carousel__slides::-webkit-scrollbar{display:none}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__navigation{grid-area:navigation}sd-4-6-0-button::part(label){align-items:center;display:flex;flex:1 1 auto;pointer-events:none}`
+  css`:host{--slide-gap:var(--sl-spacing-medium,1rem);--scroll-hint:0px;display:flex}.carousel{grid-template-areas:". slides ." ". pagination ."}.carousel__pagination{grid-area:pagination}.carousel__slides{grid-area:slides;scrollbar-width:none;--slide-size:calc((100% - (var(--slides-per-page) - 1)*var(--slide-gap))/var(--slides-per-page));-moz-column-gap:var(--slide-gap);column-gap:var(--slide-gap);grid-auto-columns:var(--slide-size);padding-inline:var(--scroll-hint);scroll-padding-inline:var(--scroll-hint)}.carousel__slides::-webkit-scrollbar{display:none}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__navigation{grid-area:navigation}sd-4-6-2-button::part(label){align-items:center;display:flex;flex:1 1 auto;pointer-events:none}`
 ];
 __decorateClass([
   query('[part~="autoplay-controls"]')
@@ -475,7 +475,7 @@ __decorateClass([
   watch("autoplay")
 ], SdCarousel.prototype, "handleAutoplayChange", 1);
 SdCarousel = __decorateClass([
-  customElement("sd-4-6-0-carousel")
+  customElement("sd-4-6-2-carousel")
 ], SdCarousel);
 
 export {

package/dist-versioned/chunks/{chunk.2IOIJOEY.js → chunk.QTKOFCJ2.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -17,19 +17,19 @@ var SdButtonGroup = class extends SolidElement {
   }
   handleFocus(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.add("sd-4-6-0-button-group__button--focus");
+    button == null ? void 0 : button.classList.add("sd-4-6-2-button-group__button--focus");
   }
   handleBlur(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.remove("sd-4-6-0-button-group__button--focus");
+    button == null ? void 0 : button.classList.remove("sd-4-6-2-button-group__button--focus");
   }
   handleMouseOver(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.add("sd-4-6-0-button-group__button--hover");
+    button == null ? void 0 : button.classList.add("sd-4-6-2-button-group__button--hover");
   }
   handleMouseOut(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.remove("sd-4-6-0-button-group__button--hover");
+    button == null ? void 0 : button.classList.remove("sd-4-6-2-button-group__button--hover");
   }
   handleSlotChange() {
     const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })];
@@ -37,11 +37,11 @@ var SdButtonGroup = class extends SolidElement {
       const index = slottedElements.indexOf(el);
       const button = findButton(el);
       if (button !== null) {
-        button.classList.add("sd-4-6-0-button-group__button");
-        button.classList.toggle("sd-4-6-0-button-group__button--first", index === 0);
-        button.classList.toggle("sd-4-6-0-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
-        button.classList.toggle("sd-4-6-0-button-group__button--last", index === slottedElements.length - 1);
-        button.classList.toggle("sd-4-6-0-button-group__button--radio", button.tagName.toLowerCase() === "sd-4-6-0-radio-button");
+        button.classList.add("sd-4-6-2-button-group__button");
+        button.classList.toggle("sd-4-6-2-button-group__button--first", index === 0);
+        button.classList.toggle("sd-4-6-2-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
+        button.classList.toggle("sd-4-6-2-button-group__button--last", index === slottedElements.length - 1);
+        button.classList.toggle("sd-4-6-2-button-group__button--radio", button.tagName.toLowerCase() === "sd-4-6-2-radio-button");
       }
     });
   }
@@ -63,11 +63,11 @@ __decorateClass([
   property({ type: String, reflect: true })
 ], SdButtonGroup.prototype, "label", 2);
 SdButtonGroup = __decorateClass([
-  customElement("sd-4-6-0-button-group")
+  customElement("sd-4-6-2-button-group")
 ], SdButtonGroup);
 function findButton(el) {
   var _a;
-  const selector = "sd-4-6-0-button, sd-4-6-0-radio-button";
+  const selector = "sd-4-6-2-button, sd-4-6-2-radio-button";
   return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
 }
 

package/dist-versioned/chunks/{chunk.ZCST44QS.js → chunk.RHXSPE3W.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -103,7 +103,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-4-6-0-icon id="default-play-icon" library="system" name="start"></sd-4-6-0-icon></slot></div></button> ${this.hasSlotController.test("poster") ? html`<slot name="poster" role="presentation" @transitionend="${this.hidePoster}"></slot>` : null}<slot></slot></div>`;
+    )}"><slot name="play-icon" part="play-icon" class="${cx(this.isBelowBreakpoint ? "text-[2rem]" : "text-[4rem]")}"><sd-4-6-2-icon id="default-play-icon" library="system" name="start"></sd-4-6-2-icon></slot></div></button> ${this.hasSlotController.test("poster") ? html`<slot name="poster" role="presentation" @transitionend="${this.hidePoster}"></slot>` : null}<slot></slot></div>`;
   }
 };
 SdVideo.styles = [
@@ -120,7 +120,7 @@ __decorateClass([
   property({ type: Boolean })
 ], SdVideo.prototype, "isBelowBreakpoint", 2);
 SdVideo = __decorateClass([
-  customElement("sd-4-6-0-video")
+  customElement("sd-4-6-2-video")
 ], SdVideo);
 
 export {

package/dist-versioned/chunks/{chunk.5V36G6NT.js → chunk.RM6FOML7.js}

@@ -1,6 +1,6 @@
 import {
   SdDivider
-} from "./chunk.OL2UOEVU.js";
+} from "./chunk.J46EMIEI.js";
 import {
   watch
 } from "./chunk.X2OQMWGY.js";
@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -28,11 +28,11 @@ var SdOptgroup = class extends SolidElement {
     this.label = "";
   }
   /**
-   * Syncs the disabled prop for all slotted sd-4-6-0-options when it is triggered
+   * Syncs the disabled prop for all slotted sd-4-6-2-options when it is triggered
    */
   handleDisableOptions() {
     const { disabled } = this;
-    this.defaultSlot.assignedElements().filter((opt) => opt.tagName.toLowerCase() === "sd-4-6-0-option").forEach((opt) => {
+    this.defaultSlot.assignedElements().filter((opt) => opt.tagName.toLowerCase() === "sd-4-6-2-option").forEach((opt) => {
       opt.disabled = disabled;
     });
   }
@@ -41,11 +41,11 @@ var SdOptgroup = class extends SolidElement {
   }
   render() {
     const { disabled } = this;
-    return html`<div role="${disabled ? "presentation" : "group"}" class="${cx(this.disabled ? "text-neutral-500" : "")}" part="base" aria-labelledby="group-label"><sd-4-6-0-divider id="divider" class="pt-2 pb-4" part="divider"></sd-4-6-0-divider><div part="label-container" class="${cx(this.disabled ? "text-neutral-500" : "text-black")} px-4 font-bold text-left" role="presentation" id="group-label"><slot name="label"><span>${this.label}</span></slot></div><div role="listbox" part="options" aria-label="${this.localize.term("optionGroup")}"><slot @slotchange="${this.handleDisableOptions}"></slot></div></div>`;
+    return html`<div role="${disabled ? "presentation" : "group"}" class="${cx(this.disabled ? "text-neutral-500" : "")}" part="base" aria-labelledby="group-label"><sd-4-6-2-divider id="divider" class="pt-2 pb-4" part="divider"></sd-4-6-2-divider><div part="label-container" class="${cx(this.disabled ? "text-neutral-500" : "text-black")} px-4 font-bold text-left" role="presentation" id="group-label"><slot name="label"><span>${this.label}</span></slot></div><div role="listbox" part="options" aria-label="${this.localize.term("optionGroup")}"><slot @slotchange="${this.handleDisableOptions}"></slot></div></div>`;
   }
 };
 SdOptgroup.dependencies = {
-  "sd-4-6-0-divider": SdDivider
+  "sd-4-6-2-divider": SdDivider
 };
 SdOptgroup.styles = [
   ...SolidElement.styles,
@@ -64,7 +64,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdOptgroup.prototype, "handleDisabledChange", 1);
 SdOptgroup = __decorateClass([
-  customElement("sd-4-6-0-optgroup")
+  customElement("sd-4-6-2-optgroup")
 ], SdOptgroup);
 
 export {

package/dist-versioned/chunks/{chunk.E34LORFJ.js → chunk.RQ7H3KYN.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -71,7 +71,7 @@ var SdRadio = class extends SolidElement {
   }
   render() {
     return html`<span part="base" class="${cx(
-      "sd-4-6-0-radio group inline-flex items-start items-center text-base leading-normal text-black cursor-pointer align-middle",
+      "sd-4-6-2-radio group inline-flex items-start items-center text-base leading-normal text-black cursor-pointer align-middle",
       (this.disabled || this.visuallyDisabled) && "hover:cursor-not-allowed",
       {
         /* sizes, fonts */
@@ -126,7 +126,7 @@ __decorateClass([
   watch(["disabled", "visually-disabled"], { waitUntilFirstUpdate: true })
 ], SdRadio.prototype, "handleDisabledChange", 1);
 SdRadio = __decorateClass([
-  customElement("sd-4-6-0-radio")
+  customElement("sd-4-6-2-radio")
 ], SdRadio);
 
 export {

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

@@ -1,7 +1,7 @@
 // src/components/combobox/utils.ts
 var getAssignedElementsForSlot = (slot) => Array.from(slot.assignedElements({ flatten: true }));
-var getOptionOrNestedOptions = (item) => item.tagName.toLocaleLowerCase() === "sd-4-6-0-option" ? item : Array.from(item.querySelectorAll(":scope > sd-4-6-0-option"));
-var isOptgroup = (item) => item.tagName.toLocaleLowerCase() === "sd-4-6-0-optgroup";
+var getOptionOrNestedOptions = (item) => item.tagName.toLocaleLowerCase() === "sd-4-6-2-option" ? item : Array.from(item.querySelectorAll(":scope > sd-4-6-2-option"));
+var isOptgroup = (item) => item.tagName.toLocaleLowerCase() === "sd-4-6-2-optgroup";
 var getAllOptions = (items) => items.map(getOptionOrNestedOptions);
 var filterOnlyOptgroups = (items) => items.filter(isOptgroup);
 var normalizeString = (str) => str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();

package/dist-versioned/chunks/{chunk.JFU6G72P.js → chunk.UQGHMQG5.js}

@@ -28,7 +28,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -209,7 +209,7 @@ var SdDrawer = class extends SolidElement {
         end: "top-0 end-0 bottom-auto start-auto w-[--width] h-full",
         start: "top-0 end-auto bottom-auto start-0 w-[--width] h-full"
       }[this.placement]
-    )}" role="dialog" aria-modal="true" aria-labelledby="label" tabindex="0"><p class="sr-only" id="label">${this.label}</p>${!this.noHeader ? html`<header part="header" class="flex justify-between py-2 px-4 items-center flex-shrink-0" style="min-height:56px"><div part="title"><slot name="header" part="title" class="flex-auto text-xl m-0" id="title"></slot></div><div class="shrink-0 flex flex-wrap justify-end gap-1 ml-4 absolute top-2 right-2"><sd-4-6-0-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-4-6-0-icon label="${this.localize.term("close")}" name="close" library="system"></sd-4-6-0-icon></sd-4-6-0-button></div></header>` : html`<sd-4-6-0-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}" class="absolute top-2 right-2"><sd-4-6-0-icon label="${this.localize.term("close")}" name="close" library="system"></sd-4-6-0-icon></sd-4-6-0-button>`}<div part="body" class="flex-auto block px-4" tabindex="0"><slot></slot></div><footer part="footer" class="${cx(this.hasSlotController.test("footer") ? "text-left p-4" : "hidden")}"><slot name="footer"></slot></footer></div></section>`;
+    )}" role="dialog" aria-modal="true" aria-labelledby="label" tabindex="0"><p class="sr-only" id="label">${this.label}</p>${!this.noHeader ? html`<header part="header" class="flex justify-between py-2 px-4 items-center flex-shrink-0" style="min-height:56px"><div part="title"><slot name="header" part="title" class="flex-auto text-xl m-0" id="title"></slot></div><div class="shrink-0 flex flex-wrap justify-end gap-1 ml-4 absolute top-2 right-2"><sd-4-6-2-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-4-6-2-icon label="${this.localize.term("close")}" name="close" library="system"></sd-4-6-2-icon></sd-4-6-2-button></div></header>` : html`<sd-4-6-2-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}" class="absolute top-2 right-2"><sd-4-6-2-icon label="${this.localize.term("close")}" name="close" library="system"></sd-4-6-2-icon></sd-4-6-2-button>`}<div part="body" class="flex-auto block px-4" tabindex="0"><slot></slot></div><footer part="footer" class="${cx(this.hasSlotController.test("footer") ? "text-left p-4" : "hidden")}"><slot name="footer"></slot></footer></div></section>`;
   }
 };
 SdDrawer.styles = [
@@ -250,7 +250,7 @@ __decorateClass([
   watch("contained", { waitUntilFirstUpdate: true })
 ], SdDrawer.prototype, "handleNoModalChange", 1);
 SdDrawer = __decorateClass([
-  customElement("sd-4-6-0-drawer")
+  customElement("sd-4-6-2-drawer")
 ], SdDrawer);
 setDefaultAnimation("drawer.showStart", {
   keyframes: [

package/dist-versioned/chunks/{chunk.DPXI2Q7Y.js → chunk.VFE45I2T.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -91,7 +91,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-4-6-0-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-check"></sd-4-6-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>`;
+    )}">${this.selected ? html`<sd-4-6-2-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-check"></sd-4-6-2-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>`;
   }
 };
 /**
@@ -135,7 +135,7 @@ __decorateClass([
   watch("value")
 ], SdOption.prototype, "handleValueChange", 1);
 SdOption = __decorateClass([
-  customElement("sd-4-6-0-option")
+  customElement("sd-4-6-2-option")
 ], SdOption);
 
 export {

package/dist-versioned/chunks/{chunk.ACEQGXCU.js → chunk.W4ODHTDG.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.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-0-icon class="mr-2 text-xl" library="system" name="chevron-up"></sd-4-6-0-icon>${this.localize.term("showLess")}</slot>` : html`<slot name="toggle-closed"><sd-4-6-0-icon class="mr-2 text-xl" library="system" name="chevron-down"></sd-4-6-0-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-6-2-icon class="mr-2 text-xl" library="system" name="chevron-up"></sd-4-6-2-icon>${this.localize.term("showLess")}</slot>` : html`<slot name="toggle-closed"><sd-4-6-2-icon class="mr-2 text-xl" library="system" name="chevron-down"></sd-4-6-2-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-0-expandable")
+  customElement("sd-4-6-2-expandable")
 ], SdExpandable);
 
 export {

package/dist-versioned/chunks/{chunk.UQ4F6T5U.js → chunk.W4P6W76T.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -25,19 +25,13 @@ var SdBadge = class extends SolidElement {
         blue: !this.inverted ? "text-white bg-primary-500 border-white" : "text-primary bg-primary-100 border-primary",
         green: !this.inverted ? "text-white bg-success border-white" : "text-white bg-success border-primary",
         red: !this.inverted ? "text-white bg-error border-white" : "text-white bg-error border-primary"
-      }[this.variant],
-      {
-        /* size and fonts*/
-        sm: "h-2 min-w-2",
-        md: "h-4 px-1 min-w-4",
-        lg: "h-5 min-w-5"
-      }[this.size]
+      }[this.variant]
     )}"><span id="content" part="content" class="${cx(this.size === "sm" && "sr-only")}"><slot></slot></span></span>`;
   }
 };
 SdBadge.styles = [
   ...SolidElement.styles,
-  css`:host{align-items:center;display:inline-flex;justify-content:center}:host([size=md]){font-size:.625rem}:host([size=lg]){font-size:.75rem}:host([size=lg])::part(base){padding-left:.313rem;padding-right:.313rem}`
+  css`:host{align-items:center;display:inline-flex;justify-content:center}:host([size=md]){font-size:.625rem;height:var(--sd-spacing-4,1rem);min-width:var(--sd-spacing-4,1rem)}:host([size=lg]){font-size:.75rem;height:var(--sd-spacing-5,1.25rem);min-width:var(--sd-spacing-5,1.25rem)}:host([size=sm])::part(base){height:var(--sd-spacing-2,.5rem);min-width:var(--sd-spacing-2,.5rem)}:host([size=md])::part(base){padding-left:var(--sd-spacing-1,.25rem);padding-right:var(--sd-spacing-1,.25rem)}:host([size=lg])::part(base){padding-left:.313rem;padding-right:.313rem}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
@@ -49,7 +43,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdBadge.prototype, "inverted", 2);
 SdBadge = __decorateClass([
-  customElement("sd-4-6-0-badge")
+  customElement("sd-4-6-2-badge")
 ], SdBadge);
 
 export {

package/dist-versioned/chunks/{chunk.SFKTVZHK.js → chunk.WECFZLMT.js}

@@ -24,7 +24,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -76,7 +76,7 @@ var SdDropdown = class extends SolidElement {
    * within the slotted trigger. This could be the slotted element itself, a child of the slotted element,
    * or an element within the slotted elements shadow root.
    *
-   * e.g. the accessible trigger of an <sd-4-6-0-button> is a <button> located inside its shadow root.
+   * e.g. the accessible trigger of an <sd-4-6-2-button> is a <button> located inside its shadow root.
    *
    * To determine this, we assume the first tabbable element in the trigger slot is the "accessible trigger."
    * */
@@ -87,11 +87,11 @@ var SdDropdown = class extends SolidElement {
     if (accessibleTrigger) {
       switch (accessibleTrigger.tagName.toLowerCase()) {
         // Solid buttons have to update the internal button so it's announced correctly by screen readers
-        case "sd-4-6-0-button":
-        case "sd-4-6-0-icon-button":
+        case "sd-4-6-2-button":
+        case "sd-4-6-2-icon-button":
           target = accessibleTrigger.button;
           break;
-        case "sd-4-6-0-navigation-item":
+        case "sd-4-6-2-navigation-item":
           target = accessibleTrigger.button;
           break;
         default:
@@ -236,7 +236,7 @@ var SdDropdown = class extends SolidElement {
   }
   addOpenListeners() {
     this.panel.addEventListener("sd-activate", this.handleMenuItemActivate);
-    this.panel.addEventListener("sd-4-6-0-select", this.handlePanelSelect);
+    this.panel.addEventListener("sd-4-6-2-select", this.handlePanelSelect);
     this.panel.addEventListener("keydown", this.handleKeyDown);
     document.addEventListener("keydown", this.handleDocumentKeyDown);
     document.addEventListener("mousedown", this.handleDocumentMouseDown);
@@ -244,7 +244,7 @@ var SdDropdown = class extends SolidElement {
   removeOpenListeners() {
     if (this.panel) {
       this.panel.removeEventListener("sd-activate", this.handleMenuItemActivate);
-      this.panel.removeEventListener("sd-4-6-0-select", this.handlePanelSelect);
+      this.panel.removeEventListener("sd-4-6-2-select", this.handlePanelSelect);
       this.panel.removeEventListener("keydown", this.handleKeyDown);
     }
     document.removeEventListener("keydown", this.handleDocumentKeyDown);
@@ -277,11 +277,11 @@ var SdDropdown = class extends SolidElement {
     }
   }
   render() {
-    return html`<sd-4-6-0-popup part="base" id="dropdown" placement="${this.placement}" distance="${this.rounded && this.distance < 1 ? 1 : this.distance}" skidding="${this.skidding}" strategy="${this.hoist ? "fixed" : "absolute"}" ?flip="${!this.noFlip}" shift auto-size="vertical" auto-size-padding="10" ?active="${this.open}"><slot name="trigger" slot="anchor" part="trigger" class="block" @click="${this.handleTriggerClick}" @keydown="${this.handleTriggerKeyDown}" @keyup="${this.handleTriggerKeyUp}" @slotchange="${this.handleTriggerSlotChange}"></slot><slot part="panel" class="${cx(
+    return html`<sd-4-6-2-popup part="base" id="dropdown" placement="${this.placement}" distance="${this.rounded && this.distance < 1 ? 1 : this.distance}" skidding="${this.skidding}" strategy="${this.hoist ? "fixed" : "absolute"}" ?flip="${!this.noFlip}" shift auto-size="vertical" auto-size-padding="10" ?active="${this.open}"><slot name="trigger" slot="anchor" part="trigger" class="block" @click="${this.handleTriggerClick}" @keydown="${this.handleTriggerKeyDown}" @keyup="${this.handleTriggerKeyUp}" @slotchange="${this.handleTriggerSlotChange}"></slot><slot part="panel" class="${cx(
       "shadow bg-white",
       this.open ? "block pointer-events-auto" : "pointer-events-none",
       this.rounded && "rounded-md"
-    )}" aria-hidden="${this.open ? "false" : "true"}" aria-labelledby="dropdown"></slot></sd-4-6-0-popup>`;
+    )}" aria-hidden="${this.open ? "false" : "true"}" aria-labelledby="dropdown"></slot></sd-4-6-2-popup>`;
   }
 };
 SdDropdown.styles = [
@@ -334,7 +334,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdDropdown.prototype, "handleOpenChange", 1);
 SdDropdown = __decorateClass([
-  customElement("sd-4-6-0-dropdown")
+  customElement("sd-4-6-2-dropdown")
 ], SdDropdown);
 setDefaultAnimation("dropdown.show", {
   keyframes: [

package/dist-versioned/chunks/{chunk.F4OMEZQP.js → chunk.WM45G2PF.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass,
   __spreadValues
@@ -378,7 +378,7 @@ var SdInput = class extends SolidElement {
       this.size === "sm" ? "h-6" : "h-8",
       textSize,
       this.visuallyDisabled && "cursor-not-allowed"
-    )}" type="${this.type === "password" && this.passwordVisible ? "text" : this.type}" title="${this.title}" name="${ifDefined(this.name)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" .value="${live(this.value)}" autocapitalize="${ifDefined(this.type === "password" ? "off" : this.autocapitalize)}" autocomplete="${ifDefined(this.type === "password" ? "off" : this.autocomplete)}" autocorrect="${ifDefined(this.type === "password" ? "off" : this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${this.spellcheck}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-disabled="${this.visuallyDisabled || this.disabled ? "true" : "false"}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-4-6-0-icon class="${cx("icon-fill-neutral-800", iconSize)}" library="system" name="closing-round"></sd-4-6-0-icon></slot></button>` : ""} ${this.passwordToggle && this.type === "password" ? html`<button aria-label="${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}" part="password-toggle-button" class="flex items-center" type="button" @click="${this.handlePasswordToggle}" tabindex="-1">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-4-6-0-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye"></sd-4-6-0-icon></slot>` : html`<slot name="hide-password-icon"><sd-4-6-0-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye-crossed-out"></sd-4-6-0-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-4-6-0-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="calendar"></sd-4-6-0-icon>` : ""} ${this.type === "time" ? html`<sd-4-6-0-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="clock"></sd-4-6-0-icon>` : ""} ${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handleSearchClick}"><sd-4-6-0-icon class="${cx(iconColor, iconSize)}" library="system" name="magnifying-glass" label="${this.localize.term("search")}"></sd-4-6-0-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-4-6-0-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="system" name="risk"></sd-4-6-0-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-4-6-0-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="system" name="status-check" part="valid-icon"></sd-4-6-0-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""} ${this.type === "number" && this.spinButtons ? html`<div part="stepper" class="flex items-center"><button part="decrement-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isDecrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepDown(), end: () => this.handleChange() })} tabindex="-1"><slot name="decrement-number-stepper"><sd-4-6-0-icon name="system/minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-4-6-0-icon></slot></button> <button part="increment-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isIncrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepUp(), end: () => this.handleChange() })} tabindex="-1"><slot name="increment-number-stepper"><sd-4-6-0-icon name="system/plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-4-6-0-icon></slot></button></div>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-2", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
+    )}" type="${this.type === "password" && this.passwordVisible ? "text" : this.type}" title="${this.title}" name="${ifDefined(this.name)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" .value="${live(this.value)}" autocapitalize="${ifDefined(this.type === "password" ? "off" : this.autocapitalize)}" autocomplete="${ifDefined(this.type === "password" ? "off" : this.autocomplete)}" autocorrect="${ifDefined(this.type === "password" ? "off" : this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${this.spellcheck}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-disabled="${this.visuallyDisabled || this.disabled ? "true" : "false"}" aria-invalid="${this.showInvalidStyle}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-4-6-2-icon class="${cx("icon-fill-neutral-800", iconSize)}" library="system" name="closing-round"></sd-4-6-2-icon></slot></button>` : ""} ${this.passwordToggle && this.type === "password" ? html`<button aria-label="${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}" part="password-toggle-button" class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handlePasswordToggle}">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-4-6-2-icon class="${cx(iconColor, iconSize)}" library="system" name="eye"></sd-4-6-2-icon></slot>` : html`<slot name="hide-password-icon"><sd-4-6-2-icon class="${cx(iconColor, iconSize)}" library="system" name="eye-crossed-out"></sd-4-6-2-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-4-6-2-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="calendar"></sd-4-6-2-icon>` : ""} ${this.type === "time" ? html`<sd-4-6-2-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="clock"></sd-4-6-2-icon>` : ""} ${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handleSearchClick}"><sd-4-6-2-icon class="${cx(iconColor, iconSize)}" library="system" name="magnifying-glass" label="${this.localize.term("search")}"></sd-4-6-2-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-4-6-2-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="system" name="risk"></sd-4-6-2-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-4-6-2-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="system" name="status-check" part="valid-icon"></sd-4-6-2-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""} ${this.type === "number" && this.spinButtons ? html`<div part="stepper" class="flex items-center"><button part="decrement-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isDecrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepDown(), end: () => this.handleChange() })} tabindex="-1"><slot name="decrement-number-stepper"><sd-4-6-2-icon name="system/minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-4-6-2-icon></slot></button> <button part="increment-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isIncrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepUp(), end: () => this.handleChange() })} tabindex="-1"><slot name="increment-number-stepper"><sd-4-6-2-icon name="system/plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-4-6-2-icon></slot></button></div>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-2", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 /**
@@ -386,7 +386,7 @@ var SdInput = class extends SolidElement {
  */
 SdInput.styles = [
   ...SolidElement.styles,
-  css`:host{box-sizing:border-box;display:inline-block;position:relative;text-align:left;width:100%}:host([vertical]){display:block}:host([required]) #label:after{content:" *"}:host([visually-disabled]) input{caret-color:transparent}details summary::-webkit-details-marker{display:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=time]::-webkit-calendar-picker-indicator{background:0 0}details summary::-webkit-details-marker,input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}.stepper-button[disabled] sd-4-6-0-icon{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}`
+  css`:host{box-sizing:border-box;display:inline-block;position:relative;text-align:left;width:100%}:host([vertical]){display:block}:host([required]) #label:after{content:" *"}:host([visually-disabled]) input{caret-color:transparent}details summary::-webkit-details-marker{display:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=time]::-webkit-calendar-picker-indicator{background:0 0}details summary::-webkit-details-marker,input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}.stepper-button[disabled] sd-4-6-2-icon{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}`
 ];
 __decorateClass([
   query("#input")
@@ -516,7 +516,7 @@ __decorateClass([
   watch("value", { waitUntilFirstUpdate: true })
 ], SdInput.prototype, "handleValueChange", 1);
 SdInput = __decorateClass([
-  customElement("sd-4-6-0-input")
+  customElement("sd-4-6-2-input")
 ], SdInput);
 
 export {