@solid-design-system/components 3.0.1 → 3.2.0

package/dist/versioned-package/components/icon/library.system.js

@@ -81,7 +81,9 @@ const icons = {
   warning: `
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.893 2.55295C12.725 2.22395 12.388 2.00195 12 2.00195C11.612 2.00195 11.275 2.22295 11.109 2.54695L2.10598 20.553C2.03998 20.683 2.00098 20.837 2.00098 21C2.00098 21.552 2.44798 21.999 2.99998 22H21C21.552 21.999 21.999 21.552 21.999 21C21.999 20.837 21.96 20.683 21.891 20.548L21.894 20.554L12.893 2.55295ZM4.61698 20L12 5.23695L19.383 20H4.61698Z"/><path d="M11 10.667V15C11 15.552 11.448 16 12 16C12.552 16 13 15.552 13 15V10.667C13 10.115 12.552 9.66695 12 9.66695C11.448 9.66695 11 10.115 11 10.667Z"/><path d="M13 18C13 18.552 12.552 19 12 19C11.448 19 11 18.552 11 18C11 17.448 11.448 17 12 17C12.552 17 13 17.448 13 18Z"/></svg>`,
   "exclamation-circle": `
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 17C13 17.552 12.552 18 12 18C11.448 18 11 17.552 11 17C11 16.448 11.448 16 12 16C12.552 16 13 16.448 13 17Z"/><path d="M12 6C11.448 6 11 6.448 11 7V13C11 13.552 11.448 14 12 14C12.552 14 13 13.552 13 13V7C13 6.448 12.552 6 12 6Z"/><path d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C22 6.477 17.523 2 12 2ZM12 20C7.582 20 4 16.418 4 12C4 7.582 7.582 4 12 4C16.418 4 20 7.582 20 12C20 16.418 16.418 20 12 20Z"/></svg>`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 17C13 17.552 12.552 18 12 18C11.448 18 11 17.552 11 17C11 16.448 11.448 16 12 16C12.552 16 13 16.448 13 17Z"/><path d="M12 6C11.448 6 11 6.448 11 7V13C11 13.552 11.448 14 12 14C12.552 14 13 13.552 13 13V7C13 6.448 12.552 6 12 6Z"/><path d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C22 6.477 17.523 2 12 2ZM12 20C7.582 20 4 16.418 4 12C4 7.582 7.582 4 12 4C16.418 4 20 7.582 20 12C20 16.418 16.418 20 12 20Z"/></svg>`,
+  "magnifying-glass": `
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M21.707 20.293l-6.967-6.96c-0.046-0.046-0.096-0.087-0.15-0.124l-0.004-0.002c0.882-1.162 1.413-2.632 1.413-4.227 0-3.881-3.146-7.027-7.027-7.027s-7.027 3.146-7.027 7.027c0 3.881 3.146 7.027 7.027 7.027 1.594 0 3.065-0.531 4.244-1.426l-0.017 0.013c0.039 0.057 0.081 0.107 0.127 0.153l6.967 6.967c0.181 0.181 0.431 0.292 0.707 0.292s0.526-0.112 0.707-0.292v0c0.183-0.181 0.296-0.432 0.296-0.71s-0.113-0.529-0.296-0.71l-0-0zM9 14c-2.761 0-5-2.239-5-5s2.239-5 5-5c2.761 0 5 2.239 5 5v0c0 2.761-2.239 5-5 5v0z"></path></svg>`
 };
 const systemLibrary = {
   name: "system",

package/dist/versioned-package/components/include/include.d.ts

@@ -10,6 +10,6 @@ export default class SdInclude extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-3-0-1-include': SdInclude;
+        'sd-3-2-0-include': SdInclude;
     }
 }

package/dist/versioned-package/components/include/include.js

@@ -69,7 +69,7 @@ __decorateClass([
   watch("src")
 ], SdInclude.prototype, "handleSrcChange", 1);
 SdInclude = __decorateClass([
-  customElement("sd-3-0-1-include")
+  customElement("sd-3-2-0-include")
 ], SdInclude);
 export {
   SdInclude as default

package/dist/versioned-package/components/input/input.d.ts

@@ -75,6 +75,6 @@ export default class SdInput extends SolidElement implements SolidFormControl {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-3-0-1-input': SdInput;
+        'sd-3-2-0-input': SdInput;
     }
 }

package/dist/versioned-package/components/input/input.js

@@ -256,7 +256,7 @@ let SdInput = class extends SolidElement {
       "min-w-0 flex-grow focus:outline-none bg-transparent placeholder-neutral-700",
       this.size === "sm" ? "h-6" : "h-8",
       textSize
-    )}" 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" @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-3-0-1-icon class="${cx("text-neutral-500", iconSize)}" library="system" name="closing-round"></sd-3-0-1-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-3-0-1-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye"></sd-3-0-1-icon></slot>` : html`<slot name="hide-password-icon"><sd-3-0-1-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye-crossed-out"></sd-3-0-1-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-3-0-1-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="calendar"></sd-3-0-1-icon>` : ""} ${this.type === "time" ? html`<sd-3-0-1-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="clock"></sd-3-0-1-icon>` : ""} ${this.showInvalidStyle ? html`<sd-3-0-1-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="system" name="risk"></sd-3-0-1-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-3-0-1-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="system" name="confirm" part="valid-icon"></sd-3-0-1-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700", 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" @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-3-2-0-icon class="${cx("text-neutral-500", iconSize)}" library="system" name="closing-round"></sd-3-2-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-3-2-0-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye"></sd-3-2-0-icon></slot>` : html`<slot name="hide-password-icon"><sd-3-2-0-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye-crossed-out"></sd-3-2-0-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-3-2-0-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="calendar"></sd-3-2-0-icon>` : ""} ${this.type === "time" ? html`<sd-3-2-0-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="clock"></sd-3-2-0-icon>` : ""} ${this.type === "search" ? html`<button class="flex items-center" type="button" tabindex="-1"><sd-3-2-0-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="magnifying-glass"></sd-3-2-0-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-3-2-0-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="system" name="risk"></sd-3-2-0-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-3-2-0-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="system" name="confirm" part="valid-icon"></sd-3-2-0-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 SdInput.styles = [
@@ -389,7 +389,7 @@ __decorateClass([
   watch("value", { waitUntilFirstUpdate: true })
 ], SdInput.prototype, "handleValueChange", 1);
 SdInput = __decorateClass([
-  customElement("sd-3-0-1-input")
+  customElement("sd-3-2-0-input")
 ], SdInput);
 export {
   SdInput as default

package/dist/versioned-package/components/link/link.d.ts

@@ -17,6 +17,6 @@ export default class SdLink extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-3-0-1-link': SdLink;
+        'sd-3-2-0-link': SdLink;
     }
 }

package/dist/versioned-package/components/link/link.js

@@ -77,7 +77,7 @@ let SdLink = class extends SolidElement {
 };
 SdLink.styles = [
   SolidElement.styles,
-  css`::slotted(sd-3-0-1-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-3-0-1-icon){font-size:var(--sd-font-size-base,1rem)}:host([size=lg][standalone]) ::slotted(sd-3-0-1-icon){font-size:var(--sd-font-size-xl,1.5rem)}`
+  css`::slotted(sd-3-2-0-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-3-2-0-icon){font-size:var(--sd-font-size-base,1rem)}:host([size=lg][standalone]) ::slotted(sd-3-2-0-icon){font-size:var(--sd-font-size-xl,1.5rem)}`
 ];
 __decorateClass([
   query("a")
@@ -101,7 +101,7 @@ __decorateClass([
   property()
 ], SdLink.prototype, "download", 2);
 SdLink = __decorateClass([
-  customElement("sd-3-0-1-link")
+  customElement("sd-3-2-0-link")
 ], SdLink);
 export {
   SdLink as default

package/dist/versioned-package/components/map-marker/map-marker.d.ts

@@ -11,6 +11,6 @@ export default class SdMapMarker extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-3-0-1-map-marker': SdMapMarker;
+        'sd-3-2-0-map-marker': SdMapMarker;
     }
 }

package/dist/versioned-package/components/map-marker/map-marker.js

@@ -64,7 +64,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdMapMarker.prototype, "animated", 2);
 SdMapMarker = __decorateClass([
-  customElement("sd-3-0-1-map-marker")
+  customElement("sd-3-2-0-map-marker")
 ], SdMapMarker);
 export {
   SdMapMarker as default

package/dist/versioned-package/components/navigation-item/navigation-item.d.ts

@@ -26,6 +26,6 @@ export default class SdNavigationItem extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-3-0-1-navigation-item': SdNavigationItem;
+        'sd-3-2-0-navigation-item': SdNavigationItem;
     }
 }

package/dist/versioned-package/components/navigation-item/navigation-item.js

@@ -103,10 +103,10 @@ let SdNavigationItem = class extends SolidElement {
       isAccordion ? "grow" : "w-full",
       slots["description"] ? "pb-1" : horizontalPaddingBottom,
       this.calculatePaddingX()
-    )}">${this.divider && this.vertical ? html`<sd-3-0-1-divider part="divider" class="${cx("w-full transition-all absolute -top-[1px] left-0", this.calculatePaddingX())}"></sd-3-0-1-divider>` : ""} <span part="content-container" class="inline-flex items-center flex-auto"><slot part="content" class="inline"></slot></span>${(this.chevron || slots["children"]) && this.vertical ? html`<sd-3-0-1-icon name="chevron-down" part="chevron" library="system" color="currentColor" class="${cx(
+    )}">${this.divider && this.vertical ? html`<sd-3-2-0-divider part="divider" class="${cx("w-full transition-all absolute -top-[1px] left-0", this.calculatePaddingX())}"></sd-3-2-0-divider>` : ""} <span part="content-container" class="inline-flex items-center flex-auto"><slot part="content" class="inline"></slot></span>${(this.chevron || slots["children"]) && this.vertical ? html`<sd-3-2-0-icon name="chevron-down" part="chevron" library="system" color="currentColor" class="${cx(
       "h-6 w-6 ml-2 transition-all",
       isAccordion ? this.open ? "rotate-180" : "rotate-0" : "rotate-[270deg]"
-    )}"></sd-3-0-1-icon>` : ""} </span>${slots["description"] && this.vertical ? html`<slot name="description" part="description" class="${cx(
+    )}"></sd-3-2-0-icon>` : ""} </span>${slots["description"] && this.vertical ? html`<slot name="description" part="description" class="${cx(
       "inline-block text-sm text-left text-black",
       isAccordion ? "grow" : "w-full",
       horizontalPaddingBottom,
@@ -157,7 +157,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdNavigationItem.prototype, "open", 2);
 SdNavigationItem = __decorateClass([
-  customElement("sd-3-0-1-navigation-item")
+  customElement("sd-3-2-0-navigation-item")
 ], SdNavigationItem);
 export {
   SdNavigationItem as default

package/dist/versioned-package/components/notification/notification.d.ts

@@ -26,6 +26,6 @@ export default class SdNotification extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-3-0-1-notification': SdNotification;
+        'sd-3-2-0-notification': SdNotification;
     }
 }

package/dist/versioned-package/components/notification/notification.js

@@ -129,7 +129,7 @@ let SdNotification = class extends SolidElement {
         () => {
           toastStack.removeChild(this);
           resolve();
-          if (toastStack.querySelector("sd-3-0-1-notification") === null) {
+          if (toastStack.querySelector("sd-3-2-0-notification") === null) {
             toastStack.remove();
           }
         },
@@ -146,15 +146,15 @@ let SdNotification = class extends SolidElement {
         warning: "bg-warning",
         error: "bg-error"
       }[this.variant]
-    )}"><sd-3-0-1-icon name="${{
+    )}"><sd-3-2-0-icon name="${{
       info: "info-circle",
       success: "confirm-circle",
       warning: "exclamation-circle",
       error: "warning"
-    }[this.variant] || ""}" library="system" class="h-6 w-6 text-white"></sd-3-0-1-icon></slot><div part="content" class="${cx(
+    }[this.variant] || ""}" library="system" class="h-6 w-6 text-white"></sd-3-2-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 part="message" class="block w-full pl-3 py-2" aria-live="polite"></slot>${this.closable ? html`<sd-3-0-1-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" label="${this.localize.term("close")}" @click="${this.handleCloseClick}"><sd-3-0-1-icon name="close" library="system" color="currentColor"></sd-3-0-1-icon></sd-3-0-1-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 bg-neutral-400"></div>` : ""}</div>`;
+    )}"><slot part="message" class="block w-full pl-3 py-2" aria-live="polite"></slot>${this.closable ? html`<sd-3-2-0-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" label="${this.localize.term("close")}" @click="${this.handleCloseClick}"><sd-3-2-0-icon name="close" library="system" color="currentColor"></sd-3-2-0-icon></sd-3-2-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 bg-neutral-400"></div>` : ""}</div>`;
   }
 };
 SdNotification.styles = [
@@ -190,7 +190,7 @@ __decorateClass([
   watch("duration")
 ], SdNotification.prototype, "handleDurationChange", 1);
 SdNotification = __decorateClass([
-  customElement("sd-3-0-1-notification")
+  customElement("sd-3-2-0-notification")
 ], SdNotification);
 setDefaultAnimation("notification.show", {
   keyframes: [

package/dist/versioned-package/components/option/option.d.ts

@@ -25,6 +25,6 @@ export default class SdOption extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-3-0-1-option': SdOption;
+        'sd-3-2-0-option': SdOption;
     }
 }

package/dist/versioned-package/components/option/option.js

@@ -94,7 +94,7 @@ let SdOption = class extends SolidElement {
     )}"></span> ${this.checkbox ? html`<span id="control" part="control ${this.selected ? " control--checked" : "control--unchecked"}" class="${cx(
       "relative flex flex-initial 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-3-0-1-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-hook"></sd-3-0-1-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-3-2-0-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-hook"></sd-3-2-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>`;
   }
 };
 SdOption.styles = [
@@ -136,7 +136,7 @@ __decorateClass([
   watch("value")
 ], SdOption.prototype, "handleValueChange", 1);
 SdOption = __decorateClass([
-  customElement("sd-3-0-1-option")
+  customElement("sd-3-2-0-option")
 ], SdOption);
 export {
   SdOption as default

package/dist/versioned-package/components/popup/popup.d.ts

@@ -40,6 +40,6 @@ export default class SdPopup extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-3-0-1-popup': SdPopup;
+        'sd-3-2-0-popup': SdPopup;
     }
 }

package/dist/versioned-package/components/popup/popup.js

@@ -329,7 +329,7 @@ __decorateClass([
   property({ attribute: "auto-size-padding", type: Number })
 ], SdPopup.prototype, "autoSizePadding", 2);
 SdPopup = __decorateClass([
-  customElement("sd-3-0-1-popup")
+  customElement("sd-3-2-0-popup")
 ], SdPopup);
 export {
   SdPopup as default

package/dist/versioned-package/components/radio/radio.d.ts

@@ -22,6 +22,6 @@ export default class SdRadio extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-3-0-1-radio': SdRadio;
+        'sd-3-2-0-radio': SdRadio;
     }
 }

package/dist/versioned-package/components/radio/radio.js

@@ -73,7 +73,7 @@ let SdRadio = class extends SolidElement {
   }
   render() {
     return html`<span part="base" class="${cx(
-      "sd-3-0-1-radio group inline-flex items-start items-center text-base leading-normal text-black cursor-pointer align-middle",
+      "sd-3-2-0-radio group inline-flex items-start items-center text-base leading-normal text-black cursor-pointer align-middle",
       this.disabled && "hover:cursor-not-allowed",
       {
         /* sizes, fonts */
@@ -121,7 +121,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdRadio.prototype, "handleDisabledChange", 1);
 SdRadio = __decorateClass([
-  customElement("sd-3-0-1-radio")
+  customElement("sd-3-2-0-radio")
 ], SdRadio);
 export {
   SdRadio as default

package/dist/versioned-package/components/radio-button/radio-button.d.ts

@@ -20,6 +20,6 @@ export default class SdRadioButton extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-3-0-1-radio-button': SdRadioButton;
+        'sd-3-2-0-radio-button': SdRadioButton;
     }
 }

package/dist/versioned-package/components/radio-button/radio-button.js

@@ -84,7 +84,7 @@ let SdRadioButton = class extends SolidElement {
 SdRadioButton.styles = [
   SolidElement.styles,
   componentStyles,
-  css`:host{display:block;width:-moz-min-content;width:min-content}.hidden-input{all:unset;position:absolute;inset:var(--sd-spacing-0,0);z-index:-10;opacity:var(--sd-opacity-0,0);outline-style:dotted;outline-width:1px;outline-color:rgb(var(--sd-color-error,204 25 55) / 1)}.lg-label{height:var(--sd-spacing-12,3rem)}.lg-no-label{height:var(--sd-spacing-12,3rem);width:var(--sd-spacing-12,3rem)}.md-label{height:var(--sd-spacing-10,2.5rem)}.md-no-label{height:var(--sd-spacing-10,2.5rem);width:var(--sd-spacing-10,2.5rem)}.sm-label{height:var(--sd-spacing-8,2rem)}.sm-no-label{height:var(--sd-spacing-8,2rem);width:var(--sd-spacing-8,2rem)}:host(.sd-3-0-1-button-group__button--first:not(.sd-3-0-1-button-group__button--last)) button{border-top-right-radius:var(--sd-border-radius-none,0);border-bottom-right-radius:var(--sd-border-radius-none,0)}:host(.sd-3-0-1-button-group__button--inner) button{border-radius:var(--sd-border-radius-none,0)}:host(.sd-3-0-1-button-group__button--last:not(.sd-3-0-1-button-group__button--first)) button{border-top-left-radius:var(--sd-border-radius-none,0);border-bottom-left-radius:var(--sd-border-radius-none,0)}:host(.sd-3-0-1-button-group__button:not(.sd-3-0-1-button-group__button--first)){margin-inline-start:-1px}:host(.sd-3-0-1-button-group__button--hover){z-index:10}:host(.sd-3-0-1-button-group__button--focus),:host(.sd-3-0-1-button-group__button[checked]){z-index:20}`
+  css`:host{display:block;width:-moz-min-content;width:min-content}.hidden-input{all:unset;position:absolute;inset:var(--sd-spacing-0,0);z-index:-10;opacity:var(--sd-opacity-0,0);outline-style:dotted;outline-width:1px;outline-color:rgb(var(--sd-color-error,204 25 55) / 1)}.lg-label{height:var(--sd-spacing-12,3rem)}.lg-no-label{height:var(--sd-spacing-12,3rem);width:var(--sd-spacing-12,3rem)}.md-label{height:var(--sd-spacing-10,2.5rem)}.md-no-label{height:var(--sd-spacing-10,2.5rem);width:var(--sd-spacing-10,2.5rem)}.sm-label{height:var(--sd-spacing-8,2rem)}.sm-no-label{height:var(--sd-spacing-8,2rem);width:var(--sd-spacing-8,2rem)}:host(.sd-3-2-0-button-group__button--first:not(.sd-3-2-0-button-group__button--last)) button{border-top-right-radius:var(--sd-border-radius-none,0);border-bottom-right-radius:var(--sd-border-radius-none,0)}:host(.sd-3-2-0-button-group__button--inner) button{border-radius:var(--sd-border-radius-none,0)}:host(.sd-3-2-0-button-group__button--last:not(.sd-3-2-0-button-group__button--first)) button{border-top-left-radius:var(--sd-border-radius-none,0);border-bottom-left-radius:var(--sd-border-radius-none,0)}:host(.sd-3-2-0-button-group__button:not(.sd-3-2-0-button-group__button--first)){margin-inline-start:-1px}:host(.sd-3-2-0-button-group__button--hover){z-index:10}:host(.sd-3-2-0-button-group__button--focus),:host(.sd-3-2-0-button-group__button[checked]){z-index:20}`
 ];
 __decorateClass([
   query(".button")
@@ -111,7 +111,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdRadioButton.prototype, "handleDisabledChange", 1);
 SdRadioButton = __decorateClass([
-  customElement("sd-3-0-1-radio-button")
+  customElement("sd-3-2-0-radio-button")
 ], SdRadioButton);
 export {
   SdRadioButton as default

package/dist/versioned-package/components/radio-group/radio-group.d.ts

@@ -4,7 +4,7 @@ import SolidElement from '../../internal/solid-element';
 import type { SolidFormControl } from '../../internal/solid-element';
 export default class SdRadioGroup extends SolidElement implements SolidFormControl {
     static dependencies: {
-        'sd-3-0-1-button-group': typeof SdButtonGroup;
+        'sd-3-2-0-button-group': typeof SdButtonGroup;
     };
     protected readonly formControlController: FormControlController;
     private readonly hasSlotController;
@@ -48,6 +48,6 @@ export default class SdRadioGroup extends SolidElement implements SolidFormContr
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-3-0-1-radio-group': SdRadioGroup;
+        'sd-3-2-0-radio-group': SdRadioGroup;
     }
 }

package/dist/versioned-package/components/radio-group/radio-group.js

@@ -68,10 +68,10 @@ let SdRadioGroup = class extends SolidElement {
     this.formControlController.updateValidity();
   }
   getAllRadios() {
-    return [...this.querySelectorAll("sd-3-0-1-radio, sd-3-0-1-radio-button")];
+    return [...this.querySelectorAll("sd-3-2-0-radio, sd-3-2-0-radio-button")];
   }
   handleRadioClick(event) {
-    const target = event.target.closest("sd-3-0-1-radio, sd-3-0-1-radio-button");
+    const target = event.target.closest("sd-3-2-0-radio, sd-3-2-0-radio-button");
     const radios = this.getAllRadios();
     const oldValue = this.value;
     if (target.disabled) {
@@ -147,7 +147,7 @@ let SdRadioGroup = class extends SolidElement {
         }
       })
     );
-    this.hasButtonGroup = radios.some((radio) => radio.tagName.toLowerCase() === "sd-3-0-1-radio-button");
+    this.hasButtonGroup = radios.some((radio) => radio.tagName.toLowerCase() === "sd-3-2-0-radio-button");
     if (!radios.some((radio) => radio.checked)) {
       if (this.hasButtonGroup) {
         const buttonRadio = (_a = radios[0].shadowRoot) == null ? void 0 : _a.querySelector("button");
@@ -159,26 +159,26 @@ let SdRadioGroup = class extends SolidElement {
       }
     }
     if (this.hasButtonGroup) {
-      const buttonGroup = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector("sd-3-0-1-button-group");
+      const buttonGroup = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector("sd-3-2-0-button-group");
       if (buttonGroup) {
         buttonGroup.disableRole = true;
       }
     }
   }
   syncRadios() {
-    if (customElements.get("sd-3-0-1-radio") && customElements.get("sd-3-0-1-radio-button")) {
+    if (customElements.get("sd-3-2-0-radio") && customElements.get("sd-3-2-0-radio-button")) {
       this.syncRadioElements();
       return;
     }
-    if (customElements.get("sd-3-0-1-radio")) {
+    if (customElements.get("sd-3-2-0-radio")) {
       this.syncRadioElements();
     } else {
-      customElements.whenDefined("sd-3-0-1-radio").then(() => this.syncRadios());
+      customElements.whenDefined("sd-3-2-0-radio").then(() => this.syncRadios());
     }
-    if (customElements.get("sd-3-0-1-radio-button")) {
+    if (customElements.get("sd-3-2-0-radio-button")) {
       this.syncRadioElements();
     } else {
-      customElements.whenDefined("sd-3-0-1-radio-button").then(() => this.syncRadios());
+      customElements.whenDefined("sd-3-2-0-radio-button").then(() => this.syncRadios());
     }
   }
   updateCheckedRadio() {
@@ -253,14 +253,14 @@ let SdRadioGroup = class extends SolidElement {
         vertical: "flex-col",
         horizontal: "flex-row"
       }[this.orientation]
-    )}"><div class="sr-only"><label><input id="validation-input" type="text" ?required="${this.required}" tabindex="-1" hidden @invalid="${this.handleInvalid}"></label></div>${this.hasButtonGroup ? html`<sd-3-0-1-button-group part="button-group" exportparts="base:button-group__base" role="presentation">${defaultSlot}</sd-3-0-1-button-group>` : defaultSlot}</div></fieldset>${this.formControlController.renderInvalidMessage()}`;
+    )}"><div class="sr-only"><label><input id="validation-input" type="text" ?required="${this.required}" tabindex="-1" hidden @invalid="${this.handleInvalid}"></label></div>${this.hasButtonGroup ? html`<sd-3-2-0-button-group part="button-group" exportparts="base:button-group__base" role="presentation">${defaultSlot}</sd-3-2-0-button-group>` : defaultSlot}</div></fieldset>${this.formControlController.renderInvalidMessage()}`;
   }
 };
-SdRadioGroup.dependencies = { "sd-3-0-1-button-group": SdButtonGroup };
+SdRadioGroup.dependencies = { "sd-3-2-0-button-group": SdButtonGroup };
 SdRadioGroup.styles = [
   componentStyles,
   SolidElement.styles,
-  css`:host{display:block}:host([orientation=vertical]) ::slotted(sd-3-0-1-radio){margin-bottom:var(--sd-spacing-2,.5rem);display:flex}:host([orientation=vertical]) ::slotted(sd-3-0-1-radio:last-of-type){margin-bottom:var(--sd-spacing-0,0)}:host([orientation=horizontal]) ::slotted(sd-3-0-1-radio){margin-right:var(--sd-spacing-6,1.5rem)}:host([orientation=horizontal]) ::slotted(sd-3-0-1-radio:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-3-0-1-radio){margin-right:var(--sd-spacing-4,1rem)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-3-0-1-radio:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([required]) #label::after{content:' *'}`
+  css`:host{display:block}:host([orientation=vertical]) ::slotted(sd-3-2-0-radio){margin-bottom:var(--sd-spacing-2,.5rem);display:flex}:host([orientation=vertical]) ::slotted(sd-3-2-0-radio:last-of-type){margin-bottom:var(--sd-spacing-0,0)}:host([orientation=horizontal]) ::slotted(sd-3-2-0-radio){margin-right:var(--sd-spacing-6,1.5rem)}:host([orientation=horizontal]) ::slotted(sd-3-2-0-radio:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-3-2-0-radio){margin-right:var(--sd-spacing-4,1rem)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-3-2-0-radio:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([required]) #label::after{content:' *'}`
 ];
 __decorateClass([
   query("slot:not([name])")
@@ -314,7 +314,7 @@ __decorateClass([
   watch("value")
 ], SdRadioGroup.prototype, "handleValueChange", 1);
 SdRadioGroup = __decorateClass([
-  customElement("sd-3-0-1-radio-group")
+  customElement("sd-3-2-0-radio-group")
 ], SdRadioGroup);
 export {
   SdRadioGroup as default

package/dist/versioned-package/components/select/select.d.ts

@@ -7,9 +7,9 @@ import type { TemplateResult } from 'lit';
 import type SdOption from '../option/option';
 export default class SdSelect extends SolidElement implements SolidFormControl {
     static dependencies: {
-        'sd-3-0-1-icon': typeof SdIcon;
-        'sd-3-0-1-popup': typeof SdPopup;
-        'sd-3-0-1-tag': typeof SdTag;
+        'sd-3-2-0-icon': typeof SdIcon;
+        'sd-3-2-0-popup': typeof SdPopup;
+        'sd-3-2-0-tag': typeof SdTag;
     };
     private readonly formControlController;
     private readonly hasSlotController;
@@ -97,6 +97,6 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-3-0-1-select': SdSelect;
+        'sd-3-2-0-select': SdSelect;
     }
 }

package/dist/versioned-package/components/select/select.js

@@ -32,7 +32,7 @@ let SdSelect = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.formControlController = new FormControlController(this, {
-      assumeInteractionOn: ["sd-blur", "sd-3-0-1-input"]
+      assumeInteractionOn: ["sd-blur", "sd-3-2-0-input"]
     });
     this.hasSlotController = new HasSlotController(this, "help-text", "label");
     this.localize = new LocalizeController(this);
@@ -63,11 +63,11 @@ let SdSelect = class extends SolidElement {
     this.styleOnValid = false;
     this.hoist = false;
     this.getTag = (option) => {
-      return html`<sd-3-0-1-tag ?disabled="${this.disabled}" part="tag" exportparts="
+      return html`<sd-3-2-0-tag ?disabled="${this.disabled}" part="tag" exportparts="
               base:tag__base,
               content:tag__content,
               removable-indicator:tag__removable-indicator,
-            " size="${this.size === "sm" ? "sm" : "lg"}" removable @sd-remove="${(event) => this.handleTagRemove(event, option)}">${option.getTextLabel()}</sd-3-0-1-tag>`;
+            " size="${this.size === "sm" ? "sm" : "lg"}" removable @sd-remove="${(event) => this.handleTagRemove(event, option)}">${option.getTextLabel()}</sd-3-2-0-tag>`;
     };
     this.handleDocumentFocusIn = (event) => {
       const path = event.composedPath();
@@ -78,7 +78,7 @@ let SdSelect = class extends SolidElement {
     this.handleDocumentKeyDown = (event) => {
       const target = event.target;
       const isClearButton = target.closest(".select__clear") !== null;
-      const isIconButton = target.closest("sd-3-0-1-icon-button") !== null;
+      const isIconButton = target.closest("sd-3-2-0-icon-button") !== null;
       if (isClearButton || isIconButton) {
         return;
       }
@@ -241,7 +241,7 @@ let SdSelect = class extends SolidElement {
   }
   handleOptionClick(event) {
     const target = event.target;
-    const option = target.closest("sd-3-0-1-option");
+    const option = target.closest("sd-3-2-0-option");
     const oldValue = this.value;
     if (option && !option.disabled) {
       if (this.multiple) {
@@ -266,7 +266,7 @@ let SdSelect = class extends SolidElement {
     const allOptions = this.getAllOptions();
     const value = Array.isArray(this.value) ? this.value : [this.value];
     const values = [];
-    if (customElements.get("sd-3-0-1-option")) {
+    if (customElements.get("sd-3-2-0-option")) {
       allOptions.forEach((option) => {
         if (this.multiple) {
           option.checkbox = true;
@@ -275,7 +275,7 @@ let SdSelect = class extends SolidElement {
       });
       this.setSelectedOptions(allOptions.filter((el) => value.includes(el.value)));
     } else {
-      customElements.whenDefined("sd-3-0-1-option").then(() => this.handleDefaultSlotChange());
+      customElements.whenDefined("sd-3-2-0-option").then(() => this.handleDefaultSlotChange());
     }
   }
   handleTagRemove(event, option) {
@@ -288,13 +288,13 @@ let SdSelect = class extends SolidElement {
       });
     }
   }
-  // Gets an array of all <sd-3-0-1-option> elements
+  // Gets an array of all <sd-3-2-0-option> elements
   getAllOptions() {
-    return [...this.querySelectorAll("sd-3-0-1-option")];
+    return [...this.querySelectorAll("sd-3-2-0-option")];
   }
-  // Gets the first <sd-3-0-1-option> element
+  // Gets the first <sd-3-2-0-option> element
   getFirstOption() {
-    return this.querySelector("sd-3-0-1-option");
+    return this.querySelector("sd-3-2-0-option");
   }
   // Sets the current option, which is the option the user is currently interacting with (e.g. via keyboard). Only one
   // option may be "current" at a time.
@@ -356,7 +356,7 @@ let SdSelect = class extends SolidElement {
         const tag = this.getTag(option, index);
         return html`<div @sd-remove="${(e) => this.handleTagRemove(e, option)}">${typeof tag === "string" ? unsafeHTML(tag) : tag}</div>`;
       } else if (index === this.maxOptionsVisible) {
-        return html`<sd-3-0-1-tag size="${this.size === "sm" ? "sm" : "lg"}" ?disabled="${this.disabled}">+${this.selectedOptions.length - index}</sd-3-0-1-tag>`;
+        return html`<sd-3-2-0-tag size="${this.size === "sm" ? "sm" : "lg"}" ?disabled="${this.disabled}">+${this.selectedOptions.length - index}</sd-3-2-0-tag>`;
       }
       return html``;
     });
@@ -372,7 +372,7 @@ let SdSelect = class extends SolidElement {
   handleMouseLeave() {
     this.hasHover = false;
   }
-  /** Receives incoming event detail from sd-3-0-1-popup and updates local state for conditional styling. */
+  /** Receives incoming event detail from sd-3-2-0-popup and updates local state for conditional styling. */
   handleCurrentPlacement(e) {
     const incomingPlacement = e.detail;
     if (incomingPlacement) {
@@ -381,7 +381,7 @@ let SdSelect = class extends SolidElement {
   }
   handleUseTagsChange() {
     const allOptions = this.getAllOptions();
-    if (customElements.get("sd-3-0-1-option")) {
+    if (customElements.get("sd-3-2-0-option")) {
       allOptions.forEach((option) => {
         option.checkbox = this.multiple;
       });
@@ -526,7 +526,7 @@ let SdSelect = class extends SolidElement {
         default: "border-neutral-800"
       }[selectState],
       this.open && (this.currentPlacement === "bottom" ? "rounded-bl-none rounded-br-none" : "rounded-tl-none rounded-tr-none")
-    )}"></div><sd-3-0-1-popup @sd-current-placement="${this.handleCurrentPlacement}" class="${cx(
+    )}"></div><sd-3-2-0-popup @sd-current-placement="${this.handleCurrentPlacement}" class="${cx(
       "inline-flex relative w-full",
       this.currentPlacement === "bottom" ? "origin-top" : "origin-bottom"
     )}" placement="${this.placement}" strategy="${this.hoist ? "fixed" : "absolute"}" flip shift sync="width" auto-size="vertical" auto-size-padding="10" exportparts="
@@ -543,33 +543,33 @@ let SdSelect = class extends SolidElement {
       "appearance-none outline-none flex-grow bg-transparent w-full",
       cursorStyles,
       this.multiple && this.useTags && this.value.length > 0 ? "hidden" : ""
-    )}" type="text" placeholder="${this.placeholder}" .disabled="${this.disabled}" .value="${this.displayLabel}" autocomplete="off" spellcheck="false" autocapitalize="off" readonly="readonly" aria-controls="listbox" aria-expanded="${this.open ? "true" : "false"}" aria-haspopup="listbox" aria-labelledby="label" aria-disabled="${this.disabled ? "true" : "false"}" aria-describedby="help-text" role="combobox" tabindex="0" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${this.multiple && this.useTags ? html`<div part="tags" class="flex-grow flex flex-wrap items-center gap-1">${this.tags}</div>` : ""} <input class="${cx("value-input absolute top-0 left-0 w-full h-full opacity-0 -z-10", cursorStyles)}" type="text" ?disabled="${this.disabled}" ?required="${this.required}" .value="${Array.isArray(this.value) ? this.value.join(", ") : this.value}" tabindex="-1" aria-hidden="true" @focus="${() => this.focus()}" @invalid="${this.handleInvalid}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("select__clear flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @mousedown="${this.handleClearMouseDown}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-3-0-1-icon class="${cx("text-neutral-500", iconSize)}" library="system" name="closing-round"></sd-3-0-1-icon></slot></button>` : ""} ${this.showInvalidStyle ? html`<sd-3-0-1-icon part="invalid-icon" class="${cx(iconMarginLeft, iconSize)}" library="system" name="risk"></sd-3-0-1-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-3-0-1-icon part="valid-icon" class="${cx("flex-shrink-0", iconMarginLeft, iconSize)}" library="system" name="confirm"></sd-3-0-1-icon>` : ""}<slot name="expand-icon" part="expand-icon" class="${cx(
+    )}" type="text" placeholder="${this.placeholder}" .disabled="${this.disabled}" .value="${this.displayLabel}" autocomplete="off" spellcheck="false" autocapitalize="off" readonly="readonly" aria-controls="listbox" aria-expanded="${this.open ? "true" : "false"}" aria-haspopup="listbox" aria-labelledby="label" aria-disabled="${this.disabled ? "true" : "false"}" aria-describedby="help-text" role="combobox" tabindex="0" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${this.multiple && this.useTags ? html`<div part="tags" class="flex-grow flex flex-wrap items-center gap-1">${this.tags}</div>` : ""} <input class="${cx("value-input absolute top-0 left-0 w-full h-full opacity-0 -z-10", cursorStyles)}" type="text" ?disabled="${this.disabled}" ?required="${this.required}" .value="${Array.isArray(this.value) ? this.value.join(", ") : this.value}" tabindex="-1" aria-hidden="true" @focus="${() => this.focus()}" @invalid="${this.handleInvalid}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("select__clear flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @mousedown="${this.handleClearMouseDown}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-3-2-0-icon class="${cx("text-neutral-500", iconSize)}" library="system" name="closing-round"></sd-3-2-0-icon></slot></button>` : ""} ${this.showInvalidStyle ? html`<sd-3-2-0-icon part="invalid-icon" class="${cx(iconMarginLeft, iconSize)}" library="system" name="risk"></sd-3-2-0-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-3-2-0-icon part="valid-icon" class="${cx("flex-shrink-0", iconMarginLeft, iconSize)}" library="system" name="confirm"></sd-3-2-0-icon>` : ""}<slot name="expand-icon" part="expand-icon" class="${cx(
       "inline-flex ml-2 transition-all",
       this.open ? "rotate-180" : "rotate-0",
       this.disabled ? "text-neutral-500" : "text-primary",
       iconSize
-    )}"><sd-3-0-1-icon name="chevron-down" part="chevron" library="system" color="currentColor"></sd-3-0-1-icon></slot></div><div id="listbox" role="listbox" aria-expanded="${this.open ? "true" : "false"}" aria-multiselectable="${this.multiple ? "true" : "false"}" aria-labelledby="label" part="listbox" class="${cx(
+    )}"><sd-3-2-0-icon name="chevron-down" part="chevron" library="system" color="currentColor"></sd-3-2-0-icon></slot></div><div id="listbox" role="listbox" aria-expanded="${this.open ? "true" : "false"}" aria-multiselectable="${this.multiple ? "true" : "false"}" aria-labelledby="label" part="listbox" class="${cx(
       "bg-white px-2 py-3 relative border-primary",
       this.open && "shadow",
       this.currentPlacement === "bottom" ? "border-r-2 border-b-2 border-l-2 rounded-br-default rounded-bl-default" : "border-r-2 border-t-2 border-l-2 rounded-tr-default rounded-tl-default"
-    )}" tabindex="-1" @mouseup="${this.handleOptionClick}" @slotchange="${this.handleDefaultSlotChange}"><slot></slot></div></sd-3-0-1-popup></div><div class="text-sm text-neutral-700" part="form-control-help-text" id="help-text" aria-hidden="${hasHelpText ? "false" : "true"}"><slot name="help-text">${this.helpText}</slot></div></div>${this.formControlController.renderInvalidMessage()}`;
+    )}" tabindex="-1" @mouseup="${this.handleOptionClick}" @slotchange="${this.handleDefaultSlotChange}"><slot></slot></div></sd-3-2-0-popup></div><div class="text-sm text-neutral-700" part="form-control-help-text" id="help-text" aria-hidden="${hasHelpText ? "false" : "true"}"><slot name="help-text">${this.helpText}</slot></div></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 SdSelect.dependencies = {
-  "sd-3-0-1-icon": SdIcon,
-  "sd-3-0-1-popup": SdPopup,
-  "sd-3-0-1-tag": SdTag
+  "sd-3-2-0-icon": SdIcon,
+  "sd-3-2-0-popup": SdPopup,
+  "sd-3-2-0-tag": SdTag
 };
 SdSelect.styles = [
   componentStyles,
   SolidElement.styles,
-  css`:host{position:relative;display:block;width:100%}:host([required]) #label::after{content:' *'}sd-3-0-1-popup::part(popup){z-index:var(--sd-z-index-dropdown,900);overflow-y:scroll}sd-3-0-1-tag::part(base){border-radius:var(--sd-border-radius-default,.25rem);padding-left:var(--sd-spacing-1,.25rem);padding-right:var(--sd-spacing-1,.25rem)}sd-3-0-1-tag[size=lg]::part(base){padding-left:var(--sd-spacing-2,.5rem);padding-right:var(--sd-spacing-2,.5rem)}sd-3-0-1-tag[disabled=false]::part(base):hover{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-primary-100,236 240 249) / var(--tw-bg-opacity))}`
+  css`:host{position:relative;display:block;width:100%}:host([required]) #label::after{content:' *'}sd-3-2-0-popup::part(popup){z-index:var(--sd-z-index-dropdown,900);overflow-y:scroll}sd-3-2-0-tag::part(base){border-radius:var(--sd-border-radius-default,.25rem);padding-left:var(--sd-spacing-1,.25rem);padding-right:var(--sd-spacing-1,.25rem)}sd-3-2-0-tag[size=lg]::part(base){padding-left:var(--sd-spacing-2,.5rem);padding-right:var(--sd-spacing-2,.5rem)}sd-3-2-0-tag[disabled=false]::part(base):hover{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-primary-100,236 240 249) / var(--tw-bg-opacity))}`
 ];
 __decorateClass([
-  queryAssignedElements({ selector: "sd-3-0-1-option" })
+  queryAssignedElements({ selector: "sd-3-2-0-option" })
 ], SdSelect.prototype, "_optionsInDefaultSlot", 2);
 __decorateClass([
-  query("sd-3-0-1-popup")
+  query("sd-3-2-0-popup")
 ], SdSelect.prototype, "popup", 2);
 __decorateClass([
   query('[part="combobox"]')
@@ -688,7 +688,7 @@ __decorateClass([
   watch("value", { waitUntilFirstUpdate: true })
 ], SdSelect.prototype, "handleValueChange", 1);
 SdSelect = __decorateClass([
-  customElement("sd-3-0-1-select")
+  customElement("sd-3-2-0-select")
 ], SdSelect);
 setDefaultAnimation("select.show", {
   keyframes: [