@solid-design-system/components 4.6.15 → 4.6.16

package/dist-versioned/chunks/chunk.HOJQ3I25.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-15-icon class="mr-2 text-xl" library="system" name="chevron-up"></sd-4-6-15-icon>${this.localize.term("showLess")}</slot>` : html`<slot name="toggle-closed"><sd-4-6-15-icon class="mr-2 text-xl" library="system" name="chevron-down"></sd-4-6-15-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-16-icon class="mr-2 text-xl" library="system" name="chevron-up"></sd-4-6-16-icon>${this.localize.term("showLess")}</slot>` : html`<slot name="toggle-closed"><sd-4-6-16-icon class="mr-2 text-xl" library="system" name="chevron-down"></sd-4-6-16-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-15-expandable")
+  customElement("sd-4-6-16-expandable")
 ], SdExpandable);
 
 export {

package/dist-versioned/chunks/chunk.J24KLWJY.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-15-button> is a <button> located inside its shadow root.
+   * e.g. the accessible trigger of an <sd-4-6-16-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-15-button":
-        case "sd-4-6-15-icon-button":
+        case "sd-4-6-16-button":
+        case "sd-4-6-16-icon-button":
           target = accessibleTrigger.button;
           break;
-        case "sd-4-6-15-navigation-item":
+        case "sd-4-6-16-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-15-select", this.handlePanelSelect);
+    this.panel.addEventListener("sd-4-6-16-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-15-select", this.handlePanelSelect);
+      this.panel.removeEventListener("sd-4-6-16-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-15-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-16-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-15-popup>`;
+    )}" aria-hidden="${this.open ? "false" : "true"}" aria-labelledby="dropdown"></slot></sd-4-6-16-popup>`;
   }
 };
 SdDropdown.styles = [
@@ -334,7 +334,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdDropdown.prototype, "handleOpenChange", 1);
 SdDropdown = __decorateClass([
-  customElement("sd-4-6-15-dropdown")
+  customElement("sd-4-6-16-dropdown")
 ], SdDropdown);
 setDefaultAnimation("dropdown.show", {
   keyframes: [

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

@@ -15,7 +15,7 @@ var FormControlController = class {
       const disabled = this.options.disabled(this.host);
       const name = this.options.name(this.host);
       const value = this.options.value(this.host);
-      const isButton = this.host.tagName.toLowerCase() === "sd-4-6-15-button";
+      const isButton = this.host.tagName.toLowerCase() === "sd-4-6-16-button";
       if (!disabled && !isButton && typeof name === "string" && name.length > 0 && typeof value !== "undefined") {
         if (Array.isArray(value)) {
           value.forEach((val) => {
@@ -40,7 +40,7 @@ var FormControlController = class {
         event.stopImmediatePropagation();
         const invalidElements = (_b = this.form) == null ? void 0 : _b.querySelectorAll("[data-invalid]");
         const sdRadioGroups = Array.from(invalidElements).filter(
-          (element) => element.tagName.toLowerCase() === "sd-4-6-15-radio-group"
+          (element) => element.tagName.toLowerCase() === "sd-4-6-16-radio-group"
         );
         sdRadioGroups.forEach((radioGroup) => {
           var _a2, _b2;
@@ -88,7 +88,7 @@ var FormControlController = class {
       },
       reportValidity: (input) => typeof input.reportValidity === "function" ? input.reportValidity() : true,
       setValue: (input, value) => input.value = value,
-      assumeInteractionOn: ["sd-4-6-15-input"]
+      assumeInteractionOn: ["sd-4-6-16-input"]
     }, options);
   }
   hostConnected() {

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

@@ -142,7 +142,7 @@ var SdAccordion = class extends SolidElement {
     )}"></div><slot name="summary" part="summary" class="flex flex-auto items-center text-left">${this.summary}</slot><span part="summary-icon" class="${cx(
       "flex flex-grow-0 flex-shrink-0 flex-auto items-center transition-all ease-in-out duration-300 text-xl",
       this.open && "rotate-180"
-    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-4-6-15-icon library="system" name="chevron-down"></sd-4-6-15-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-4-6-15-icon library="system" name="chevron-down"></sd-4-6-15-icon></slot></span></summary><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></details>`;
+    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-4-6-16-icon library="system" name="chevron-down"></sd-4-6-16-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-4-6-16-icon library="system" name="chevron-down"></sd-4-6-16-icon></slot></span></summary><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></details>`;
   }
 };
 SdAccordion.styles = [
@@ -168,7 +168,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdAccordion.prototype, "handleOpenChange", 1);
 SdAccordion = __decorateClass([
-  customElement("sd-4-6-15-accordion")
+  customElement("sd-4-6-16-accordion")
 ], SdAccordion);
 setDefaultAnimation("accordion.show", {
   keyframes: [

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

@@ -288,10 +288,10 @@ var SdAudio = class extends SolidElement {
     )}" part="audio-controls"><button class="${cx(
       "playback-speed justify-self-start text-base font-bold hover:cursor-pointer sd-interactive",
       this.inverted && "sd-interactive--inverted"
-    )}" aria-label="${this.localize.term("playbackSpeed")} (${this.speed}x)" @click="${this.togglePlaybackSpeed}" @keydown="${this.togglePlaybackSpeedKeydown}" part="playback-speed">${this.speed}x</button><sd-4-6-15-button ?inverted="${this.inverted ? true : false}" part="play-button" size="lg" @click="${!this.isPlaying ? this.playAudio : this.pauseAudio}" aria-label="${this.isPlaying ? this.localize.term("pauseAudio") : this.localize.term("playAudio")}" title="${this.isPlaying ? this.localize.term("pauseAudio") : this.localize.term("playAudio")}" class="text-3xl">${this.isPlaying ? html`<slot name="pause-icon"><sd-4-6-15-icon class="text-3xl" name="pause" library="system"></sd-4-6-15-icon></slot>` : html`<slot name="play-icon"><sd-4-6-15-icon class="text-3xl" name="start" library="system"></sd-4-6-15-icon></slot>`}</sd-4-6-15-button><div class="flex items-center justify-self-end">${this.hasSlotController.test("transcript") ? html`<button class="${cx(
+    )}" aria-label="${this.localize.term("playbackSpeed")} (${this.speed}x)" @click="${this.togglePlaybackSpeed}" @keydown="${this.togglePlaybackSpeedKeydown}" part="playback-speed">${this.speed}x</button><sd-4-6-16-button ?inverted="${this.inverted ? true : false}" part="play-button" size="lg" @click="${!this.isPlaying ? this.playAudio : this.pauseAudio}" aria-label="${this.isPlaying ? this.localize.term("pauseAudio") : this.localize.term("playAudio")}" title="${this.isPlaying ? this.localize.term("pauseAudio") : this.localize.term("playAudio")}" class="text-3xl">${this.isPlaying ? html`<slot name="pause-icon"><sd-4-6-16-icon class="text-3xl" name="pause" library="system"></sd-4-6-16-icon></slot>` : html`<slot name="play-icon"><sd-4-6-16-icon class="text-3xl" name="start" library="system"></sd-4-6-16-icon></slot>`}</sd-4-6-16-button><div class="flex items-center justify-self-end">${this.hasSlotController.test("transcript") ? html`<button class="${cx(
       "mr-6 w-6 h-6 hover:cursor-pointer sd-interactive",
       this.inverted && "sd-interactive--inverted"
-    )}" aria-label="${this.isTranscriptOpen ? this.localize.term("transcriptIsOpen") : this.localize.term("openTranscript")}" @click="${this.showTranscript}" @keydown="${this.showTranscriptKeydown}" part="transcript"><sd-4-6-15-icon class="w-6 h-6" name="transcript" library="system"></sd-4-6-15-icon></button>` : null} <button class="${cx("w-6 h-6 hover:cursor-pointer sd-interactive", this.inverted && "sd-interactive--inverted")}" part="volume" aria-label="${!this.isMuted ? this.localize.term("mute") : this.localize.term("unmute")}" @click="${this.toggleMute}" @keydown="${this.toggleMuteKeydown}"><sd-4-6-15-icon class="w-6 h-6" name="${this.isMuted ? "mute" : "volume"}" library="system"></sd-4-6-15-icon></button></div></div>`;
+    )}" aria-label="${this.isTranscriptOpen ? this.localize.term("transcriptIsOpen") : this.localize.term("openTranscript")}" @click="${this.showTranscript}" @keydown="${this.showTranscriptKeydown}" part="transcript"><sd-4-6-16-icon class="w-6 h-6" name="transcript" library="system"></sd-4-6-16-icon></button>` : null} <button class="${cx("w-6 h-6 hover:cursor-pointer sd-interactive", this.inverted && "sd-interactive--inverted")}" part="volume" aria-label="${!this.isMuted ? this.localize.term("mute") : this.localize.term("unmute")}" @click="${this.toggleMute}" @keydown="${this.toggleMuteKeydown}"><sd-4-6-16-icon class="w-6 h-6" name="${this.isMuted ? "mute" : "volume"}" library="system"></sd-4-6-16-icon></button></div></div>`;
     const renderTimestamps = html`<div class="${cx(
       "w-full flex justify-between",
       this.reversedLayout ? "mb-2" : "mt-2",
@@ -301,12 +301,12 @@ var SdAudio = class extends SolidElement {
     return html`<div class="${cx("w-full flex relative", this.reversedLayout ? "flex-col-reverse" : "flex-col")}" aria-label="${this.localize.term("audioPlayer")}" part="audio-player"><slot @slotchange="${this.updateAudioDuration}"></slot>${!this.animated || this.animated && this.reversedLayout ? renderAudioControls : null}<div class="relative">${this.animated && !this.reversedLayout ? html`${renderAudioControls}` : null} ${this.animated ? html`<canvas class="w-full h-16"></canvas>` : null} ${!this.hideTimestamps && this.animated && this.reversedLayout ? renderTimestamps : null} <input class="${cx(
       "progress-slider bg-primary appearance-none w-full cursor-pointer outline-none h-1 flex items-center sd-interactive",
       this.inverted && "sd-interactive--inverted"
-    )}" type="range" max="100" step="0.001" value="${this.progress}" @input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}" aria-label="${this.localize.term("seekBar")}" part="progress-slider" style="background:linear-gradient(to right,${this.inverted ? "rgb(var(--sd-color-white, 255 255 255) / 1)" : "rgb(var(--sd-color-primary, 0 53 142) / 1)"} ${progressPercentage}%,${this.animated ? "transparent" : this.inverted ? "rgb(var(--sd-color-primary-400, 153 171 208) / 1)" : "rgb(var(--sd-color-grey-400, 195 195 195) / 1)"} ${progressPercentage}%)"></div>${this.hasSlotController.test("transcript") ? html`<sd-4-6-15-drawer><slot name="transcript"></slot></sd-4-6-15-drawer>` : null} ${!this.hideTimestamps && (!this.animated || !this.reversedLayout) ? renderTimestamps : null}</div>`;
+    )}" type="range" max="100" step="0.001" value="${this.progress}" @input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}" aria-label="${this.localize.term("seekBar")}" part="progress-slider" style="background:linear-gradient(to right,${this.inverted ? "rgb(var(--sd-color-white, 255 255 255) / 1)" : "rgb(var(--sd-color-primary, 0 53 142) / 1)"} ${progressPercentage}%,${this.animated ? "transparent" : this.inverted ? "rgb(var(--sd-color-primary-400, 153 171 208) / 1)" : "rgb(var(--sd-color-grey-400, 195 195 195) / 1)"} ${progressPercentage}%)"></div>${this.hasSlotController.test("transcript") ? html`<sd-4-6-16-drawer><slot name="transcript"></slot></sd-4-6-16-drawer>` : null} ${!this.hideTimestamps && (!this.animated || !this.reversedLayout) ? renderTimestamps : null}</div>`;
   }
 };
 SdAudio.styles = [
   ...SolidElement.styles,
-  css`.progress-slider:focus-visible{outline:2px solid transparent;outline-offset:2px}.progress-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:currentColor;border-radius:var(--sd-border-radius-full,9999px);border-style:none;height:var(--sd-spacing-4,1rem);transition-duration:.2s;-webkit-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);width:var(--sd-spacing-4,1rem)}.progress-slider:focus-visible::-webkit-slider-thumb{outline-offset:2px;outline-style:solid}.progress-slider::-moz-range-thumb{-moz-appearance:none;appearance:none;background-color:currentColor;border-radius:var(--sd-border-radius-full,9999px);border-style:none;height:var(--sd-spacing-4,1rem);transition-duration:.2s;-moz-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);width:var(--sd-spacing-4,1rem)}.progress-slider:focus-visible::-moz-range-thumb{outline-offset:2px;outline-style:solid}sd-4-6-15-button::part(base){align-items:center;border-radius:var(--sd-border-radius-full,9999px);display:flex;height:var(--sd-spacing-16,4rem);justify-content:center;width:var(--sd-spacing-16,4rem)}sd-4-6-15-button::part(label){align-items:center;display:flex;flex-grow:0}`
+  css`.progress-slider:focus-visible{outline:2px solid transparent;outline-offset:2px}.progress-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:currentColor;border-radius:var(--sd-border-radius-full,9999px);border-style:none;height:var(--sd-spacing-4,1rem);transition-duration:.2s;-webkit-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);width:var(--sd-spacing-4,1rem)}.progress-slider:focus-visible::-webkit-slider-thumb{outline-offset:2px;outline-style:solid}.progress-slider::-moz-range-thumb{-moz-appearance:none;appearance:none;background-color:currentColor;border-radius:var(--sd-border-radius-full,9999px);border-style:none;height:var(--sd-spacing-4,1rem);transition-duration:.2s;-moz-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);width:var(--sd-spacing-4,1rem)}.progress-slider:focus-visible::-moz-range-thumb{outline-offset:2px;outline-style:solid}sd-4-6-16-button::part(base){align-items:center;border-radius:var(--sd-border-radius-full,9999px);display:flex;height:var(--sd-spacing-16,4rem);justify-content:center;width:var(--sd-spacing-16,4rem)}sd-4-6-16-button::part(label){align-items:center;display:flex;flex-grow:0}`
 ];
 __decorateClass([
   property({ type: Boolean, reflect: true, attribute: "reversed-layout" })
@@ -348,13 +348,13 @@ __decorateClass([
   query('[part="audio-player"]')
 ], SdAudio.prototype, "audioPlayerContainer", 2);
 __decorateClass([
-  query("sd-4-6-15-drawer")
+  query("sd-4-6-16-drawer")
 ], SdAudio.prototype, "drawer", 2);
 __decorateClass([
   query("canvas")
 ], SdAudio.prototype, "canvas", 2);
 SdAudio = __decorateClass([
-  customElement("sd-4-6-15-audio")
+  customElement("sd-4-6-16-audio")
 ], SdAudio);
 
 export {

package/dist-versioned/chunks/{chunk.VBO5UCVM.js → chunk.MXKUHOD6.js}

@@ -66,7 +66,6 @@ var SdRadioButton = class extends SolidElement {
     return html`<div part="base" role="presentation" class="relative"><button part="${`button${this.checked ? " button--checked" : ""}`}" role="radio" aria-checked="${this.checked}" class="${cx(
       "relative text-center border rounded-default transition-all ease-in-out duration-100 items-center justify-center focus-visible:focus-outline",
       this.size === "sm" ? "text-sm" : "text-base",
-      this.visuallyDisabled && "focus-visible:outline-none",
       this.checked && !this.disabled && !this.visuallyDisabled ? "bg-primary border-primary text-white hover:bg-primary-500 hover:border-primary-500" : (this.disabled || this.visuallyDisabled) && !this.checked ? "border-neutral-500 text-neutral-500 hover:cursor-not-allowed" : (this.disabled || this.visuallyDisabled) && this.checked ? "text-neutral-500 border-neutral-500 hover:cursor-not-allowed " : "bg-transparent text-primary border-primary hover:bg-primary-100 hover:border-primary-500 hover:text-primary-500 cursor-pointer",
       hasDefaultSlot && "px-4",
       this.hasFocus && "focused-class",
@@ -85,7 +84,7 @@ var SdRadioButton = class extends SolidElement {
 };
 SdRadioButton.styles = [
   ...SolidElement.styles,
-  css`:host{display:block;width:-moz-min-content;width:min-content}.hidden-input{all:unset;inset:var(--sd-spacing-0,0);opacity:var(--sd-opacity-0,0);outline-color:rgb(var(--sd-color-error,204 25 55)/1);outline-style:dotted;outline-width:1px;position:absolute;z-index:-10}.lg-label,.lg-no-label{height:var(--sd-spacing-12,3rem)}.lg-no-label{width:var(--sd-spacing-12,3rem)}.md-label,.md-no-label{height:var(--sd-spacing-10,2.5rem)}.md-no-label{width:var(--sd-spacing-10,2.5rem)}.sm-label,.sm-no-label{height:var(--sd-spacing-8,2rem)}.sm-no-label{width:var(--sd-spacing-8,2rem)}:host(.sd-4-6-15-button-group__button--first:not(.sd-4-6-15-button-group__button--last)) button{border-bottom-right-radius:var(--sd-border-radius-none,0);border-top-right-radius:var(--sd-border-radius-none,0)}:host(.sd-4-6-15-button-group__button--inner) button{border-radius:var(--sd-border-radius-none,0)}:host(.sd-4-6-15-button-group__button--last:not(.sd-4-6-15-button-group__button--first)) button{border-bottom-left-radius:var(--sd-border-radius-none,0);border-top-left-radius:var(--sd-border-radius-none,0)}:host(.sd-4-6-15-button-group__button:not(.sd-4-6-15-button-group__button--first)){margin-inline-start:-1px}:host(.sd-4-6-15-button-group__button--hover){z-index:10}:host(.sd-4-6-15-button-group__button--focus),:host(.sd-4-6-15-button-group__button[checked]){z-index:20}`
+  css`:host{display:block;width:-moz-min-content;width:min-content}.hidden-input{all:unset;inset:var(--sd-spacing-0,0);opacity:var(--sd-opacity-0,0);outline-color:rgb(var(--sd-color-error,204 25 55)/1);outline-style:dotted;outline-width:1px;position:absolute;z-index:-10}.lg-label,.lg-no-label{height:var(--sd-spacing-12,3rem)}.lg-no-label{width:var(--sd-spacing-12,3rem)}.md-label,.md-no-label{height:var(--sd-spacing-10,2.5rem)}.md-no-label{width:var(--sd-spacing-10,2.5rem)}.sm-label,.sm-no-label{height:var(--sd-spacing-8,2rem)}.sm-no-label{width:var(--sd-spacing-8,2rem)}:host(.sd-4-6-16-button-group__button--first:not(.sd-4-6-16-button-group__button--last)) button{border-bottom-right-radius:var(--sd-border-radius-none,0);border-top-right-radius:var(--sd-border-radius-none,0)}:host(.sd-4-6-16-button-group__button--inner) button{border-radius:var(--sd-border-radius-none,0)}:host(.sd-4-6-16-button-group__button--last:not(.sd-4-6-16-button-group__button--first)) button{border-bottom-left-radius:var(--sd-border-radius-none,0);border-top-left-radius:var(--sd-border-radius-none,0)}:host(.sd-4-6-16-button-group__button:not(.sd-4-6-16-button-group__button--first)){margin-inline-start:-1px}:host(.sd-4-6-16-button-group__button--hover){z-index:10}:host(.sd-4-6-16-button-group__button--focus),:host(.sd-4-6-16-button-group__button[checked]){z-index:20}`
 ];
 __decorateClass([
   query(".button")
@@ -115,7 +114,7 @@ __decorateClass([
   watch(["disabled", "visually-disabled"], { waitUntilFirstUpdate: true })
 ], SdRadioButton.prototype, "handleDisabledChange", 1);
 SdRadioButton = __decorateClass([
-  customElement("sd-4-6-15-radio-button")
+  customElement("sd-4-6-16-radio-button")
 ], SdRadioButton);
 
 export {

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

@@ -92,7 +92,7 @@ __decorateClass([
   property({ reflect: true })
 ], SdMapMarker.prototype, "label", 2);
 SdMapMarker = __decorateClass([
-  customElement("sd-4-6-15-map-marker")
+  customElement("sd-4-6-16-map-marker")
 ], SdMapMarker);
 
 export {

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

@@ -202,15 +202,15 @@ var SdTooltip = class extends SolidElement {
   render() {
     const isStart = this.placement.endsWith("-start");
     const isEnd = this.placement.endsWith("-end");
-    return html`<sd-4-6-15-popup part="base" exportparts="
+    return html`<sd-4-6-16-popup part="base" exportparts="
           popup:base__popup,
           arrow:base__arrow
-        " class="${cx(this.open && "tooltip--open")}" placement="${this.placement}" distance="10" skidding="${{ start: 2, end: -2, default: 0 }[isStart ? "start" : isEnd ? "end" : "default"] * (this.size === "sm" ? -1 : 1)}" strategy="${this.hoist ? "fixed" : "absolute"}" flip shift arrow auto-size="vertical" arrow-padding="0">${this.hasCustomTrigger ? html`<slot slot="anchor"></slot>` : html`<button slot="anchor" aria-describedby="tooltip" class="${cx("flex sd-interactive rounded-full", this.size === "lg" ? "text-xl" : "text-base")}" ?disabled="${this.disabled}" aria-expanded="${this.open}" aria-controls="tooltip"><sd-4-6-15-icon library="system" name="info-circle" label="Tooltip" class="${cx(this.disabled && "sd-interactive--disabled")}"></sd-4-6-15-icon></button>`}<slot name="content" part="body" id="tooltip" class="bg-primary text-white py-3 px-4 block rounded-none text-sm text-left" role="tooltip" aria-label="${this.content}" aria-live="${this.open ? "polite" : "off"}">${this.content}</slot></sd-4-6-15-popup>`;
+        " class="${cx(this.open && "tooltip--open")}" placement="${this.placement}" distance="10" skidding="${{ start: 2, end: -2, default: 0 }[isStart ? "start" : isEnd ? "end" : "default"] * (this.size === "sm" ? -1 : 1)}" strategy="${this.hoist ? "fixed" : "absolute"}" flip shift arrow auto-size="vertical" arrow-padding="0">${this.hasCustomTrigger ? html`<slot slot="anchor"></slot>` : html`<button slot="anchor" aria-describedby="tooltip" class="${cx("flex sd-interactive rounded-full", this.size === "lg" ? "text-xl" : "text-base")}" ?disabled="${this.disabled}" aria-expanded="${this.open}" aria-controls="tooltip"><sd-4-6-16-icon library="system" name="info-circle" label="Tooltip" class="${cx(this.disabled && "sd-interactive--disabled")}"></sd-4-6-16-icon></button>`}<slot name="content" part="body" id="tooltip" class="bg-primary text-white py-3 px-4 block rounded-none text-sm text-left" role="tooltip" aria-label="${this.content}" aria-live="${this.open ? "polite" : "off"}">${this.content}</slot></sd-4-6-16-popup>`;
   }
 };
 SdTooltip.styles = [
   ...SolidElement.styles,
-  css`:host{--hide-delay:0ms;--show-delay:150ms;display:contents}sd-4-6-15-popup{--arrow-color:rgb(var(--sd-color-primary,0 53 142)/1);--arrow-size:10px}sd-4-6-15-popup::part(popup){pointer-events:none;z-index:10;--tw-shadow:var(--sd-shadow,0px 1px 3px 0px rgba(81,81,81,.75));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-4-6-15-popup::part(arrow){--tw-shadow:var(--sd-shadow,0px 1px 3px 0px rgba(81,81,81,.75));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-4-6-15-popup[placement^=top]::part(popup){transform-origin:bottom}sd-4-6-15-popup[placement^=bottom]::part(popup){transform-origin:top}#tooltip{max-width:var(--max-width)}::slotted([slot=content]){max-height:var(--auto-size-available-height)!important;max-width:var(--auto-size-available-width)!important;overflow:auto}`
+  css`:host{--hide-delay:0ms;--show-delay:150ms;display:contents}sd-4-6-16-popup{--arrow-color:rgb(var(--sd-color-primary,0 53 142)/1);--arrow-size:10px}sd-4-6-16-popup::part(popup){pointer-events:none;z-index:10;--tw-shadow:var(--sd-shadow,0px 1px 3px 0px rgba(81,81,81,.75));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-4-6-16-popup::part(arrow){--tw-shadow:var(--sd-shadow,0px 1px 3px 0px rgba(81,81,81,.75));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-4-6-16-popup[placement^=top]::part(popup){transform-origin:bottom}sd-4-6-16-popup[placement^=bottom]::part(popup){transform-origin:top}#tooltip{max-width:var(--max-width)}::slotted([slot=content]){max-height:var(--auto-size-available-height)!important;max-width:var(--auto-size-available-width)!important;overflow:auto}`
 ];
 __decorateClass([
   query("slot:not([name])")
@@ -219,7 +219,7 @@ __decorateClass([
   query("#tooltip")
 ], SdTooltip.prototype, "body", 2);
 __decorateClass([
-  query("sd-4-6-15-popup")
+  query("sd-4-6-16-popup")
 ], SdTooltip.prototype, "popup", 2);
 __decorateClass([
   property({ type: String, reflect: true })
@@ -252,7 +252,7 @@ __decorateClass([
   watch("disabled")
 ], SdTooltip.prototype, "handleDisabledChange", 1);
 SdTooltip = __decorateClass([
-  customElement("sd-4-6-15-tooltip")
+  customElement("sd-4-6-16-tooltip")
 ], SdTooltip);
 setDefaultAnimation("tooltip.show", {
   keyframes: [

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

@@ -41,7 +41,7 @@ __decorateClass([
   property({ type: String, reflect: true })
 ], SdSpinner.prototype, "color", 2);
 SdSpinner = __decorateClass([
-  customElement("sd-4-6-15-spinner")
+  customElement("sd-4-6-16-spinner")
 ], SdSpinner);
 
 export {

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

@@ -85,7 +85,7 @@ var SdFlipcard = class extends SolidElement {
         "gradient-light": this.placement === "top" ? "bg-gradient-to-b from-white/60 to-white/0 mb-auto" : "bg-gradient-to-t from-white/60 to-white/0 mt-auto",
         "gradient-dark": this.placement === "bottom" ? "bg-gradient-to-t from-primary-800/60 to-primary-800/0 mt-auto" : "bg-gradient-to-b from-primary-800/60 to-primary-800/0 mb-auto"
       }[this.frontVariant]
-    )}"></div><sd-4-6-15-button part="front-button" size="md" variant="${{
+    )}"></div><sd-4-6-16-button part="front-button" size="md" variant="${{
       primary: "tertiary",
       "primary-100": "tertiary",
       "gradient-light": "primary",
@@ -95,7 +95,7 @@ var SdFlipcard = class extends SolidElement {
       "primary-100": false,
       "gradient-light": true,
       "gradient-dark": true
-    }[this.frontVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipFront}" @keydown="${this.handleFrontKeydown}"><sd-4-6-15-icon library="system" name="reload" label="Flip to Back"></sd-4-6-15-icon></sd-4-6-15-button></div><div part="back" tabindex="0" aria-hidden="${this.activeSide === "front"}" inert="${ifDefined(this.activeSide === "front" || void 0)}" class="${cx(
+    }[this.frontVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipFront}" @keydown="${this.handleFrontKeydown}"><sd-4-6-16-icon library="system" name="reload" label="Flip to Back"></sd-4-6-16-icon></sd-4-6-16-button></div><div part="back" tabindex="0" aria-hidden="${this.activeSide === "front"}" inert="${ifDefined(this.activeSide === "front" || void 0)}" class="${cx(
       "flip-card__side flip-card__side--back overflow-hidden transition-transform duration-1000 ease-in-out",
       "flex focus-visible:focus-outline",
       "absolute top-0 left-0 w-full h-full justify-end text-left",
@@ -128,7 +128,7 @@ var SdFlipcard = class extends SolidElement {
         "gradient-light": this.placement === "top" ? "bg-gradient-to-b from-white/60 to-white/0 mb-auto" : "bg-gradient-to-t from-white/60 to-white/0 mt-auto",
         "gradient-dark": this.placement === "bottom" ? "bg-gradient-to-t from-primary-800/60 to-primary-800/0 mt-auto" : "bg-gradient-to-b from-primary-800/60 to-primary-800/0 mb-auto"
       }[this.backVariant]
-    )}"></div><sd-4-6-15-button size="md" part="back-button" variant="${{
+    )}"></div><sd-4-6-16-button size="md" part="back-button" variant="${{
       primary: "tertiary",
       "primary-100": "tertiary",
       "gradient-light": "primary",
@@ -138,7 +138,7 @@ var SdFlipcard = class extends SolidElement {
       "primary-100": false,
       "gradient-light": true,
       "gradient-dark": true
-    }[this.backVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipBack}" @keydown="${this.handleBackKeydown}"><sd-4-6-15-icon library="system" name="reload" label="Flip to Front"></sd-4-6-15-icon></sd-4-6-15-button></div></div>`;
+    }[this.backVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipBack}" @keydown="${this.handleBackKeydown}"><sd-4-6-16-icon library="system" name="reload" label="Flip to Front"></sd-4-6-16-icon></sd-4-6-16-button></div></div>`;
   }
 };
 /**
@@ -170,7 +170,7 @@ __decorateClass([
   state()
 ], SdFlipcard.prototype, "activeSide", 2);
 SdFlipcard = __decorateClass([
-  customElement("sd-4-6-15-flipcard")
+  customElement("sd-4-6-16-flipcard")
 ], SdFlipcard);
 
 export {

package/dist-versioned/chunks/{chunk.LNAF5CEF.js → chunk.PM6PUJVF.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-4-6-15-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
+      "sd-4-6-16-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
       (this.disabled || this.visuallyDisabled) && "hover:cursor-not-allowed",
       {
         /* sizes, fonts */
@@ -128,7 +128,7 @@ var SdCheckbox = class extends SolidElement {
       }[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`,
-      !this.visuallyDisabled ? "peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary" : "",
+      "peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary",
       {
         sm: "mt-[2px]",
         md: "mt-[3px]",
@@ -144,7 +144,7 @@ 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-4-6-15-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-check"></sd-4-6-15-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-4-6-15-icon part="indeterminate-icon" class="text-white w-3 h-3" library="system" name="status-minus"></sd-4-6-15-icon>` : ""} </span><span part="label" id="label" class="${cx(
+    )}">${this.checked ? html`<sd-4-6-16-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-check"></sd-4-6-16-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-4-6-16-icon part="indeterminate-icon" class="text-white w-3 h-3" library="system" name="status-minus"></sd-4-6-16-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 +206,7 @@ __decorateClass([
   watch(["checked", "indeterminate"], { waitUntilFirstUpdate: true })
 ], SdCheckbox.prototype, "handleStateChange", 1);
 SdCheckbox = __decorateClass([
-  customElement("sd-4-6-15-checkbox")
+  customElement("sd-4-6-16-checkbox")
 ], SdCheckbox);
 
 export {