@solid-design-system/components 7.0.0-next.1 → 7.0.0-next.11

package/{dist-versioned/chunks/chunk.MU6BOIQP.js → dist/chunks/chunk.6DUOHFNN.js}

@@ -1,13 +1,3 @@
-import {
-  Modal
-} from "./chunk.EDMG7C5H.js";
-import {
-  getDeepActiveElement
-} from "./chunk.UMIKFOMI.js";
-import {
-  lockBodyScrolling,
-  unlockBodyScrolling
-} from "./chunk.WDWV53JP.js";
 import {
   HasSlotController
 } from "./chunk.IVMQWO2L.js";
@@ -27,7 +17,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.LB37DTSJ.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   animateTo,
   stopAnimations
@@ -46,26 +36,30 @@ var SdDialog = class extends SolidElement {
     super(...arguments);
     this.hasSlotController = new HasSlotController(this, "footer");
     this.localize = new LocalizeController(this);
+    this.hasUiMotion = false;
     this.open = false;
     this.headline = "";
     this.noCloseButton = false;
   }
   connectedCallback() {
     super.connectedCallback();
-    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
-    this.modal = new Modal(this);
+    this.updateMotionTheme();
   }
   firstUpdated() {
-    this.dialog.hidden = !this.open;
+    this.dialog.addEventListener("cancel", (event) => {
+      event.preventDefault();
+      this.requestClose("keyboard");
+    });
     if (this.open) {
-      this.addOpenListeners();
-      this.modal.activate();
-      lockBodyScrolling(this);
+      this.dialog.showModal();
     }
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    unlockBodyScrolling(this);
+  onThemeChange() {
+    this.updateMotionTheme();
+  }
+  updateMotionTheme() {
+    const theme = getComputedStyle(this).getPropertyValue("--sd-theme").trim().replace(/['"]/g, "");
+    this.hasUiMotion = theme === "" || theme === "ui-light" || theme === "ui-dark";
   }
   get prefersReducedMotion() {
     return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
@@ -76,37 +70,23 @@ var SdDialog = class extends SolidElement {
       detail: { source }
     });
     if (sdRequestClose.defaultPrevented) {
-      const animation = getAnimation(this, "dialog.denyClose", { dir: this.localize.dir() });
+      const animation = getAnimation(this, this.hasUiMotion ? "dialog.denyClose" : "dialog.denyCloseSimple", {
+        dir: this.localize.dir()
+      });
       animateTo(this.panel, animation.keyframes, animation.options);
       return;
     }
     this.hide();
   }
-  addOpenListeners() {
-    document.addEventListener("keydown", this.handleDocumentKeyDown);
-  }
-  removeOpenListeners() {
-    document.removeEventListener("keydown", this.handleDocumentKeyDown);
-  }
-  handleDocumentKeyDown(event) {
-    if (this.open && event.key === "Escape") {
-      event.stopPropagation();
-      this.requestClose("keyboard");
-    }
-  }
   async handleOpenChange() {
     if (this.open) {
       this.emit("sd-show");
-      this.addOpenListeners();
-      this.originalTrigger = getDeepActiveElement();
-      this.modal.activate();
-      lockBodyScrolling(this);
       const autoFocusTarget = this.querySelector("[autofocus]");
       if (autoFocusTarget) {
         autoFocusTarget.removeAttribute("autofocus");
       }
-      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);
-      this.dialog.hidden = false;
+      await stopAnimations(this.dialog);
+      this.dialog.showModal();
       requestAnimationFrame(() => {
         const slInitialFocus = this.emit("sd-initial-focus", { cancelable: true });
         if (!slInitialFocus.defaultPrevented) {
@@ -120,8 +100,10 @@ var SdDialog = class extends SolidElement {
           autoFocusTarget.setAttribute("autofocus", "");
         }
       });
-      const panelAnimation = this.prefersReducedMotion ? getAnimation(this, "dialog.showReducedMotion", { dir: this.localize.dir() }) : getAnimation(this, "dialog.show", { dir: this.localize.dir() });
-      const overlayAnimation = getAnimation(this, "dialog.overlay.show", { dir: this.localize.dir() });
+      const showAnimation = this.hasUiMotion ? "dialog.show" : "dialog.showSimple";
+      const panelAnimation = this.prefersReducedMotion ? getAnimation(this, "dialog.showReducedMotion", { dir: this.localize.dir() }) : getAnimation(this, showAnimation, { dir: this.localize.dir() });
+      const overlayShowAnimation = this.hasUiMotion ? "dialog.overlay.show" : "dialog.overlay.showSimple";
+      const overlayAnimation = getAnimation(this, overlayShowAnimation, { dir: this.localize.dir() });
       await Promise.all([
         animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),
         animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)
@@ -129,11 +111,11 @@ var SdDialog = class extends SolidElement {
       this.emit("sd-after-show");
     } else {
       this.emit("sd-hide");
-      this.removeOpenListeners();
-      this.modal.deactivate();
-      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);
-      const panelAnimation = this.prefersReducedMotion ? getAnimation(this, "dialog.hideReducedMotion", { dir: this.localize.dir() }) : getAnimation(this, "dialog.hide", { dir: this.localize.dir() });
-      const overlayAnimation = getAnimation(this, "dialog.overlay.hide", { dir: this.localize.dir() });
+      await stopAnimations(this.dialog);
+      const hideAnimation = this.hasUiMotion ? "dialog.hide" : "dialog.hideSimple";
+      const panelAnimation = this.prefersReducedMotion ? getAnimation(this, "dialog.hideReducedMotion", { dir: this.localize.dir() }) : getAnimation(this, hideAnimation, { dir: this.localize.dir() });
+      const overlayHideAnimation = this.hasUiMotion ? "dialog.overlay.hide" : "dialog.overlay.hideSimple";
+      const overlayAnimation = getAnimation(this, overlayHideAnimation, { dir: this.localize.dir() });
       await Promise.all([
         animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {
           this.overlay.hidden = true;
@@ -142,21 +124,9 @@ var SdDialog = class extends SolidElement {
           this.panel.hidden = true;
         })
       ]);
-      this.dialog.hidden = true;
+      this.dialog.close();
       this.overlay.hidden = false;
       this.panel.hidden = false;
-      unlockBodyScrolling(this);
-      const trigger = this.originalTrigger;
-      if (typeof (trigger == null ? void 0 : trigger.focus) === "function" && trigger.isConnected) {
-        setTimeout(() => {
-          try {
-            trigger.focus({ preventScroll: true });
-          } catch (e) {
-            trigger.focus();
-          }
-          this.originalTrigger = null;
-        });
-      }
       this.emit("sd-after-hide");
     }
   }
@@ -177,29 +147,29 @@ var SdDialog = class extends SolidElement {
     return waitForEvent(this, "sd-after-hide");
   }
   render() {
-    return html`<div part="base" class="${cx(
-      "flex items-center justify-center fixed inset-0 z-dialog",
+    return html`<sd-theme-listener></sd-theme-listener><dialog part="base" class="${cx(
+      "flex items-center justify-center p-0 m-auto bg-transparent border-none overflow-visible",
       this.hasSlotController.test("footer") && "dialog--has-footer"
-    )}"><div part="overlay" class="fixed inset-0 overlay-color-background" @click="${() => this.requestClose("overlay")}" tabindex="-1"></div><div part="panel" class="${cx(
+    )}"><div part="overlay" class="fixed inset-0" @click="${() => this.requestClose("overlay")}"></div><div part="panel" class="${cx(
       "panel-color-border border 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="${ifDefined(this.headline ? this.headline : void 0)}" aria-labelledby="${ifDefined(!this.headline ? "title" : void 0)}" 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-7-0-0-next-1-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-7-0-0-next-1-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-7-0-0-next-1-icon></sd-7-0-0-next-1-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>`;
+    )}" aria-label="${ifDefined(this.headline ? this.headline : void 0)}" aria-labelledby="${ifDefined(!this.headline ? "title" : void 0)}" 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="_internal" 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="px-6 sm:px-10"><slot name="footer"></slot></footer></div></dialog>`;
   }
 };
 SdDialog.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{--width:662px}[part=panel]{width:var(--width);max-height:80vh}[part=body]{-webkit-overflow-scrolling:touch}@media (max-width:414px){:host{--width:335px}[part=body]{min-height:50px}[part=footer]{width:100%}}`
+  css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+:host{--width:662px;display:contents}[part=base]:not([open]){display:none}[part=panel]{width:var(--width);max-height:80vh}[part=body]{-webkit-overflow-scrolling:touch}::backdrop{display:none}[part=overlay]{background-color:rgb(var(--sd-overlay-color-background,5 21 48 / .9))}@media (max-width:414px){:host{--width:335px}[part=body]{min-height:50px}}`
 ];
 __decorateClass([
   query('[part="base"]')
 ], SdDialog.prototype, "dialog", 2);
-__decorateClass([
-  query('[part="panel"]')
-], SdDialog.prototype, "panel", 2);
 __decorateClass([
   query('[part="overlay"]')
 ], SdDialog.prototype, "overlay", 2);
+__decorateClass([
+  query('[part="panel"]')
+], SdDialog.prototype, "panel", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdDialog.prototype, "open", 2);
@@ -213,7 +183,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdDialog.prototype, "handleOpenChange", 1);
 SdDialog = __decorateClass([
-  customElement("sd-7-0-0-next-1-dialog")
+  customElement("sd-dialog")
 ], SdDialog);
 setDefaultAnimation("dialog.show", {
   keyframes: [
@@ -226,6 +196,13 @@ setDefaultAnimation("dialog.showReducedMotion", {
   keyframes: [{ opacity: 0 }, { opacity: 1 }],
   options: { duration: "var(--sd-duration-medium, 300)", easing: "ease-in-out", reducedMotion: "allow" }
 });
+setDefaultAnimation("dialog.showSimple", {
+  keyframes: [
+    { opacity: 0, scale: 0.8 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
 setDefaultAnimation("dialog.hide", {
   keyframes: [
     { opacity: 1, transform: "translate(0, 0)" },
@@ -237,18 +214,37 @@ setDefaultAnimation("dialog.hideReducedMotion", {
   keyframes: [{ opacity: 1 }, { opacity: 0 }],
   options: { duration: "var(--sd-duration-fast, 150)", easing: "ease-in-out", reducedMotion: "allow" }
 });
+setDefaultAnimation("dialog.hideSimple", {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.8 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
 setDefaultAnimation("dialog.denyClose", {
   keyframes: [{ scale: 1 }, { scale: 1.02 }, { scale: 1 }],
   options: { duration: 250 }
 });
+setDefaultAnimation("dialog.denyCloseSimple", {
+  keyframes: [{ scale: 1 }, { scale: 1.02 }, { scale: 1 }],
+  options: { duration: 250 }
+});
 setDefaultAnimation("dialog.overlay.show", {
   keyframes: [{ opacity: 0 }, { opacity: 1 }],
   options: { duration: "var(--sd-duration-medium, 300)", easing: "ease-in-out", reducedMotion: "allow" }
 });
+setDefaultAnimation("dialog.overlay.showSimple", {
+  keyframes: [{ opacity: 0 }, { opacity: 1 }],
+  options: { duration: 250, reducedMotion: "allow" }
+});
 setDefaultAnimation("dialog.overlay.hide", {
   keyframes: [{ opacity: 1 }, { opacity: 0 }],
   options: { duration: "var(--sd-duration-fast, 150)", easing: "ease-in-out", reducedMotion: "allow" }
 });
+setDefaultAnimation("dialog.overlay.hideSimple", {
+  keyframes: [{ opacity: 1 }, { opacity: 0 }],
+  options: { duration: 250, reducedMotion: "allow" }
+});
 
 export {
   SdDialog

package/dist/chunks/{chunk.2B76SHER.js → chunk.6MSQDSJK.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.LB37DTSJ.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -31,7 +31,7 @@ var SdBadge = class extends SolidElement {
 };
 SdBadge.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+  css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
 :host{display:inline-flex;align-items:center;justify-content:center}:host([size=md]){height:var(--sd-spacing-4);min-width:var(--sd-spacing-4);font-size:.625rem}:host([size=lg]){height:calc(var(--sd-spacing-1) * 5);min-width:calc(var(--sd-spacing-1) * 5);font-size:.75rem}:host([size=sm])::part(base){height:var(--sd-spacing-2);min-width:var(--sd-spacing-2)}:host([size=md])::part(base){padding-inline:var(--sd-spacing-1)}:host([size=lg])::part(base){padding-left:.313rem;padding-right:.313rem}`
 ];
 __decorateClass([

package/dist/chunks/chunk.6OYBQ6CO.js

@@ -0,0 +1,373 @@
+import {
+  defaultValue
+} from "./chunk.GI7VDIWX.js";
+import {
+  FormControlController
+} from "./chunk.C3WIBDGG.js";
+import {
+  HasSlotController
+} from "./chunk.IVMQWO2L.js";
+import {
+  LocalizeController
+} from "./chunk.X3FE7OHE.js";
+import {
+  watch
+} from "./chunk.X2OQMWGY.js";
+import {
+  SolidElement,
+  customElement
+} from "./chunk.DJJN4MJ4.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/file-selector/file-selector.ts
+import { css, html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property, query, state } from "lit/decorators.js";
+import cx from "classix";
+var SdFileSelector = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this, {
+      assumeInteractionOn: ["sd-change"],
+      value: (el) => el.files
+    });
+    this.hasSlotController = new HasSlotController(this, "help-text", "label");
+    this.localize = new LocalizeController(this);
+    this.userIsDragging = false;
+    this.showInvalidStyle = false;
+    this.name = "";
+    this.title = "";
+    this.defaultValue = "";
+    this.size = "lg";
+    this.label = "";
+    this.showLabel = false;
+    this.helpText = "";
+    this.disabled = false;
+    this.visuallyDisabled = false;
+    this.droparea = false;
+    this.accept = "";
+    this.styleOnValid = false;
+    this.multiple = false;
+    this.webkitdirectory = false;
+    this.form = "";
+    this.required = false;
+    this.hideValue = false;
+  }
+  set files(v) {
+    if (this.input) {
+      this.input.files = v;
+    }
+  }
+  get files() {
+    var _a, _b;
+    return (_b = (_a = this.input) == null ? void 0 : _a.files) != null ? _b : null;
+  }
+  set value(v) {
+    if (this.input) {
+      this.input.value = v;
+    }
+  }
+  get value() {
+    var _a, _b;
+    return (_b = (_a = this.input) == null ? void 0 : _a.value) != null ? _b : "";
+  }
+  /** Gets the validity state object. */
+  get validity() {
+    return this.input.validity;
+  }
+  /** Gets the validation message. */
+  get validationMessage() {
+    return this.input.validationMessage;
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    return this.input.checkValidity();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    this.formControlController.fakeUserInteraction();
+    return this.input.reportValidity();
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message) {
+    this.input.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  handleDisabledChange() {
+    this.formControlController.setValidity(this.disabled);
+  }
+  async handleValueChange() {
+    await this.updateComplete;
+    this.formControlController.updateValidity();
+  }
+  firstUpdated() {
+    this.formControlController.updateValidity();
+  }
+  focus(options) {
+    var _a, _b;
+    if (this.droparea) {
+      (_a = this.dropareaWrapper) == null ? void 0 : _a.focus(options);
+      return;
+    }
+    (_b = this.button) == null ? void 0 : _b.focus(options);
+  }
+  blur() {
+    var _a, _b;
+    if (this.droparea) {
+      (_a = this.dropareaWrapper) == null ? void 0 : _a.blur();
+      return;
+    }
+    (_b = this.button) == null ? void 0 : _b.blur();
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+    this.invalidMessage.textContent = event.target.validationMessage;
+  }
+  handleFiles(files) {
+    if (!files) {
+      this.value = "";
+      return;
+    }
+    this.files = files;
+  }
+  async handleTransferItems(items) {
+    if (!items) {
+      this.value = "";
+      throw new Error("No proper items found");
+    }
+    const entries = Array.from(items).map((item) => item.webkitGetAsEntry());
+    const filesPromises = entries.map((entry) => this.getFilesFromEntry(entry));
+    const filesArray = await Promise.all(filesPromises);
+    const files = filesArray.flat();
+    const dataTransfer = new DataTransfer();
+    files.forEach((f) => dataTransfer.items.add(f));
+    return dataTransfer.files;
+  }
+  async getFilesFromEntry(entry) {
+    if (!entry) {
+      return [];
+    }
+    if (entry.isFile) {
+      return new Promise((resolve, reject) => {
+        entry.file((file) => resolve([file]), reject);
+      });
+    }
+    if (entry.isDirectory) {
+      return new Promise((resolve, reject) => {
+        const dirReader = entry.createReader();
+        dirReader.readEntries((nestedEntries) => {
+          Promise.all(nestedEntries.map((e) => this.getFilesFromEntry(e))).then((nested) => resolve(nested.flat())).catch(reject);
+        });
+      });
+    }
+    return [];
+  }
+  handleClick(e) {
+    e.preventDefault();
+    if (this.disabled || this.visuallyDisabled) {
+      e.stopPropagation();
+      return;
+    }
+    this.input.click();
+  }
+  handleDropareaKeyDown(e) {
+    if (e.key !== "Enter" && e.key !== " ") return;
+    e.preventDefault();
+    this.handleClick(e);
+  }
+  handleChange(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.emit("sd-input");
+    this.emit("sd-change");
+  }
+  handleDragOver(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (this.disabled || this.visuallyDisabled) return;
+    this.userIsDragging = true;
+  }
+  handleDragLeave(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (this.disabled || this.visuallyDisabled) return;
+    this.userIsDragging = false;
+  }
+  async handleDrop(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (this.disabled || this.visuallyDisabled) return;
+    if (!e.dataTransfer) return;
+    const files = await this.handleTransferItems(e.dataTransfer.items);
+    this.userIsDragging = false;
+    if (!files) return;
+    if (!this.multiple && !this.webkitdirectory && files.length > 1) {
+      this.emit("sd-error");
+      return;
+    }
+    this.handleFiles(files);
+    this.input.dispatchEvent(new Event("change"));
+  }
+  handleFocus() {
+    this.emit("sd-focus");
+  }
+  handleBlur() {
+    this.emit("sd-blur");
+  }
+  renderValue() {
+    let hasFiles = false;
+    let fileChosenLabel = this.localize.term("numFilesSelected", 0, this.webkitdirectory, this.multiple);
+    if (this.files && this.files.length > 0) {
+      hasFiles = true;
+      fileChosenLabel = this.files.length === 1 ? this.files[0].name : this.localize.term("numFilesSelected", this.files.length, this.webkitdirectory, this.multiple);
+    }
+    return html`<span id="file-status" role="status" aria-live="polite" aria-atomic="true" class="${cx(
+      "input__value truncate text-sm",
+      this.hideValue && "sr-only",
+      this.disabled || this.visuallyDisabled ? "text-neutral-500" : !hasFiles ? "text-neutral-700" : "text-black"
+    )}" part="value">${fileChosenLabel}</span>`;
+  }
+  renderDroparea() {
+    return html`<div class="${cx("droparea", this.disabled || this.visuallyDisabled ? "cursor-not-allowed" : "cursor-pointer")}" @click="${this.handleClick}" @keydown="${this.handleDropareaKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" tabindex="${this.disabled ? -1 : 0}" role="button" aria-labelledby="form-control-label" aria-describedby="file-status help-text invalid-message" part="droparea"><div part="droparea-background" class="${cx(
+      "droparea__background relative w-full flex flex-row items-center gap-4 p-6 form-control-border-radius transition-colors ease-in-out duration-medium",
+      this.disabled || this.visuallyDisabled ? "droparea__background--disabled bg-neutral-100" : this.showInvalidStyle ? "droparea__background--invalid" : this.userIsDragging ? "bg-primary-100" : "hover:bg-neutral-200"
+    )}"><svg class="droparea__border" aria-hidden="true" preserveAspectRatio="none"><rect class="droparea__border-rect" x="0.5" y="0.5" width="calc(100% - 1px)" height="calc(100% - 1px)"/></svg><div part="droparea-icon" class="${cx(
+      "droparea__icon inline-flex h-18",
+      this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary"
+    )}"><sd-icon class="w-full h-full" library="_internal" name="upload"></sd-icon></div><p part="droparea-value"><span class="${cx(
+      "block text-lg font-semibold",
+      this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary"
+    )}">${this.localize.term(
+      this.webkitdirectory ? "folderDragDrop" : this.multiple ? "fileDragDropMultiple" : "fileDragDrop"
+    )} </span>${this.renderValue()}</p></div></div>`;
+  }
+  renderButton() {
+    let buttonText = this.localize.term("fileButtonText");
+    if (this.multiple) buttonText = this.localize.term("fileButtonTextMultiple");
+    if (this.webkitdirectory) buttonText = this.localize.term("folderButtonText");
+    return html`<div part="button-wrapper" class="${cx(
+      "button__wrapper flex flex-row items-center gap-4",
+      this.disabled || this.visuallyDisabled ? "cursor-not-allowed" : "cursor-default"
+    )}"><sd-button class="button" @click="${this.handleClick}" ?disabled="${this.disabled}" ?visually-disabled="${this.visuallyDisabled}" part="button" size="${this.size}" variant="secondary" aria-labelledby="form-control-label" aria-describedby="file-status help-text invalid-message" aria-invalid="${this.showInvalidStyle ? "true" : "false"}">${buttonText}</sd-button>${this.renderValue()}</div>`;
+  }
+  render() {
+    const slots = {
+      label: this.hasSlotController.test("label"),
+      helpText: this.hasSlotController.test("help-text")
+    };
+    const hasLabel = this.label ? true : !!slots["label"];
+    const hasHelpText = this.helpText ? true : !!slots["helpText"];
+    const showLabel = this.showLabel && hasLabel;
+    return html`<div @dragenter="${this.handleDragOver}" @dragleave="${this.handleDragLeave}" @dragover="${this.handleDragOver}" @drop="${this.handleDrop}" part="form-control">${hasLabel ? html`<label id="form-control-label" class="${cx(
+      "form-control__label text-base",
+      showLabel ? "inline-block mb-2" : "sr-only",
+      this.disabled ? "text-neutral-500" : "form-control-color-text"
+    )}" for="input" part="form-control-label"><slot name="label">${this.label}</slot></label>` : null}<div class="form-control-input" part="form-control-input">${this.droparea ? this.renderDroparea() : this.renderButton()}</div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx(
+      "text-sm mt-2",
+      hasHelpText ? "block" : "hidden",
+      this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-neutral-700"
+    )}" aria-hidden="${hasHelpText ? "false" : "true"}">${this.helpText}</slot><input accept="${this.accept}" aria-disabled="${this.disabled || this.visuallyDisabled ? "true" : "false"}" @change="${this.handleChange}" class="input__control sr-only" capture="${ifDefined(this.capture)}" ?disabled="${this.disabled}" id="input" @invalid="${this.handleInvalid}" ?multiple="${this.multiple}" name="${ifDefined(this.name)}" ?required="${this.required}" title="${this.title}" type="file" tabindex="-1" ?webkitdirectory="${this.webkitdirectory}"></div><div part="invalid-icon-message" class="flex items-center gap-2 mt-2">${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx("text-error")}" library="_internal" name="risk"></sd-icon>` : ""} ${this.formControlController.renderInvalidMessage(this.size)}</div>`;
+  }
+};
+/**
+ * Inherits global stylesheet including TailwindCSS.
+ */
+SdFileSelector.styles = [
+  ...SolidElement.styles,
+  css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+:host{display:block;width:100%;text-align:left}:host([required]) .form-control__label::after{content:' *'}.input__control{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.droparea__background{--sd-droparea-border-color:rgba(var(--sd-form-control-color-border, rgba(var(--sd-color-neutral-800))))}.droparea__background--disabled{--sd-droparea-border-color:rgba(var(--sd-color-neutral-500))}.droparea__background--invalid{--sd-droparea-border-color:rgba(var(--sd-color-error))}.droparea__border{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.droparea__border-rect{fill:none;stroke:var(--sd-droparea-border-color);stroke-width:2px;stroke-dasharray:0 8px;stroke-linecap:square;vector-effect:non-scaling-stroke}`
+];
+__decorateClass([
+  state()
+], SdFileSelector.prototype, "userIsDragging", 2);
+__decorateClass([
+  state()
+], SdFileSelector.prototype, "showInvalidStyle", 2);
+__decorateClass([
+  property({ type: Object })
+], SdFileSelector.prototype, "files", 1);
+__decorateClass([
+  property({ type: String, reflect: true })
+], SdFileSelector.prototype, "name", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], SdFileSelector.prototype, "title", 2);
+__decorateClass([
+  property({ type: String })
+], SdFileSelector.prototype, "value", 1);
+__decorateClass([
+  defaultValue()
+], SdFileSelector.prototype, "defaultValue", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], SdFileSelector.prototype, "size", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], SdFileSelector.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "show-label" })
+], SdFileSelector.prototype, "showLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "help-text", reflect: true })
+], SdFileSelector.prototype, "helpText", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdFileSelector.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "visually-disabled" })
+], SdFileSelector.prototype, "visuallyDisabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "drop-area" })
+], SdFileSelector.prototype, "droparea", 2);
+__decorateClass([
+  property({ type: String })
+], SdFileSelector.prototype, "accept", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "style-on-valid" })
+], SdFileSelector.prototype, "styleOnValid", 2);
+__decorateClass([
+  property({ type: String })
+], SdFileSelector.prototype, "capture", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdFileSelector.prototype, "multiple", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdFileSelector.prototype, "webkitdirectory", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], SdFileSelector.prototype, "form", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdFileSelector.prototype, "required", 2);
+__decorateClass([
+  property({ attribute: "hide-value", type: Boolean, reflect: true })
+], SdFileSelector.prototype, "hideValue", 2);
+__decorateClass([
+  query(".input__control")
+], SdFileSelector.prototype, "input", 2);
+__decorateClass([
+  query(".button")
+], SdFileSelector.prototype, "button", 2);
+__decorateClass([
+  query(".droparea")
+], SdFileSelector.prototype, "dropareaWrapper", 2);
+__decorateClass([
+  query("#invalid-message")
+], SdFileSelector.prototype, "invalidMessage", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], SdFileSelector.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("value", { waitUntilFirstUpdate: true })
+], SdFileSelector.prototype, "handleValueChange", 1);
+SdFileSelector = __decorateClass([
+  customElement("sd-file-selector")
+], SdFileSelector);
+
+export {
+  SdFileSelector
+};

package/dist/chunks/{chunk.LVPWOXKT.js → chunk.77CINHAJ.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.LB37DTSJ.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -53,7 +53,7 @@ var SdInclude = class extends SolidElement {
 };
 SdInclude.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+  css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
 :host{display:block}`
 ];
 __decorateClass([