@solid-design-system/components 4.1.3 → 4.2.1

package/dist/chunks/{chunk.XOL74PNU.js → chunk.OED6NJWG.js}

@@ -1,9 +1,9 @@
 import {
   SdTag
-} from "./chunk.KH4M6HPE.js";
+} from "./chunk.Q2OO67VT.js";
 import {
   SdPopup
-} from "./chunk.VTUCPGYW.js";
+} from "./chunk.PY2NXO6G.js";
 import {
   defaultValue
 } from "./chunk.GI7VDIWX.js";
@@ -28,7 +28,7 @@ import {
 } from "./chunk.N4LHE3QK.js";
 import {
   SdIcon
-} from "./chunk.UZKLVMCI.js";
+} from "./chunk.33QCSKQD.js";
 import {
   animateTo,
   stopAnimations
@@ -48,7 +48,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -82,6 +82,7 @@ var SdCombobox = class extends SolidElement {
     this.placeholder = "";
     this.maxOptionsTagLabel = "";
     this.disabled = false;
+    this.visuallyDisabled = false;
     this.clearable = false;
     this.open = false;
     this.hoist = false;
@@ -116,6 +117,11 @@ var SdCombobox = class extends SolidElement {
       }
     };
     this.handleDocumentKeyDown = (event) => {
+      if (this.visuallyDisabled) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
       const target = event.target;
       const isClearButton = target.closest(".combobox__clear") !== null;
       if (isClearButton) {
@@ -298,6 +304,9 @@ var SdCombobox = class extends SolidElement {
     }
   }
   handleLabelClick() {
+    if (this.visuallyDisabled) {
+      return;
+    }
     this.displayInput.focus();
   }
   handleTagRemove(event, option) {
@@ -316,6 +325,11 @@ var SdCombobox = class extends SolidElement {
     }
   }
   handleComboboxMouseDown(event) {
+    if (this.visuallyDisabled) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
     const path = event.composedPath();
     const isRemovableIndicator = path.some((el) => el instanceof HTMLSlotElement && el.name === "removable-indicator");
     if (this.disabled || isRemovableIndicator) {
@@ -597,7 +611,7 @@ var SdCombobox = class extends SolidElement {
   }
   handleDisabledChange() {
     this.formControlController.setValidity(this.disabled);
-    if (this.disabled) {
+    if (this.disabled || this.visuallyDisabled) {
       this.open = false;
       this.handleOpenChange();
     }
@@ -614,7 +628,7 @@ var SdCombobox = class extends SolidElement {
     this.createComboboxOptionsFromQuery(this.displayInputValue);
   }
   async handleOpenChange() {
-    if (this.open && !this.disabled) {
+    if (this.open && (!this.disabled || !this.visuallyDisabled)) {
       this.emit("sd-show");
       this.addOpenListeners();
       await stopAnimations(this);
@@ -640,7 +654,7 @@ var SdCombobox = class extends SolidElement {
     this.emit("sd-after-hide");
   }
   async show() {
-    if (this.open || this.disabled) {
+    if (this.open || this.disabled || this.visuallyDisabled) {
       this.open = false;
       return void 0;
     }
@@ -744,10 +758,10 @@ var SdCombobox = class extends SolidElement {
     const hasHelpTextSlot = this.hasSlotController.test("help-text");
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
-    const hasClearIcon = this.clearable && !this.disabled;
-    const selectState = this.disabled ? "disabled" : this.hasFocus && this.showInvalidStyle ? "activeInvalid" : this.hasFocus && this.styleOnValid && this.showValidStyle ? "activeValid" : this.hasFocus || this.open ? "active" : this.showInvalidStyle ? "invalid" : this.styleOnValid && this.showValidStyle ? "valid" : "default";
-    const cursorStyles = this.disabled ? "cursor-not-allowed" : "cursor-pointer";
-    const iconColor = this.disabled ? "text-neutral-500" : "text-primary";
+    const hasClearIcon = this.clearable && !this.disabled && !this.visuallyDisabled;
+    const selectState = this.disabled ? "disabled" : this.visuallyDisabled ? "visuallyDisabled" : this.hasFocus && this.showInvalidStyle ? "activeInvalid" : this.hasFocus && this.styleOnValid && this.showValidStyle ? "activeValid" : this.hasFocus || this.open ? "active" : this.showInvalidStyle ? "invalid" : this.styleOnValid && this.showValidStyle ? "valid" : "default";
+    const cursorStyles = this.disabled || this.visuallyDisabled ? "cursor-not-allowed" : "cursor-pointer";
+    const iconColor = this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary";
     const iconMarginLeft = { sm: "ml-1", md: "ml-2", lg: "ml-2" }[this.size];
     const iconMarginRight = { sm: "mr-1", md: "mr-2", lg: "mr-2" }[this.size];
     const iconSize = {
@@ -762,9 +776,10 @@ var SdCombobox = class extends SolidElement {
       this.open && "z-50"
     )}"><label id="label" part="form-control-label" class="${hasLabel && "inline-block mb-2"}" aria-hidden="${!hasLabel}" @click="${this.handleLabelClick}"><slot name="label">${this.label}</slot></label><div part="form-control-input" class="relative w-full bg-white text-black"><div part="border" class="${cx(
       "absolute top-0 w-full h-full pointer-events-none border rounded-default",
-      this.hasHover && "bg-neutral-200",
+      this.hasHover && !this.disabled && !this.visuallyDisabled && "bg-neutral-200",
       {
         disabled: "border-neutral-500",
+        visuallyDisabled: "border-neutral-500",
         readonly: "border-neutral-800",
         activeInvalid: "border-error border-2",
         activeValid: "border-success border-2",
@@ -791,19 +806,19 @@ var SdCombobox = class extends SolidElement {
       "appearance-none outline-none bg-transparent flex-auto min-w-0",
       cursorStyles,
       this.selectedTextLabel && !this.multiple ? "placeholder-black" : "placeholder-neutral-700"
-    )}" type="text" placeholder="${this.selectedTextLabel && !this.multiple ? this.selectedTextLabel : this.placeholder || this.localize.term("comboboxDefaultPlaceholder")}" .disabled="${this.disabled}" .value="${this.displayInputValue}" autocomplete="off" spellcheck="false" autocapitalize="off" aria-controls="listbox" aria-expanded="${this.open}" aria-haspopup="listbox" aria-labelledby="label" aria-disabled="${this.disabled}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" role="combobox" tabindex="0" @focus="${this.handleFocus}" @blur="${this.handleBlur}" aria-autocomplete="list" aria-owns="listbox" @input="${this.handleInput}" @change="${this.handleChange}"><div aria-live="polite" id="control-value" class="absolute top-0 left-0 opacity-0 -z-10">${this.selectedOptions.map((option) => option == null ? void 0 : option.getTextLabel()).join(", ")}</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-controls="control-value" aria-hidden="true" @focus="${() => this.focus()}" @invalid="${this.handleInvalid}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx(
+    )}" type="text" placeholder="${this.selectedTextLabel && !this.multiple ? this.selectedTextLabel : this.placeholder || this.localize.term("comboboxDefaultPlaceholder")}" .disabled="${this.disabled}" .value="${this.displayInputValue}" autocomplete="off" spellcheck="false" autocapitalize="off" aria-controls="listbox" aria-expanded="${this.open}" aria-haspopup="listbox" aria-labelledby="label" aria-disabled="${this.disabled || this.visuallyDisabled}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" role="combobox" tabindex="0" @focus="${this.handleFocus}" @blur="${this.handleBlur}" aria-autocomplete="list" aria-owns="listbox" @input="${this.handleInput}" @change="${this.handleChange}"><div aria-live="polite" id="control-value" class="absolute top-0 left-0 opacity-0 -z-10">${this.selectedOptions.map((option) => option == null ? void 0 : option.getTextLabel()).join(", ")}</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-controls="control-value" aria-hidden="true" @focus="${() => this.focus()}" @invalid="${this.handleInvalid}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx(
       "flex justify-center",
       iconMarginLeft,
       this.value.length > 0 ? "visible" : "invisible"
     )}" type="button" aria-label="${this.localize.term("clearEntry")}" @mousedown="${this.preventLoosingFocus}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-icon class="${cx("text-icon-fill-neutral-800", iconSize)}" name="closing-round" library="system"></sd-icon></slot></button>` : ""} ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx(iconMarginLeft, iconSize, "text-error")}" library="system" name="risk"></sd-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-icon part="valid-icon" class="${cx("flex-shrink-0 text-success", iconMarginLeft, iconSize)}" library="system" name="status-check"></sd-icon>` : ""}<slot name="right" part="right" class="${cx(
       "inline-flex ml-2 leading-[0]",
-      this.disabled ? "text-neutral-500" : "text-primary",
+      this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary",
       iconSize
     )}"><sd-icon class="${cx("transition-all", this.open ? "rotate-180" : "rotate-0")}" name="chevron-down" part="chevron" library="system" color="currentColor"></sd-icon></slot></div><div id="listbox" role="listbox" aria-expanded="${this.open}" aria-multiselectable="${this.multiple}" aria-labelledby="label" part="listbox" class="${cx(
       "bg-white px-2 py-3 relative border-primary overflow-y-auto",
       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" @mousedown="${this.preventLoosingFocus}" @mouseup="${this.handleOptionClick}"><div part="filtered-listbox" class="overflow-y-scroll">${this.filteredOptions.length === 0 ? html`<span id="noResults" class="px-4 flex items-center w-full transition-all text-left text-base relative text-black py-3" aria-hidden="true" @click="${this.handleNoResultsClick}">${this.localize.term("noResults")}</span>` : this.options}</div><slot id="defaultOptionsSlot" class="hidden" @slotchange="${this.handleDefaultSlotChange}"></slot></div></sd-popup></div><div part="form-control-help-text" id="help-text" class="text-sm text-neutral-700" aria-hidden="${!hasHelpText}"><slot name="help-text">${this.helpText}</slot></div></div>${this.formControlController.renderInvalidMessage()}`;
+    )}" tabindex="-1" @mousedown="${this.preventLoosingFocus}" @mouseup="${this.handleOptionClick}"><div part="filtered-listbox" class="overflow-y-scroll">${this.filteredOptions.length === 0 ? html`<span id="noResults" class="px-4 flex items-center w-full transition-all text-left text-base relative text-black py-3" aria-hidden="true" @click="${this.handleNoResultsClick}">${this.localize.term("noResults")}</span>` : this.options}</div><slot id="defaultOptionsSlot" class="hidden" @slotchange="${this.handleDefaultSlotChange}"></slot></div></sd-popup></div><div part="form-control-help-text" id="help-text" class="text-sm text-neutral-700 mt-2" aria-hidden="${!hasHelpText}"><slot name="help-text">${this.helpText}</slot></div></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 SdCombobox.dependencies = {
@@ -898,6 +913,9 @@ __decorateClass([
 __decorateClass([
   property({ reflect: true, type: Boolean })
 ], SdCombobox.prototype, "disabled", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean, attribute: "visually-disabled" })
+], SdCombobox.prototype, "visuallyDisabled", 2);
 __decorateClass([
   property({ type: Boolean })
 ], SdCombobox.prototype, "clearable", 2);
@@ -956,7 +974,7 @@ __decorateClass([
   watch("size", { waitUntilFirstUpdate: true })
 ], SdCombobox.prototype, "applySizeToOptions", 1);
 __decorateClass([
-  watch("disabled", { waitUntilFirstUpdate: true })
+  watch(["disabled", "visually-disabled"], { waitUntilFirstUpdate: true })
 ], SdCombobox.prototype, "handleDisabledChange", 1);
 __decorateClass([
   watch("value", { waitUntilFirstUpdate: true })

package/dist/chunks/{chunk.JZB2D4IZ.js → chunk.OVXTOIRH.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.2FXKQI26.js → chunk.PHOL2FZ7.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.VTUCPGYW.js → chunk.PY2NXO6G.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.KH4M6HPE.js → chunk.Q2OO67VT.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.274HT4QS.js → chunk.QINFB4CI.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.CCQCEONR.js → chunk.R7F4MWPK.js}

@@ -28,7 +28,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -167,14 +167,14 @@ var SdDialog = class extends SolidElement {
       "flex items-center justify-center fixed inset-0 z-dialog",
       this.hasSlotController.test("footer") && "dialog--has-footer"
     )}"><div part="overlay" class="fixed inset-0 bg-primary-800 opacity-90" @click="${() => this.requestClose("overlay")}" tabindex="-1"></div><div part="panel" class="${cx(
-      "flex flex-col z-20 bg-white py-4 sm:py-8 relative gap-6 focus-visible:focus-outline-inverted",
+      "flex flex-col z-20 bg-white py-4 sm:py-8 relative gap-6 focus-visible:focus-outline-inverted overflow-y-auto",
       this.open && "flex opacity-100"
     )}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${this.headline}" aria-labelledby="title" tabindex="0"><header part="header" class="flex flex-grow-0 flex-shrink-0 basis-auto px-6 sm:px-10"><h2 part="title" class="flex-auto m-0" id="title">${this.headline.length > 0 ? html`<span class="sd-headline sd-headline--size-3xl leading-tight">${this.headline}</span>` : html`<slot name="headline"></slot>`}</h2>${!this.noCloseButton ? html`<sd-button part="close-button" variant="tertiary" exportparts="base:close-button__base" class="${cx("absolute top-2 right-2")}" name="x-lg" @click="${() => this.requestClose("close-button")}" type="button"><sd-icon label="${this.localize.term("close")}" name="close" library="system" color="currentColor"></sd-icon></sd-button>` : ""}</header><main part="body" class="flex flex-auto overflow-auto w-full px-6 sm:px-10"><slot></slot></main><footer part="footer" class="flex flex-grow-0 flex-shrink-0 basis-auto ml-auto gap-4 px-6 sm:px-10"><slot name="footer"></slot></footer></div></div>`;
   }
 };
 SdDialog.styles = [
   ...SolidElement.styles,
-  css`:host{--width:662px}[part=panel]{width:var(--width)}[part=body]{-webkit-overflow-scrolling:touch}@media (max-width:414px){:host{--width:335px}[part=footer]{width:100%}}`
+  css`:host{--width:662px}[part=panel]{max-height:80vh;width:var(--width)}[part=body]{-webkit-overflow-scrolling:touch}@media (max-width:414px){:host{--width:335px}[part=body]{min-height:50px}[part=footer]{width:100%}}`
 ];
 __decorateClass([
   query('[part="base"]')

package/dist/chunks/{chunk.D26WCHLT.js → chunk.SL7UXNEP.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.2LMWBUBT.js";
 import {
   SdCarouselItem
-} from "./chunk.NUIZDE7R.js";
+} from "./chunk.THT3CJM5.js";
 import {
   prefersReducedMotion
 } from "./chunk.EY4JPJJQ.js";
@@ -19,7 +19,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.AJ7V76EG.js → chunk.SUVILVZH.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.674S2Z6M.js → chunk.TA2OGXIC.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.NUIZDE7R.js → chunk.THT3CJM5.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.TGJ2SBPH.js → chunk.TLTEUGRS.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   Wave
 } from "./chunk.POFWU6ZT.js";

package/dist/chunks/{chunk.A625ONY2.js → chunk.UEKILTQF.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -20,6 +20,7 @@ var SdRadio = class extends SolidElement {
     this.hasFocus = false;
     this.size = "lg";
     this.disabled = false;
+    this.visuallyDisabled = false;
     this.invalid = false;
   }
   connectedCallback() {
@@ -48,7 +49,7 @@ var SdRadio = class extends SolidElement {
     this.emit("sd-blur");
   }
   handleClick() {
-    if (!this.disabled) {
+    if (!this.disabled && !this.visuallyDisabled) {
       this.checked = true;
     }
   }
@@ -59,7 +60,7 @@ var SdRadio = class extends SolidElement {
   setInitialAttributes() {
     this.setAttribute("role", "radio");
     this.setAttribute("tabindex", "-1");
-    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+    this.setAttribute("aria-disabled", this.disabled || this.visuallyDisabled ? "true" : "false");
   }
   handleCheckedChange() {
     this.setAttribute("aria-checked", this.checked ? "true" : "false");
@@ -71,7 +72,7 @@ var SdRadio = class extends SolidElement {
   render() {
     return html`<span part="base" class="${cx(
       "sd-radio group inline-flex items-start items-center text-base leading-normal text-black cursor-pointer align-middle",
-      this.disabled && "hover:cursor-not-allowed",
+      (this.disabled || this.visuallyDisabled) && "hover:cursor-not-allowed",
       {
         /* sizes, fonts */
         sm: "small-size text-sm",
@@ -80,13 +81,13 @@ var SdRadio = class extends SolidElement {
       }[this.size]
     )}"><span part="${`${this.checked ? "control--checked" : "control--unchecked"}`}" class="${cx(
       "flex-initial shrink-0 relative inline-flex items-center justify-center border rounded-full bg-white h-4 w-4",
-      this.disabled ? "border-neutral-500" : this.invalid ? "border-error hover:border-error-400 group-hover:border-error-400" : this.checked ? "border-accent hover:border-accent-550 group-hover:border-accent-550" : "border-neutral-800 hover:bg-neutral-200 group-hover:bg-neutral-200"
+      this.disabled || this.visuallyDisabled ? "border-neutral-500" : this.invalid ? "border-error hover:border-error-400 group-hover:border-error-400" : this.checked ? "border-accent hover:border-accent-550 group-hover:border-accent-550" : "border-neutral-800 hover:bg-neutral-200 group-hover:bg-neutral-200"
     )}">${this.checked ? html`<span part="checked" class="${cx(
       "rounded-full inline-flex text-white bg-accent h-2.5 w-2.5",
-      this.disabled ? "bg-neutral-500" : this.invalid ? "bg-error hover:bg-error-400 group-hover:bg-error-400" : this.checked ? "bg-accent hover:bg-accent-550 group-hover:bg-accent-550" : "bg-neutral-800"
+      this.disabled ? "bg-neutral-500" : this.visuallyDisabled ? "bg-white" : this.invalid ? "bg-error hover:bg-error-400 group-hover:bg-error-400" : this.checked ? "bg-accent hover:bg-accent-550 group-hover:bg-accent-550" : "bg-neutral-800"
     )}"></span>` : ""}</span><slot part="label" class="${cx(
       "ml-2 select-none inline-block",
-      this.disabled ? "text-neutral-500" : this.invalid ? "text-error" : "text-black"
+      this.disabled || this.visuallyDisabled ? "text-neutral-500" : this.invalid ? "text-error" : "text-black"
     )}"></slot></span>`;
   }
 };
@@ -95,7 +96,7 @@ var SdRadio = class extends SolidElement {
  */
 SdRadio.styles = [
   ...SolidElement.styles,
-  css`:host{display:block;width:-moz-max-content;width:max-content}:host(:focus-visible){outline:2px solid transparent;outline-offset:2px}:host(:focus-visible) [part=control--checked],:host(:focus-visible) [part=control--unchecked]{outline-color:rgb(var(--sd-color-primary,0 53 142)/1);outline-offset:2px;outline-style:solid;outline-width:2px}`
+  css`:host{display:block;width:-moz-max-content;width:max-content}:host(:focus-visible),:host([visually-disabled]:focus-visible) [part=control--checked],:host([visually-disabled]:focus-visible) [part=control--unchecked]{outline:2px solid transparent;outline-offset:2px}:host(:focus-visible) [part=control--checked],:host(:focus-visible) [part=control--unchecked]{outline-color:rgb(var(--sd-color-primary,0 53 142)/1);outline-offset:2px;outline-style:solid;outline-width:2px}`
 ];
 __decorateClass([
   state()
@@ -109,6 +110,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdRadio.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "visually-disabled" })
+], SdRadio.prototype, "visuallyDisabled", 2);
 __decorateClass([
   property()
 ], SdRadio.prototype, "value", 2);
@@ -119,7 +123,7 @@ __decorateClass([
   watch("checked")
 ], SdRadio.prototype, "handleCheckedChange", 1);
 __decorateClass([
-  watch("disabled", { waitUntilFirstUpdate: true })
+  watch(["disabled", "visually-disabled"], { waitUntilFirstUpdate: true })
 ], SdRadio.prototype, "handleDisabledChange", 1);
 SdRadio = __decorateClass([
   customElement("sd-radio")

package/dist/chunks/{chunk.JIWTAZZS.js → chunk.UGILZRQF.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/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-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
-      this.disabled && "hover:cursor-not-allowed",
+      (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,6 +138,7 @@ 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",
@@ -139,7 +146,7 @@ var SdCheckbox = class extends SolidElement {
       }[checkboxState]
     )}">${this.checked ? html`<sd-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-check"></sd-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-icon part="indeterminate-icon" class="text-white w-3 h-3" library="system" name="status-minus"></sd-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,7 +200,7 @@ __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 })

package/dist/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",
@@ -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);

package/dist/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";

package/dist/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";

package/dist/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";

package/dist/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";

package/dist/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";

package/dist/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";