@solid-design-system/components 4.0.0-next.0 → 4.0.0-next.10

package/dist/chunks/{chunk.EFEBQQHC.js → chunk.ISNWRY34.js}

@@ -1,9 +1,9 @@
 import {
   SdTag
-} from "./chunk.NM6QP6RJ.js";
+} from "./chunk.4WC43I2G.js";
 import {
   SdPopup
-} from "./chunk.V7TQ6VJU.js";
+} from "./chunk.4XYZAEKQ.js";
 import {
   defaultValue
 } from "./chunk.GI7VDIWX.js";
@@ -28,7 +28,7 @@ import {
 } from "./chunk.N4LHE3QK.js";
 import {
   SdIcon
-} from "./chunk.3IT4HBTI.js";
+} from "./chunk.NTKMCOLR.js";
 import {
   animateTo,
   stopAnimations
@@ -48,7 +48,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.DNCLRX5Q.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -79,7 +79,8 @@ var SdCombobox = class extends SolidElement {
     this.value = "";
     this.defaultValue = "";
     this.size = "lg";
-    this.placeholder = this.localize.term("comboboxDefaultPlaceholder");
+    this.placeholder = "";
+    this.maxOptionsTagLabel = this.localize.term("tagsSelected");
     this.disabled = false;
     this.clearable = false;
     this.open = false;
@@ -162,13 +163,13 @@ var SdCombobox = class extends SolidElement {
             this.setOrderedSelectedOptions(currentOption);
             this.setSelectedOptions(currentOption);
           }
-          this.updateComplete.then(() => this.displayInput.focus({ preventScroll: true }));
-          if (this.value !== oldValue) {
-            this.updateComplete.then(() => {
+          this.updateComplete.then(() => {
+            this.displayInput.focus({ preventScroll: true });
+            if (this.value !== oldValue) {
               this.emit("sd-input");
               this.emit("sd-change");
-            });
-          }
+            }
+          });
         }
         this.displayInput.focus({ preventScroll: true });
         if (!this.multiple) {
@@ -212,7 +213,6 @@ var SdCombobox = class extends SolidElement {
       this.selectedTextLabel = (option == null ? void 0 : option.getTextLabel()) || "";
     }
     this.formControlController.updateValidity();
-    this.applySizeToOptions();
   }
   /** Gets the validity state object */
   get validity() {
@@ -255,7 +255,7 @@ var SdCombobox = class extends SolidElement {
               base:tag__base,
               content:tag__content,
               removable-indicator:tag__removable-indicator,
-            " size="${this.size === "sm" ? "sm" : "lg"}" removable @keydown="${(event) => this.handleTagMaxOptionsKeyDown(event)}" @sd-remove="${(event) => this.handleTagRemove(event)}">${this.selectedOptions.length} ${this.localize.term("tagsSelected")}</sd-tag>`
+            " size="${this.size === "sm" ? "sm" : "lg"}" removable @keydown="${(event) => this.handleTagMaxOptionsKeyDown(event)}" @sd-remove="${(event) => this.handleTagRemove(event)}">${this.selectedOptions.length} ${this.maxOptionsTagLabel}</sd-tag>`
       ];
     }
   }
@@ -283,6 +283,7 @@ var SdCombobox = class extends SolidElement {
   }
   handleTagKeyDown(event, option) {
     if (event.key === "Backspace" && this.multiple) {
+      event.preventDefault();
       event.stopPropagation();
       this.handleTagRemove(new CustomEvent("sd-remove"), option);
       this.updateComplete.then(() => this.displayInput.focus({ preventScroll: true }));
@@ -290,6 +291,7 @@ var SdCombobox = class extends SolidElement {
   }
   handleTagMaxOptionsKeyDown(event) {
     if (event.key === "Backspace" && this.multiple) {
+      event.preventDefault();
       event.stopPropagation();
       this.handleTagRemove(new CustomEvent("sd-remove"), this.selectedOptions[this.selectedOptions.length - 1]);
       this.updateComplete.then(() => this.displayInput.focus({ preventScroll: true }));
@@ -376,13 +378,13 @@ var SdCombobox = class extends SolidElement {
         this.setOrderedSelectedOptions(option);
         this.setSelectedOptions(option);
       }
-      this.updateComplete.then(() => this.displayInput.focus({ preventScroll: true }));
-      if (this.value !== oldValue) {
-        this.updateComplete.then(() => {
+      this.updateComplete.then(() => {
+        this.displayInput.focus({ preventScroll: true });
+        if (this.value !== oldValue) {
           this.emit("sd-input");
           this.emit("sd-change");
-        });
-      }
+        }
+      });
       if (!this.multiple) {
         this.hide();
         this.displayInput.focus({ preventScroll: true });
@@ -538,6 +540,8 @@ var SdCombobox = class extends SolidElement {
       const clonedOption = option.cloneNode(true);
       clonedOption.current = clonedOption.value === ((_a = this.lastOption) == null ? void 0 : _a.value);
       clonedOption.selected = option.selected;
+      clonedOption.checkbox = option.checkbox;
+      clonedOption.size = option.size;
       const hasOptgroup = ((_b = option.parentElement) == null ? void 0 : _b.tagName.toLowerCase()) === "sd-optgroup";
       if (!hasOptgroup) {
         return clonedOption;
@@ -712,6 +716,9 @@ var SdCombobox = class extends SolidElement {
     }
     const slottedOptions = this.getSlottedOptions();
     const slottedOptgroups = this.getSlottedOptGroups();
+    this.applySizeToOptions();
+    const selectedOption = this.findOptionByValue(slottedOptions, this.value);
+    this.selectedTextLabel = (selectedOption == null ? void 0 : selectedOption.getTextLabel()) || "";
     slottedOptions.forEach((option, index) => {
       if (this.multiple) {
         option.checkbox = true;
@@ -727,9 +734,6 @@ var SdCombobox = class extends SolidElement {
     } else {
       this.createComboboxOptionsFromQuery("");
     }
-    if (this.hasFocus && this.value.length > 0 && !this.open) {
-      await this.show();
-    }
   }
   render() {
     const slots = {
@@ -740,7 +744,7 @@ 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 && this.value.length > 0;
+    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";
@@ -787,7 +791,11 @@ 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}" .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("flex justify-center", iconMarginLeft)}" 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(
+    )}" 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(
+      "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",
       iconSize
@@ -884,6 +892,9 @@ __decorateClass([
 __decorateClass([
   property()
 ], SdCombobox.prototype, "placeholder", 2);
+__decorateClass([
+  property({ attribute: "max-options-tag-label" })
+], SdCombobox.prototype, "maxOptionsTagLabel", 2);
 __decorateClass([
   property({ reflect: true, type: Boolean })
 ], SdCombobox.prototype, "disabled", 2);

package/dist/chunks/{chunk.DAM3ICHP.js → chunk.JCLUIZEF.js}

@@ -19,13 +19,14 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.DNCLRX5Q.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
 
 // src/components/accordion/accordion.ts
-import { css, html } from "lit";
+import { css } from "lit";
+import { html } from "lit/static-html.js";
 import { property, query } from "lit/decorators.js";
 import cx from "classix";
 var SdAccordion = class extends SolidElement {
@@ -38,8 +39,29 @@ var SdAccordion = class extends SolidElement {
   firstUpdated() {
     this.body.hidden = !this.open;
     this.body.style.height = this.open ? "auto" : "0";
+    if (this.open) {
+      this.accordion.open = true;
+    }
+    this.accordionObserver = new MutationObserver((changes) => {
+      for (const change of changes) {
+        if (change.type === "attributes" && change.attributeName === "open") {
+          if (this.accordion.open) {
+            this.show();
+          } else {
+            this.hide();
+          }
+        }
+      }
+    });
+    this.accordionObserver.observe(this.accordion, { attributes: true });
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    (_a = this.accordionObserver) == null ? void 0 : _a.disconnect();
   }
-  handleSummaryClick() {
+  handleSummaryClick(event) {
+    event.preventDefault();
     if (this.open) {
       this.hide();
     } else {
@@ -66,9 +88,11 @@ var SdAccordion = class extends SolidElement {
   }
   async handleOpenChange() {
     if (this.open) {
+      this.accordion.open = true;
       const slShow = this.emit("sd-show", { cancelable: true });
       if (slShow.defaultPrevented) {
         this.open = false;
+        this.accordion.open = false;
         return;
       }
       await stopAnimations(this.body);
@@ -80,6 +104,7 @@ var SdAccordion = class extends SolidElement {
     } else {
       const slHide = this.emit("sd-hide", { cancelable: true });
       if (slHide.defaultPrevented) {
+        this.accordion.open = true;
         this.open = true;
         return;
       }
@@ -88,6 +113,7 @@ var SdAccordion = class extends SolidElement {
       await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
       this.body.hidden = true;
       this.body.style.height = "auto";
+      this.accordion.open = false;
       this.emit("sd-after-hide");
     }
   }
@@ -108,15 +134,15 @@ var SdAccordion = class extends SolidElement {
     return waitForEvent(this, "sd-after-hide");
   }
   render() {
-    return html`<div part="base" class="border-y border-neutral-400"><header part="header" id="header" class="${cx(
+    return html`<details part="base" class="border-y border-neutral-400"><summary part="header" id="header" class="${cx(
       "flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 py-3 focus-visible:focus-outline text-primary hover:bg-neutral-200 relative group"
-    )}" role="button" aria-expanded="${this.open ? "true" : "false"}" aria-controls="content" tabindex="0" @click="${this.handleSummaryClick}" @keydown="${this.handleSummaryKeyDown}"><div part="summary-border" class="${cx(
+    )}" aria-expanded="${this.open ? "true" : "false"}" aria-controls="content" tabindex="0" @click="${this.handleSummaryClick}" @keydown="${this.handleSummaryKeyDown}"><div part="summary-border" class="${cx(
       !this.open && "opacity-0",
       "w-1 bg-accent absolute left-0 transition-all h-[calc(100%-16px)] group-hover:h-full"
     )}"></div><slot name="summary" part="summary" class="flex flex-auto items-center text-left">${this.summary}</slot><span part="summary-icon" class="${cx(
       "flex flex-grow-0 flex-shrink-0 flex-auto items-center transition-all ease-in-out duration-300 text-xl",
       this.open && "rotate-180"
-    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-icon library="system" name="chevron-down"></sd-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-icon library="system" name="chevron-down"></sd-icon></slot></span></header><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></div>`;
+    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-icon library="system" name="chevron-down"></sd-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-icon library="system" name="chevron-down"></sd-icon></slot></span></summary><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></details>`;
   }
 };
 SdAccordion.styles = [

package/dist/chunks/{chunk.SSH6ATRK.js → chunk.JYRKP32Z.js}

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

package/dist/chunks/{chunk.6CUAQSFA.js → chunk.K6B7NG4F.js}

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

package/dist/chunks/{chunk.2IBVAXOX.js → chunk.L6MU3DLL.js}

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

package/dist/chunks/{chunk.BVC5FY4L.js → chunk.LEOC6FW6.js}

@@ -1,6 +1,6 @@
 import {
   SdRadio
-} from "./chunk.J7MMF6WJ.js";
+} from "./chunk.O4QXE2LJ.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -9,7 +9,7 @@ import {
 } from "./chunk.KVKRZJS7.js";
 import {
   SdButtonGroup
-} from "./chunk.ZWJI7SLE.js";
+} from "./chunk.TLVJDDZL.js";
 import {
   watch
 } from "./chunk.X2OQMWGY.js";
@@ -19,7 +19,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.DNCLRX5Q.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.J2XBUIBC.js → chunk.MEGJ7CBG.js}

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

package/dist/chunks/{chunk.PGZ5AWZ2.js → chunk.MF3CL2AP.js}

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

package/dist/chunks/{chunk.3IT4HBTI.js → chunk.NTKMCOLR.js}

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

package/dist/chunks/{chunk.XVFJS7VS.js → chunk.O3MWFP7G.js}

@@ -19,7 +19,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.DNCLRX5Q.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.J7MMF6WJ.js → chunk.O4QXE2LJ.js}

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

package/dist/chunks/{chunk.KJFKVSZA.js → chunk.O5W5RLTG.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.DNCLRX5Q.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -67,15 +67,15 @@ var SdTeaser = class extends SolidElement {
       this._orientation === "vertical" && "flex-col",
       this._orientation === "horizontal" && "flex-row gap-8",
       this._orientation === "horizontal" && inset && "py-8 px-10"
-    )}" part="base"><div style="${this._orientation === "horizontal" ? `width: var(--distribution-media, 100%);` : ""}" class="${cx(
+    )}" part="base"><div part="media" id="media" aria-hidden="true" style="${this._orientation === "horizontal" ? `width: var(--distribution-media, 100%);` : ""}" class="${cx(
       !inset && this._orientation === "vertical" && "mb-4",
       !slots["teaser-has-media"] && "hidden",
       this.variant === "white border-neutral-400" && this._orientation === "vertical" && "mx-[-1px] mt-[-1px]"
-    )}" part="media"><slot name="media"></slot></div><div style="${this._orientation === "horizontal" ? `width: var(--distribution-content, 100%); ${inset ? "width: var(--distribution-content, calc(100% - 2rem));" : ""}` : ""}" class="${cx(
+    )}"><slot name="media"></slot></div><div style="${this._orientation === "horizontal" ? `width: var(--distribution-content, 100%); ${inset ? "width: var(--distribution-content, calc(100% - 2rem));" : ""}` : ""}" class="${cx(
       "flex flex-col text-left",
       this._orientation === "horizontal" && `flex flex-col`,
       this._orientation === "vertical" && inset && "m-4"
-    )}" part="content"><div part="meta" class="${cx("gap-2 mb-4", !slots["teaser-has-meta"] && "hidden")}"><slot name="meta"></slot></div><div part="headline" class="${cx("text-lg font-bold m-0", this.variant === "primary" ? "text-white" : "text-black")}"><slot name="headline">Always insert one semantically correct heading element here (e. g. &lt;h2>)</slot></div><div part="main" class="${cx(!slots["teaser-has-default"] && "hidden")}"><slot></slot></div></div></div>`;
+    )}" part="content"><div class="flex flex-col-reverse"><div part="headline" class="${cx("text-lg font-bold m-0", this.variant === "primary" ? "text-white" : "text-black")}"><slot name="headline">Always insert one semantically correct heading element here (e. g. &lt;h2>)</slot></div><div part="meta" class="${cx("gap-2 mb-4", !slots["teaser-has-meta"] && "hidden")}"><slot name="meta"></slot></div></div><div part="main" class="${cx(!slots["teaser-has-default"] && "hidden")}" aria-labelledby="media"><slot></slot></div></div></div>`;
   }
 };
 SdTeaser.styles = [

package/dist/chunks/{chunk.7OHSCBBX.js → chunk.OZBWEFM7.js}

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

package/dist/chunks/{chunk.PDRECIYA.js → chunk.QQ4M35EE.js}

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

package/dist/chunks/{chunk.QP3SM2LZ.js → chunk.RKAIYDTU.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.DNCLRX5Q.js";
 import {
   __decorateClass,
   __spreadValues

package/dist/chunks/{chunk.U6RY25TF.js → chunk.SFM7ZSKY.js}

@@ -28,7 +28,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.DNCLRX5Q.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.Z2UY62T2.js → chunk.SI6BILWU.js}

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

package/dist/chunks/{chunk.DQPVSTUQ.js → chunk.STNLNYKE.js}

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

package/dist/chunks/{chunk.SPBPHTSS.js → chunk.T7U45C76.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.DNCLRX5Q.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -17,7 +17,6 @@ var SdVideo = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.playing = false;
-    this.overlay = false;
     this.isBelowBreakpoint = false;
     this.hasSlotController = new HasSlotController(this, "[default]", "play-icon", "poster");
   }
@@ -100,10 +99,7 @@ var SdVideo = class extends SolidElement {
       this.playing ? "opacity-0" : "opacity-100",
       this.isBelowBreakpoint ? "w-[48px] h-[48px]" : "w-[96px] h-[96px]",
       "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 p-4 bg-white bg-opacity-75 rounded-full play-pause-transition outline-2 outline-offset-2 group-focus-visible:outline"
-    )}"><slot name="play-icon" part="play-icon" class="${cx(this.isBelowBreakpoint ? "text-[2rem]" : "text-[4rem]")}"><sd-icon id="default-play-icon" library="system" name="start"></sd-icon></slot></div></button> ${this.hasSlotController.test("poster") ? html`<slot name="poster" role="presentation" @transitionend="${this.hidePoster}"></slot>` : null}<div part="overlay" id="overlay" role="presentation" class="${cx(
-      this.overlay && !this.playing ? "opacity-100" : "opacity-0",
-      "bg-[black] bg-opacity-60 w-full h-full absolute top-0 left-0 pointer-events-none z-20 play-pause-transition"
-    )}"></div><slot></slot></div>`;
+    )}"><slot name="play-icon" part="play-icon" class="${cx(this.isBelowBreakpoint ? "text-[2rem]" : "text-[4rem]")}"><sd-icon id="default-play-icon" library="system" name="start"></sd-icon></slot></div></button> ${this.hasSlotController.test("poster") ? html`<slot name="poster" role="presentation" @transitionend="${this.hidePoster}"></slot>` : null}<slot></slot></div>`;
   }
 };
 SdVideo.styles = [
@@ -116,9 +112,6 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdVideo.prototype, "playing", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdVideo.prototype, "overlay", 2);
 __decorateClass([
   property({ type: Boolean })
 ], SdVideo.prototype, "isBelowBreakpoint", 2);

package/dist/chunks/{chunk.ZWJI7SLE.js → chunk.TLVJDDZL.js}

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

package/dist/chunks/{chunk.RZRTIYXA.js → chunk.TYDRZQYV.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.DNCLRX5Q.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -14,7 +14,7 @@ var SdBadge = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.size = "lg";
-    this.variant = "default";
+    this.variant = "blue";
     this.inverted = false;
   }
   render() {
@@ -22,9 +22,9 @@ var SdBadge = class extends SolidElement {
       "inline-flex items-center justify-center gap-x-[1px] text-center font-bold whitespace-nowrap border rounded-full select-none cursor-[inherit]",
       {
         /* variants */
-        default: !this.inverted ? "text-white bg-primary-500 border-white" : "text-primary bg-primary-100 border-primary",
-        success: !this.inverted ? "text-white bg-success border-white" : "text-white bg-success border-primary",
-        error: !this.inverted ? "text-white bg-error border-white" : "text-white bg-error border-primary"
+        blue: !this.inverted ? "text-white bg-primary-500 border-white" : "text-primary bg-primary-100 border-primary",
+        green: !this.inverted ? "text-white bg-success border-white" : "text-white bg-success border-primary",
+        red: !this.inverted ? "text-white bg-error border-white" : "text-white bg-error border-primary"
       }[this.variant],
       {
         /* size and fonts*/

package/dist/chunks/{chunk.H655M7FD.js → chunk.UO7UGXMA.js}

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