@solid-design-system/components 4.1.2 → 4.2.0

package/dist/chunks/{chunk.UZKLVMCI.js → chunk.33QCSKQD.js}

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

package/dist/chunks/{chunk.ACST636J.js → chunk.5U42A4N2.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.632H2QDY.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.H5ARRBLT.js → chunk.65GBG62N.js}

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

package/dist/chunks/{chunk.4SBQOWLU.js → chunk.6Q2FPQCD.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -19,10 +19,11 @@ import cx from "classix";
 var SdCheckboxGroup = class extends SolidElement {
   constructor() {
     super(...arguments);
-    this.hasSlotController = new HasSlotController(this, "label");
+    this.hasSlotController = new HasSlotController(this, "label", "help-text");
     this.size = "lg";
     this.orientation = "vertical";
     this.label = "";
+    this.helpText = "";
   }
   getAllCheckboxes() {
     return [...this.querySelectorAll("sd-checkbox")];
@@ -53,6 +54,8 @@ var SdCheckboxGroup = class extends SolidElement {
   render() {
     const hasLabelSlot = this.hasSlotController.test("label");
     const hasLabel = this.label ? true : hasLabelSlot;
+    const hasHelpTextSlot = this.hasSlotController.test("help-text");
+    const hasHelpText = this.helpText ? true : hasHelpTextSlot;
     const defaultSlot = html`<slot @slotchange="${this.syncCheckboxes}"></slot>`;
     const hasTooltip = this.hasSlotController.test("tooltip");
     return html`<fieldset part="form-control" class="${cx(
@@ -68,7 +71,7 @@ var SdCheckboxGroup = class extends SolidElement {
         vertical: "flex flex-col",
         horizontal: "flex flex-row"
       }[this.orientation]
-    )}">${defaultSlot}</div></fieldset>`;
+    )}">${defaultSlot}</div></fieldset><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-2", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot>`;
   }
 };
 /**
@@ -87,6 +90,9 @@ __decorateClass([
 __decorateClass([
   property()
 ], SdCheckboxGroup.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "help-text" })
+], SdCheckboxGroup.prototype, "helpText", 2);
 __decorateClass([
   watch("size", { waitUntilFirstUpdate: true })
 ], SdCheckboxGroup.prototype, "handleSizeChange", 1);

package/{dist-versioned/chunks/chunk.RSPK767T.js → dist/chunks/chunk.AEYAUOW5.js}

@@ -13,7 +13,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -41,6 +41,7 @@ var SdTextarea = class extends SolidElement {
     this.placeholder = "";
     this.rows = 4;
     this.disabled = false;
+    this.visuallyDisabled = false;
     this.readonly = false;
     this.form = "";
     this.required = false;
@@ -82,6 +83,10 @@ var SdTextarea = class extends SolidElement {
     this.emit("sd-focus");
   }
   handleInput() {
+    if (this.visuallyDisabled) {
+      this.textarea.value = this.value;
+      return;
+    }
     this.value = this.textarea.value;
     this.formControlController.updateValidity();
     this.emit("sd-input");
@@ -172,7 +177,7 @@ var SdTextarea = class extends SolidElement {
     const hasLabel = this.label ? true : !!slots["label"];
     const hasHelpText = this.helpText ? true : !!slots["helpText"];
     const hasTooltip = !!slots["tooltip"];
-    const textareaState = this.disabled ? "disabled" : this.readonly ? "readonly" : this.hasFocus && this.showInvalidStyle ? "activeInvalid" : this.hasFocus && this.styleOnValid && this.showValidStyle ? "activeValid" : this.hasFocus ? "active" : this.showInvalidStyle ? "invalid" : this.styleOnValid && this.showValidStyle ? "valid" : "default";
+    const textareaState = this.disabled ? "disabled" : this.visuallyDisabled ? "visuallyDisabled" : this.readonly ? "readonly" : this.hasFocus && this.showInvalidStyle ? "activeInvalid" : this.hasFocus && this.styleOnValid && this.showValidStyle ? "activeValid" : this.hasFocus && !this.visuallyDisabled ? "active" : this.showInvalidStyle ? "invalid" : this.styleOnValid && this.showValidStyle ? "valid" : "default";
     const textSize = this.size === "sm" ? "text-sm" : "text-base";
     const iconSizeMarginLeft = {
       sm: "text-base ml-1",
@@ -183,6 +188,7 @@ var SdTextarea = class extends SolidElement {
       "absolute w-full h-full pointer-events-none border rounded-default",
       {
         disabled: "border-neutral-500",
+        visuallyDisabled: "border-neutral-500",
         readonly: "border-neutral-800",
         activeInvalid: "border-error border-2",
         activeValid: "border-success border-2",
@@ -198,14 +204,14 @@ var SdTextarea = class extends SolidElement {
         md: "textarea-md py-1",
         lg: "textarea-lg py-2"
       }[this.size],
-      !this.disabled && !this.readonly ? "hover:bg-neutral-200" : "",
+      !this.disabled && !this.readonly && !this.visuallyDisabled ? "hover:bg-neutral-200" : "",
       this.readonly ? "bg-neutral-100" : "bg-white",
-      textareaState === "disabled" ? "text-neutral-500" : "text-black"
+      textareaState === "disabled" || textareaState === "visuallyDisabled" ? "text-neutral-500" : "text-black"
     )}"><textarea part="textarea" id="input" class="${cx(
       "flex-grow focus:outline-none bg-transparent placeholder-neutral-700 resize-none",
       this.disabled && "cursor-not-allowed",
       textSize
-    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-4-1-2-icon class="${cx("text-error absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="risk" part="invalid-icon"></sd-4-1-2-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-4-1-2-icon class="${cx("text-success absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="status-check" part="valid-icon"></sd-4-1-2-icon>` : ""}</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 ? "false" : "true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
+    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?visually-disabled="${this.visuallyDisabled}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-icon class="${cx("text-error absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="risk" part="invalid-icon"></sd-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-icon class="${cx("text-success absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="status-check" part="valid-icon"></sd-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-2", hasHelpText ? "block" : "hidden")}" aria-hidden="${hasHelpText ? "false" : "true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 /**
@@ -213,7 +219,7 @@ var SdTextarea = class extends SolidElement {
  */
 SdTextarea.styles = [
   ...SolidElement.styles,
-  css`:host{display:block;height:100%}:host([required]) #label:after{content:" *"}.no-scrollbar::-webkit-scrollbar{display:none}`
+  css`:host{display:block;height:100%}:host([required]) #label:after{content:" *"}:host([visually-disabled]) textarea{caret-color:transparent}.no-scrollbar::-webkit-scrollbar{display:none}`
 ];
 __decorateClass([
   query("#input")
@@ -257,6 +263,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdTextarea.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "visually-disabled" })
+], SdTextarea.prototype, "visuallyDisabled", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdTextarea.prototype, "readonly", 2);
@@ -316,7 +325,7 @@ __decorateClass([
   watch("value", { waitUntilFirstUpdate: true })
 ], SdTextarea.prototype, "handleValueChange", 1);
 SdTextarea = __decorateClass([
-  customElement("sd-4-1-2-textarea")
+  customElement("sd-textarea")
 ], SdTextarea);
 
 export {

package/dist/chunks/{chunk.7E7C4YEQ.js → chunk.AQOV7CSX.js}

@@ -1,12 +1,12 @@
 import {
   SdAccordion
-} from "./chunk.FFKZQXJ2.js";
+} from "./chunk.MPC4NJ7T.js";
 import {
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
 import {
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.DPY2TYIS.js → chunk.DKDBS6OJ.js}

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

package/dist/chunks/{chunk.F63YFNZS.js → chunk.DQPMDZDZ.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.MNYQWRJE.js → chunk.EJ6ZLEEW.js}

@@ -18,6 +18,7 @@ var translation = {
   mute: "Stummschalten",
   nextSlide: "N\xE4chste Folie",
   noResults: "Keine Ergebnisse gefunden",
+  notifications: "Benachrichtigungen",
   numOptionsSelected: (num) => {
     if (num === 0) return "";
     return `Optionen ausgew\xE4hlt (${num})`;

package/dist/chunks/{chunk.KPA6BEFU.js → chunk.F27JSEQZ.js}

@@ -18,7 +18,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -28,9 +28,11 @@ import { css, html } from "lit";
 import { property, query } from "lit/decorators.js";
 import cx from "classix";
 var toastStackDefault = Object.assign(document.createElement("div"), {
+  role: "region",
   className: "sd-toast-stack sd-toast-stack--top-right"
 });
 var toastStackBottomCenter = Object.assign(document.createElement("div"), {
+  role: "region",
   className: "sd-toast-stack sd-toast-stack--bottom-center"
 });
 var SdNotification = class extends SolidElement {
@@ -45,6 +47,27 @@ var SdNotification = class extends SolidElement {
     this.toastStack = "top-right";
     this.remainingDuration = this.duration;
     this.startTime = Date.now();
+    this.tabDirection = "forward";
+    this.focused = false;
+  }
+  get stack() {
+    return {
+      "top-right": toastStackDefault,
+      "bottom-center": toastStackBottomCenter
+    }[this.toastStack];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.stack.parentElement) {
+      document.body.append(this.stack);
+      this.stack.ariaLabel = this.localize.term("notifications");
+    }
+    this.handleFocusIn = this.handleFocusIn.bind(this);
+    document.addEventListener("focusin", this.handleFocusIn);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("focusin", this.handleFocusIn);
   }
   firstUpdated() {
     this.base.hidden = !this.open;
@@ -75,6 +98,29 @@ var SdNotification = class extends SolidElement {
   handleCloseClick() {
     this.hide();
   }
+  checkFocus() {
+    if (!this.focused || !this.closable) return;
+    if (!this.matches(":focus-within")) {
+      const target = this.tabDirection === "forward" ? this.base : this.close;
+      if (typeof (target == null ? void 0 : target.focus) === "function") {
+        target.focus({ preventScroll: true });
+      }
+    }
+  }
+  handleFocusIn() {
+    this.focused = true;
+  }
+  handleKeyDown(event) {
+    this.tabDirection = "forward";
+    if (this.closable && event.key === "Escape") {
+      this.hide();
+      return;
+    }
+    if (event.key === "Tab" && event.shiftKey) {
+      this.tabDirection = "backwards";
+    }
+    requestAnimationFrame(() => this.checkFocus());
+  }
   async handleOpenChange() {
     if (this.open) {
       this.emit("sd-show");
@@ -145,7 +191,7 @@ var SdNotification = class extends SolidElement {
     });
   }
   render() {
-    return html`<div part="base" class="${cx("w-full overflow-hidden flex items-stretch relative m-2")}" role="alert" id="notification" aria-hidden="${this.open ? "false" : "true"}" @mouseenter="${this.onHover}" @mouseleave="${this.onHoverEnd}"><slot name="icon" part="icon" class="${cx(
+    return html`<div part="base" class="${cx("w-full overflow-hidden flex items-stretch relative m-2 focus-visible:focus-outline")}" role="alert" id="notification" tabindex="0" aria-labelledby="message" aria-hidden="${this.open ? "false" : "true"}" @mouseenter="${this.onHover}" @mouseleave="${this.onHoverEnd}" @keydown="${this.handleKeyDown}"><slot name="icon" part="icon" class="${cx(
       "min-w-min flex items-center px-3 justify-center",
       {
         info: "bg-info",
@@ -161,7 +207,7 @@ var SdNotification = class extends SolidElement {
     }[this.variant] || ""}" library="system" class="h-6 w-6 text-white"></sd-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-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-icon label="${this.localize.term("close")}" name="close" library="system" color="currentColor"></sd-icon></sd-button>` : ""}</div>${this.durationIndicator ? html`<div part="duration-indicator__elapsed" id="duration-indicator__elapsed" style="${`animation-duration: ${this.duration}ms`}" class="${cx(`absolute w-0 h-[2px] bottom-0 bg-primary z-10 animate-grow`)}"></div><div part="duration-indicator__total" class="w-full h-[2px] bottom-0 absolute border border-neutral-400"></div>` : ""}</div>`;
+    )}"><slot id="message" part="message" class="block w-full pl-3 py-2"></slot>${this.closable ? html`<sd-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-icon label="${this.localize.term("close")}" name="close" library="system" color="currentColor"></sd-icon></sd-button>` : ""}</div>${this.durationIndicator ? html`<div part="duration-indicator__elapsed" id="duration-indicator__elapsed" style="${`animation-duration: ${this.duration}ms`}" class="${cx(`absolute w-0 h-[2px] bottom-0 bg-primary z-10 animate-grow`)}"></div><div part="duration-indicator__total" class="w-full h-[2px] bottom-0 absolute border border-neutral-400"></div>` : ""}</div>`;
   }
 };
 /**
@@ -174,6 +220,9 @@ SdNotification.styles = [
 __decorateClass([
   query('[part~="base"]')
 ], SdNotification.prototype, "base", 2);
+__decorateClass([
+  query('[part~="close-button"]')
+], SdNotification.prototype, "close", 2);
 __decorateClass([
   property({ reflect: true })
 ], SdNotification.prototype, "variant", 2);

package/dist/chunks/{chunk.BTJACUD5.js → chunk.F2TZ6DNQ.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";
@@ -19,7 +19,7 @@ import {
 } from "./chunk.N4LHE3QK.js";
 import {
   SdIcon
-} from "./chunk.UZKLVMCI.js";
+} from "./chunk.33QCSKQD.js";
 import {
   animateTo,
   stopAnimations
@@ -39,7 +39,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -73,6 +73,7 @@ var SdSelect = class extends SolidElement {
     this.placeholder = "";
     this.maxOptionsTagLabel = "";
     this.disabled = false;
+    this.visuallyDisabled = false;
     this.helpText = "";
     this.currentPlacement = this.placement;
     this.clearable = false;
@@ -271,7 +272,7 @@ var SdSelect = class extends SolidElement {
   handleComboboxMouseDown(event) {
     const path = event.composedPath();
     const isRemovableIndicator = path.some((el) => el instanceof HTMLSlotElement && el.name === "removable-indicator");
-    if (this.disabled || isRemovableIndicator) {
+    if (this.disabled || isRemovableIndicator || this.visuallyDisabled) {
       return;
     }
     event.preventDefault();
@@ -476,13 +477,13 @@ var SdSelect = class extends SolidElement {
     }
   }
   handleDisabledChange() {
-    if (this.disabled) {
+    if (this.disabled || this.visuallyDisabled) {
       this.open = false;
       this.handleOpenChange();
     }
   }
   async handleOpenChange() {
-    if (this.open && !this.disabled) {
+    if (this.open && (!this.disabled || !this.visuallyDisabled)) {
       if (!this.multiple) this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption());
       this.emit("sd-show");
       this.addOpenListeners();
@@ -522,7 +523,7 @@ var SdSelect = class extends SolidElement {
   }
   /** Shows the listbox. */
   async show() {
-    if (this.open || this.disabled) {
+    if (this.open || this.disabled || this.visuallyDisabled) {
       this.open = false;
       return void 0;
     }
@@ -578,8 +579,8 @@ var SdSelect = class extends SolidElement {
     const hasHelpText = this.helpText ? true : !!slots["helpText"];
     const hasClearIcon = this.clearable && !this.disabled;
     const hasTooltip = !!slots["tooltip"];
-    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 selectState = this.disabled ? "disabled" : this.visuallyDisabled && !this.hasFocus ? "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 iconMarginLeft = { sm: "ml-1", md: "ml-2", lg: "ml-2" }[this.size];
     const iconSize = {
       sm: "text-base",
@@ -593,9 +594,10 @@ var SdSelect = class extends SolidElement {
       this.open && "z-50"
     )}"><span class="sr-only" role="alert" aria-live="assertive">${this.deletedTagLabel}</span> ${hasLabel || hasTooltip ? html`<div class="flex items-center gap-1 mb-2"><label id="label" part="form-control-label" class="${hasLabel && "inline-block"}" aria-hidden="${hasLabel ? "false" : "true"}" @click="${this.handleLabelClick}"><slot name="label">${this.label}</slot></label> ${slots["tooltip"] ? html`<slot name="tooltip"></slot>` : ""}</div>` : null}<div part="form-control-input" class="${cx("relative w-full bg-white", selectState === "disabled" ? "text-neutral-500" : "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",
@@ -622,20 +624,20 @@ var SdSelect = class extends SolidElement {
       "appearance-none outline-none flex-grow bg-transparent w-full placeholder-neutral-700",
       cursorStyles,
       this.multiple && this.useTags && this.value.length > 0 ? "hidden" : ""
-    )}" type="text" .disabled="${this.disabled}" placeholder="${this.placeholder || this.localize.term("selectDefaultPlaceholder")}" .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-invalid="${this.showInvalidStyle}" aria-describedby="help-text invalid-message" 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>` : ""}<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" .disabled="${this.disabled}" placeholder="${this.placeholder || this.localize.term("selectDefaultPlaceholder")}" .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 || this.visuallyDisabled ? "true" : "false"}" aria-invalid="${this.showInvalidStyle}" aria-describedby="help-text invalid-message" 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>` : ""}<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(
       "select__clear flex justify-center",
       iconMarginLeft,
       this.value.length > 0 ? "visible" : "invisible"
     )}" type="button" aria-label="${this.localize.term("clearEntry")}" @mousedown="${this.handleClearMouseDown}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-icon class="${cx("text-icon-fill-neutral-800", iconSize)}" library="system" name="closing-round"></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="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",
+      this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary",
       iconSize
     )}"><sd-icon name="chevron-down" part="chevron" library="system" color="currentColor"></sd-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 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" @mouseup="${this.handleOptionClick}" @slotchange="${this.handleDefaultSlotChange}"><slot></slot></div></sd-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-popup></div><div class="text-sm text-neutral-700 mt-2" 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 = {
@@ -719,6 +721,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdSelect.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "visually-disabled" })
+], SdSelect.prototype, "visuallyDisabled", 2);
 __decorateClass([
   property({ attribute: "help-text" })
 ], SdSelect.prototype, "helpText", 2);
@@ -767,7 +772,7 @@ __decorateClass([
   watch("useTags", { waitUntilFirstUpdate: true })
 ], SdSelect.prototype, "handleUseTagsChange", 1);
 __decorateClass([
-  watch("disabled", { waitUntilFirstUpdate: true })
+  watch(["disabled", "visually-disabled"], { waitUntilFirstUpdate: true })
 ], SdSelect.prototype, "handleDisabledChange", 1);
 __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })

package/dist/chunks/{chunk.SNCHAQYL.js → chunk.FG4KLSVA.js}

@@ -11,7 +11,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -42,6 +42,7 @@ var SdButton = class extends SolidElement {
     this.inverted = false;
     this.size = "lg";
     this.disabled = false;
+    this.visuallyDisabled = false;
     this.loading = false;
     this.type = "button";
     this.name = "";
@@ -74,7 +75,7 @@ var SdButton = class extends SolidElement {
     this.emit("sd-focus");
   }
   handleClick(event) {
-    if (this.disabled || this.loading) {
+    if (this.disabled || this.loading || this.visuallyDisabled) {
       event.preventDefault();
       event.stopPropagation();
       return;
@@ -153,8 +154,9 @@ var SdButton = class extends SolidElement {
         border transition-colors duration-200 ease-in-out rounded-default
         select-none cursor-[inherit]`,
       !this.inverted ? "focus-visible:focus-outline" : "focus-visible:focus-outline-inverted",
+      this.visuallyDisabled && "focus-visible:outline-none",
       this.loading && "relative cursor-wait",
-      this.disabled && "cursor-not-allowed",
+      (this.disabled || this.visuallyDisabled) && "cursor-not-allowed",
       slots["icon-only"] && "px-0 w-varspacing",
       /**
        * Anatomy
@@ -167,33 +169,19 @@ var SdButton = class extends SolidElement {
       }[this.size],
       {
         /* variants */
-        primary: !this.inverted ? `text-white bg-primary border-transparent
-          hover:text-primary-100 hover:bg-primary-500
-          active:text-primary-200 active:bg-primary-800
-          disabled:bg-neutral-500` : `text-primary bg-white border-transparent
-          hover:text-primary-500 hover:bg-primary-100
-          active:text-primary-800 active:bg-primary-200
+        primary: !this.inverted ? `text-white border-transparent ${this.visuallyDisabled ? "bg-neutral-500 hover:bg-neutral-500 hover:bg-neutral-500" : "bg-primary hover:bg-primary-500 hover:text-primary-100 active:text-primary-200 active:bg-primary-800"}
+          disabled:bg-neutral-500` : `border-transparent ${this.visuallyDisabled ? "bg-neutral-500 text-white hover:bg-neutral-500 active:bg-neutral-500" : "text-primary bg-white hover:text-primary-500 hover:bg-primary-100 active:text-primary-800 active:bg-primary-200"}
           disabled:bg-neutral-600 disabled:text-white`,
-        secondary: !this.inverted ? `text-primary border-primary
-          hover:text-primary-500 hover:border-primary-500 hover:bg-primary-100
-          active:text-primary-800 active:border-primary-800 active:bg-primary-200
-          disabled:text-neutral-500 disabled:border-neutral-500` : `text-white border-white
-          hover:text-primary-100 hover:bg-primary-500 hover:border-primary-100
-          active:text-primary-200 active:bg-primary-800 active:border-primary-200
+        secondary: !this.inverted ? `${this.visuallyDisabled ? "text-neutral-500 border-neutral-500 hover:text-neutral-500 hover:border-neutral-500 active:text-neutral-500 active:border-neutral-500" : "text-primary border-primary hover:text-primary-500 hover:border-primary-500 hover:bg-primary-100 active:text-primary-800 active:border-primary-800 active:bg-primary-200"}
+          disabled:text-neutral-500 disabled:border-neutral-500` : `${this.visuallyDisabled ? "text-neutral-600 border-neutral-600 hover:text-neutral-600 hover:border-neutral-600 active:text-neutral-600 active:border-neutral-600" : "text-white border-white hover:text-primary-100 hover:bg-primary-500 hover:border-primary-100 active:text-primary-200 active:bg-primary-800 active:border-primary-200"}
           disabled:text-neutral-600 disabled:border-neutral-600`,
-        tertiary: !this.inverted ? `text-primary border-transparent
-          hover:text-primary-500 hover:bg-primary-100
-          active:text-primary-800 active:bg-primary-200
-          disabled:text-neutral-500` : `text-white border-transparent
-          hover:text-primary-100 hover:bg-primary-500
-          active:text-primary-200 active:bg-primary-800
+        tertiary: !this.inverted ? `border-transparent ${this.visuallyDisabled ? "text-neutral-500 hover:text-neutral-500 active:text-neutral-500" : "text-primary hover:text-primary-500 hover:bg-primary-100 active:text-primary-800 active:bg-primary-200"}
+          disabled:text-neutral-500` : `border-transparent ${this.visuallyDisabled ? "text-neutral-600 hover:text-neutral-600 active:text-neutral-600" : "text-white hover:text-primary-100 hover:bg-primary-500 active:text-primary-200 active:bg-primary-800"}
           disabled:text-neutral-600`,
-        cta: `text-white bg-accent-500 border-transparent
-          hover:bg-accent-550
-          active:bg-accent-700
+        cta: `text-white ${this.visuallyDisabled ? "bg-neutral-500 hover:bg-neutral-500 active:bg-neutral-500" : "bg-accent-500 border-transparent hover:bg-accent-550 active:bg-accent-700"}
           ${!this.inverted ? "disabled:bg-neutral-500" : "disabled:bg-neutral-600"} disabled:text-white`
       }[this.variant]
-    )}" ?disabled="${ifDefined(isLink ? void 0 : this.disabled)}" type="${ifDefined(isLink ? void 0 : this.type)}" title="${this.title}" name="${ifDefined(isLink ? void 0 : this.name)}" value="${ifDefined(isLink ? void 0 : this.value)}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}" rel="${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}" role="${ifDefined(isLink ? void 0 : "button")}" aria-disabled="${this.disabled ? "true" : "false"}" aria-labelledby="content" tabindex="${this.disabled ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @invalid="${this.isButton() ? this.handleInvalid : null}" @click="${this.handleClick}"><slot name="icon-left" part="icon-left" class="${cx(
+    )}" ?disabled="${ifDefined(isLink ? void 0 : this.disabled)}" type="${ifDefined(isLink ? void 0 : this.type)}" title="${this.title}" name="${ifDefined(isLink ? void 0 : this.name)}" value="${ifDefined(isLink ? void 0 : this.value)}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}" rel="${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}" role="${ifDefined(isLink ? void 0 : "button")}" aria-disabled="${this.disabled || this.visuallyDisabled ? "true" : "false"}" aria-labelledby="content" tabindex="${this.disabled ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @invalid="${this.isButton() ? this.handleInvalid : null}" @click="${this.handleClick}"><slot name="icon-left" part="icon-left" class="${cx(
       "flex flex-auto items-center pointer-events-none",
       slots["icon-only"] && "hidden",
       this.loading && "invisible",
@@ -248,6 +236,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdButton.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "visually-disabled" })
+], SdButton.prototype, "visuallyDisabled", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdButton.prototype, "loading", 2);

package/dist/chunks/{chunk.EH2FHVPN.js → chunk.GEIIXN6O.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.PRXP5CUW.js → chunk.GXOBJN4Z.js}

@@ -1,13 +1,13 @@
 import {
   SdDivider
-} from "./chunk.AKF4KQEW.js";
+} from "./chunk.I44BFH6N.js";
 import {
   watch
 } from "./chunk.X2OQMWGY.js";
 import {
   SolidElement,
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.AKF4KQEW.js → chunk.I44BFH6N.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.5PTDC66T.js → chunk.I6LLIF3A.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.4Q7KKH5Z.js → chunk.IHJUIKE5.js}

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