@solid-design-system/components 4.1.3 → 4.2.1

package/dist-versioned/chunks/{chunk.A5S7GZJI.js → chunk.UWKWJ6WX.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -33,6 +33,7 @@ var SdCheckbox = class extends SolidElement {
     this.name = "";
     this.size = "lg";
     this.disabled = false;
+    this.visuallyDisabled = false;
     this.checked = false;
     this.indeterminate = false;
     this.defaultChecked = false;
@@ -47,7 +48,12 @@ var SdCheckbox = class extends SolidElement {
   firstUpdated() {
     this.formControlController.updateValidity();
   }
-  handleClick() {
+  handleClick(event) {
+    if (this.visuallyDisabled) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
     this.checked = !this.checked;
     this.indeterminate = false;
     this.emit("sd-change");
@@ -67,8 +73,9 @@ var SdCheckbox = class extends SolidElement {
     this.emit("sd-focus");
   }
   handleDisabledChange() {
-    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
-    this.formControlController.setValidity(this.disabled);
+    const isDisabled = this.disabled || this.visuallyDisabled;
+    this.setAttribute("aria-disabled", isDisabled ? "true" : "false");
+    this.formControlController.setValidity(isDisabled);
   }
   handleStateChange() {
     this.input.checked = this.checked;
@@ -109,20 +116,19 @@ var SdCheckbox = class extends SolidElement {
     this.formControlController.updateValidity();
   }
   render() {
-    const checkboxState = this.disabled && this.indeterminate ? "disabledIndeterminate" : this.disabled && this.checked ? "disabledChecked" : this.disabled ? "disabled" : this.showInvalidStyle && this.indeterminate ? "invalidIndeterminate" : this.showInvalidStyle ? "invalid" : this.checked || this.indeterminate ? "filled" : "default";
+    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-1-3-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
-      this.disabled && "hover:cursor-not-allowed",
+      "sd-4-2-1-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
+      (this.disabled || this.visuallyDisabled) && "hover:cursor-not-allowed",
       {
         /* sizes, fonts */
         sm: "text-sm",
         md: "text-base",
         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.checked ? "true" : "false"}" aria-describedby="invalid-message" aria-invalid="${this.showInvalidStyle}" @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
-            peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2
-            peer-focus-visible:outline-primary`,
+    )}"><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.checked ? "true" : "false"}" 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" : "",
       {
         sm: "mt-[2px]",
         md: "mt-[3px]",
@@ -132,14 +138,15 @@ var SdCheckbox = class extends SolidElement {
         disabledIndeterminate: "border-neutral-500 bg-neutral-500",
         disabledChecked: "border-neutral-500 bg-neutral-500",
         disabled: "border-neutral-500",
+        visuallyDisabled: "border-neutral-500",
         invalidIndeterminate: "border-error bg-error group-hover:bg-error-400",
         invalid: "border-error group-hover:bg-neutral-200",
         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-1-3-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-check"></sd-4-1-3-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-4-1-3-icon part="indeterminate-icon" class="text-white w-3 h-3" library="system" name="status-minus"></sd-4-1-3-icon>` : ""} </span><span part="label" id="label" class="${cx(
+    )}">${this.checked ? html`<sd-4-2-1-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-check"></sd-4-2-1-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-4-2-1-icon part="indeterminate-icon" class="text-white w-3 h-3" library="system" name="status-minus"></sd-4-2-1-icon>` : ""} </span><span part="label" id="label" class="${cx(
       "select-none inline-block ml-2",
-      this.disabled ? "text-neutral-500" : this.showInvalidStyle ? "text-error" : "text-black"
+      this.disabled || this.visuallyDisabled ? "text-neutral-500" : this.showInvalidStyle ? "text-error" : "text-black"
     )}"><slot></slot></span></label> ${this.formControlController.renderInvalidMessage()}`;
   }
 };
@@ -171,6 +178,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdCheckbox.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "visually-disabled" })
+], SdCheckbox.prototype, "visuallyDisabled", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdCheckbox.prototype, "checked", 2);
@@ -190,13 +200,13 @@ __decorateClass([
   state()
 ], SdCheckbox.prototype, "showInvalidStyle", 2);
 __decorateClass([
-  watch("disabled", { waitUntilFirstUpdate: true })
+  watch(["disabled", "visually-disabled"], { waitUntilFirstUpdate: true })
 ], SdCheckbox.prototype, "handleDisabledChange", 1);
 __decorateClass([
   watch(["checked", "indeterminate"], { waitUntilFirstUpdate: true })
 ], SdCheckbox.prototype, "handleStateChange", 1);
 SdCheckbox = __decorateClass([
-  customElement("sd-4-1-3-checkbox")
+  customElement("sd-4-2-1-checkbox")
 ], SdCheckbox);
 
 export {

package/dist-versioned/chunks/{chunk.OBWOMZNU.js → chunk.V27Y42MG.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -22,6 +22,7 @@ var SdLink = class extends SolidElement {
     this.size = "inherit";
     this.inverted = false;
     this.href = "";
+    this.visuallyDisabled = false;
   }
   handleBlur() {
     this.emit("sd-blur");
@@ -29,6 +30,12 @@ var SdLink = class extends SolidElement {
   handleFocus() {
     this.emit("sd-focus");
   }
+  handleClick(e) {
+    if (this.visuallyDisabled) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }
   /** Sets focus on the button. */
   focus(options) {
     this.button.focus(options);
@@ -45,7 +52,8 @@ var SdLink = class extends SolidElement {
     };
     return html`<a part="base" class="${cx(
       "inline",
-      this.href ? "cursor-pointer" : "",
+      this.href && !this.visuallyDisabled ? "cursor-pointer" : "",
+      this.visuallyDisabled ? "cursor-not-allowed focus-visible:outline-none" : "",
       {
         sm: "text-sm",
         lg: "text-base",
@@ -53,10 +61,11 @@ var SdLink = class extends SolidElement {
       }[this.size],
       {
         disabled: !this.inverted ? "text-neutral-500" : "text-neutral-600",
-        enabled: !this.inverted ? ` text-primary hover:text-primary-500 active:text-primary-800 focus-visible:focus-outline` : `text-white hover:text-primary-200 active:text-primary-400 focus-visible:focus-outline-inverted`
-      }[this.href ? "enabled" : "disabled"],
+        enabled: !this.inverted ? ` text-primary hover:text-primary-500 active:text-primary-800 focus-visible:focus-outline` : `text-white hover:text-primary-200 active:text-primary-400 focus-visible:focus-outline-inverted`,
+        visuallyDisabled: !this.inverted ? "text-neutral-500" : "text-neutral-600"
+      }[this.href && !this.visuallyDisabled ? "enabled" : this.visuallyDisabled ? "visuallyDisabled" : "disabled"],
       this.standalone && "flex items-start"
-    )}" href="${ifDefined(this.href || void 0)}" target="${ifDefined(this.target || void 0)}" download="${ifDefined(this.download)}" rel="${ifDefined(this.target ? "noreferrer noopener" : void 0)}" aria-disabled="${!this.href ? "true" : "false"}" tabindex="${!this.href ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}"><slot name="icon-left" part="icon-left" class="${cx(
+    )}" href="${ifDefined(this.href || void 0)}" target="${ifDefined(this.target || void 0)}" download="${ifDefined(this.download)}" rel="${ifDefined(this.target ? "noreferrer noopener" : void 0)}" aria-disabled="${!this.href || this.visuallyDisabled ? "true" : "false"}" tabindex="${!this.href ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @click="${this.handleClick}"><slot name="icon-left" part="icon-left" class="${cx(
       "inline",
       slots["icon-left"] && (!this.standalone ? "mr-[0.25em]" : {
         sm: "mr-1",
@@ -75,7 +84,7 @@ var SdLink = class extends SolidElement {
 };
 SdLink.styles = [
   ...SolidElement.styles,
-  css`::slotted(sd-4-1-3-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-4-1-3-icon){font-size:var(--sd-font-size-base,1rem)}:host([size=lg][standalone]) ::slotted(sd-4-1-3-icon){font-size:var(--sd-font-size-xl,1.5rem)}`
+  css`::slotted(sd-4-2-1-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-4-2-1-icon){font-size:var(--sd-font-size-base,1rem)}:host([size=lg][standalone]) ::slotted(sd-4-2-1-icon){font-size:var(--sd-font-size-xl,1.5rem)}`
 ];
 __decorateClass([
   query("a")
@@ -92,6 +101,9 @@ __decorateClass([
 __decorateClass([
   property()
 ], SdLink.prototype, "href", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "visually-disabled" })
+], SdLink.prototype, "visuallyDisabled", 2);
 __decorateClass([
   property()
 ], SdLink.prototype, "target", 2);
@@ -99,7 +111,7 @@ __decorateClass([
   property()
 ], SdLink.prototype, "download", 2);
 SdLink = __decorateClass([
-  customElement("sd-4-1-3-link")
+  customElement("sd-4-2-1-link")
 ], SdLink);
 
 export {

package/dist-versioned/chunks/{chunk.OZU372TI.js → chunk.VAA7NUXP.js}

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

package/dist-versioned/chunks/{chunk.QTFIZJGB.js → chunk.VYPTEJCW.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -54,7 +54,7 @@ var SdStepGroup = class extends SolidElement {
     });
   }
   getAllSteps() {
-    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-4-1-3-step");
+    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-4-2-1-step");
   }
   /**
    * Sets the active step.
@@ -116,7 +116,7 @@ __decorateClass([
   watch("notInteractive")
 ], SdStepGroup.prototype, "handleInteractivityChange", 1);
 SdStepGroup = __decorateClass([
-  customElement("sd-4-1-3-step-group")
+  customElement("sd-4-2-1-step-group")
 ], SdStepGroup);
 
 export {

package/dist-versioned/chunks/{chunk.H5BDO4H5.js → chunk.WZK6B3UV.js}

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

package/dist-versioned/chunks/{chunk.PT7MDSWH.js → chunk.X27M4U7I.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -90,7 +90,7 @@ __decorateClass([
   debounce(100)
 ], SdHeader.prototype, "onResize", 1);
 SdHeader = __decorateClass([
-  customElement("sd-4-1-3-header")
+  customElement("sd-4-2-1-header")
 ], SdHeader);
 
 export {

package/dist-versioned/chunks/{chunk.XL2PSGM5.js → chunk.XS43N4DL.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -21,7 +21,7 @@ var SdTab = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.attrId = ++id;
-    this.componentId = `sd-4-1-3-tab-${this.attrId}`;
+    this.componentId = `sd-4-2-1-tab-${this.attrId}`;
     this.hasSlotController = new HasSlotController(this, "left");
     this.variant = "default";
     this.active = false;
@@ -91,7 +91,7 @@ __decorateClass([
   watch("disabled")
 ], SdTab.prototype, "handleDisabledChange", 1);
 SdTab = __decorateClass([
-  customElement("sd-4-1-3-tab")
+  customElement("sd-4-2-1-tab")
 ], SdTab);
 
 export {

package/dist-versioned/chunks/{chunk.LZA2QYUU.js → chunk.YHVAW367.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -208,7 +208,7 @@ __decorateClass([
   watch("playbackRate")
 ], SdAnimation.prototype, "handlePlaybackRateChange", 1);
 SdAnimation = __decorateClass([
-  customElement("sd-4-1-3-animation")
+  customElement("sd-4-2-1-animation")
 ], SdAnimation);
 
 export {

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

@@ -21,6 +21,6 @@ export default class SdAccordion extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-4-1-3-accordion': SdAccordion;
+        'sd-4-2-1-accordion': SdAccordion;
     }
 }

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

@@ -1,8 +1,8 @@
 import {
   SdAccordion
-} from "../../chunks/chunk.FFKZQXJ2.js";
+} from "../../chunks/chunk.MPC4NJ7T.js";
 import "../../chunks/chunk.N4LHE3QK.js";
-import "../../chunks/chunk.UZKLVMCI.js";
+import "../../chunks/chunk.33QCSKQD.js";
 import "../../chunks/chunk.7WEXXSFH.js";
 import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";
@@ -15,7 +15,7 @@ import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.ZXR3YX6W.js";
 import "../../chunks/chunk.EJ6ZLEEW.js";
-import "../../chunks/chunk.HFHUY7YD.js";
+import "../../chunks/chunk.M4CPDAKC.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   SdAccordion as default

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

@@ -11,6 +11,6 @@ export default class SdAccordionGroup extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-4-1-3-accordion-group': SdAccordionGroup;
+        'sd-4-2-1-accordion-group': SdAccordionGroup;
     }
 }

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

@@ -1,9 +1,9 @@
 import {
   SdAccordionGroup
-} from "../../chunks/chunk.EH2FHVPN.js";
-import "../../chunks/chunk.FFKZQXJ2.js";
+} from "../../chunks/chunk.GEIIXN6O.js";
+import "../../chunks/chunk.MPC4NJ7T.js";
 import "../../chunks/chunk.N4LHE3QK.js";
-import "../../chunks/chunk.UZKLVMCI.js";
+import "../../chunks/chunk.33QCSKQD.js";
 import "../../chunks/chunk.7WEXXSFH.js";
 import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";
@@ -16,7 +16,7 @@ import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.ZXR3YX6W.js";
 import "../../chunks/chunk.EJ6ZLEEW.js";
-import "../../chunks/chunk.HFHUY7YD.js";
+import "../../chunks/chunk.M4CPDAKC.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   SdAccordionGroup as default

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

@@ -34,6 +34,6 @@ export default class SdAnimation extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-4-1-3-animation': SdAnimation;
+        'sd-4-2-1-animation': SdAnimation;
     }
 }

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

@@ -1,9 +1,9 @@
 import {
   SdAnimation
-} from "../../chunks/chunk.LZA2QYUU.js";
+} from "../../chunks/chunk.YHVAW367.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.TJOP7HQP.js";
-import "../../chunks/chunk.HFHUY7YD.js";
+import "../../chunks/chunk.M4CPDAKC.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   SdAnimation as default

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

@@ -50,6 +50,6 @@ export default class SdAudio extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-4-1-3-audio': SdAudio;
+        'sd-4-2-1-audio': SdAudio;
     }
 }

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

@@ -1,11 +1,11 @@
 import {
   SdAudio
-} from "../../chunks/chunk.TGJ2SBPH.js";
+} from "../../chunks/chunk.TLTEUGRS.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.ZXR3YX6W.js";
 import "../../chunks/chunk.EJ6ZLEEW.js";
-import "../../chunks/chunk.HFHUY7YD.js";
+import "../../chunks/chunk.M4CPDAKC.js";
 import "../../chunks/chunk.POFWU6ZT.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

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

@@ -8,6 +8,6 @@ export default class SdBadge extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-4-1-3-badge': SdBadge;
+        'sd-4-2-1-badge': SdBadge;
     }
 }

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

@@ -1,7 +1,7 @@
 import {
   SdBadge
-} from "../../chunks/chunk.QUYKT56M.js";
-import "../../chunks/chunk.HFHUY7YD.js";
+} from "../../chunks/chunk.JCZYHLLG.js";
+import "../../chunks/chunk.M4CPDAKC.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   SdBadge as default

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

@@ -25,7 +25,7 @@ export default class SdBrandshape extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-4-1-3-brandshape': SdBrandshape;
+        'sd-4-2-1-brandshape': SdBrandshape;
     }
 }
 export {};

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

@@ -1,7 +1,7 @@
 import {
   SdBrandshape
-} from "../../chunks/chunk.OMBVLHXJ.js";
-import "../../chunks/chunk.HFHUY7YD.js";
+} from "../../chunks/chunk.NKQ5TMZU.js";
+import "../../chunks/chunk.M4CPDAKC.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   SdBrandshape as default

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

@@ -12,6 +12,7 @@ export default class SdButton extends SolidElement implements SolidFormControl {
     inverted: boolean;
     size: 'lg' | 'md' | 'sm';
     disabled: boolean;
+    visuallyDisabled: boolean;
     loading: boolean;
     type: 'button' | 'submit' | 'reset';
     name: string;
@@ -47,6 +48,6 @@ export default class SdButton extends SolidElement implements SolidFormControl {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-4-1-3-button': SdButton;
+        'sd-4-2-1-button': SdButton;
     }
 }

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

@@ -1,14 +1,14 @@
 import {
   SdButton
-} from "../../chunks/chunk.SNCHAQYL.js";
-import "../../chunks/chunk.AJ7V76EG.js";
+} from "../../chunks/chunk.FG4KLSVA.js";
+import "../../chunks/chunk.SUVILVZH.js";
 import "../../chunks/chunk.KVKRZJS7.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.ZXR3YX6W.js";
 import "../../chunks/chunk.EJ6ZLEEW.js";
-import "../../chunks/chunk.HFHUY7YD.js";
+import "../../chunks/chunk.M4CPDAKC.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   SdButton as default

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

@@ -13,6 +13,6 @@ export default class SdButtonGroup extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-4-1-3-button-group': SdButtonGroup;
+        'sd-4-2-1-button-group': SdButtonGroup;
     }
 }

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

@@ -1,7 +1,7 @@
 import {
   SdButtonGroup
-} from "../../chunks/chunk.H5BDO4H5.js";
-import "../../chunks/chunk.HFHUY7YD.js";
+} from "../../chunks/chunk.WZK6B3UV.js";
+import "../../chunks/chunk.M4CPDAKC.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   SdButtonGroup as default

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

@@ -53,6 +53,6 @@ export default class SdCarousel extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-4-1-3-carousel': SdCarousel;
+        'sd-4-2-1-carousel': SdCarousel;
     }
 }

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

@@ -1,11 +1,11 @@
 import {
   SdCarousel
-} from "../../chunks/chunk.D26WCHLT.js";
+} from "../../chunks/chunk.SL7UXNEP.js";
 import "../../chunks/chunk.F4VGSDIW.js";
 import "../../chunks/chunk.2LMWBUBT.js";
 import "../../chunks/chunk.NOWCQZBS.js";
-import "../../chunks/chunk.NUIZDE7R.js";
-import "../../chunks/chunk.UZKLVMCI.js";
+import "../../chunks/chunk.THT3CJM5.js";
+import "../../chunks/chunk.33QCSKQD.js";
 import "../../chunks/chunk.7WEXXSFH.js";
 import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";
@@ -18,7 +18,7 @@ import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.ZXR3YX6W.js";
 import "../../chunks/chunk.EJ6ZLEEW.js";
-import "../../chunks/chunk.HFHUY7YD.js";
+import "../../chunks/chunk.M4CPDAKC.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   SdCarousel as default

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

@@ -7,6 +7,6 @@ export default class SdCarouselItem extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-4-1-3-carousel-item': SdCarouselItem;
+        'sd-4-2-1-carousel-item': SdCarouselItem;
     }
 }