@umbraco-ui/uui 2.0.0-rc.2 → 2.0.1

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

@@ -1,130 +1,113 @@
-import { LitElement, html, css } from "lit";
-import { property, query } from "lit/decorators.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import { UUIFormControlMixin as UUIFormControlWithBasicsMixin } from "../../internal/mixins/FormControlWithBasicsMixin.js";
 import { UUITextareaEvent } from "./UUITextareaEvent.js";
+import { LitElement, css, html } from "lit";
+import { property, query } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { UUIFormControlWithBasicsMixin } from "../../internal/mixins/FormControlWithBasicsMixin.js";
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(target, key, result) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const _UUITextareaElement = class _UUITextareaElement extends UUIFormControlWithBasicsMixin(
-  LitElement,
-  ""
-) {
-  constructor() {
-    super();
-    this.placeholder = "";
-    this.disabled = false;
-    this.readonly = false;
-    this.minlengthMessage = (charsLeft) => `${charsLeft} characters left`;
-    this.maxlengthMessage = (max, current) => `Maximum ${max} characters, ${current - max} too many.`;
-    this.autoHeight = false;
-    this._autoHeightRafId = null;
-    this.addValidator(
-      "tooShort",
-      () => {
-        const label = this.minlengthMessage;
-        if (typeof label === "function") {
-          return label(
-            this.minlength ? this.minlength - String(this.value).length : 0
-          );
-        }
-        return label;
-      },
-      () => !!this.minlength && String(this.value).length < this.minlength
-    );
-    this.addValidator(
-      "tooLong",
-      () => {
-        const label = this.maxlengthMessage;
-        if (typeof label === "function") {
-          return label(this.maxlength ?? 0, String(this.value).length);
-        }
-        return label;
-      },
-      () => !!this.maxlength && String(this.value).length > this.maxlength
-    );
-  }
-  set value(newValue) {
-    const oldValue = super.value;
-    super.value = newValue;
-    if (this.autoHeight && this.isConnected && oldValue !== newValue) {
-      if (this._autoHeightRafId !== null) {
-        cancelAnimationFrame(this._autoHeightRafId);
-      }
-      this._autoHeightRafId = requestAnimationFrame(() => {
-        this._autoHeightRafId = null;
-        this.autoUpdateHeight();
-      });
-    }
-  }
-  get value() {
-    return String(super.value);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    if (!this.label) {
-      console.warn(this.tagName + " needs a `label`", this);
-    }
-    if (this.autoHeight) {
-      requestAnimationFrame(() => {
-        this.autoUpdateHeight();
-      });
-    }
-  }
-  /**
-   * This method enables <label for="..."> to focus the select
-   */
-  async focus() {
-    await this.updateComplete;
-    this._textarea.focus();
-  }
-  async blur() {
-    await this.updateComplete;
-    this._textarea.blur();
-  }
-  /**
-   * This method enables <label for="..."> to open the select
-   */
-  async click() {
-    await this.updateComplete;
-    this._textarea.click();
-  }
-  getFormElement() {
-    return this._textarea;
-  }
-  onInput(e) {
-    this.value = e.target.value;
-  }
-  onChange(e) {
-    e.stopPropagation();
-    this.pristine = false;
-    this.dispatchEvent(new UUITextareaEvent(UUITextareaEvent.CHANGE));
-  }
-  autoUpdateHeight() {
-    const host = this.shadowRoot.host;
-    const input = this._textarea;
-    const scrollTop = host.scrollTop;
-    const hostHeight = getComputedStyle(host).height;
-    host.style.display = "block";
-    host.style.height = hostHeight;
-    input.style.height = "auto";
-    if (input.scrollHeight + 2 > input.clientHeight) {
-      input.style.height = input.scrollHeight + 2 + "px";
-    } else if (input.scrollHeight + 2 < input.clientHeight) {
-      input.style.removeProperty("height");
-    }
-    host.style.removeProperty("display");
-    host.style.removeProperty("height");
-    host.scrollTop = scrollTop;
-  }
-  render() {
-    return html`
+//#region src/components/textarea/textarea.element.ts
+/**
+* @element uui-textarea
+* @fires UUITextareaEvent#change on change
+* @fires InputEvent#input on input
+* @fires KeyboardEvent#keyup on keyup
+* @cssprop --uui-textarea-min-height - Sets the minimum height of the textarea
+* @cssprop --uui-textarea-max-height - Sets the maximum height of the textarea
+* @cssprop {color} --uui-textarea-background-color - Sets the background color of the textarea
+* @cssprop {color} --uui-textarea-border-color-hover - Sets the border color of the textarea when hovered
+* @cssprop --uui-textarea-font-size - Overwrites the default font size
+* @cssprop --uui-textarea-padding - Overwrites the default padding
+* @extends UUIFormControlMixin
+*/
+var UUITextareaElement = class extends UUIFormControlWithBasicsMixin(LitElement, "") {
+	static {
+		this.formAssociated = true;
+	}
+	constructor() {
+		super();
+		this.placeholder = "";
+		this.disabled = false;
+		this.readonly = false;
+		this.minlengthMessage = (charsLeft) => `${charsLeft} characters left`;
+		this.maxlengthMessage = (max, current) => `Maximum ${max} characters, ${current - max} too many.`;
+		this.autoHeight = false;
+		this._autoHeightRafId = null;
+		this.addValidator("tooShort", () => {
+			const label = this.minlengthMessage;
+			if (typeof label === "function") return label(this.minlength ? this.minlength - String(this.value).length : 0);
+			return label;
+		}, () => !!this.minlength && String(this.value).length < this.minlength);
+		this.addValidator("tooLong", () => {
+			const label = this.maxlengthMessage;
+			if (typeof label === "function") return label(this.maxlength ?? 0, String(this.value).length);
+			return label;
+		}, () => !!this.maxlength && String(this.value).length > this.maxlength);
+	}
+	set value(newValue) {
+		const oldValue = super.value;
+		super.value = newValue;
+		if (this.autoHeight && this.isConnected && oldValue !== newValue) {
+			if (this._autoHeightRafId !== null) cancelAnimationFrame(this._autoHeightRafId);
+			this._autoHeightRafId = requestAnimationFrame(() => {
+				this._autoHeightRafId = null;
+				this.autoUpdateHeight();
+			});
+		}
+	}
+	get value() {
+		return String(super.value);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.label) console.warn(this.tagName + " needs a `label`", this);
+		if (this.autoHeight) requestAnimationFrame(() => {
+			this.autoUpdateHeight();
+		});
+	}
+	/**
+	* This method enables <label for="..."> to focus the select
+	*/
+	async focus() {
+		await this.updateComplete;
+		this._textarea.focus();
+	}
+	async blur() {
+		await this.updateComplete;
+		this._textarea.blur();
+	}
+	/**
+	* This method enables <label for="..."> to open the select
+	*/
+	async click() {
+		await this.updateComplete;
+		this._textarea.click();
+	}
+	getFormElement() {
+		return this._textarea;
+	}
+	onInput(e) {
+		this.value = e.target.value;
+	}
+	onChange(e) {
+		e.stopPropagation();
+		this.pristine = false;
+		this.dispatchEvent(new UUITextareaEvent(UUITextareaEvent.CHANGE));
+	}
+	autoUpdateHeight() {
+		const host = this.shadowRoot.host;
+		const input = this._textarea;
+		const scrollTop = host.scrollTop;
+		const hostHeight = getComputedStyle(host).height;
+		host.style.display = "block";
+		host.style.height = hostHeight;
+		input.style.height = "auto";
+		if (input.scrollHeight + 2 > input.clientHeight) input.style.height = input.scrollHeight + 2 + "px";
+		else if (input.scrollHeight + 2 < input.clientHeight) input.style.removeProperty("height");
+		host.style.removeProperty("display");
+		host.style.removeProperty("height");
+		host.scrollTop = scrollTop;
+	}
+	render() {
+		return html`
       <textarea
         id="textarea"
         rows=${ifDefined(this.rows)}
@@ -140,13 +123,12 @@ const _UUITextareaElement = class _UUITextareaElement extends UUIFormControlWith
         @change=${this.onChange}>
       </textarea>
     `;
-  }
-};
-_UUITextareaElement.formAssociated = true;
-_UUITextareaElement.styles = [
-  css`
+	}
+	static {
+		this.styles = [css`
       :host {
         position: relative;
+        --uui-textarea-padding: var(--uui-size-2) var(--uui-size-3);
       }
       :host([error]) textarea,
       :host([error]) textarea[disabled] {
@@ -200,6 +182,7 @@ _UUITextareaElement.styles = [
         max-width: 100%;
         font-size: inherit;
         padding: var(--uui-size-2);
+        padding: var(--uui-textarea-padding);
         border: 1px solid
           var(--uui-textarea-border-color, var(--uui-color-border)); /** Note: Specified border size is needed and hardcoded in autoUpdateHeight() */
         border-radius: var(--uui-border-radius);
@@ -211,10 +194,15 @@ _UUITextareaElement.styles = [
           var(--uui-color-surface)
         );
       }
-      :host(:hover)
-        textarea:not([readonly]):not([disabled])
-        :host(:focus-within)
-        textarea,
+
+      :host(:hover) textarea:not([disabled]) {
+        border-color: var(
+          --uui-textarea-border-color-hover,
+          var(--uui-color-border-standalone)
+        );
+      }
+
+      :host(:focus-within) textarea,
       :host(:focus) textarea {
         border-color: var(
           --uui-textarea-border-color,
@@ -222,51 +210,36 @@ _UUITextareaElement.styles = [
         );
       }
       textarea:focus-visible {
-        outline: 2px solid var(--uui-color-focus);
+        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
+          var(--uui-color-focus);
       }
-    `
-];
-let UUITextareaElement = _UUITextareaElement;
-__decorateClass([
-  property()
-], UUITextareaElement.prototype, "placeholder");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUITextareaElement.prototype, "disabled");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUITextareaElement.prototype, "readonly");
-__decorateClass([
-  property({ type: Number })
-], UUITextareaElement.prototype, "minlength");
-__decorateClass([
-  property({ attribute: "minlength-message" })
-], UUITextareaElement.prototype, "minlengthMessage");
-__decorateClass([
-  property({ type: Number })
-], UUITextareaElement.prototype, "maxlength");
-__decorateClass([
-  property({ attribute: "maxlength-message" })
-], UUITextareaElement.prototype, "maxlengthMessage");
-__decorateClass([
-  query("#textarea")
-], UUITextareaElement.prototype, "_textarea");
-__decorateClass([
-  property({ type: Boolean, attribute: "auto-height", reflect: true })
-], UUITextareaElement.prototype, "autoHeight");
-__decorateClass([
-  property({ type: String })
-], UUITextareaElement.prototype, "label");
-__decorateClass([
-  property({ type: Number })
-], UUITextareaElement.prototype, "rows");
-__decorateClass([
-  property({ type: Number })
-], UUITextareaElement.prototype, "cols");
-__decorateClass([
-  property({ type: String })
-], UUITextareaElement.prototype, "wrap");
-export {
-  UUITextareaElement
+    `];
+	}
 };
-//# sourceMappingURL=textarea.element.js.map
+__decorate([property()], UUITextareaElement.prototype, "placeholder", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUITextareaElement.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUITextareaElement.prototype, "readonly", void 0);
+__decorate([property({ type: Number })], UUITextareaElement.prototype, "minlength", void 0);
+__decorate([property({ attribute: "minlength-message" })], UUITextareaElement.prototype, "minlengthMessage", void 0);
+__decorate([property({ type: Number })], UUITextareaElement.prototype, "maxlength", void 0);
+__decorate([property({ attribute: "maxlength-message" })], UUITextareaElement.prototype, "maxlengthMessage", void 0);
+__decorate([query("#textarea")], UUITextareaElement.prototype, "_textarea", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "auto-height",
+	reflect: true
+})], UUITextareaElement.prototype, "autoHeight", void 0);
+__decorate([property({ type: String })], UUITextareaElement.prototype, "label", void 0);
+__decorate([property({ type: Number })], UUITextareaElement.prototype, "rows", void 0);
+__decorate([property({ type: Number })], UUITextareaElement.prototype, "cols", void 0);
+__decorate([property({ type: String })], UUITextareaElement.prototype, "wrap", void 0);
+//#endregion
+export { UUITextareaElement };
+
+//# sourceMappingURL=textarea.element.js.map

package/dist/components/textarea/textarea.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.element.js","sources":["../../../src/components/textarea/textarea.element.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { UUITextareaEvent } from './UUITextareaEvent.js';\nimport { UUIFormControlWithBasicsMixin } from '../../internal/mixins/index.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\n/**\n * @element uui-textarea\n * @fires UUITextareaEvent#change on change\n * @fires InputEvent#input on input\n * @fires KeyboardEvent#keyup on keyup\n * @cssprop --uui-textarea-min-height - Sets the minimum height of the textarea\n * @cssprop --uui-textarea-max-height - Sets the maximum height of the textarea\n * @cssprop {color} --uui-textarea-background-color - Sets the background color of the textarea\n * @cssprop --uui-textarea-font-size - Overwrites the default font size\n * @extends UUIFormControlMixin\n */\n\nexport class UUITextareaElement extends UUIFormControlWithBasicsMixin(\n  LitElement,\n  '',\n) {\n  /**\n   * This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.  Read more about form controls here https://web.dev/more-capable-form-controls/\n   * @type {boolean}\n   */\n  static readonly formAssociated = true;\n\n  /**\n   * Defines the textarea placeholder.\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property()\n  placeholder = '';\n\n  /**\n   * Disables the textarea.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * This is a minimum value of the input.\n   * @type {number}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: Number })\n  minlength?: number;\n\n  /**\n   * Minlength validation message.\n   * @attr\n   * @default\n   */\n  @property({ attribute: 'minlength-message' })\n  minlengthMessage: string | ((charsLeft: number) => string) = charsLeft =>\n    `${charsLeft} characters left`;\n  /**\n   * This is a maximum value of the input.\n   * @type {number}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: Number })\n  maxlength?: number;\n\n  /**\n   * Maxlength validation message.\n   * @attr\n   * @default\n   */\n  @property({ attribute: 'maxlength-message' })\n  maxlengthMessage: string | ((max: number, current: number) => string) = (\n    max,\n    current,\n  ) => `Maximum ${max} characters, ${current - max} too many.`;\n\n  @query('#textarea')\n  protected readonly _textarea!: HTMLInputElement;\n\n  /**\n   * Enables automatic height adjustment. The height will be confined within the min and max height if defined.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, attribute: 'auto-height', reflect: true })\n  autoHeight = false;\n\n  /**\n   * Label to be used for aria-label and eventually as visual label\n   * @type {string}\n   * @attr\n   */\n  @property({ type: String })\n  public label!: string;\n\n  /**\n   * Sets the number of rows of the textarea\n   * @type {number}\n   * @attr\n   */\n  @property({ type: Number })\n  rows?: number;\n\n  /**\n   * Sets the number of cols of the textarea\n   * @type {number}\n   * @attr\n   */\n  @property({ type: Number })\n  cols?: number;\n\n  /**\n   * Indicates how the control should wrap the value for form submission. If this attribute is not specified, soft is its default value.\n   * @type {'soft' | 'hard'}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  wrap?: 'soft' | 'hard';\n\n  constructor() {\n    super();\n\n    this.addValidator(\n      'tooShort',\n      () => {\n        const label = this.minlengthMessage;\n        if (typeof label === 'function') {\n          return label(\n            this.minlength ? this.minlength - String(this.value).length : 0,\n          );\n        }\n        return label;\n      },\n      () => !!this.minlength && String(this.value).length < this.minlength,\n    );\n    this.addValidator(\n      'tooLong',\n      () => {\n        const label = this.maxlengthMessage;\n        if (typeof label === 'function') {\n          return label(this.maxlength ?? 0, String(this.value).length);\n        }\n        return label;\n      },\n      () => !!this.maxlength && String(this.value).length > this.maxlength,\n    );\n  }\n\n  /**\n   * Override value setter to trigger autoUpdateHeight when value changes\n   */\n  private _autoHeightRafId: number | null = null;\n\n  override set value(newValue: string) {\n    const oldValue = super.value;\n    super.value = newValue;\n    // If autoHeight is enabled and component is connected, update height\n    // Only trigger if the value actually changed\n    if (this.autoHeight && this.isConnected && oldValue !== newValue) {\n      // Cancel any previously scheduled height update to avoid redundant calls\n      if (this._autoHeightRafId !== null) {\n        cancelAnimationFrame(this._autoHeightRafId);\n      }\n      // Schedule height update after the DOM has been updated\n      // We use requestAnimationFrame to ensure the textarea's value has been updated in the DOM\n      this._autoHeightRafId = requestAnimationFrame(() => {\n        this._autoHeightRafId = null;\n        this.autoUpdateHeight();\n      });\n    }\n  }\n\n  override get value(): string {\n    return String(super.value);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.label) {\n      console.warn(this.tagName + ' needs a `label`', this);\n    }\n\n    if (this.autoHeight) {\n      requestAnimationFrame(() => {\n        this.autoUpdateHeight();\n      });\n    }\n  }\n\n  /**\n   * This method enables <label for=\"...\"> to focus the select\n   */\n  async focus() {\n    await this.updateComplete;\n    this._textarea.focus();\n  }\n  async blur() {\n    await this.updateComplete;\n    this._textarea.blur();\n  }\n  /**\n   * This method enables <label for=\"...\"> to open the select\n   */\n  async click() {\n    await this.updateComplete;\n    this._textarea.click();\n  }\n\n  protected getFormElement(): HTMLElement {\n    return this._textarea;\n  }\n\n  private onInput(e: Event) {\n    this.value = (e.target as HTMLTextAreaElement).value;\n  }\n\n  private onChange(e: Event) {\n    e.stopPropagation();\n    this.pristine = false;\n    this.dispatchEvent(new UUITextareaEvent(UUITextareaEvent.CHANGE));\n  }\n\n  private autoUpdateHeight() {\n    const host = this.shadowRoot!.host! as HTMLElement;\n    const input = this._textarea;\n\n    // Temporarily lock the height of the shadowroot host to prevent\n    // the page scroll from moving when changing the textarea height\n    const scrollTop = host.scrollTop;\n    const hostHeight = getComputedStyle(host).height;\n    host.style.display = 'block';\n    host.style.height = hostHeight;\n\n    input.style.height = 'auto';\n\n    // Note: Add + 2 because of the border top+bottom 1px each\n    if (input.scrollHeight + 2 > input.clientHeight) {\n      input.style.height = input.scrollHeight + 2 + 'px';\n    } else if (input.scrollHeight + 2 < input.clientHeight) {\n      input.style.removeProperty('height');\n    }\n\n    // Reset host styles and scroll to where we were\n    host.style.removeProperty('display');\n    host.style.removeProperty('height');\n    host.scrollTop = scrollTop;\n  }\n\n  render() {\n    return html`\n      <textarea\n        id=\"textarea\"\n        rows=${ifDefined(this.rows)}\n        cols=${ifDefined(this.cols)}\n        .value=${String(this.value)}\n        .name=${this.name}\n        wrap=${ifDefined(this.wrap)}\n        placeholder=${this.placeholder}\n        aria-label=${this.label}\n        .disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        @input=${this.onInput}\n        @change=${this.onChange}>\n      </textarea>\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        position: relative;\n      }\n      :host([error]) textarea,\n      :host([error]) textarea[disabled] {\n        border: 1px solid var(--uui-color-invalid) !important;\n      }\n      :host(:not([pristine]):invalid) textarea,\n      /* polyfill support */\n      :host(:not([pristine])[internals-invalid]) textarea {\n        border-color: var(--uui-color-invalid);\n      }\n      :host([auto-height]) textarea {\n        resize: none;\n      }\n\n      .label {\n        display: inline-block;\n        margin-bottom: var(--uui-size-1);\n        font-weight: bold;\n      }\n\n      textarea[readonly] {\n        border-color: var(\n          --uui-textarea-border-color-readonly,\n          var(--uui-color-disabled-standalone)\n        );\n        background-color: var(\n          --uui-textarea-background-color-readonly,\n          var(--uui-color-disabled)\n        );\n      }\n      textarea[disabled] {\n        cursor: not-allowed;\n        background-color: var(\n          --uui-textarea-background-color-disabled,\n          var(--uui-color-disabled)\n        );\n        border-color: var(\n          --uui-textarea-border-color-disabled,\n          var(--uui-color-disabled)\n        );\n\n        color: var(--uui-color-disabled-contrast);\n      }\n\n      textarea {\n        color: var(--uui-color-text);\n        font-family: inherit;\n        line-height: var(--uui-size-6);\n        box-sizing: border-box;\n        min-width: 100%;\n        max-width: 100%;\n        font-size: inherit;\n        padding: var(--uui-size-2);\n        border: 1px solid\n          var(--uui-textarea-border-color, var(--uui-color-border)); /** Note: Specified border size is needed and hardcoded in autoUpdateHeight() */\n        border-radius: var(--uui-border-radius);\n        outline: none;\n        min-height: var(--uui-textarea-min-height);\n        max-height: var(--uui-textarea-max-height);\n        background-color: var(\n          --uui-textarea-background-color,\n          var(--uui-color-surface)\n        );\n      }\n      :host(:hover)\n        textarea:not([readonly]):not([disabled])\n        :host(:focus-within)\n        textarea,\n      :host(:focus) textarea {\n        border-color: var(\n          --uui-textarea-border-color,\n          var(--uui-color-border-emphasis)\n        );\n      }\n      textarea:focus-visible {\n        outline: 2px solid var(--uui-color-focus);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"textarea.element.js","names":[],"sources":["../../../src/components/textarea/textarea.element.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { UUITextareaEvent } from './UUITextareaEvent.js';\nimport { UUIFormControlWithBasicsMixin } from '../../internal/mixins/index.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\n/**\n * @element uui-textarea\n * @fires UUITextareaEvent#change on change\n * @fires InputEvent#input on input\n * @fires KeyboardEvent#keyup on keyup\n * @cssprop --uui-textarea-min-height - Sets the minimum height of the textarea\n * @cssprop --uui-textarea-max-height - Sets the maximum height of the textarea\n * @cssprop {color} --uui-textarea-background-color - Sets the background color of the textarea\n * @cssprop {color} --uui-textarea-border-color-hover - Sets the border color of the textarea when hovered\n * @cssprop --uui-textarea-font-size - Overwrites the default font size\n * @cssprop --uui-textarea-padding - Overwrites the default padding\n * @extends UUIFormControlMixin\n */\n\nexport class UUITextareaElement extends UUIFormControlWithBasicsMixin(\n  LitElement,\n  '',\n) {\n  /**\n   * This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.  Read more about form controls here https://web.dev/more-capable-form-controls/\n   * @type {boolean}\n   */\n  static readonly formAssociated = true;\n\n  /**\n   * Defines the textarea placeholder.\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property()\n  placeholder = '';\n\n  /**\n   * Disables the textarea.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * This is a minimum value of the input.\n   * @type {number}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: Number })\n  minlength?: number;\n\n  /**\n   * Minlength validation message.\n   * @attr\n   * @default\n   */\n  @property({ attribute: 'minlength-message' })\n  minlengthMessage: string | ((charsLeft: number) => string) = charsLeft =>\n    `${charsLeft} characters left`;\n  /**\n   * This is a maximum value of the input.\n   * @type {number}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: Number })\n  maxlength?: number;\n\n  /**\n   * Maxlength validation message.\n   * @attr\n   * @default\n   */\n  @property({ attribute: 'maxlength-message' })\n  maxlengthMessage: string | ((max: number, current: number) => string) = (\n    max,\n    current,\n  ) => `Maximum ${max} characters, ${current - max} too many.`;\n\n  @query('#textarea')\n  protected readonly _textarea!: HTMLInputElement;\n\n  /**\n   * Enables automatic height adjustment. The height will be confined within the min and max height if defined.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, attribute: 'auto-height', reflect: true })\n  autoHeight = false;\n\n  /**\n   * Label to be used for aria-label and eventually as visual label\n   * @type {string}\n   * @attr\n   */\n  @property({ type: String })\n  public label!: string;\n\n  /**\n   * Sets the number of rows of the textarea\n   * @type {number}\n   * @attr\n   */\n  @property({ type: Number })\n  rows?: number;\n\n  /**\n   * Sets the number of cols of the textarea\n   * @type {number}\n   * @attr\n   */\n  @property({ type: Number })\n  cols?: number;\n\n  /**\n   * Indicates how the control should wrap the value for form submission. If this attribute is not specified, soft is its default value.\n   * @type {'soft' | 'hard'}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  wrap?: 'soft' | 'hard';\n\n  constructor() {\n    super();\n\n    this.addValidator(\n      'tooShort',\n      () => {\n        const label = this.minlengthMessage;\n        if (typeof label === 'function') {\n          return label(\n            this.minlength ? this.minlength - String(this.value).length : 0,\n          );\n        }\n        return label;\n      },\n      () => !!this.minlength && String(this.value).length < this.minlength,\n    );\n    this.addValidator(\n      'tooLong',\n      () => {\n        const label = this.maxlengthMessage;\n        if (typeof label === 'function') {\n          return label(this.maxlength ?? 0, String(this.value).length);\n        }\n        return label;\n      },\n      () => !!this.maxlength && String(this.value).length > this.maxlength,\n    );\n  }\n\n  /**\n   * Override value setter to trigger autoUpdateHeight when value changes\n   */\n  private _autoHeightRafId: number | null = null;\n\n  override set value(newValue: string) {\n    const oldValue = super.value;\n    super.value = newValue;\n    // If autoHeight is enabled and component is connected, update height\n    // Only trigger if the value actually changed\n    if (this.autoHeight && this.isConnected && oldValue !== newValue) {\n      // Cancel any previously scheduled height update to avoid redundant calls\n      if (this._autoHeightRafId !== null) {\n        cancelAnimationFrame(this._autoHeightRafId);\n      }\n      // Schedule height update after the DOM has been updated\n      // We use requestAnimationFrame to ensure the textarea's value has been updated in the DOM\n      this._autoHeightRafId = requestAnimationFrame(() => {\n        this._autoHeightRafId = null;\n        this.autoUpdateHeight();\n      });\n    }\n  }\n\n  override get value(): string {\n    return String(super.value);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.label) {\n      console.warn(this.tagName + ' needs a `label`', this);\n    }\n\n    if (this.autoHeight) {\n      requestAnimationFrame(() => {\n        this.autoUpdateHeight();\n      });\n    }\n  }\n\n  /**\n   * This method enables <label for=\"...\"> to focus the select\n   */\n  async focus() {\n    await this.updateComplete;\n    this._textarea.focus();\n  }\n  async blur() {\n    await this.updateComplete;\n    this._textarea.blur();\n  }\n  /**\n   * This method enables <label for=\"...\"> to open the select\n   */\n  async click() {\n    await this.updateComplete;\n    this._textarea.click();\n  }\n\n  protected getFormElement(): HTMLElement {\n    return this._textarea;\n  }\n\n  private onInput(e: Event) {\n    this.value = (e.target as HTMLTextAreaElement).value;\n  }\n\n  private onChange(e: Event) {\n    e.stopPropagation();\n    this.pristine = false;\n    this.dispatchEvent(new UUITextareaEvent(UUITextareaEvent.CHANGE));\n  }\n\n  private autoUpdateHeight() {\n    const host = this.shadowRoot!.host! as HTMLElement;\n    const input = this._textarea;\n\n    // Temporarily lock the height of the shadowroot host to prevent\n    // the page scroll from moving when changing the textarea height\n    const scrollTop = host.scrollTop;\n    const hostHeight = getComputedStyle(host).height;\n    host.style.display = 'block';\n    host.style.height = hostHeight;\n\n    input.style.height = 'auto';\n\n    // Note: Add + 2 because of the border top+bottom 1px each\n    if (input.scrollHeight + 2 > input.clientHeight) {\n      input.style.height = input.scrollHeight + 2 + 'px';\n    } else if (input.scrollHeight + 2 < input.clientHeight) {\n      input.style.removeProperty('height');\n    }\n\n    // Reset host styles and scroll to where we were\n    host.style.removeProperty('display');\n    host.style.removeProperty('height');\n    host.scrollTop = scrollTop;\n  }\n\n  render() {\n    return html`\n      <textarea\n        id=\"textarea\"\n        rows=${ifDefined(this.rows)}\n        cols=${ifDefined(this.cols)}\n        .value=${String(this.value)}\n        .name=${this.name}\n        wrap=${ifDefined(this.wrap)}\n        placeholder=${this.placeholder}\n        aria-label=${this.label}\n        .disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        @input=${this.onInput}\n        @change=${this.onChange}>\n      </textarea>\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        position: relative;\n        --uui-textarea-padding: var(--uui-size-2) var(--uui-size-3);\n      }\n      :host([error]) textarea,\n      :host([error]) textarea[disabled] {\n        border: 1px solid var(--uui-color-invalid) !important;\n      }\n      :host(:not([pristine]):invalid) textarea,\n      /* polyfill support */\n      :host(:not([pristine])[internals-invalid]) textarea {\n        border-color: var(--uui-color-invalid);\n      }\n      :host([auto-height]) textarea {\n        resize: none;\n      }\n\n      .label {\n        display: inline-block;\n        margin-bottom: var(--uui-size-1);\n        font-weight: bold;\n      }\n\n      textarea[readonly] {\n        border-color: var(\n          --uui-textarea-border-color-readonly,\n          var(--uui-color-disabled-standalone)\n        );\n        background-color: var(\n          --uui-textarea-background-color-readonly,\n          var(--uui-color-disabled)\n        );\n      }\n      textarea[disabled] {\n        cursor: not-allowed;\n        background-color: var(\n          --uui-textarea-background-color-disabled,\n          var(--uui-color-disabled)\n        );\n        border-color: var(\n          --uui-textarea-border-color-disabled,\n          var(--uui-color-disabled)\n        );\n\n        color: var(--uui-color-disabled-contrast);\n      }\n\n      textarea {\n        color: var(--uui-color-text);\n        font-family: inherit;\n        line-height: var(--uui-size-6);\n        box-sizing: border-box;\n        min-width: 100%;\n        max-width: 100%;\n        font-size: inherit;\n        padding: var(--uui-size-2);\n        padding: var(--uui-textarea-padding);\n        border: 1px solid\n          var(--uui-textarea-border-color, var(--uui-color-border)); /** Note: Specified border size is needed and hardcoded in autoUpdateHeight() */\n        border-radius: var(--uui-border-radius);\n        outline: none;\n        min-height: var(--uui-textarea-min-height);\n        max-height: var(--uui-textarea-max-height);\n        background-color: var(\n          --uui-textarea-background-color,\n          var(--uui-color-surface)\n        );\n      }\n\n      :host(:hover) textarea:not([disabled]) {\n        border-color: var(\n          --uui-textarea-border-color-hover,\n          var(--uui-color-border-standalone)\n        );\n      }\n\n      :host(:focus-within) textarea,\n      :host(:focus) textarea {\n        border-color: var(\n          --uui-textarea-border-color,\n          var(--uui-color-border-emphasis)\n        );\n      }\n      textarea:focus-visible {\n        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid\n          var(--uui-color-focus);\n      }\n    `,\n  ];\n}\n"],"mappings":"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"}

package/dist/components/textarea/textarea.js

@@ -1,10 +1,9 @@
 import { defineElement } from "../../internal/registration/index.js";
-import { UUITextareaElement } from "./textarea.element.js";
 import { UUITextareaEvent } from "./UUITextareaEvent.js";
+import { UUITextareaElement } from "./textarea.element.js";
+//#region src/components/textarea/textarea.ts
 defineElement("uui-textarea", UUITextareaElement);
-export {
-  UUITextareaElement,
-  UUITextareaEvent,
-  UUITextareaElement as default
-};
-//# sourceMappingURL=textarea.js.map
+//#endregion
+export { UUITextareaElement, UUITextareaEvent };
+
+//# sourceMappingURL=textarea.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","sources":["../../../src/components/textarea/textarea.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUITextareaElement } from './textarea.element.js';\n\ndefineElement('uui-textarea', UUITextareaElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-textarea': UUITextareaElement;\n  }\n}\n\nexport * from './textarea.element.js';\nexport * from './UUITextareaEvent.js';\nexport { UUITextareaElement as default } from './textarea.element.js';\n"],"names":[],"mappings":";;;AAGA,cAAc,gBAAgB,kBAAkB;"}
+{"version":3,"file":"textarea.js","names":[],"sources":["../../../src/components/textarea/textarea.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUITextareaElement } from './textarea.element.js';\n\ndefineElement('uui-textarea', UUITextareaElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-textarea': UUITextareaElement;\n  }\n}\n\nexport * from './textarea.element.js';\nexport * from './UUITextareaEvent.js';\n"],"mappings":";;;;AAGA,cAAc,gBAAgB,kBAAkB"}

package/dist/components/toast-notification/UUIToastNotificationEvent.js

@@ -1,12 +1,20 @@
 import { UUIEvent } from "../../internal/events/UUIEvent.js";
-const _UUIToastNotificationEvent = class _UUIToastNotificationEvent extends UUIEvent {
+//#region src/components/toast-notification/UUIToastNotificationEvent.ts
+var UUIToastNotificationEvent = class extends UUIEvent {
+	static {
+		this.OPENING = "opening";
+	}
+	static {
+		this.OPENED = "opened";
+	}
+	static {
+		this.CLOSING = "closing";
+	}
+	static {
+		this.CLOSED = "closed";
+	}
 };
-_UUIToastNotificationEvent.OPENING = "opening";
-_UUIToastNotificationEvent.OPENED = "opened";
-_UUIToastNotificationEvent.CLOSING = "closing";
-_UUIToastNotificationEvent.CLOSED = "closed";
-let UUIToastNotificationEvent = _UUIToastNotificationEvent;
-export {
-  UUIToastNotificationEvent
-};
-//# sourceMappingURL=UUIToastNotificationEvent.js.map
+//#endregion
+export { UUIToastNotificationEvent };
+
+//# sourceMappingURL=UUIToastNotificationEvent.js.map

package/dist/components/toast-notification/UUIToastNotificationEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"UUIToastNotificationEvent.js","sources":["../../../src/components/toast-notification/UUIToastNotificationEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\n\nimport type { UUIToastNotificationElement } from './toast-notification.element.js';\n\nexport class UUIToastNotificationEvent extends UUIEvent<\n  {},\n  UUIToastNotificationElement\n> {\n  public static readonly OPENING = 'opening';\n  public static readonly OPENED = 'opened';\n  public static readonly CLOSING = 'closing';\n  public static readonly CLOSED = 'closed';\n}\n"],"names":[],"mappings":";AAIO,MAAM,6BAAN,MAAM,mCAAkC,SAG7C;AAKF;AAJE,2BAAuB,UAAU;AACjC,2BAAuB,SAAS;AAChC,2BAAuB,UAAU;AACjC,2BAAuB,SAAS;AAP3B,IAAM,4BAAN;"}
+{"version":3,"file":"UUIToastNotificationEvent.js","names":[],"sources":["../../../src/components/toast-notification/UUIToastNotificationEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\n\nimport type { UUIToastNotificationElement } from './toast-notification.element.js';\n\nexport class UUIToastNotificationEvent extends UUIEvent<\n  {},\n  UUIToastNotificationElement\n> {\n  public static readonly OPENING = 'opening';\n  public static readonly OPENED = 'opened';\n  public static readonly CLOSING = 'closing';\n  public static readonly CLOSED = 'closed';\n}\n"],"mappings":";;AAIA,IAAa,4BAAb,cAA+C,SAG7C;;iBACiC;;;gBACD;;;iBACC;;;gBACD;;AAClC"}

package/dist/components/toast-notification/toast-notification.d.ts

@@ -6,4 +6,3 @@ declare global {
 }
 export * from './toast-notification.element.js';
 export * from './UUIToastNotificationEvent.js';
-export { UUIToastNotificationElement as default } from './toast-notification.element.js';