@solid-design-system/components 5.3.0 → 5.4.0

package/dist/solid-components.js

@@ -4,162 +4,162 @@ import {
 import "./chunks/chunk.HAL7R4WT.js";
 import {
   SdTabPanel
-} from "./chunks/chunk.KNE5BF6K.js";
+} from "./chunks/chunk.6JJ6VBYS.js";
 import {
   SdTeaser
-} from "./chunks/chunk.K2V25QNC.js";
+} from "./chunks/chunk.AH4JSEVL.js";
 import {
   SdTeaserMedia
-} from "./chunks/chunk.4MF2HV7B.js";
+} from "./chunks/chunk.EX6L6CQ3.js";
 import {
   SdTextarea
-} from "./chunks/chunk.XBQF6SYZ.js";
+} from "./chunks/chunk.ZLD7GEOS.js";
 import {
   SdTooltip
-} from "./chunks/chunk.ANABWMOU.js";
+} from "./chunks/chunk.L7EUFNUL.js";
 import {
   SdVideo
-} from "./chunks/chunk.TVCQ7G4C.js";
+} from "./chunks/chunk.VCDQPSR5.js";
 import {
   SdScrollable
-} from "./chunks/chunk.LUAKUNET.js";
+} from "./chunks/chunk.LA3LK5U7.js";
 import {
   SdSelect
-} from "./chunks/chunk.IKFOP6PV.js";
+} from "./chunks/chunk.XNNCGTSI.js";
 import {
   SdStep
-} from "./chunks/chunk.KMUQ4MOS.js";
+} from "./chunks/chunk.S5CIECBU.js";
 import {
   SdStepGroup
-} from "./chunks/chunk.WYETTGSI.js";
+} from "./chunks/chunk.YLAUIXEA.js";
 import {
   SdSwitch
-} from "./chunks/chunk.H4NA5LSX.js";
+} from "./chunks/chunk.XR4CBBMX.js";
 import {
   SdTab
-} from "./chunks/chunk.KJ7FHSEC.js";
+} from "./chunks/chunk.Y6OGZSS6.js";
 import {
   SdTabGroup
-} from "./chunks/chunk.XI2DU4KV.js";
+} from "./chunks/chunk.TR7F4J6K.js";
 import {
   SdNotification
-} from "./chunks/chunk.XG7W22LV.js";
+} from "./chunks/chunk.3OJHLEDR.js";
 import {
   SdOptgroup
-} from "./chunks/chunk.V7YMTZ3N.js";
+} from "./chunks/chunk.CV47NCMS.js";
 import {
   SdOption
-} from "./chunks/chunk.6EXG6JHO.js";
+} from "./chunks/chunk.RPLU56MF.js";
 import {
   SdQuickfact
-} from "./chunks/chunk.A6V2BWCM.js";
+} from "./chunks/chunk.TPMPCCRV.js";
 import {
   SdRadioButton
-} from "./chunks/chunk.2SR3K7I5.js";
+} from "./chunks/chunk.KLMMEDV3.js";
 import {
   SdRadioGroup
-} from "./chunks/chunk.JHAZCKUZ.js";
+} from "./chunks/chunk.XVF5EILY.js";
 import {
   SdRadio
-} from "./chunks/chunk.4UNV2E7R.js";
+} from "./chunks/chunk.KMM7NCFU.js";
 import {
   SdInclude
-} from "./chunks/chunk.XFAV2JD2.js";
+} from "./chunks/chunk.O5OO4ZYT.js";
 import {
   SdInput
-} from "./chunks/chunk.6HZMUK6D.js";
+} from "./chunks/chunk.JWS37SX3.js";
 import {
   SdLink
-} from "./chunks/chunk.O3BDNR75.js";
+} from "./chunks/chunk.5FFIE4YZ.js";
 import {
   SdMapMarker
-} from "./chunks/chunk.U3PCY4NW.js";
+} from "./chunks/chunk.TBUESXVZ.js";
 import {
   SdNavigationItem
-} from "./chunks/chunk.45UJZYWC.js";
+} from "./chunks/chunk.LIZZEBBC.js";
 import {
   SdDropdown
-} from "./chunks/chunk.4PGBJ2GY.js";
+} from "./chunks/chunk.4KY6NI4T.js";
 import {
   SdExpandable
-} from "./chunks/chunk.WO5BA2XB.js";
+} from "./chunks/chunk.7P374LCS.js";
 import {
   SdFlipcard
-} from "./chunks/chunk.4RXC63FH.js";
+} from "./chunks/chunk.AQ33SHN7.js";
 import {
   SdHeader
-} from "./chunks/chunk.6IEX7Z5F.js";
+} from "./chunks/chunk.VVDUCRRF.js";
 import {
   SdCheckbox
-} from "./chunks/chunk.LDMCWDHQ.js";
+} from "./chunks/chunk.4BOVS5IV.js";
 import {
   SdCheckboxGroup
-} from "./chunks/chunk.FGXRVZGB.js";
+} from "./chunks/chunk.PFIUB53L.js";
 import {
   SdCombobox
-} from "./chunks/chunk.F566CY7I.js";
+} from "./chunks/chunk.55WKP7T3.js";
 import {
   SdTag
-} from "./chunks/chunk.UT27ILJE.js";
+} from "./chunks/chunk.OSVHP3IT.js";
 import {
   SdPopup
-} from "./chunks/chunk.7JXNK4NJ.js";
+} from "./chunks/chunk.HO2HFXMJ.js";
 import "./chunks/chunk.GI7VDIWX.js";
 import "./chunks/chunk.WBJBQ4QI.js";
 import "./chunks/chunk.UIQBHPD3.js";
 import {
   SdDialog
-} from "./chunks/chunk.GJLYCNCY.js";
+} from "./chunks/chunk.F7CEWVTD.js";
 import {
   SdDivider
-} from "./chunks/chunk.ICXTSWJJ.js";
+} from "./chunks/chunk.PBPSZJYK.js";
 import {
   SdBadge
-} from "./chunks/chunk.FFSBCHSN.js";
+} from "./chunks/chunk.DNIODML7.js";
 import {
   SdBrandshape
-} from "./chunks/chunk.CT5ZKDT2.js";
-import "./chunks/chunk.LWG4NNSD.js";
+} from "./chunks/chunk.N5ISGLPU.js";
+import "./chunks/chunk.HTULDNAU.js";
 import {
   SdCarousel
-} from "./chunks/chunk.GBEYBTXR.js";
+} from "./chunks/chunk.2WN7YMGY.js";
 import "./chunks/chunk.F4VGSDIW.js";
 import "./chunks/chunk.FNYEXUNK.js";
 import "./chunks/chunk.NOWCQZBS.js";
 import {
   SdCarouselItem
-} from "./chunks/chunk.RWMU4UKX.js";
+} from "./chunks/chunk.MKGGWQBV.js";
 import {
   SdAccordionGroup
-} from "./chunks/chunk.QW7S2YBU.js";
+} from "./chunks/chunk.23SXULLQ.js";
 import {
   SdAccordion
-} from "./chunks/chunk.EFZENYQR.js";
+} from "./chunks/chunk.TQ4DIMUW.js";
 import {
   SdAnimation
-} from "./chunks/chunk.OLDS73I6.js";
+} from "./chunks/chunk.74LNGOSZ.js";
 import "./chunks/chunk.TJOP7HQP.js";
 import {
   SdAudio
-} from "./chunks/chunk.FUTLFMTI.js";
+} from "./chunks/chunk.ZRSPZUZY.js";
 import {
   SdDrawer
-} from "./chunks/chunk.TXB4ZASR.js";
+} from "./chunks/chunk.E2HV423L.js";
 import "./chunks/chunk.UFBRSKVR.js";
 import "./chunks/chunk.XHCTCU2Q.js";
 import "./chunks/chunk.WDWV53JP.js";
 import {
   SdButton
-} from "./chunks/chunk.YQJFQIPM.js";
+} from "./chunks/chunk.OGZQTS5F.js";
 import {
   SdSpinner
-} from "./chunks/chunk.Y4I24ZO6.js";
+} from "./chunks/chunk.3AY4ZE3B.js";
 import "./chunks/chunk.KVKRZJS7.js";
 import "./chunks/chunk.YEZS5ZR2.js";
 import "./chunks/chunk.N4LHE3QK.js";
 import {
   SdIcon
-} from "./chunks/chunk.ZUDPIYKJ.js";
+} from "./chunks/chunk.JWORONFM.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
@@ -176,7 +176,7 @@ import "./chunks/chunk.WEDOS4Q6.js";
 import "./chunks/chunk.CVCJY3ME.js";
 import "./chunks/chunk.B4BZKR24.js";
 import "./chunks/chunk.X2OQMWGY.js";
-import "./chunks/chunk.XHYWBX6K.js";
+import "./chunks/chunk.WJ3R5TMO.js";
 import "./chunks/chunk.HQWAKJBV.js";
 import "./chunks/chunk.POFWU6ZT.js";
 import "./chunks/chunk.S3NI7NKU.js";

package/dist/utilities/autocomplete-config.js

@@ -1,8 +1,8 @@
 import {
   setupAutocomplete
 } from "../chunks/chunk.6DKXZWRN.js";
-import "../chunks/chunk.7JXNK4NJ.js";
-import "../chunks/chunk.XHYWBX6K.js";
+import "../chunks/chunk.HO2HFXMJ.js";
+import "../chunks/chunk.WJ3R5TMO.js";
 import "../chunks/chunk.HQWAKJBV.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@solid-design-system/components",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/dist-versioned/_components/menu/menu.js

@@ -32,7 +32,7 @@ let SdMenu = class SdMenu extends SolidElement {
         if (item.type === 'checkbox') {
             item.checked = !item.checked;
         }
-        this.emit('sd-5-3-0-select', { detail: { item } });
+        this.emit('sd-5-4-0-select', { detail: { item } });
     }
     handleKeyDown(event) {
         if (event.key === 'Enter') {

package/dist-versioned/_components/menu/menu.styles.js

@@ -11,7 +11,7 @@ export default css `
     overscroll-behavior: none;
   }
 
-  ::slotted(sd-5-3-0-divider) {
+  ::slotted(sd-5-4-0-divider) {
     --spacing: var(--sd-spacing-x-small);
   }
 `;

package/dist-versioned/_components/menu-item/menu-item.js

@@ -74,7 +74,7 @@ let SdMenuItem = class SdMenuItem extends SolidElement {
         })}
       >
         <span part="checked-icon" class="menu-item__check">
-          <sd-5-3-0-icon name="check" library="_internal" aria-hidden="true"></sd-5-3-0-icon>
+          <sd-5-4-0-icon name="check" library="_internal" aria-hidden="true"></sd-5-4-0-icon>
         </span>
 
         <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
@@ -84,7 +84,7 @@ let SdMenuItem = class SdMenuItem extends SolidElement {
         <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
 
         <span class="menu-item__chevron">
-          <sd-5-3-0-icon name="chevron-right" library="_internal" aria-hidden="true"></sd-5-3-0-icon>
+          <sd-5-4-0-icon name="chevron-right" library="_internal" aria-hidden="true"></sd-5-4-0-icon>
         </span>
       </div>
     `;

package/dist-versioned/chunks/{chunk.QW7S2YBU.js → chunk.23SXULLQ.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.XHYWBX6K.js";
+} from "./chunk.WJ3R5TMO.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -41,16 +41,16 @@ var SdAccordionGroup = class extends SolidElement {
 };
 SdAccordionGroup.styles = [
   ...SolidElement.styles,
-  css`:host{display:block}::slotted(sd-5-3-0-accordion:not(:first-of-type)){margin-top:-1px}`
+  css`:host{display:block}::slotted(sd-5-4-0-accordion:not(:first-of-type)){margin-top:-1px}`
 ];
 __decorateClass([
-  queryAssignedElements({ selector: "sd-5-3-0-accordion" })
+  queryAssignedElements({ selector: "sd-5-4-0-accordion" })
 ], SdAccordionGroup.prototype, "_accordionsInDefaultSlot", 2);
 __decorateClass([
   property({ attribute: "close-others", type: Boolean, reflect: true })
 ], SdAccordionGroup.prototype, "closeOthers", 2);
 SdAccordionGroup = __decorateClass([
-  customElement("sd-5-3-0-accordion-group")
+  customElement("sd-5-4-0-accordion-group")
 ], SdAccordionGroup);
 
 export {

package/dist-versioned/chunks/{chunk.GBEYBTXR.js → chunk.2WN7YMGY.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.FNYEXUNK.js";
 import {
   SdCarouselItem
-} from "./chunk.RWMU4UKX.js";
+} from "./chunk.MKGGWQBV.js";
 import {
   LocalizeController
 } from "./chunk.YKM42GKF.js";
@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XHYWBX6K.js";
+} from "./chunk.WJ3R5TMO.js";
 import {
   prefersReducedMotion
 } from "./chunk.HQWAKJBV.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-5-3-0-carousel-item");
+    this.slides = this.getElementsByTagName("sd-5-4-0-carousel-item");
     // determines which slide is displayed
     // A map containing the state of all the slides
     this.intersectionObserverEntries = /* @__PURE__ */ new Map();
@@ -380,7 +380,7 @@ var SdCarousel = class extends SolidElement {
     )}" aria-label="${this.localize.term("previousSlide")}" aria-controls="scroll-container" aria-disabled="${prevEnabled ? "false" : "true"}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @click="${prevEnabled ? (e) => {
       this.previous();
       this.unblockAutoplay(e, this.previousButton);
-    } : null}"><slot name="previous-icon"><sd-5-3-0-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="_internal" name="${isLtr ? "chevron-down" : "chevron-up"}"></sd-5-3-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-5-4-0-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="_internal" name="${isLtr ? "chevron-down" : "chevron-up"}"></sd-5-4-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) => {
       const isActive = index + 1 === currentPage;
       return html`<button part="pagination-item ${isActive ? "pagination-item--active" : ""}" class="${cx(
         "carousel__pagination-item",
@@ -403,7 +403,7 @@ var SdCarousel = class extends SolidElement {
     )}" aria-label="${this.localize.term("nextSlide")}" aria-controls="scroll-container" aria-disabled="${nextEnabled ? "false" : "true"}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @click="${nextEnabled ? (e) => {
       this.next();
       this.unblockAutoplay(e, this.nextButton);
-    } : null}"><slot name="next-icon"><sd-5-3-0-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="_internal" name="${isLtr ? "chevron-up" : "chevron-down"}"></sd-5-3-0-icon></slot></button></div><button class="${cx(
+    } : null}"><slot name="next-icon"><sd-5-4-0-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="_internal" name="${isLtr ? "chevron-up" : "chevron-down"}"></sd-5-4-0-icon></slot></button></div><button class="${cx(
       "ml-6 !rounded-sm",
       "!absolute !right-0 sd-interactive",
       this.inverted ? "sd-interactive--inverted" : "sd-interactive--reset",
@@ -413,12 +413,12 @@ var SdCarousel = class extends SolidElement {
       if (e.detail) {
         this.autoplayControls.blur();
       }
-    }}"><slot name="autoplay-start" class="${cx(!this.pausedAutoplay ? "hidden" : "")}"><sd-5-3-0-icon class="h-6 w-6 grid place-items-center" library="_internal" name="start"></sd-5-3-0-icon></slot><slot name="autoplay-pause" class="${cx(this.pausedAutoplay ? "hidden" : "")}"><sd-5-3-0-icon class="h-6 w-6 grid place-items-center" library="_internal" name="pause"></sd-5-3-0-icon></slot></button></div></div>`;
+    }}"><slot name="autoplay-start" class="${cx(!this.pausedAutoplay ? "hidden" : "")}"><sd-5-4-0-icon class="h-6 w-6 grid place-items-center" library="_internal" name="start"></sd-5-4-0-icon></slot><slot name="autoplay-pause" class="${cx(this.pausedAutoplay ? "hidden" : "")}"><sd-5-4-0-icon class="h-6 w-6 grid place-items-center" library="_internal" name="pause"></sd-5-4-0-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-5-3-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-5-4-0-button::part(label){align-items:center;display:flex;flex:1 1 auto;pointer-events:none}`
 ];
 __decorateClass([
   query('[part~="autoplay-controls"]')
@@ -485,7 +485,7 @@ __decorateClass([
   watch("autoplay")
 ], SdCarousel.prototype, "handleAutoplayChange", 1);
 SdCarousel = __decorateClass([
-  customElement("sd-5-3-0-carousel")
+  customElement("sd-5-4-0-carousel")
 ], SdCarousel);
 
 export {

package/dist-versioned/chunks/{chunk.Y4I24ZO6.js → chunk.3AY4ZE3B.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XHYWBX6K.js";
+} from "./chunk.WJ3R5TMO.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -41,7 +41,7 @@ __decorateClass([
   property({ type: String, reflect: true })
 ], SdSpinner.prototype, "color", 2);
 SdSpinner = __decorateClass([
-  customElement("sd-5-3-0-spinner")
+  customElement("sd-5-4-0-spinner")
 ], SdSpinner);
 
 export {

package/dist-versioned/chunks/{chunk.XG7W22LV.js → chunk.3OJHLEDR.js}

@@ -14,7 +14,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XHYWBX6K.js";
+} from "./chunk.WJ3R5TMO.js";
 import {
   animateTo,
   stopAnimations
@@ -181,15 +181,15 @@ var SdNotification = class extends SolidElement {
         warning: "bg-warning",
         error: "bg-error"
       }[this.variant]
-    )}"><sd-5-3-0-icon name="${{
+    )}"><sd-5-4-0-icon name="${{
       info: "info-circle",
       success: "confirm-circle",
       warning: "exclamation-circle",
       error: "warning"
-    }[this.variant] || ""}" library="_internal" class="h-6 w-6 text-white"></sd-5-3-0-icon></slot><div part="content" class="${cx(
+    }[this.variant] || ""}" library="_internal" class="h-6 w-6 text-white"></sd-5-4-0-icon></slot><div part="content" class="${cx(
       "h-full w-full p-1 gap-2 flex items-center justify-stretch bg-white",
       "border-solid border-[1px] border-l-0 border-neutral-400"
-    )}"><slot id="message" part="message" class="block w-full pl-3 py-2"></slot>${this.closable ? html`<sd-5-3-0-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-5-3-0-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-5-3-0-icon></sd-5-3-0-button>` : ""}</div>${this.durationIndicator ? html`<div part="duration-indicator__elapsed" id="duration-indicator__elapsed" style="${`animation-duration: ${this.duration}ms`}" class="${cx(`absolute w-0 h-[2px] bottom-0 bg-primary z-10 animate-grow`)}"></div><div part="duration-indicator__total" class="w-full h-[2px] bottom-0 absolute border border-neutral-400"></div>` : ""}</div>`;
+    )}"><slot id="message" part="message" class="block w-full pl-3 py-2"></slot>${this.closable ? html`<sd-5-4-0-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-5-4-0-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-5-4-0-icon></sd-5-4-0-button>` : ""}</div>${this.durationIndicator ? html`<div part="duration-indicator__elapsed" id="duration-indicator__elapsed" style="${`animation-duration: ${this.duration}ms`}" class="${cx(`absolute w-0 h-[2px] bottom-0 bg-primary z-10 animate-grow`)}"></div><div part="duration-indicator__total" class="w-full h-[2px] bottom-0 absolute border border-neutral-400"></div>` : ""}</div>`;
   }
 };
 /**
@@ -230,7 +230,7 @@ __decorateClass([
   watch("duration")
 ], SdNotification.prototype, "handleDurationChange", 1);
 SdNotification = __decorateClass([
-  customElement("sd-5-3-0-notification")
+  customElement("sd-5-4-0-notification")
 ], SdNotification);
 setDefaultAnimation("notification.show", {
   keyframes: [

package/dist-versioned/chunks/{chunk.LDMCWDHQ.js → chunk.4BOVS5IV.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XHYWBX6K.js";
+} from "./chunk.WJ3R5TMO.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -118,7 +118,7 @@ var SdCheckbox = class extends SolidElement {
   render() {
     const checkboxState = this.disabled && this.indeterminate ? "disabledIndeterminate" : this.disabled && this.checked ? "disabledChecked" : this.disabled ? "disabled" : this.visuallyDisabled ? "visuallyDisabled" : this.showInvalidStyle && this.indeterminate ? "invalidIndeterminate" : this.showInvalidStyle ? "invalid" : this.checked || this.indeterminate ? "filled" : "default";
     return html`<label part="base" class="${cx(
-      "sd-5-3-0-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
+      "sd-5-4-0-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
       (this.disabled || this.visuallyDisabled) && "hover:cursor-not-allowed",
       {
         /* sizes, fonts */
@@ -127,7 +127,8 @@ var SdCheckbox = class extends SolidElement {
         lg: "text-base"
       }[this.size]
     )}"><input class="peer absolute opacity-0 p-0 m-0 pointer-events-none" type="checkbox" title="${this.title}" name="${this.name}" value="${ifDefined(this.value)}" .indeterminate="${live(this.indeterminate)}" .checked="${live(this.checked)}" .disabled="${this.disabled}" .required="${this.required}" aria-checked="${this.indeterminate ? "mixed" : this.checked}" aria-describedby="invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled ? "true" : "false"}" @click="${this.handleClick}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @blur="${this.handleBlur}" @focus="${this.handleFocus}"> <span id="control" part="control ${this.checked ? " control--checked" : "control--unchecked"} ${this.indeterminate ? " control--indeterminate" : ""}" class="${cx(
-      `relative flex flex-shrink-0 items-center justify-center border rounded-sm h-4 w-4`,
+      "relative flex flex-shrink-0 items-center justify-center border rounded-sm h-4 w-4",
+      "transition-colors ease-in-out duration-medium group-hover:duration-fast",
       "peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary",
       {
         sm: "mt-[2px]",
@@ -144,7 +145,19 @@ var SdCheckbox = class extends SolidElement {
         filled: "border-accent hover:border-accent-550 group-hover:border-accent-550 bg-accent group-hover:bg-accent-550",
         default: "border-neutral-800 hover:bg-neutral-200 group-hover:bg-neutral-200 bg-white"
       }[checkboxState]
-    )}">${this.checked ? html`<sd-5-3-0-icon part="checked-icon" class="text-white w-3 h-3" library="_internal" name="status-check"></sd-5-3-0-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-5-3-0-icon part="indeterminate-icon" class="text-white w-3 h-3" library="_internal" name="status-minus"></sd-5-3-0-icon>` : ""} </span><span part="label" id="label" class="${cx(
+    )}"><div class="${cx("absolute h-3 transition-[width] right-0.25 duration-medium", this.checked ? "w-0" : "w-3")}"><div class="${cx(
+      "w-full h-full transition-colors duration-medium ease-in-out group-hover:duration-fast",
+      {
+        disabledIndeterminate: "bg-neutral-500",
+        disabledChecked: " bg-neutral-500",
+        disabled: "",
+        visuallyDisabled: "",
+        invalidIndeterminate: " bg-error group-hover:bg-error-400",
+        invalid: "group-hover:bg-neutral-200",
+        filled: "bg-accent group-hover:bg-accent-550",
+        default: "hover:bg-neutral-200 group-hover:bg-neutral-200 bg-white"
+      }[checkboxState]
+    )}"></div></div>${this.checked ? html`<sd-5-4-0-icon part="checked-icon" class="text-white w-3 h-3" library="_internal" name="status-check"></sd-5-4-0-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-5-4-0-icon part="indeterminate-icon" class="text-white w-3 h-3" library="_internal" name="status-minus"></sd-5-4-0-icon>` : ""} </span><span part="label" id="label" class="${cx(
       "select-none inline-block ml-2",
       this.disabled || this.visuallyDisabled ? "text-neutral-500" : this.showInvalidStyle ? "text-error" : "text-black"
     )}"><slot></slot></span></label> ${this.formControlController.renderInvalidMessage()}`;
@@ -206,7 +219,7 @@ __decorateClass([
   watch(["checked", "indeterminate"], { waitUntilFirstUpdate: true })
 ], SdCheckbox.prototype, "handleStateChange", 1);
 SdCheckbox = __decorateClass([
-  customElement("sd-5-3-0-checkbox")
+  customElement("sd-5-4-0-checkbox")
 ], SdCheckbox);
 
 export {

package/dist-versioned/chunks/{chunk.4PGBJ2GY.js → chunk.4KY6NI4T.js}

@@ -20,7 +20,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XHYWBX6K.js";
+} from "./chunk.WJ3R5TMO.js";
 import {
   animateTo,
   stopAnimations
@@ -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-5-3-0-button> is a <button> located inside its shadow root.
+   * e.g. the accessible trigger of an <sd-5-4-0-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-5-3-0-button":
-        case "sd-5-3-0-icon-button":
+        case "sd-5-4-0-button":
+        case "sd-5-4-0-icon-button":
           target = accessibleTrigger.button;
           break;
-        case "sd-5-3-0-navigation-item":
+        case "sd-5-4-0-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-5-3-0-select", this.handlePanelSelect);
+    this.panel.addEventListener("sd-5-4-0-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-5-3-0-select", this.handlePanelSelect);
+      this.panel.removeEventListener("sd-5-4-0-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-5-3-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"><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-5-4-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"><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 block",
       this.open ? "pointer-events-auto" : "pointer-events-none",
       this.rounded && "rounded-md"
-    )}" aria-hidden="${this.open ? "false" : "true"}" aria-labelledby="dropdown"></slot></sd-5-3-0-popup>`;
+    )}" aria-hidden="${this.open ? "false" : "true"}" aria-labelledby="dropdown"></slot></sd-5-4-0-popup>`;
   }
 };
 SdDropdown.styles = [
@@ -334,7 +334,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdDropdown.prototype, "handleOpenChange", 1);
 SdDropdown = __decorateClass([
-  customElement("sd-5-3-0-dropdown")
+  customElement("sd-5-4-0-dropdown")
 ], SdDropdown);
 setDefaultAnimation("dropdown.show", {
   keyframes: [{ opacity: 0 }, { opacity: 1 }],