@solid-design-system/components 1.39.1 → 2.1.0

package/dist/package/components/dialog/dialog.d.ts

@@ -0,0 +1,32 @@
+import '../button/button';
+import '../icon/icon';
+import SolidElement from '../../internal/solid-element';
+export default class SdDialog extends SolidElement {
+    private readonly hasSlotController;
+    private readonly localize;
+    private modal;
+    private originalTrigger;
+    dialog: HTMLElement;
+    panel: HTMLElement;
+    overlay: HTMLElement;
+    open: boolean;
+    headline: string;
+    noCloseButton: boolean;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    private requestClose;
+    private addOpenListeners;
+    private removeOpenListeners;
+    private handleDocumentKeyDown;
+    handleOpenChange(): Promise<void>;
+    show(): Promise<void>;
+    hide(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResultGroup[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sd-dialog': SdDialog;
+    }
+}

package/dist/package/components/dialog/dialog.js

@@ -0,0 +1,222 @@
+import "../button/button.js";
+import "../icon/icon.js";
+import { animateTo, stopAnimations } from "../../internal/animate.js";
+import { unsafeCSS, css, html } from "lit";
+import { customElement } from "../../internal/register-custom-element.js";
+import { setDefaultAnimation, getAnimation } from "../../utilities/animation-registry.js";
+import { HasSlotController } from "../../internal/slot.js";
+import { LocalizeController } from "../../utilities/localize.js";
+import { lockBodyScrolling, unlockBodyScrolling } from "../../internal/scroll.js";
+import { query, property } from "lit/decorators.js";
+import { waitForEvent } from "../../internal/event.js";
+import { watch } from "../../internal/watch.js";
+import componentStyles from "../../styles/component.styles.js";
+import cx from "classix";
+import HeadlineStyles from "../../styles/headline/headline.css.js";
+import Modal from "../../internal/modal.js";
+import SolidElement from "../../internal/solid-element.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let SdDialog = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "footer");
+    this.localize = new LocalizeController(this);
+    this.open = false;
+    this.headline = "";
+    this.noCloseButton = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
+    this.modal = new Modal(this);
+  }
+  firstUpdated() {
+    this.dialog.hidden = !this.open;
+    if (this.open) {
+      this.addOpenListeners();
+      this.modal.activate();
+      lockBodyScrolling(this);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    unlockBodyScrolling(this);
+  }
+  requestClose(source) {
+    const sdRequestClose = this.emit("sd-request-close", {
+      cancelable: true,
+      detail: { source }
+    });
+    if (sdRequestClose.defaultPrevented) {
+      const animation = getAnimation(this, "dialog.denyClose", { 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 = document.activeElement;
+      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;
+      requestAnimationFrame(() => {
+        const slInitialFocus = this.emit("sd-initial-focus", { cancelable: true });
+        if (!slInitialFocus.defaultPrevented) {
+          if (autoFocusTarget) {
+            autoFocusTarget.focus({ preventScroll: true });
+          } else {
+            this.panel.focus({ preventScroll: true });
+          }
+        }
+        if (autoFocusTarget) {
+          autoFocusTarget.setAttribute("autofocus", "");
+        }
+      });
+      const panelAnimation = getAnimation(this, "dialog.show", { dir: this.localize.dir() });
+      const overlayAnimation = getAnimation(this, "dialog.overlay.show", { dir: this.localize.dir() });
+      await Promise.all([
+        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),
+        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)
+      ]);
+      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 = getAnimation(this, "dialog.hide", { dir: this.localize.dir() });
+      const overlayAnimation = getAnimation(this, "dialog.overlay.hide", { dir: this.localize.dir() });
+      await Promise.all([
+        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {
+          this.overlay.hidden = true;
+        }),
+        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {
+          this.panel.hidden = true;
+        })
+      ]);
+      this.dialog.hidden = true;
+      this.overlay.hidden = false;
+      this.panel.hidden = false;
+      unlockBodyScrolling(this);
+      const trigger = this.originalTrigger;
+      if (typeof (trigger == null ? void 0 : trigger.focus) === "function") {
+        setTimeout(() => trigger.focus());
+      }
+      this.emit("sd-after-hide");
+    }
+  }
+  /** Shows the dialog. */
+  async show() {
+    if (this.open) {
+      return void 0;
+    }
+    this.open = true;
+    return waitForEvent(this, "sd-after-show");
+  }
+  /** Hides the dialog */
+  async hide() {
+    if (!this.open) {
+      return void 0;
+    }
+    this.open = false;
+    return waitForEvent(this, "sd-after-hide");
+  }
+  render() {
+    return html`<div part="base" class="${cx(
+      "flex items-center justify-center fixed inset-0 z-dialog",
+      this.hasSlotController.test("footer") && "dialog--has-footer"
+    )}"><div part="overlay" class="fixed inset-0 bg-primary-800 opacity-90" @click="${() => this.requestClose("overlay")}" tabindex="-1"></div><div part="panel" class="${cx(
+      "flex flex-col z-20 bg-white focus:outline-none py-4 sm:py-8 relative gap-6",
+      this.open && "flex opacity-100"
+    )}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${this.headline}" aria-labelledby="title" tabindex="0"><header part="header" class="flex flex-grow-0 flex-shrink-0 basis-auto px-6 sm:px-10"><h2 part="title" class="flex-auto m-0" id="title">${this.headline.length > 0 ? html`<h4 class="sd-headline sd-headline--size-3xl leading-tight">${this.headline}</h4>` : 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 name="system/close" library="global-resources" color="currentColor"></sd-icon></sd-button>` : ""}</header><main part="body" class="flex flex-auto overflow-auto w-full px-6 sm:px-10"><slot></slot></main><footer part="footer" class="flex flex-grow-0 flex-shrink-0 basis-auto ml-auto gap-4 px-6 sm:px-10"><slot name="footer"></slot></footer></div></div>`;
+  }
+};
+SdDialog.styles = [
+  componentStyles,
+  unsafeCSS(HeadlineStyles),
+  SolidElement.styles,
+  css`: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=footer]{width:100%}}`
+];
+__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([
+  property({ type: Boolean, reflect: true })
+], SdDialog.prototype, "open", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdDialog.prototype, "headline", 2);
+__decorateClass([
+  property({ attribute: "no-close-button", type: Boolean, reflect: true })
+], SdDialog.prototype, "noCloseButton", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], SdDialog.prototype, "handleOpenChange", 1);
+SdDialog = __decorateClass([
+  customElement("sd-dialog")
+], SdDialog);
+setDefaultAnimation("dialog.show", {
+  keyframes: [
+    { opacity: 0, scale: 0.8 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("dialog.hide", {
+  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.overlay.show", {
+  keyframes: [{ opacity: 0 }, { opacity: 1 }],
+  options: { duration: 250 }
+});
+setDefaultAnimation("dialog.overlay.hide", {
+  keyframes: [{ opacity: 1 }, { opacity: 0 }],
+  options: { duration: 250 }
+});
+export {
+  SdDialog as default
+};

package/dist/package/components/input/input.d.ts

@@ -40,6 +40,7 @@ export default class SdInput extends SolidElement implements SolidFormControl {
     autocomplete: string;
     autofocus: boolean;
     enterkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+    styleOnValid: boolean;
     spellcheck: boolean;
     get valueAsDate(): Date | null;
     set valueAsDate(newValue: Date | null);

package/dist/package/components/input/input.js

@@ -60,6 +60,7 @@ let SdInput = class extends SolidElement {
     this.name = "";
     this.title = "";
     this.required = false;
+    this.styleOnValid = false;
     this.spellcheck = true;
   }
   /** Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted. */
@@ -214,7 +215,7 @@ let SdInput = class extends SolidElement {
     const hasLabel = this.label ? true : !!slots["label"];
     const hasHelpText = this.helpText ? true : !!slots["helpText"];
     const hasClearIcon = this.clearable && !this.readonly && (typeof this.value === "number" || this.value.length > 0);
-    const inputState = this.disabled ? "disabled" : this.readonly ? "readonly" : this.hasFocus && this.showInvalidStyle ? "activeInvalid" : this.hasFocus && this.showValidStyle ? "activeValid" : this.hasFocus ? "active" : this.showInvalidStyle ? "invalid" : this.showValidStyle ? "valid" : "default";
+    const inputState = 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 textSize = this.size === "sm" ? "text-sm" : "text-base";
     const textColor = {
       disabled: "text-neutral-500",
@@ -255,7 +256,7 @@ let SdInput = class extends SolidElement {
       "min-w-0 flex-grow focus:outline-none bg-transparent placeholder-neutral-700",
       this.size === "sm" ? "h-6" : "h-8",
       textSize
-    )}" type="${this.type === "password" && this.passwordVisible ? "text" : this.type}" title="${this.title}" name="${ifDefined(this.name)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" .value="${live(this.value)}" autocapitalize="${ifDefined(this.type === "password" ? "off" : this.autocapitalize)}" autocomplete="${ifDefined(this.type === "password" ? "off" : this.autocomplete)}" autocorrect="${ifDefined(this.type === "password" ? "off" : this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${this.spellcheck}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center ", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-icon class="${cx("text-neutral-500", iconSize)}" library="system" name="closing-round"></sd-icon></slot></button>` : ""} ${this.passwordToggle && this.type === "password" ? html`<button aria-label="${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}" part="password-toggle-button" class="flex items-center" type="button" @click="${this.handlePasswordToggle}" tabindex="-1">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye"></sd-icon></slot>` : html`<slot name="hide-password-icon"><sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye-crossed-out"></sd-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="calendar"></sd-icon>` : ""} ${this.type === "time" ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="clock"></sd-icon>` : ""} ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="system" name="risk"></sd-icon>` : ""} ${this.showValidStyle ? html`<sd-icon class="${cx("text-success", iconMarginLeft, iconSize)}" library="system" name="confirm" part="valid-icon"></sd-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""}</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}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
+    )}" type="${this.type === "password" && this.passwordVisible ? "text" : this.type}" title="${this.title}" name="${ifDefined(this.name)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" .value="${live(this.value)}" autocapitalize="${ifDefined(this.type === "password" ? "off" : this.autocapitalize)}" autocomplete="${ifDefined(this.type === "password" ? "off" : this.autocomplete)}" autocorrect="${ifDefined(this.type === "password" ? "off" : this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${this.spellcheck}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center ", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-icon class="${cx("text-neutral-500", iconSize)}" library="system" name="closing-round"></sd-icon></slot></button>` : ""} ${this.passwordToggle && this.type === "password" ? html`<button aria-label="${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}" part="password-toggle-button" class="flex items-center" type="button" @click="${this.handlePasswordToggle}" tabindex="-1">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye"></sd-icon></slot>` : html`<slot name="hide-password-icon"><sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye-crossed-out"></sd-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="calendar"></sd-icon>` : ""} ${this.type === "time" ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="clock"></sd-icon>` : ""} ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="system" name="risk"></sd-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-icon class="${cx("text-success", iconMarginLeft, iconSize)}" library="system" name="confirm" part="valid-icon"></sd-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""}</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}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 SdInput.styles = [
@@ -365,6 +366,9 @@ __decorateClass([
 __decorateClass([
   property()
 ], SdInput.prototype, "enterkeyhint", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "style-on-valid" })
+], SdInput.prototype, "styleOnValid", 2);
 __decorateClass([
   property({
     type: Boolean,

package/dist/package/components/select/select.d.ts

@@ -47,6 +47,7 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
     name: string;
     value: string | string[];
     required: boolean;
+    styleOnValid: boolean;
     hoist: boolean;
     getTag: (option: SdOption, index: number) => TemplateResult | string | HTMLElement;
     get validity(): ValidityState;

package/dist/package/components/select/select.js

@@ -60,6 +60,7 @@ let SdSelect = class extends SolidElement {
     this.name = "";
     this.value = "";
     this.required = false;
+    this.styleOnValid = false;
     this.hoist = false;
     this.getTag = (option) => {
       return html`<sd-tag ?disabled="${this.disabled}" part="tag" exportparts="
@@ -486,7 +487,7 @@ let SdSelect = class extends SolidElement {
     const hasLabel = this.label ? true : !!slots["label"];
     const hasHelpText = this.helpText ? true : !!slots["helpText"];
     const hasClearIcon = this.clearable && !this.disabled && this.value.length > 0;
-    const selectState = this.disabled ? "disabled" : this.hasFocus && this.showInvalidStyle ? "activeInvalid" : this.hasFocus && this.showValidStyle ? "activeValid" : this.hasFocus || this.open ? "active" : this.showInvalidStyle ? "invalid" : this.showValidStyle ? "valid" : "default";
+    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 iconMarginLeft = { sm: "ml-1", md: "ml-2", lg: "ml-2" }[this.size];
     const iconSize = {
@@ -541,7 +542,7 @@ let SdSelect = class extends SolidElement {
       "appearance-none outline-none flex-grow bg-transparent",
       cursorStyles,
       this.multiple && this.useTags && this.value.length > 0 ? "hidden" : ""
-    )}" type="text" placeholder="${this.placeholder}" .disabled="${this.disabled}" .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-describedby="help-text" 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>` : ""} <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-hidden="true" @focus="${() => this.focus()}" @invalid="${this.handleInvalid}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("select__clear flex justify-center", iconMarginLeft)}" 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-neutral-500", iconSize)}" library="system" name="closing-round"></sd-icon></slot></button>` : ""} ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="system" name="risk"></sd-icon>` : ""} ${this.showValidStyle ? html`<sd-icon part="valid-icon" class="${cx("text-success", iconMarginLeft, iconSize)}" library="system" name="confirm"></sd-icon>` : ""}<slot name="expand-icon" part="expand-icon" class="${cx("inline-flex ml-2 transition-all", this.open ? "rotate-180" : "rotate-0", 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(
+    )}" type="text" placeholder="${this.placeholder}" .disabled="${this.disabled}" .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-describedby="help-text" 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>` : ""} <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-hidden="true" @focus="${() => this.focus()}" @invalid="${this.handleInvalid}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("select__clear flex justify-center", iconMarginLeft)}" 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-neutral-500", iconSize)}" library="system" name="closing-round"></sd-icon></slot></button>` : ""} ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="system" name="risk"></sd-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-icon part="valid-icon" class="${cx("text-success", iconMarginLeft, iconSize)}" library="system" name="confirm"></sd-icon>` : ""}<slot name="expand-icon" part="expand-icon" class="${cx("inline-flex ml-2 transition-all", this.open ? "rotate-180" : "rotate-0", 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",
       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()}`;
@@ -655,6 +656,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdSelect.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "style-on-valid" })
+], SdSelect.prototype, "styleOnValid", 2);
 __decorateClass([
   property({ type: Boolean })
 ], SdSelect.prototype, "hoist", 2);

package/dist/package/components/textarea/textarea.d.ts

@@ -27,6 +27,7 @@ export default class SdTextarea extends SolidElement implements SolidFormControl
     autocomplete: string;
     autofocus: boolean;
     enterkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+    styleOnValid: boolean;
     spellcheck: boolean;
     inputmode: 'none' | 'text';
     defaultValue: string;

package/dist/package/components/textarea/textarea.js

@@ -41,6 +41,7 @@ let SdTextarea = class extends SolidElement {
     this.readonly = false;
     this.form = "";
     this.required = false;
+    this.styleOnValid = false;
     this.spellcheck = true;
     this.defaultValue = "";
   }
@@ -153,6 +154,7 @@ let SdTextarea = class extends SolidElement {
   }
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
   reportValidity() {
+    this.formControlController.fakeUserInteraction();
     return this.textarea.reportValidity();
   }
   /** Sets a custom validation message. Pass an empty string to restore validity. */
@@ -167,7 +169,7 @@ let SdTextarea = class extends SolidElement {
     };
     const hasLabel = this.label ? true : !!slots["label"];
     const hasHelpText = this.helpText ? true : !!slots["helpText"];
-    const textareaState = this.disabled ? "disabled" : this.readonly ? "readonly" : this.hasFocus && this.showInvalidStyle ? "activeInvalid" : this.hasFocus && this.showValidStyle ? "activeValid" : this.hasFocus ? "active" : this.showInvalidStyle ? "invalid" : this.showValidStyle ? "valid" : "default";
+    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 textSize = this.size === "sm" ? "text-sm" : "text-base";
     const iconSizeMarginLeft = {
       sm: "text-base ml-1",
@@ -209,7 +211,7 @@ let SdTextarea = class extends SolidElement {
       "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" @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"></sd-icon>` : ""} ${this.showValidStyle ? html`<sd-icon class="${cx("text-success absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="confirm"></sd-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}" 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" @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="confirm" 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", hasHelpText ? "block" : "hidden")}" aria-hidden="${hasHelpText ? "false" : "true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 SdTextarea.styles = [
@@ -289,6 +291,9 @@ __decorateClass([
 __decorateClass([
   property()
 ], SdTextarea.prototype, "enterkeyhint", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "style-on-valid" })
+], SdTextarea.prototype, "styleOnValid", 2);
 __decorateClass([
   property({
     type: Boolean,

package/dist/package/solid-components.d.ts

@@ -7,6 +7,7 @@ export { default as SdCarousel } from './components/carousel/carousel';
 export { default as SdCarouselItem } from './components/carousel-item/carousel-item';
 export { default as SdCheckbox } from './components/checkbox/checkbox';
 export { default as SdCheckboxGroup } from './components/checkbox-group/checkbox-group';
+export { default as SdDialog } from './components/dialog/dialog';
 export { default as SdDivider } from './components/divider/divider';
 export { default as SdDrawer } from './components/drawer/drawer';
 export { default as SdDropdown } from './components/dropdown/dropdown';

package/dist/package/solid-components.js

@@ -7,29 +7,30 @@ import { default as default7 } from "./components/carousel/carousel.js";
 import { default as default8 } from "./components/carousel-item/carousel-item.js";
 import { default as default9 } from "./components/checkbox/checkbox.js";
 import { default as default10 } from "./components/checkbox-group/checkbox-group.js";
-import { default as default11 } from "./components/divider/divider.js";
-import { default as default12 } from "./components/drawer/drawer.js";
-import { default as default13 } from "./components/dropdown/dropdown.js";
-import { default as default14 } from "./components/header/header.js";
-import { default as default15 } from "./components/icon/icon.js";
-import { default as default16 } from "./components/include/include.js";
-import { default as default17 } from "./components/input/input.js";
-import { default as default18 } from "./components/link/link.js";
-import { default as default19 } from "./components/navigation-item/navigation-item.js";
-import { default as default20 } from "./components/notification/notification.js";
-import { default as default21 } from "./components/option/option.js";
-import { default as default22 } from "./components/popup/popup.js";
-import { default as default23 } from "./components/radio/radio.js";
-import { default as default24 } from "./components/radio-button/radio-button.js";
-import { default as default25 } from "./components/radio-group/radio-group.js";
-import { default as default26 } from "./components/select/select.js";
-import { default as default27 } from "./components/spinner/spinner.js";
-import { default as default28 } from "./components/switch/switch.js";
-import { default as default29 } from "./components/tag/tag.js";
-import { default as default30 } from "./components/teaser/teaser.js";
-import { default as default31 } from "./components/textarea/textarea.js";
-import { default as default32 } from "./components/tooltip/tooltip.js";
-import { default as default33 } from "./components/video/video.js";
+import { default as default11 } from "./components/dialog/dialog.js";
+import { default as default12 } from "./components/divider/divider.js";
+import { default as default13 } from "./components/drawer/drawer.js";
+import { default as default14 } from "./components/dropdown/dropdown.js";
+import { default as default15 } from "./components/header/header.js";
+import { default as default16 } from "./components/icon/icon.js";
+import { default as default17 } from "./components/include/include.js";
+import { default as default18 } from "./components/input/input.js";
+import { default as default19 } from "./components/link/link.js";
+import { default as default20 } from "./components/navigation-item/navigation-item.js";
+import { default as default21 } from "./components/notification/notification.js";
+import { default as default22 } from "./components/option/option.js";
+import { default as default23 } from "./components/popup/popup.js";
+import { default as default24 } from "./components/radio/radio.js";
+import { default as default25 } from "./components/radio-button/radio-button.js";
+import { default as default26 } from "./components/radio-group/radio-group.js";
+import { default as default27 } from "./components/select/select.js";
+import { default as default28 } from "./components/spinner/spinner.js";
+import { default as default29 } from "./components/switch/switch.js";
+import { default as default30 } from "./components/tag/tag.js";
+import { default as default31 } from "./components/teaser/teaser.js";
+import { default as default32 } from "./components/textarea/textarea.js";
+import { default as default33 } from "./components/tooltip/tooltip.js";
+import { default as default34 } from "./components/video/video.js";
 import { registerIconLibrary, unregisterIconLibrary } from "./components/icon/library.js";
 import { LocalizeController } from "./utilities/localize.js";
 export {
@@ -43,29 +44,30 @@ export {
   default8 as SdCarouselItem,
   default9 as SdCheckbox,
   default10 as SdCheckboxGroup,
-  default11 as SdDivider,
-  default12 as SdDrawer,
-  default13 as SdDropdown,
-  default14 as SdHeader,
-  default15 as SdIcon,
-  default16 as SdInclude,
-  default17 as SdInput,
-  default18 as SdLink,
-  default19 as SdNavigationItem,
-  default20 as SdNotification,
-  default21 as SdOption,
-  default22 as SdPopup,
-  default23 as SdRadio,
-  default24 as SdRadioButton,
-  default25 as SdRadioGroup,
-  default26 as SdSelect,
-  default27 as SdSpinner,
-  default28 as SdSwitch,
-  default29 as SdTag,
-  default30 as SdTeaser,
-  default31 as SdTextarea,
-  default32 as SdTooltip,
-  default33 as SdVideo,
+  default11 as SdDialog,
+  default12 as SdDivider,
+  default13 as SdDrawer,
+  default14 as SdDropdown,
+  default15 as SdHeader,
+  default16 as SdIcon,
+  default17 as SdInclude,
+  default18 as SdInput,
+  default19 as SdLink,
+  default20 as SdNavigationItem,
+  default21 as SdNotification,
+  default22 as SdOption,
+  default23 as SdPopup,
+  default24 as SdRadio,
+  default25 as SdRadioButton,
+  default26 as SdRadioGroup,
+  default27 as SdSelect,
+  default28 as SdSpinner,
+  default29 as SdSwitch,
+  default30 as SdTag,
+  default31 as SdTeaser,
+  default32 as SdTextarea,
+  default33 as SdTooltip,
+  default34 as SdVideo,
   registerIconLibrary,
   unregisterIconLibrary
 };

package/dist/package/styles/headline/headline.css.js

@@ -0,0 +1,4 @@
+const HeadlineStyles = ".sd-headline{--tw-text-opacity:1;color:rgb(var(--sd-color-primary,0 53 142)/var(--tw-text-opacity));display:flex;font-size:var(--sd-font-size-3xl,2rem);font-weight:700;gap:var(--sd-spacing-4,1rem)}@media (min-width:640px){.sd-headline{font-size:var(--sd-font-size-4xl,2.5rem)}}.sd-headline sd-icon{--tw-text-opacity:1;color:rgb(var(--sd-color-primary,0 53 142)/var(--tw-text-opacity));flex-shrink:0;font-size:3rem}@media (min-width:640px){.sd-headline sd-icon{margin-top:var(--sd-spacing-2,.5rem)}}.sd-headline--size-3xl{font-size:var(--sd-font-size-2xl,1.75rem)}@media (min-width:640px){.sd-headline--size-3xl{font-size:var(--sd-font-size-3xl,2rem)}}.sd-headline--size-3xl sd-icon{margin-top:calc(var(--sd-spacing-1, .25rem)*-1)}@media (min-width:640px){.sd-headline--size-3xl sd-icon{margin-top:var(--sd-spacing-0,0)}}.sd-headline--size-base,.sd-headline--size-lg,.sd-headline--size-xl{--tw-text-opacity:1;color:rgb(var(--sd-color-black,24 24 24)/var(--tw-text-opacity));gap:var(--sd-spacing-2,.5rem)}.sd-headline--size-base sd-icon,.sd-headline--size-lg sd-icon,.sd-headline--size-xl sd-icon{font-size:2rem}.sd-headline--size-xl{font-size:var(--sd-font-size-xl,1.5rem)}.sd-headline--size-xl sd-icon{margin-top:var(--sd-spacing-0-5,.125rem)}@media (min-width:640px){.sd-headline--size-xl sd-icon{margin-top:var(--sd-spacing-0-5,.125rem)}}.sd-headline--size-lg{font-size:var(--sd-font-size-lg,1.25rem)}.sd-headline--size-lg sd-icon{margin-top:var(--sd-spacing-0,0)}@media (min-width:640px){.sd-headline--size-lg sd-icon{margin-top:var(--sd-spacing-0,0)}}.sd-headline--size-base{--tw-text-opacity:1;color:rgb(var(--sd-color-black,24 24 24)/var(--tw-text-opacity));font-size:var(--sd-font-size-base,1rem)}.sd-headline--size-base sd-icon{margin-top:calc(var(--sd-spacing-1, .25rem)*-1)}.sd-headline--size-base mark{color:inherit}.sd-headline--inverted,.sd-headline--inverted sd-icon{--tw-text-opacity:1;color:rgb(var(--sd-color-white,255 255 255)/var(--tw-text-opacity))}.sd-headline--inline{display:inline}.sd-headline--inline sd-icon{margin-right:var(--sd-spacing-2,.5rem);margin-top:calc(var(--sd-spacing-1, .25rem)*-1);vertical-align:middle}.sd-headline--inline.sd-headline--size-base sd-icon,.sd-headline--inline.sd-headline--size-lg sd-icon,.sd-headline--inline.sd-headline--size-xl sd-icon{margin-right:var(--sd-spacing-0-5,.125rem)}";
+export {
+  HeadlineStyles as default
+};