@luzmo/lucero 1.0.1-alpha.9 → 1.0.2

package/components/text-field-BoGAvXvh.js

@@ -0,0 +1,44 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { n as e, t } from "./decorate-aGxJUVxg.js";
+import { n } from "./sized-mixin-DaBoZkVS.js";
+import { t as r } from "./text-field-Cs8HYRYL.js";
+import { html as i, nothing as a, unsafeCSS as o } from "lit";
+import { property as s } from "lit/decorators.js";
+import { luzmoClose14 as c, luzmoIcon as l } from "@luzmo/icons";
+//#region src/components/text-field/help-text.module.scss?inline
+var u = "@media (forced-colors:active){:host{--highcontrast-helptext-content-color-default:CanvasText;--highcontrast-helptext-icon-color-default:CanvasText}:host,.text,.icon{forced-color-adjust:none}}:host{--helptext-bottom-to-workflow-icon:3px;color:var(--highcontrast-helptext-content-color-default,var(--luzmo-helptext-content-color-default,var(--helptext-content-color-default)));font-family:var(--luzmo-helptext-font-family,var(--luzmo-font-family));font-weight:var(--luzmo-helptext-font-weight,var(--luzmo-font-weight));font-size:var(--luzmo-helptext-font-size,var(--helptext-font-size,var(--luzmo-font-size-s)));min-block-size:var(--luzmo-helptext-min-height,var(--helptext-min-height,24px));display:flex}.icon{block-size:var(--luzmo-helptext-icon-size,var(--helptext-icon-size,18px));inline-size:var(--luzmo-helptext-icon-size,var(--helptext-icon-size,18px));flex-shrink:0;margin-inline-end:var(--luzmo-helptext-text-to-visual,var(--helptext-text-to-visual,7px));padding-block-start:var(--luzmo-helptext-top-to-workflow-icon,var(--helptext-top-to-workflow-icon,3px));padding-block-end:var(--luzmo-helptext-bottom-to-workflow-icon,var(--helptext-bottom-to-workflow-icon,3px))}.text{line-height:var(--luzmo-helptext-line-height,var(--helptext-line-height,1.3));padding-block-start:var(--luzmo-helptext-top-to-text,var(--helptext-top-to-text,4px));padding-block-end:var(--luzmo-helptext-bottom-to-text,var(--helptext-bottom-to-text,5px))}:host(:lang(ja)) .text,:host(:lang(ko)) .text,:host(:lang(zh)) .text{line-height:var(--luzmo-helptext-line-height-cjk,var(--helptext-line-height-cjk,1.4))}:host([variant=neutral]) .text{color:var(--highcontrast-helptext-content-color-default,var(--luzmo-helptext-content-color-default,var(--helptext-content-color-default)))}:host([variant=neutral]) .icon{color:var(--highcontrast-helptext-icon-color-default,var(--luzmo-helptext-icon-color-default,var(--helptext-icon-color-default)))}:host([variant=negative]) .text{color:var(--highcontrast-helptext-content-color-default,var(--luzmo-helptext-content-color-default,var(--luzmo-negative-color-down)))}:host([variant=negative]) .icon{color:var(--highcontrast-helptext-icon-color-default,var(--luzmo-helptext-icon-color-default,var(--helptext-icon-color-default)))}:host([disabled]) .text{color:var(--highcontrast-helptext-content-color-default,var(--luzmo-helptext-content-color-default,var(--luzmo-font-color)))}:host([disabled]) .icon{color:var(--highcontrast-helptext-icon-color-default,var(--luzmo-helptext-icon-color-default,var(--helptext-icon-color-default)))}:host{--helptext-line-height:1.3;--helptext-content-color-default:var(--luzmo-font-color);--helptext-icon-color-default:var(--luzmo-font-color);--helptext-disabled-content-color:var(--luzmo-font-color-disabled)}:host([variant=neutral]){--helptext-content-color-default:var(--luzmo-font-color);--helptext-icon-color-default:var(--luzmo-font-color)}:host([variant=negative]){--helptext-content-color-default:var(--luzmo-negative-color);--helptext-icon-color-default:var(--luzmo-negative-color)}:host([disabled]){--helptext-content-color-default:var(--luzmo-font-color-disabled);--helptext-icon-color-default:var(--luzmo-font-color-disabled)}:host(:lang(ja)),:host(:lang(zh)),:host(:lang(ko)){--helptext-line-height-cjk:1.4}:host([size=s]){--helptext-min-height:24px;--helptext-icon-size:16px;--helptext-font-size:12px;--helptext-text-to-visual:7px;--helptext-top-to-workflow-icon:4px;--helptext-top-to-text:4px;--helptext-bottom-to-text:5px}:host{--helptext-min-height:24px;--helptext-icon-size:18px;--helptext-font-size:12px;--helptext-text-to-visual:7px;--helptext-top-to-workflow-icon:3px;--helptext-top-to-text:4px;--helptext-bottom-to-text:5px}:host([size=l]){--helptext-min-height:32px;--helptext-icon-size:20px;--helptext-font-size:14px;--helptext-text-to-visual:8px;--helptext-top-to-workflow-icon:6px;--helptext-top-to-text:6px;--helptext-bottom-to-text:5px}:host([size=xl]){--helptext-min-height:40px;--helptext-icon-size:22px;--helptext-font-size:16px;--helptext-text-to-visual:9px;--helptext-top-to-workflow-icon:9px;--helptext-top-to-text:9px;--helptext-bottom-to-text:12px}", d = class extends n(e, { noDefaultSize: !0 }) {
+	constructor(...e) {
+		super(...e), this.icon = !1, this.variant = "neutral";
+	}
+	static get styles() {
+		return [o(u)];
+	}
+	render() {
+		return i`
+      ${this.variant === "negative" && this.icon ? i` ${l(c)} ` : a}
+      <div class="text"><slot></slot></div>
+    `;
+	}
+};
+t([s({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "icon", void 0), t([s({ reflect: !0 })], d.prototype, "variant", void 0), customElements.get("luzmo-text-field") || customElements.define("luzmo-text-field", r), customElements.get("luzmo-help-text") || customElements.define("luzmo-help-text", d);
+//#endregion
+export { d as t };

package/components/text-field-Cs8HYRYL.js

@@ -0,0 +1,256 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { t as e } from "./decorate-aGxJUVxg.js";
+import { n as t } from "./sized-mixin-DaBoZkVS.js";
+import { t as n } from "./focusable-BmS8IzhH.js";
+import { t as r } from "./manage-help-text-CF0xBh0F.js";
+import { t as i } from "./text-field.module-Btsve-VN.js";
+import { html as a, nothing as o, unsafeCSS as s } from "lit";
+import { property as c, query as l, state as u } from "lit/decorators.js";
+import { luzmoAlert as d, luzmoCheck as f, luzmoIcon as p } from "@luzmo/icons";
+import { ifDefined as m } from "lit/directives/if-defined.js";
+import { live as h } from "lit/directives/live.js";
+//#region src/components/text-field/text-field.ts
+var g = [
+	"text",
+	"url",
+	"tel",
+	"email",
+	"password"
+], _ = class extends r(t(n, { noDefaultSize: !0 })) {
+	constructor(...e) {
+		super(...e), this.allowedKeys = "", this.focused = !1, this.invalid = !1, this.label = "", this.placeholder = "", this._type = "text", this.grows = !1, this.maxlength = -1, this.minlength = -1, this.multiline = !1, this.readonly = !1, this.rows = -1, this.maxRows = -1, this.valid = !1, this.hideValidationIcons = !1, this._value = "", this.quiet = !1, this.required = !1;
+	}
+	static get styles() {
+		return [s(i)];
+	}
+	applyFocusElementLabel(e) {
+		this.appliedLabel = e;
+	}
+	set type(e) {
+		let t = this._type;
+		this._type = e, this.requestUpdate("type", t);
+	}
+	get type() {
+		return g.find((e) => e === this._type) ?? "text";
+	}
+	set value(e) {
+		if (e === this.value) return;
+		let t = this._value;
+		this._value = e, this.requestUpdate("value", t);
+	}
+	get value() {
+		return this._value;
+	}
+	get focusElement() {
+		return this.inputElement;
+	}
+	setSelectionRange(e, t, n = "none") {
+		this.inputElement.setSelectionRange(e, t, n);
+	}
+	select() {
+		this.inputElement.select();
+	}
+	handleInput(e) {
+		if (this.allowedKeys && this.inputElement.value && !RegExp(`^[${this.allowedKeys}]*$`, "u").test(this.inputElement.value)) {
+			let e = this.inputElement.selectionStart - 1;
+			this.inputElement.value = this.value.toString(), this.inputElement.setSelectionRange(e, e);
+			return;
+		}
+		this.value = this.inputElement.value;
+	}
+	handleChange() {
+		this.dispatchEvent(new Event("change", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	onFocus() {
+		this.focused = !this.readonly && !0;
+	}
+	onBlur(e) {
+		this.focused = !this.readonly && !1;
+	}
+	handleInputElementPointerdown() {}
+	renderStateIcons() {
+		return this.hideValidationIcons ? o : this.invalid ? a`
+        <div id="invalid" class="icon">${p(d)}</div>
+      ` : this.valid ? a`
+        <div id="valid" class="icon">${p(f)}</div>
+      ` : o;
+	}
+	get displayValue() {
+		return this.value.toString();
+	}
+	calculateMaxHeight() {
+		if (this.maxRows < 1 || !this.multiline || !this.grows || !this.inputElement) return;
+		let e = window.getComputedStyle(this.inputElement), t = Number.parseFloat(e.lineHeight), n = Number.parseFloat(e.paddingTop), r = Number.parseFloat(e.paddingBottom), i = Number.parseFloat(e.borderTopWidth), a = Number.parseFloat(e.borderBottomWidth), o = Number.parseFloat(e.fontSize), s = Number.isNaN(t) || t === 0 ? o * 1.2 : t;
+		return this.maxRows * s + n + r + i + a;
+	}
+	get renderMultiline() {
+		let e = "";
+		return this.calculatedMaxHeight !== void 0 && (e = `max-height: ${this.calculatedMaxHeight}px;`), a`
+      ${this.multiline && this.grows ? a`
+          <div id="sizer" class="input" aria-hidden="true" style=${e}>${this.value}&#8203;
+          </div>
+        ` : o}
+      <!-- @ts-ignore -->
+      <textarea
+        name=${m(this.name || void 0)}
+        aria-describedby=${this.helpTextId}
+        aria-label=${this.label || this.appliedLabel || this.placeholder}
+        aria-invalid=${m(this.invalid || void 0)}
+        class="input"
+        maxlength=${m(this.maxlength > -1 ? this.maxlength : void 0)}
+        minlength=${m(this.minlength > -1 ? this.minlength : void 0)}
+        title=${this.invalid ? "" : o}
+        pattern=${m(this.pattern)}
+        placeholder=${this.placeholder}
+        .value=${this.displayValue}
+        @change=${this.handleChange}
+        @input=${this.handleInput}
+        @focus=${this.onFocus}
+        @blur=${this.onBlur}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+        ?readonly=${this.readonly}
+        rows=${m(this.rows > -1 ? this.rows : void 0)}
+        autocomplete=${m(this.autocomplete)}
+      ></textarea>
+    `;
+	}
+	get renderInput() {
+		return a`
+      <!-- @ts-ignore -->
+      <input
+        name=${m(this.name || void 0)}
+        type=${this.type}
+        aria-describedby=${this.helpTextId}
+        aria-label=${this.label || this.appliedLabel || this.placeholder}
+        aria-invalid=${m(this.invalid || void 0)}
+        class="input"
+        title=${this.invalid ? "" : o}
+        maxlength=${m(this.maxlength > -1 ? this.maxlength : void 0)}
+        minlength=${m(this.minlength > -1 ? this.minlength : void 0)}
+        pattern=${m(this.pattern)}
+        placeholder=${this.placeholder}
+        .value=${h(this.displayValue)}
+        @change=${this.handleChange}
+        @input=${this.handleInput}
+        @pointerdown=${this.handleInputElementPointerdown}
+        @focus=${this.onFocus}
+        @blur=${this.onBlur}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+        ?readonly=${this.readonly}
+        autocomplete=${m(this.autocomplete)}
+      />
+    `;
+	}
+	renderField() {
+		return a`
+      ${this.renderStateIcons()}
+      ${this.multiline ? this.renderMultiline : this.renderInput}
+    `;
+	}
+	render() {
+		return a`
+      <div id="text-field">${this.renderField()}</div>
+      ${this.renderHelpText(this.invalid)}
+    `;
+	}
+	update(e) {
+		(e.has("value") || e.has("required") && this.required) && this.updateComplete.then(() => {
+			this.checkValidity();
+		}), e.has("maxRows") && (this.maxRows >= 1 ? this.setAttribute("max-rows", String(this.maxRows)) : this.removeAttribute("max-rows")), (e.has("maxRows") || e.has("multiline") || e.has("grows") || e.has("size") || e.has("value") && this.multiline && this.grows && this.maxRows >= 1) && requestAnimationFrame(() => {
+			this.recalculateMaxHeight();
+		}), super.update(e);
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this.updateComplete.then(() => {
+			requestAnimationFrame(() => {
+				this.recalculateMaxHeight();
+			});
+		});
+	}
+	recalculateMaxHeight() {
+		let e = this.calculateMaxHeight();
+		this.calculatedMaxHeight !== e && (this.calculatedMaxHeight = e);
+	}
+	checkValidity() {
+		let e = this.inputElement.checkValidity();
+		return (this.required || this.value && this.pattern) && (this.disabled || this.multiline) && this.pattern && (e = RegExp(`^${this.pattern}$`, "u").test(this.value.toString())), this.minlength > -1 && this.value.toString().length > 0 && (e &&= this.value.toString().length >= this.minlength), (this.required || this.pattern || this.minlength > -1) && (!this.required && this.value.toString().length === 0 ? (this.valid = !1, this.invalid = !1) : (this.valid = e, this.invalid = !e)), e;
+	}
+};
+e([u()], _.prototype, "appliedLabel", void 0), e([u()], _.prototype, "calculatedMaxHeight", void 0), e([c({ attribute: "allowed-keys" })], _.prototype, "allowedKeys", void 0), e([c({
+	type: Boolean,
+	reflect: !0
+})], _.prototype, "focused", void 0), e([l(".input:not(#sizer)")], _.prototype, "inputElement", void 0), e([l("#sizer")], _.prototype, "sizerElement", void 0), e([c({
+	type: Boolean,
+	reflect: !0
+})], _.prototype, "invalid", void 0), e([c()], _.prototype, "label", void 0), e([c({
+	type: String,
+	reflect: !0
+})], _.prototype, "name", void 0), e([c()], _.prototype, "placeholder", void 0), e([u()], _.prototype, "type", null), e([c({
+	attribute: "type",
+	reflect: !0
+})], _.prototype, "_type", void 0), e([c()], _.prototype, "pattern", void 0), e([c({
+	type: Boolean,
+	reflect: !0
+})], _.prototype, "grows", void 0), e([c({ type: Number })], _.prototype, "maxlength", void 0), e([c({ type: Number })], _.prototype, "minlength", void 0), e([c({
+	type: Boolean,
+	reflect: !0
+})], _.prototype, "multiline", void 0), e([c({
+	type: Boolean,
+	reflect: !0
+})], _.prototype, "readonly", void 0), e([c({ type: Number })], _.prototype, "rows", void 0), e([c({
+	type: Number,
+	attribute: "max-rows"
+})], _.prototype, "maxRows", void 0), e([c({
+	type: Boolean,
+	reflect: !0
+})], _.prototype, "valid", void 0), e([c({
+	type: Boolean,
+	reflect: !0,
+	attribute: "hide-validation-icons"
+})], _.prototype, "hideValidationIcons", void 0), e([c({ type: String })], _.prototype, "value", null), e([c({
+	type: Boolean,
+	reflect: !0
+})], _.prototype, "quiet", void 0), e([c({
+	type: Boolean,
+	reflect: !0
+})], _.prototype, "required", void 0), e([c({
+	type: String,
+	reflect: !0
+})], _.prototype, "autocomplete", void 0);
+var v = class extends _ {
+	constructor(...e) {
+		super(...e), this._value = "";
+	}
+	set value(e) {
+		if (e === this.value) return;
+		let t = this._value;
+		this._value = e, this.requestUpdate("value", t);
+	}
+	get value() {
+		return this._value;
+	}
+};
+e([c({ type: String })], v.prototype, "value", null);
+//#endregion
+export { _ as n, v as t };

package/components/text-field-FJr8ZUhI.cjs

@@ -0,0 +1,81 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+require(`./chunk-D-qHiVGv.cjs`);const e=require(`./decorate-B2wePfNm.cjs`),t=require(`./sized-mixin-StFA4y0J.cjs`),n=require(`./focusable-CupEoHmn.cjs`),r=require(`./manage-help-text-D9VbYRf_.cjs`),i=require(`./text-field.module-D5oDP7MB.cjs`);let a=require(`lit`),o=require(`lit/decorators.js`),s=require(`@luzmo/icons`),c=require(`lit/directives/if-defined.js`),l=require(`lit/directives/live.js`);var u=[`text`,`url`,`tel`,`email`,`password`],d=class extends r.t(t.n(n.t,{noDefaultSize:!0})){constructor(...e){super(...e),this.allowedKeys=``,this.focused=!1,this.invalid=!1,this.label=``,this.placeholder=``,this._type=`text`,this.grows=!1,this.maxlength=-1,this.minlength=-1,this.multiline=!1,this.readonly=!1,this.rows=-1,this.maxRows=-1,this.valid=!1,this.hideValidationIcons=!1,this._value=``,this.quiet=!1,this.required=!1}static get styles(){return[(0,a.unsafeCSS)(i.t)]}applyFocusElementLabel(e){this.appliedLabel=e}set type(e){let t=this._type;this._type=e,this.requestUpdate(`type`,t)}get type(){return u.find(e=>e===this._type)??`text`}set value(e){if(e===this.value)return;let t=this._value;this._value=e,this.requestUpdate(`value`,t)}get value(){return this._value}get focusElement(){return this.inputElement}setSelectionRange(e,t,n=`none`){this.inputElement.setSelectionRange(e,t,n)}select(){this.inputElement.select()}handleInput(e){if(this.allowedKeys&&this.inputElement.value&&!RegExp(`^[${this.allowedKeys}]*$`,`u`).test(this.inputElement.value)){let e=this.inputElement.selectionStart-1;this.inputElement.value=this.value.toString(),this.inputElement.setSelectionRange(e,e);return}this.value=this.inputElement.value}handleChange(){this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0}))}onFocus(){this.focused=!this.readonly&&!0}onBlur(e){this.focused=!this.readonly&&!1}handleInputElementPointerdown(){}renderStateIcons(){return this.hideValidationIcons?a.nothing:this.invalid?a.html`
+        <div id="invalid" class="icon">${(0,s.luzmoIcon)(s.luzmoAlert)}</div>
+      `:this.valid?a.html`
+        <div id="valid" class="icon">${(0,s.luzmoIcon)(s.luzmoCheck)}</div>
+      `:a.nothing}get displayValue(){return this.value.toString()}calculateMaxHeight(){if(this.maxRows<1||!this.multiline||!this.grows||!this.inputElement)return;let e=window.getComputedStyle(this.inputElement),t=Number.parseFloat(e.lineHeight),n=Number.parseFloat(e.paddingTop),r=Number.parseFloat(e.paddingBottom),i=Number.parseFloat(e.borderTopWidth),a=Number.parseFloat(e.borderBottomWidth),o=Number.parseFloat(e.fontSize),s=Number.isNaN(t)||t===0?o*1.2:t;return this.maxRows*s+n+r+i+a}get renderMultiline(){let e=``;return this.calculatedMaxHeight!==void 0&&(e=`max-height: ${this.calculatedMaxHeight}px;`),a.html`
+      ${this.multiline&&this.grows?a.html`
+          <div id="sizer" class="input" aria-hidden="true" style=${e}>${this.value}&#8203;
+          </div>
+        `:a.nothing}
+      <!-- @ts-ignore -->
+      <textarea
+        name=${(0,c.ifDefined)(this.name||void 0)}
+        aria-describedby=${this.helpTextId}
+        aria-label=${this.label||this.appliedLabel||this.placeholder}
+        aria-invalid=${(0,c.ifDefined)(this.invalid||void 0)}
+        class="input"
+        maxlength=${(0,c.ifDefined)(this.maxlength>-1?this.maxlength:void 0)}
+        minlength=${(0,c.ifDefined)(this.minlength>-1?this.minlength:void 0)}
+        title=${this.invalid?``:a.nothing}
+        pattern=${(0,c.ifDefined)(this.pattern)}
+        placeholder=${this.placeholder}
+        .value=${this.displayValue}
+        @change=${this.handleChange}
+        @input=${this.handleInput}
+        @focus=${this.onFocus}
+        @blur=${this.onBlur}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+        ?readonly=${this.readonly}
+        rows=${(0,c.ifDefined)(this.rows>-1?this.rows:void 0)}
+        autocomplete=${(0,c.ifDefined)(this.autocomplete)}
+      ></textarea>
+    `}get renderInput(){return a.html`
+      <!-- @ts-ignore -->
+      <input
+        name=${(0,c.ifDefined)(this.name||void 0)}
+        type=${this.type}
+        aria-describedby=${this.helpTextId}
+        aria-label=${this.label||this.appliedLabel||this.placeholder}
+        aria-invalid=${(0,c.ifDefined)(this.invalid||void 0)}
+        class="input"
+        title=${this.invalid?``:a.nothing}
+        maxlength=${(0,c.ifDefined)(this.maxlength>-1?this.maxlength:void 0)}
+        minlength=${(0,c.ifDefined)(this.minlength>-1?this.minlength:void 0)}
+        pattern=${(0,c.ifDefined)(this.pattern)}
+        placeholder=${this.placeholder}
+        .value=${(0,l.live)(this.displayValue)}
+        @change=${this.handleChange}
+        @input=${this.handleInput}
+        @pointerdown=${this.handleInputElementPointerdown}
+        @focus=${this.onFocus}
+        @blur=${this.onBlur}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+        ?readonly=${this.readonly}
+        autocomplete=${(0,c.ifDefined)(this.autocomplete)}
+      />
+    `}renderField(){return a.html`
+      ${this.renderStateIcons()}
+      ${this.multiline?this.renderMultiline:this.renderInput}
+    `}render(){return a.html`
+      <div id="text-field">${this.renderField()}</div>
+      ${this.renderHelpText(this.invalid)}
+    `}update(e){(e.has(`value`)||e.has(`required`)&&this.required)&&this.updateComplete.then(()=>{this.checkValidity()}),e.has(`maxRows`)&&(this.maxRows>=1?this.setAttribute(`max-rows`,String(this.maxRows)):this.removeAttribute(`max-rows`)),(e.has(`maxRows`)||e.has(`multiline`)||e.has(`grows`)||e.has(`size`)||e.has(`value`)&&this.multiline&&this.grows&&this.maxRows>=1)&&requestAnimationFrame(()=>{this.recalculateMaxHeight()}),super.update(e)}firstUpdated(e){super.firstUpdated(e),this.updateComplete.then(()=>{requestAnimationFrame(()=>{this.recalculateMaxHeight()})})}recalculateMaxHeight(){let e=this.calculateMaxHeight();this.calculatedMaxHeight!==e&&(this.calculatedMaxHeight=e)}checkValidity(){let e=this.inputElement.checkValidity();return(this.required||this.value&&this.pattern)&&(this.disabled||this.multiline)&&this.pattern&&(e=RegExp(`^${this.pattern}$`,`u`).test(this.value.toString())),this.minlength>-1&&this.value.toString().length>0&&(e&&=this.value.toString().length>=this.minlength),(this.required||this.pattern||this.minlength>-1)&&(!this.required&&this.value.toString().length===0?(this.valid=!1,this.invalid=!1):(this.valid=e,this.invalid=!e)),e}};e.t([(0,o.state)()],d.prototype,`appliedLabel`,void 0),e.t([(0,o.state)()],d.prototype,`calculatedMaxHeight`,void 0),e.t([(0,o.property)({attribute:`allowed-keys`})],d.prototype,`allowedKeys`,void 0),e.t([(0,o.property)({type:Boolean,reflect:!0})],d.prototype,`focused`,void 0),e.t([(0,o.query)(`.input:not(#sizer)`)],d.prototype,`inputElement`,void 0),e.t([(0,o.query)(`#sizer`)],d.prototype,`sizerElement`,void 0),e.t([(0,o.property)({type:Boolean,reflect:!0})],d.prototype,`invalid`,void 0),e.t([(0,o.property)()],d.prototype,`label`,void 0),e.t([(0,o.property)({type:String,reflect:!0})],d.prototype,`name`,void 0),e.t([(0,o.property)()],d.prototype,`placeholder`,void 0),e.t([(0,o.state)()],d.prototype,`type`,null),e.t([(0,o.property)({attribute:`type`,reflect:!0})],d.prototype,`_type`,void 0),e.t([(0,o.property)()],d.prototype,`pattern`,void 0),e.t([(0,o.property)({type:Boolean,reflect:!0})],d.prototype,`grows`,void 0),e.t([(0,o.property)({type:Number})],d.prototype,`maxlength`,void 0),e.t([(0,o.property)({type:Number})],d.prototype,`minlength`,void 0),e.t([(0,o.property)({type:Boolean,reflect:!0})],d.prototype,`multiline`,void 0),e.t([(0,o.property)({type:Boolean,reflect:!0})],d.prototype,`readonly`,void 0),e.t([(0,o.property)({type:Number})],d.prototype,`rows`,void 0),e.t([(0,o.property)({type:Number,attribute:`max-rows`})],d.prototype,`maxRows`,void 0),e.t([(0,o.property)({type:Boolean,reflect:!0})],d.prototype,`valid`,void 0),e.t([(0,o.property)({type:Boolean,reflect:!0,attribute:`hide-validation-icons`})],d.prototype,`hideValidationIcons`,void 0),e.t([(0,o.property)({type:String})],d.prototype,`value`,null),e.t([(0,o.property)({type:Boolean,reflect:!0})],d.prototype,`quiet`,void 0),e.t([(0,o.property)({type:Boolean,reflect:!0})],d.prototype,`required`,void 0),e.t([(0,o.property)({type:String,reflect:!0})],d.prototype,`autocomplete`,void 0);var f=class extends d{constructor(...e){super(...e),this._value=``}set value(e){if(e===this.value)return;let t=this._value;this._value=e,this.requestUpdate(`value`,t)}get value(){return this._value}};e.t([(0,o.property)({type:String})],f.prototype,`value`,null),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return f}});

package/components/text-field.module-Btsve-VN.js

@@ -0,0 +1,21 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+//#region src/components/text-field/text-field.module.scss?inline
+var e = "#text-field{--luzmo-text-field-input-line-height:var(--luzmo-text-field-height,var(--text-field-height));text-overflow:ellipsis;inline-size:var(--luzmo-text-field-width,var(--text-field-width));grid-template-rows:auto auto auto;grid-template-columns:auto auto;margin:0;display:inline-grid;position:relative;overflow:visible}:host([quiet]) #text-field:after{content:\"\";pointer-events:none;inline-size:100%;block-size:var(--luzmo-text-field-focus-indicator-width,2px);position:absolute;inset-block-end:calc((var(--luzmo-text-field-focus-indicator-gap,2px) + var(--luzmo-text-field-focus-indicator-width,2px)) * -1);inset-inline-start:0}:host([quiet][focused]) #text-field:after{background-color:var(--highcontrast-text-field-focus-indicator-color,var(--luzmo-text-field-focus-indicator-color,var(--luzmo-informative-color)))}:host([quiet][invalid]) #text-field .input{padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-invalid,var(--text-field-icon-spacing-inline-start-invalid)) + var(--luzmo-text-field-icon-size-invalid,var(--text-field-icon-size-invalid)))}:host([quiet][valid]) #text-field .input{padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-valid,var(--text-field-icon-spacing-inline-start-valid)) + var(--luzmo-text-field-icon-size-valid,var(--text-field-icon-size-valid)))}:host([invalid]) #text-field .icon,:host([valid]) #text-field .icon{pointer-events:all;grid-area:2/2;justify-content:center;align-items:center;margin-inline-start:auto;display:flex;position:absolute;inset-block-start:0}#text-field.luzmo-text-field--sideLabel .icon{grid-area:1/2/span 1/span 1}:host([valid]) #text-field .icon{font-size:var(--luzmo-text-field-icon-size-valid,var(--text-field-icon-size-valid));color:var(--highcontrast-text-field-icon-color-valid,var(--luzmo-text-field-icon-color-valid,var(--luzmo-positive-color)));inset-block-start:var(--luzmo-text-field-icon-spacing-block-valid,var(--text-field-icon-spacing-block-valid));inset-block-end:var(--luzmo-text-field-icon-spacing-block-valid,var(--text-field-icon-spacing-block-valid));inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-valid,var(--text-field-icon-spacing-inline-end-valid))}:host([invalid]) #text-field .icon{font-size:var(--luzmo-text-field-icon-size-invalid,var(--text-field-icon-size-invalid));color:var(--highcontrast-text-field-icon-color-invalid,var(--luzmo-text-field-icon-color-invalid,var(--luzmo-negative-color)));inset-block-start:var(--luzmo-text-field-icon-spacing-block-invalid,var(--text-field-icon-spacing-block-invalid));inset-block-end:var(--luzmo-text-field-icon-spacing-block-invalid,var(--text-field-icon-spacing-block-invalid));inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-invalid,var(--text-field-icon-spacing-inline-end-invalid))}:host([disabled]) #text-field .icon,:host([readonly]) #text-field .icon{color:#0000}:host([quiet]) .icon{padding-inline-end:0}:host([quiet][valid]) .icon{inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-quiet-valid,0px)}:host([quiet][invalid]) .icon{inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-quiet-invalid,0px)}#text-field .luzmo-field-label{grid-area:1/1/auto/span 1;margin-block-end:var(--luzmo-text-field-label-spacing-block,0px)}:host([quiet]) .luzmo-field-label{margin-block-end:var(--luzmo-text-field-label-spacing-block-quiet,var(--text-field-label-spacing-block-quiet))}:host([disabled]) .luzmo-field-label{color:var(--luzmo-text-field-text-color-disabled,var(--luzmo-font-color-disabled))}#text-field .luzmo-help-text{grid-area:3/1/auto/span 2;margin-block-start:var(--luzmo-text-field-helptext-spacing-block,0px)}.luzmo-text-field-characterCount{inline-size:auto;font-size:var(--luzmo-text-field-character-count-font-size,var(--text-field-character-count-font-size));font-family:var(--luzmo-text-field-character-count-font-family,var(--luzmo-font-family));font-weight:var(--luzmo-text-field-character-count-font-weight,var(--luzmo-font-weight));grid-area:1/2/auto/span 1;justify-content:flex-end;align-items:flex-end;margin-block-end:var(--luzmo-text-field-character-count-spacing-block,var(--text-field-character-count-spacing-block));margin-inline-start:var(--luzmo-text-field-character-count-spacing-inline,12px);margin-inline-end:0;padding-inline-end:calc(var(--luzmo-text-field-border-radius,var(--luzmo-border-radius)) / 2);display:inline-flex}:host([quiet]) .luzmo-text-field-characterCount{margin-block-end:var(--luzmo-text-field-character-count-spacing-block-quiet,var(--text-field-character-count-spacing-block-quiet))}.input{text-align:var(--luzmo-text-field-text-align,start);line-height:var(--luzmo-text-field-input-line-height);box-sizing:border-box;inline-size:100%;min-inline-size:var(--luzmo-text-field-min-width,1.5);block-size:var(--luzmo-text-field-height,var(--text-field-height));padding-block-start:calc(var(--luzmo-text-field-spacing-block-start,var(--luzmo-spacing-3)) - var(--luzmo-text-field-border-width,var(--luzmo-border-width)));padding-block-end:calc(var(--luzmo-text-field-spacing-block-end,var(--luzmo-spacing-3)) - var(--luzmo-text-field-border-width,var(--luzmo-border-width)));padding-inline:calc(var(--luzmo-text-field-spacing-inline,var(--text-field-spacing-inline)) - var(--luzmo-text-field-border-width,var(--luzmo-border-width)));vertical-align:top;background-color:var(--luzmo-text-field-background-color,var(--luzmo-background-color));border-color:var(--highcontrast-text-field-border-color,var(--luzmo-text-field-border-color,var(--luzmo-border-color)));border-style:solid;border-width:var(--luzmo-text-field-border-width,var(--luzmo-border-width));border-radius:var(--luzmo-text-field-border-radius,var(--luzmo-border-radius));transition:border-color var(--luzmo-text-field-animation-duration,var(--luzmo-animation-duration)) ease-in-out;font-size:var(--luzmo-text-field-placeholder-font-size,var(--text-field-placeholder-font-size));font-family:var(--luzmo-text-field-font-family,var(--luzmo-font-family));font-weight:var(--luzmo-text-field-font-weight,var(--luzmo-font-weight));color:var(--highcontrast-text-field-text-color-default,var(--luzmo-text-field-text-color-default,var(--luzmo-font-color)));text-overflow:ellipsis;appearance:none;outline:none;grid-area:2/1/auto/span 2;margin:0}:host([type=number]) .input{-moz-appearance:text-field}:host([type=number]) .input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host([type=number]) .input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input:-moz-ui-invalid{box-shadow:none}.input::placeholder{opacity:1;font-size:var(--luzmo-text-field-placeholder-font-size,var(--text-field-placeholder-font-size));font-family:var(--luzmo-text-field-font-family,var(--luzmo-font-family));font-weight:var(--luzmo-text-field-font-weight,var(--luzmo-font-weight));color:var(--highcontrast-text-field-text-color-default,var(--luzmo-text-field-placeholder-text-color-default,var(--luzmo-font-color-disabled)));transition:color var(--luzmo-text-field-animation-duration,var(--luzmo-animation-duration)) ease-in-out}.input:lang(ja)::placeholder,.input:lang(ko)::placeholder,.input:lang(zh)::placeholder{font-style:normal}:host([focused]) .input,.input:focus{border-color:var(--highcontrast-text-field-border-color-focus,var(--luzmo-text-field-border-color-focus,var(--luzmo-primary)));color:var(--highcontrast-text-field-text-color-focus,var(--luzmo-text-field-text-color-focus,var(--luzmo-font-color-focus)))}:host([focused]) .input::placeholder,.input:focus::placeholder{color:var(--highcontrast-text-field-text-color-focus,var(--luzmo-text-field-placeholder-text-color-focus,var(--luzmo-disabled-color)))}:host([focused]) .input{border-color:var(--highcontrast-text-field-border-color-keyboard-focus,var(--luzmo-text-field-border-color-keyboard-focus,var(--luzmo-primary)));outline:var(--luzmo-text-field-focus-indicator-width,0) solid;outline-color:var(--highcontrast-text-field-focus-indicator-color,var(--luzmo-text-field-focus-indicator-color,var(--luzmo-informative-color)));outline-offset:var(--luzmo-text-field-focus-indicator-gap,2px);color:var(--highcontrast-text-field-text-color-keyboard-focus,var(--luzmo-text-field-text-color-keyboard-focus,var(--luzmo-font-color-focus)))}:host([focused]) .input::placeholder{color:var(--highcontrast-text-field-text-color-keyboard-focus,var(--luzmo-text-field-placeholder-text-color-keyboard-focus,var(--luzmo-disabled-color)))}:host([valid]) .input{color:var(--highcontrast-text-field-text-color-valid,var(--luzmo-text-field-text-color-valid,var(--luzmo-font-color)));padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-valid,var(--text-field-icon-spacing-inline-start-valid)) + var(--luzmo-text-field-icon-size-valid,var(--text-field-icon-size-valid)) + var(--luzmo-text-field-icon-spacing-inline-end-valid,var(--text-field-icon-spacing-inline-end-valid)) - var(--luzmo-text-field-border-width,var(--luzmo-border-width)))}:host([invalid]) .input{color:var(--highcontrast-text-field-text-color-invalid,var(--luzmo-text-field-text-color-invalid,var(--luzmo-font-color)));border-color:var(--highcontrast-text-field-border-color-invalid-default,var(--luzmo-text-field-border-color-invalid-default,var(--luzmo-negative-color)));padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-invalid,var(--text-field-icon-spacing-inline-start-invalid)) + var(--luzmo-text-field-icon-size-invalid,var(--text-field-icon-size-invalid)) + var(--luzmo-text-field-icon-spacing-inline-end-invalid,var(--text-field-icon-spacing-inline-end-invalid)) - var(--luzmo-text-field-border-width,var(--luzmo-border-width)))}:host([invalid]) .input:focus,:host([invalid][focused]) .input,:host([invalid]:focus) .input{border-color:var(--highcontrast-text-field-border-color-invalid-focus,var(--luzmo-text-field-border-color-invalid-focus,var(--luzmo-negative-color)))}:host([invalid]) .input:focus-visible,:host([invalid][focused]) .input{border-color:var(--highcontrast-text-field-border-color-invalid-keyboard-focus,var(--luzmo-text-field-border-color-invalid-keyboard-focus,var(--luzmo-negative-color)))}.input:disabled,:host([disabled]) #text-field .input{background-color:var(--luzmo-text-field-background-color-disabled,var(--luzmo-background-color-disabled));resize:none;opacity:1;border-color:#0000}.input:disabled,.input:disabled::placeholder,:host([disabled]) #text-field .input,:host([disabled]) #text-field .input::placeholder{color:var(--highcontrast-text-field-text-color-disabled,var(--luzmo-text-field-text-color-disabled,var(--luzmo-font-color-disabled)))}:host([border=none]) .input{border-width:0;outline:none}:host([quiet]) .input{padding-block-start:var(--luzmo-text-field-spacing-block-start,var(--luzmo-spacing-2));padding-inline:var(--luzmo-text-field-spacing-inline-quiet,0px);background-color:initial;resize:none;border-block-start-width:0;border-inline-width:0;border-radius:0;outline:none;margin-block-end:var(--luzmo-text-field-spacing-block-quiet,0px);overflow-y:hidden}:host([quiet][disabled]) .input,.input:disabled{background-color:initial;border-color:var(--luzmo-text-field-border-color-disabled,var(--luzmo-border-color-disabled))}:host([quiet][disabled]) .input,:host([quiet][disabled]) .input::placeholder,.input:disabled,.input:disabled::placeholder{color:var(--highcontrast-text-field-text-color-disabled,var(--luzmo-text-field-text-color-disabled,var(--luzmo-disabled-color)))}.input:read-only,:host([readonly]) #text-field .input{background-color:initial;color:var(--highcontrast-text-field-text-color-readonly,var(--luzmo-text-field-text-color-readonly,var(--luzmo-font-color)));border-color:#0000;outline:none}.input:read-only::placeholder,:host([readonly]) #text-field .input::placeholder{color:var(--highcontrast-text-field-text-color-readonly,var(--luzmo-text-field-text-color-readonly,var(--luzmo-disabled-color)));background-color:initial}@media (hover:hover){.input:hover,#text-field:hover .input{border-color:var(--highcontrast-text-field-border-color-hover,var(--luzmo-text-field-border-color-hover,rgba(var(--luzmo-primary-rgb), .3)));color:var(--highcontrast-text-field-text-color-hover,var(--luzmo-text-field-text-color-hover,var(--luzmo-font-color-hover)))}.input:hover::placeholder,#text-field:hover .input::placeholder{color:var(--highcontrast-text-field-text-color-hover,var(--luzmo-text-field-placeholder-text-color-hover,var(--luzmo-disabled-color)))}:host([focused]) .input:hover,:host([focused]) #text-field:hover .input,.input:focus:hover{border-color:var(--highcontrast-text-field-border-color-focus-hover,var(--luzmo-text-field-border-color-focus-hover,var(--luzmo-primary)))}:host([focused]) .input:hover,.input:focus:hover{color:var(--highcontrast-text-field-text-color-focus-hover,var(--luzmo-text-field-text-color-focus-hover,var(--luzmo-font-color-hover)))}:host([focused]) .input:hover::placeholder,.input:focus:hover::placeholder{color:var(--highcontrast-text-field-text-color-focus-hover,var(--luzmo-text-field-placeholder-text-color-focus-hover,var(--luzmo-disabled-color)))}:host([invalid]) .input:hover:not(.is-disabled),:host([invalid]:hover):not(.is-disabled) .input{border-color:var(--highcontrast-text-field-border-color-invalid-hover,var(--luzmo-text-field-border-color-invalid-hover,var(--luzmo-negative-color)))}:host([invalid]) .input:focus:hover,:host([invalid][focused]) .input:hover,:host([invalid]:focus) .input:hover{border-color:var(--highcontrast-text-field-border-color-invalid-focus-hover,var(--luzmo-text-field-border-color-invalid-focus-hover,var(--luzmo-negative-color)))}:host([disabled]) #text-field:hover .input{background-color:var(--luzmo-text-field-background-color-disabled,var(--luzmo-background-color-disabled));resize:none;opacity:1;border-color:#0000}:host([quiet][disabled]:hover) .input,:host([disabled]) #text-field:hover .input,:host([disabled]) #text-field:hover .input::placeholder{color:var(--highcontrast-text-field-text-color-disabled,var(--luzmo-text-field-text-color-disabled,var(--luzmo-font-color-disabled)))}:host([quiet][disabled]:hover) .input{background-color:initial;border-color:var(--luzmo-text-field-border-color-disabled,var(--luzmo-border-color-disabled))}:host([quiet][disabled]:hover) .input::placeholder{color:var(--highcontrast-text-field-text-color-disabled,var(--luzmo-text-field-text-color-disabled,var(--luzmo-font-color-disabled)))}:host([readonly]) #text-field:hover .input{border-color:#0000;outline:none}:host([readonly]) #text-field:hover .input,:host([readonly]) #text-field:hover .input::placeholder{background-color:initial;color:var(--highcontrast-text-field-text-color-readonly,var(--luzmo-text-field-text-color-readonly,var(--luzmo-font-color)))}}.luzmo-text-field--sideLabel{grid-template-rows:auto auto;grid-template-columns:auto auto auto}.luzmo-text-field--sideLabel:after{grid-area:1/2/span 1/span 1}.luzmo-text-field--sideLabel .luzmo-field-label{grid-area:1/1/span 2/span 1;margin-inline-end:var(--luzmo-text-field-label-spacing-inline-side-label,var(--text-field-label-spacing-inline-side-label))}.luzmo-text-field--sideLabel .luzmo-text-field-characterCount{grid-area:1/3/auto/span 1;align-items:flex-start;margin-block-start:var(--luzmo-text-field-character-count-spacing-block-side,var(--text-field-character-count-spacing-block-side));margin-inline-start:var(--luzmo-text-field-character-count-spacing-inline-side,12px)}.luzmo-text-field--sideLabel .luzmo-help-text{grid-area:2/2/auto/span 1}.luzmo-text-field--sideLabel .input,.luzmo-text-field--sideLabel .icon{grid-area:1/2/span 1/span 1}:host([multiline]){--luzmo-text-field-input-line-height:normal}:host([multiline]) .input{min-inline-size:var(--luzmo-text-area-min-inline-size,112px);min-block-size:var(--luzmo-text-area-min-block-size,56px);resize:inherit}:host([multiline][grows]) .input{grid-row:2}:host([multiline][grows]) .luzmo-text-field--sideLabel .input{grid-row:1}:host([multiline][quiet]) .input{min-block-size:var(--luzmo-text-area-min-block-size-quiet,var(--text-area-min-block-size-quiet));resize:none;overflow-y:hidden}@media (forced-colors:active){:host{--highcontrast-text-field-border-color-hover:Highlight;--highcontrast-text-field-border-color-focus:Highlight;--highcontrast-text-field-border-color-keyboard-focus:CanvasText;--highcontrast-text-field-focus-indicator-color:Highlight;--highcontrast-text-field-border-color-invalid-default:Highlight;--highcontrast-text-field-border-color-invalid-hover:Highlight;--highcontrast-text-field-border-color-invalid-focus:Highlight;--highcontrast-text-field-border-color-invalid-keyboard-focus:Highlight;--highcontrast-text-field-text-color-valid:CanvasText;--highcontrast-text-field-text-color-invalid:CanvasText}#text-field .input{--highcontrast-text-field-text-color-default:CanvasText;--highcontrast-text-field-text-color-hover:CanvasText;--highcontrast-text-field-text-color-keyboard-focus:CanvasText;--highcontrast-text-field-text-color-disabled:GrayText;--highcontrast-text-field-text-color-readonly:CanvasText}#text-field .input::placeholder{--highcontrast-text-field-text-color-default:GrayText;--highcontrast-text-field-text-color-hover:GrayText;--highcontrast-text-field-text-color-keyboard-focus:GrayText;--highcontrast-text-field-text-color-disabled:GrayText;--highcontrast-text-field-text-color-readonly:CanvasText}}:host{inline-size:var(--luzmo-text-field-width,var(--text-field-width));flex-direction:column;display:inline-flex}:host([multiline]){resize:both}:host([multiline][readonly]){resize:none}:host([disabled]:focus-visible){outline:none}#text-field{inline-size:100%}#text-field,textarea{resize:inherit}.input{min-inline-size:var(--luzmo-text-field-min-width,1.5)}:host([focused]) .input{caret-color:var(--swc-test-caret-color);forced-color-adjust:var(--swc-test-forced-color-adjust)}#sizer{word-break:break-word;white-space:pre-line;block-size:auto;opacity:0!important}.icon,.icon-workflow{pointer-events:none}:host([multiline]) #text-field{--luzmo-text-field-input-line-height:normal;display:inline-grid}:host([multiline]) textarea{transition:box-shadow var(--luzmo-animation-duration) ease-in-out, border-color var(--luzmo-animation-duration) ease-in-out}:host([multiline]:not([quiet])) #text-field:after{box-shadow:none}:host([multiline][rows]) .input{resize:none;block-size:auto}:host([multiline][rows=\"1\"]) .input{min-block-size:auto}:host([disabled][quiet]) #text-field .input,:host([disabled][quiet]) #text-field:hover .input,:host([quiet]) .input :disabled{border-color:var(--luzmo-text-field-border-color-disabled,var(--luzmo-border-color-disabled));color:var(--highcontrast-text-field-text-color-disabled,var(--luzmo-text-field-text-color-disabled,var(--luzmo-font-color-disabled)));background-color:#0000}:host([disabled]) #text-field .icon.icon-search,:host([readonly]) #text-field .icon.icon-search{color:var(--highcontrast-text-field-text-color-disabled,var(--luzmo-text-field-text-color-disabled,var(--luzmo-font-color-disabled)))}:host([multiline][grows]:not([quiet])) #text-field:after{grid-area:unset;min-block-size:calc(var(--luzmo-text-area-min-block-size,var(--luzmo-text-area-min-block-size)) + var(--luzmo-text-field-focus-indicator-gap,2px) * 2)}:host([multiline][grows]) .input:not(#sizer){resize:none;height:100%;position:absolute;top:0;left:0;overflow:hidden}:host([multiline][grows][max-rows]) .input:not(#sizer){overflow-y:auto}:host{--text-field-height:var(--luzmo-component-height);--text-field-width:240px;--text-field-label-spacing-block-quiet:-8px;--text-field-label-spacing-inline-side-label:12px;--text-field-placeholder-font-size:14px;--text-field-spacing-inline:12px;--text-field-icon-size-invalid:18px;--text-field-icon-size-valid:10px;--text-field-icon-spacing-inline-end-invalid:12px;--text-field-icon-spacing-inline-end-valid:15px;--text-field-icon-spacing-block-invalid:7px;--text-field-icon-spacing-block-valid:4px;--text-field-icon-spacing-inline-start-invalid:var(--luzmo-spacing-4);--text-field-icon-spacing-inline-start-valid:var(--luzmo-spacing-4);--text-field-character-count-font-size:var(--luzmo-font-size-s);--text-field-character-count-spacing-block:5px;--text-field-character-count-spacing-block-quiet:-3px;--text-field-character-count-spacing-block-side:8px;--text-area-min-block-size-quiet:var(--luzmo-component-height)}:host([size=s]){--text-field-height:var(--luzmo-component-height-s);--text-field-width:220px;--text-field-label-spacing-block-quiet:-8px;--text-field-label-spacing-inline-side-label:8px;--text-field-placeholder-font-size:12px;--text-field-spacing-inline:9px;--text-field-icon-size-invalid:16px;--text-field-icon-size-valid:10px;--text-field-icon-spacing-inline-end-invalid:9px;--text-field-icon-spacing-inline-end-valid:11px;--text-field-icon-spacing-block-invalid:2px;--text-field-icon-spacing-block-valid:-1px;--text-field-icon-spacing-inline-start-invalid:var(--luzmo-spacing-3);--text-field-icon-spacing-inline-start-valid:var(--luzmo-spacing-3);--text-field-character-count-font-size:var(--luzmo-font-size-xs);--text-field-character-count-spacing-block:5px;--text-field-character-count-spacing-block-quiet:-3px;--text-field-character-count-spacing-block-side:4px;--text-area-min-block-size-quiet:var(--luzmo-component-height-s)}:host([size=l]){--text-field-height:var(--luzmo-component-height-l);--text-field-width:280px;--text-field-label-spacing-block-quiet:-12px;--text-field-label-spacing-inline-side-label:12px;--text-field-placeholder-font-size:16px;--text-field-spacing-inline:15px;--text-field-icon-size-invalid:20px;--text-field-icon-size-valid:12px;--text-field-icon-spacing-inline-end-invalid:15px;--text-field-icon-spacing-inline-end-valid:17px;--text-field-icon-spacing-block-invalid:10px;--text-field-icon-spacing-block-valid:8px;--text-field-icon-spacing-inline-start-invalid:15px;--text-field-icon-spacing-inline-start-valid:15px;--text-field-character-count-font-size:var(--luzmo-font-size);--text-field-character-count-spacing-block:9px;--text-field-character-count-spacing-block-quiet:-3px;--text-field-character-count-spacing-block-side:11px;--text-area-min-block-size-quiet:var(--luzmo-component-height-l)}:host([size=xl]){--text-field-height:var(--luzmo-component-height-xl);--text-field-width:320px;--text-field-label-spacing-block-quiet:-15px;--text-field-label-spacing-inline-side-label:12px;--text-field-placeholder-font-size:18px;--text-field-spacing-inline:15px;--text-field-icon-size-invalid:22px;--text-field-icon-size-valid:14px;--text-field-icon-spacing-inline-end-invalid:18px;--text-field-icon-spacing-inline-end-valid:20px;--text-field-icon-spacing-block-invalid:12px;--text-field-icon-spacing-block-valid:13px;--text-field-icon-spacing-inline-start-invalid:18px;--text-field-icon-spacing-inline-start-valid:18px;--text-field-character-count-font-size:var(--luzmo-font-size-l);--text-field-character-count-spacing-block:11px;--text-field-character-count-spacing-block-quiet:-4px;--text-field-character-count-spacing-block-side:14px;--text-area-min-block-size-quiet:var(--luzmo-component-height-xl)}";
+//#endregion
+export { e as t };

package/components/text-field.module-D5oDP7MB.cjs

@@ -0,0 +1,18 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+var e=`#text-field{--luzmo-text-field-input-line-height:var(--luzmo-text-field-height,var(--text-field-height));text-overflow:ellipsis;inline-size:var(--luzmo-text-field-width,var(--text-field-width));grid-template-rows:auto auto auto;grid-template-columns:auto auto;margin:0;display:inline-grid;position:relative;overflow:visible}:host([quiet]) #text-field:after{content:"";pointer-events:none;inline-size:100%;block-size:var(--luzmo-text-field-focus-indicator-width,2px);position:absolute;inset-block-end:calc((var(--luzmo-text-field-focus-indicator-gap,2px) + var(--luzmo-text-field-focus-indicator-width,2px)) * -1);inset-inline-start:0}:host([quiet][focused]) #text-field:after{background-color:var(--highcontrast-text-field-focus-indicator-color,var(--luzmo-text-field-focus-indicator-color,var(--luzmo-informative-color)))}:host([quiet][invalid]) #text-field .input{padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-invalid,var(--text-field-icon-spacing-inline-start-invalid)) + var(--luzmo-text-field-icon-size-invalid,var(--text-field-icon-size-invalid)))}:host([quiet][valid]) #text-field .input{padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-valid,var(--text-field-icon-spacing-inline-start-valid)) + var(--luzmo-text-field-icon-size-valid,var(--text-field-icon-size-valid)))}:host([invalid]) #text-field .icon,:host([valid]) #text-field .icon{pointer-events:all;grid-area:2/2;justify-content:center;align-items:center;margin-inline-start:auto;display:flex;position:absolute;inset-block-start:0}#text-field.luzmo-text-field--sideLabel .icon{grid-area:1/2/span 1/span 1}:host([valid]) #text-field .icon{font-size:var(--luzmo-text-field-icon-size-valid,var(--text-field-icon-size-valid));color:var(--highcontrast-text-field-icon-color-valid,var(--luzmo-text-field-icon-color-valid,var(--luzmo-positive-color)));inset-block-start:var(--luzmo-text-field-icon-spacing-block-valid,var(--text-field-icon-spacing-block-valid));inset-block-end:var(--luzmo-text-field-icon-spacing-block-valid,var(--text-field-icon-spacing-block-valid));inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-valid,var(--text-field-icon-spacing-inline-end-valid))}:host([invalid]) #text-field .icon{font-size:var(--luzmo-text-field-icon-size-invalid,var(--text-field-icon-size-invalid));color:var(--highcontrast-text-field-icon-color-invalid,var(--luzmo-text-field-icon-color-invalid,var(--luzmo-negative-color)));inset-block-start:var(--luzmo-text-field-icon-spacing-block-invalid,var(--text-field-icon-spacing-block-invalid));inset-block-end:var(--luzmo-text-field-icon-spacing-block-invalid,var(--text-field-icon-spacing-block-invalid));inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-invalid,var(--text-field-icon-spacing-inline-end-invalid))}:host([disabled]) #text-field .icon,:host([readonly]) #text-field .icon{color:#0000}:host([quiet]) .icon{padding-inline-end:0}:host([quiet][valid]) .icon{inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-quiet-valid,0px)}:host([quiet][invalid]) .icon{inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-quiet-invalid,0px)}#text-field .luzmo-field-label{grid-area:1/1/auto/span 1;margin-block-end:var(--luzmo-text-field-label-spacing-block,0px)}:host([quiet]) .luzmo-field-label{margin-block-end:var(--luzmo-text-field-label-spacing-block-quiet,var(--text-field-label-spacing-block-quiet))}:host([disabled]) .luzmo-field-label{color:var(--luzmo-text-field-text-color-disabled,var(--luzmo-font-color-disabled))}#text-field .luzmo-help-text{grid-area:3/1/auto/span 2;margin-block-start:var(--luzmo-text-field-helptext-spacing-block,0px)}.luzmo-text-field-characterCount{inline-size:auto;font-size:var(--luzmo-text-field-character-count-font-size,var(--text-field-character-count-font-size));font-family:var(--luzmo-text-field-character-count-font-family,var(--luzmo-font-family));font-weight:var(--luzmo-text-field-character-count-font-weight,var(--luzmo-font-weight));grid-area:1/2/auto/span 1;justify-content:flex-end;align-items:flex-end;margin-block-end:var(--luzmo-text-field-character-count-spacing-block,var(--text-field-character-count-spacing-block));margin-inline-start:var(--luzmo-text-field-character-count-spacing-inline,12px);margin-inline-end:0;padding-inline-end:calc(var(--luzmo-text-field-border-radius,var(--luzmo-border-radius)) / 2);display:inline-flex}:host([quiet]) .luzmo-text-field-characterCount{margin-block-end:var(--luzmo-text-field-character-count-spacing-block-quiet,var(--text-field-character-count-spacing-block-quiet))}.input{text-align:var(--luzmo-text-field-text-align,start);line-height:var(--luzmo-text-field-input-line-height);box-sizing:border-box;inline-size:100%;min-inline-size:var(--luzmo-text-field-min-width,1.5);block-size:var(--luzmo-text-field-height,var(--text-field-height));padding-block-start:calc(var(--luzmo-text-field-spacing-block-start,var(--luzmo-spacing-3)) - var(--luzmo-text-field-border-width,var(--luzmo-border-width)));padding-block-end:calc(var(--luzmo-text-field-spacing-block-end,var(--luzmo-spacing-3)) - var(--luzmo-text-field-border-width,var(--luzmo-border-width)));padding-inline:calc(var(--luzmo-text-field-spacing-inline,var(--text-field-spacing-inline)) - var(--luzmo-text-field-border-width,var(--luzmo-border-width)));vertical-align:top;background-color:var(--luzmo-text-field-background-color,var(--luzmo-background-color));border-color:var(--highcontrast-text-field-border-color,var(--luzmo-text-field-border-color,var(--luzmo-border-color)));border-style:solid;border-width:var(--luzmo-text-field-border-width,var(--luzmo-border-width));border-radius:var(--luzmo-text-field-border-radius,var(--luzmo-border-radius));transition:border-color var(--luzmo-text-field-animation-duration,var(--luzmo-animation-duration)) ease-in-out;font-size:var(--luzmo-text-field-placeholder-font-size,var(--text-field-placeholder-font-size));font-family:var(--luzmo-text-field-font-family,var(--luzmo-font-family));font-weight:var(--luzmo-text-field-font-weight,var(--luzmo-font-weight));color:var(--highcontrast-text-field-text-color-default,var(--luzmo-text-field-text-color-default,var(--luzmo-font-color)));text-overflow:ellipsis;appearance:none;outline:none;grid-area:2/1/auto/span 2;margin:0}:host([type=number]) .input{-moz-appearance:text-field}:host([type=number]) .input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host([type=number]) .input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input:-moz-ui-invalid{box-shadow:none}.input::placeholder{opacity:1;font-size:var(--luzmo-text-field-placeholder-font-size,var(--text-field-placeholder-font-size));font-family:var(--luzmo-text-field-font-family,var(--luzmo-font-family));font-weight:var(--luzmo-text-field-font-weight,var(--luzmo-font-weight));color:var(--highcontrast-text-field-text-color-default,var(--luzmo-text-field-placeholder-text-color-default,var(--luzmo-font-color-disabled)));transition:color var(--luzmo-text-field-animation-duration,var(--luzmo-animation-duration)) ease-in-out}.input:lang(ja)::placeholder,.input:lang(ko)::placeholder,.input:lang(zh)::placeholder{font-style:normal}:host([focused]) .input,.input:focus{border-color:var(--highcontrast-text-field-border-color-focus,var(--luzmo-text-field-border-color-focus,var(--luzmo-primary)));color:var(--highcontrast-text-field-text-color-focus,var(--luzmo-text-field-text-color-focus,var(--luzmo-font-color-focus)))}:host([focused]) .input::placeholder,.input:focus::placeholder{color:var(--highcontrast-text-field-text-color-focus,var(--luzmo-text-field-placeholder-text-color-focus,var(--luzmo-disabled-color)))}:host([focused]) .input{border-color:var(--highcontrast-text-field-border-color-keyboard-focus,var(--luzmo-text-field-border-color-keyboard-focus,var(--luzmo-primary)));outline:var(--luzmo-text-field-focus-indicator-width,0) solid;outline-color:var(--highcontrast-text-field-focus-indicator-color,var(--luzmo-text-field-focus-indicator-color,var(--luzmo-informative-color)));outline-offset:var(--luzmo-text-field-focus-indicator-gap,2px);color:var(--highcontrast-text-field-text-color-keyboard-focus,var(--luzmo-text-field-text-color-keyboard-focus,var(--luzmo-font-color-focus)))}:host([focused]) .input::placeholder{color:var(--highcontrast-text-field-text-color-keyboard-focus,var(--luzmo-text-field-placeholder-text-color-keyboard-focus,var(--luzmo-disabled-color)))}:host([valid]) .input{color:var(--highcontrast-text-field-text-color-valid,var(--luzmo-text-field-text-color-valid,var(--luzmo-font-color)));padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-valid,var(--text-field-icon-spacing-inline-start-valid)) + var(--luzmo-text-field-icon-size-valid,var(--text-field-icon-size-valid)) + var(--luzmo-text-field-icon-spacing-inline-end-valid,var(--text-field-icon-spacing-inline-end-valid)) - var(--luzmo-text-field-border-width,var(--luzmo-border-width)))}:host([invalid]) .input{color:var(--highcontrast-text-field-text-color-invalid,var(--luzmo-text-field-text-color-invalid,var(--luzmo-font-color)));border-color:var(--highcontrast-text-field-border-color-invalid-default,var(--luzmo-text-field-border-color-invalid-default,var(--luzmo-negative-color)));padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-invalid,var(--text-field-icon-spacing-inline-start-invalid)) + var(--luzmo-text-field-icon-size-invalid,var(--text-field-icon-size-invalid)) + var(--luzmo-text-field-icon-spacing-inline-end-invalid,var(--text-field-icon-spacing-inline-end-invalid)) - var(--luzmo-text-field-border-width,var(--luzmo-border-width)))}:host([invalid]) .input:focus,:host([invalid][focused]) .input,:host([invalid]:focus) .input{border-color:var(--highcontrast-text-field-border-color-invalid-focus,var(--luzmo-text-field-border-color-invalid-focus,var(--luzmo-negative-color)))}:host([invalid]) .input:focus-visible,:host([invalid][focused]) .input{border-color:var(--highcontrast-text-field-border-color-invalid-keyboard-focus,var(--luzmo-text-field-border-color-invalid-keyboard-focus,var(--luzmo-negative-color)))}.input:disabled,:host([disabled]) #text-field .input{background-color:var(--luzmo-text-field-background-color-disabled,var(--luzmo-background-color-disabled));resize:none;opacity:1;border-color:#0000}.input:disabled,.input:disabled::placeholder,:host([disabled]) #text-field .input,:host([disabled]) #text-field .input::placeholder{color:var(--highcontrast-text-field-text-color-disabled,var(--luzmo-text-field-text-color-disabled,var(--luzmo-font-color-disabled)))}:host([border=none]) .input{border-width:0;outline:none}:host([quiet]) .input{padding-block-start:var(--luzmo-text-field-spacing-block-start,var(--luzmo-spacing-2));padding-inline:var(--luzmo-text-field-spacing-inline-quiet,0px);background-color:initial;resize:none;border-block-start-width:0;border-inline-width:0;border-radius:0;outline:none;margin-block-end:var(--luzmo-text-field-spacing-block-quiet,0px);overflow-y:hidden}:host([quiet][disabled]) .input,.input:disabled{background-color:initial;border-color:var(--luzmo-text-field-border-color-disabled,var(--luzmo-border-color-disabled))}:host([quiet][disabled]) .input,:host([quiet][disabled]) .input::placeholder,.input:disabled,.input:disabled::placeholder{color:var(--highcontrast-text-field-text-color-disabled,var(--luzmo-text-field-text-color-disabled,var(--luzmo-disabled-color)))}.input:read-only,:host([readonly]) #text-field .input{background-color:initial;color:var(--highcontrast-text-field-text-color-readonly,var(--luzmo-text-field-text-color-readonly,var(--luzmo-font-color)));border-color:#0000;outline:none}.input:read-only::placeholder,:host([readonly]) #text-field .input::placeholder{color:var(--highcontrast-text-field-text-color-readonly,var(--luzmo-text-field-text-color-readonly,var(--luzmo-disabled-color)));background-color:initial}@media (hover:hover){.input:hover,#text-field:hover .input{border-color:var(--highcontrast-text-field-border-color-hover,var(--luzmo-text-field-border-color-hover,rgba(var(--luzmo-primary-rgb), .3)));color:var(--highcontrast-text-field-text-color-hover,var(--luzmo-text-field-text-color-hover,var(--luzmo-font-color-hover)))}.input:hover::placeholder,#text-field:hover .input::placeholder{color:var(--highcontrast-text-field-text-color-hover,var(--luzmo-text-field-placeholder-text-color-hover,var(--luzmo-disabled-color)))}:host([focused]) .input:hover,:host([focused]) #text-field:hover .input,.input:focus:hover{border-color:var(--highcontrast-text-field-border-color-focus-hover,var(--luzmo-text-field-border-color-focus-hover,var(--luzmo-primary)))}:host([focused]) .input:hover,.input:focus:hover{color:var(--highcontrast-text-field-text-color-focus-hover,var(--luzmo-text-field-text-color-focus-hover,var(--luzmo-font-color-hover)))}:host([focused]) .input:hover::placeholder,.input:focus:hover::placeholder{color:var(--highcontrast-text-field-text-color-focus-hover,var(--luzmo-text-field-placeholder-text-color-focus-hover,var(--luzmo-disabled-color)))}:host([invalid]) .input:hover:not(.is-disabled),:host([invalid]:hover):not(.is-disabled) .input{border-color:var(--highcontrast-text-field-border-color-invalid-hover,var(--luzmo-text-field-border-color-invalid-hover,var(--luzmo-negative-color)))}:host([invalid]) .input:focus:hover,:host([invalid][focused]) .input:hover,:host([invalid]:focus) .input:hover{border-color:var(--highcontrast-text-field-border-color-invalid-focus-hover,var(--luzmo-text-field-border-color-invalid-focus-hover,var(--luzmo-negative-color)))}:host([disabled]) #text-field:hover .input{background-color:var(--luzmo-text-field-background-color-disabled,var(--luzmo-background-color-disabled));resize:none;opacity:1;border-color:#0000}:host([quiet][disabled]:hover) .input,:host([disabled]) #text-field:hover .input,:host([disabled]) #text-field:hover .input::placeholder{color:var(--highcontrast-text-field-text-color-disabled,var(--luzmo-text-field-text-color-disabled,var(--luzmo-font-color-disabled)))}:host([quiet][disabled]:hover) .input{background-color:initial;border-color:var(--luzmo-text-field-border-color-disabled,var(--luzmo-border-color-disabled))}:host([quiet][disabled]:hover) .input::placeholder{color:var(--highcontrast-text-field-text-color-disabled,var(--luzmo-text-field-text-color-disabled,var(--luzmo-font-color-disabled)))}:host([readonly]) #text-field:hover .input{border-color:#0000;outline:none}:host([readonly]) #text-field:hover .input,:host([readonly]) #text-field:hover .input::placeholder{background-color:initial;color:var(--highcontrast-text-field-text-color-readonly,var(--luzmo-text-field-text-color-readonly,var(--luzmo-font-color)))}}.luzmo-text-field--sideLabel{grid-template-rows:auto auto;grid-template-columns:auto auto auto}.luzmo-text-field--sideLabel:after{grid-area:1/2/span 1/span 1}.luzmo-text-field--sideLabel .luzmo-field-label{grid-area:1/1/span 2/span 1;margin-inline-end:var(--luzmo-text-field-label-spacing-inline-side-label,var(--text-field-label-spacing-inline-side-label))}.luzmo-text-field--sideLabel .luzmo-text-field-characterCount{grid-area:1/3/auto/span 1;align-items:flex-start;margin-block-start:var(--luzmo-text-field-character-count-spacing-block-side,var(--text-field-character-count-spacing-block-side));margin-inline-start:var(--luzmo-text-field-character-count-spacing-inline-side,12px)}.luzmo-text-field--sideLabel .luzmo-help-text{grid-area:2/2/auto/span 1}.luzmo-text-field--sideLabel .input,.luzmo-text-field--sideLabel .icon{grid-area:1/2/span 1/span 1}:host([multiline]){--luzmo-text-field-input-line-height:normal}:host([multiline]) .input{min-inline-size:var(--luzmo-text-area-min-inline-size,112px);min-block-size:var(--luzmo-text-area-min-block-size,56px);resize:inherit}:host([multiline][grows]) .input{grid-row:2}:host([multiline][grows]) .luzmo-text-field--sideLabel .input{grid-row:1}:host([multiline][quiet]) .input{min-block-size:var(--luzmo-text-area-min-block-size-quiet,var(--text-area-min-block-size-quiet));resize:none;overflow-y:hidden}@media (forced-colors:active){:host{--highcontrast-text-field-border-color-hover:Highlight;--highcontrast-text-field-border-color-focus:Highlight;--highcontrast-text-field-border-color-keyboard-focus:CanvasText;--highcontrast-text-field-focus-indicator-color:Highlight;--highcontrast-text-field-border-color-invalid-default:Highlight;--highcontrast-text-field-border-color-invalid-hover:Highlight;--highcontrast-text-field-border-color-invalid-focus:Highlight;--highcontrast-text-field-border-color-invalid-keyboard-focus:Highlight;--highcontrast-text-field-text-color-valid:CanvasText;--highcontrast-text-field-text-color-invalid:CanvasText}#text-field .input{--highcontrast-text-field-text-color-default:CanvasText;--highcontrast-text-field-text-color-hover:CanvasText;--highcontrast-text-field-text-color-keyboard-focus:CanvasText;--highcontrast-text-field-text-color-disabled:GrayText;--highcontrast-text-field-text-color-readonly:CanvasText}#text-field .input::placeholder{--highcontrast-text-field-text-color-default:GrayText;--highcontrast-text-field-text-color-hover:GrayText;--highcontrast-text-field-text-color-keyboard-focus:GrayText;--highcontrast-text-field-text-color-disabled:GrayText;--highcontrast-text-field-text-color-readonly:CanvasText}}:host{inline-size:var(--luzmo-text-field-width,var(--text-field-width));flex-direction:column;display:inline-flex}:host([multiline]){resize:both}:host([multiline][readonly]){resize:none}:host([disabled]:focus-visible){outline:none}#text-field{inline-size:100%}#text-field,textarea{resize:inherit}.input{min-inline-size:var(--luzmo-text-field-min-width,1.5)}:host([focused]) .input{caret-color:var(--swc-test-caret-color);forced-color-adjust:var(--swc-test-forced-color-adjust)}#sizer{word-break:break-word;white-space:pre-line;block-size:auto;opacity:0!important}.icon,.icon-workflow{pointer-events:none}:host([multiline]) #text-field{--luzmo-text-field-input-line-height:normal;display:inline-grid}:host([multiline]) textarea{transition:box-shadow var(--luzmo-animation-duration) ease-in-out, border-color var(--luzmo-animation-duration) ease-in-out}:host([multiline]:not([quiet])) #text-field:after{box-shadow:none}:host([multiline][rows]) .input{resize:none;block-size:auto}:host([multiline][rows="1"]) .input{min-block-size:auto}:host([disabled][quiet]) #text-field .input,:host([disabled][quiet]) #text-field:hover .input,:host([quiet]) .input :disabled{border-color:var(--luzmo-text-field-border-color-disabled,var(--luzmo-border-color-disabled));color:var(--highcontrast-text-field-text-color-disabled,var(--luzmo-text-field-text-color-disabled,var(--luzmo-font-color-disabled)));background-color:#0000}:host([disabled]) #text-field .icon.icon-search,:host([readonly]) #text-field .icon.icon-search{color:var(--highcontrast-text-field-text-color-disabled,var(--luzmo-text-field-text-color-disabled,var(--luzmo-font-color-disabled)))}:host([multiline][grows]:not([quiet])) #text-field:after{grid-area:unset;min-block-size:calc(var(--luzmo-text-area-min-block-size,var(--luzmo-text-area-min-block-size)) + var(--luzmo-text-field-focus-indicator-gap,2px) * 2)}:host([multiline][grows]) .input:not(#sizer){resize:none;height:100%;position:absolute;top:0;left:0;overflow:hidden}:host([multiline][grows][max-rows]) .input:not(#sizer){overflow-y:auto}:host{--text-field-height:var(--luzmo-component-height);--text-field-width:240px;--text-field-label-spacing-block-quiet:-8px;--text-field-label-spacing-inline-side-label:12px;--text-field-placeholder-font-size:14px;--text-field-spacing-inline:12px;--text-field-icon-size-invalid:18px;--text-field-icon-size-valid:10px;--text-field-icon-spacing-inline-end-invalid:12px;--text-field-icon-spacing-inline-end-valid:15px;--text-field-icon-spacing-block-invalid:7px;--text-field-icon-spacing-block-valid:4px;--text-field-icon-spacing-inline-start-invalid:var(--luzmo-spacing-4);--text-field-icon-spacing-inline-start-valid:var(--luzmo-spacing-4);--text-field-character-count-font-size:var(--luzmo-font-size-s);--text-field-character-count-spacing-block:5px;--text-field-character-count-spacing-block-quiet:-3px;--text-field-character-count-spacing-block-side:8px;--text-area-min-block-size-quiet:var(--luzmo-component-height)}:host([size=s]){--text-field-height:var(--luzmo-component-height-s);--text-field-width:220px;--text-field-label-spacing-block-quiet:-8px;--text-field-label-spacing-inline-side-label:8px;--text-field-placeholder-font-size:12px;--text-field-spacing-inline:9px;--text-field-icon-size-invalid:16px;--text-field-icon-size-valid:10px;--text-field-icon-spacing-inline-end-invalid:9px;--text-field-icon-spacing-inline-end-valid:11px;--text-field-icon-spacing-block-invalid:2px;--text-field-icon-spacing-block-valid:-1px;--text-field-icon-spacing-inline-start-invalid:var(--luzmo-spacing-3);--text-field-icon-spacing-inline-start-valid:var(--luzmo-spacing-3);--text-field-character-count-font-size:var(--luzmo-font-size-xs);--text-field-character-count-spacing-block:5px;--text-field-character-count-spacing-block-quiet:-3px;--text-field-character-count-spacing-block-side:4px;--text-area-min-block-size-quiet:var(--luzmo-component-height-s)}:host([size=l]){--text-field-height:var(--luzmo-component-height-l);--text-field-width:280px;--text-field-label-spacing-block-quiet:-12px;--text-field-label-spacing-inline-side-label:12px;--text-field-placeholder-font-size:16px;--text-field-spacing-inline:15px;--text-field-icon-size-invalid:20px;--text-field-icon-size-valid:12px;--text-field-icon-spacing-inline-end-invalid:15px;--text-field-icon-spacing-inline-end-valid:17px;--text-field-icon-spacing-block-invalid:10px;--text-field-icon-spacing-block-valid:8px;--text-field-icon-spacing-inline-start-invalid:15px;--text-field-icon-spacing-inline-start-valid:15px;--text-field-character-count-font-size:var(--luzmo-font-size);--text-field-character-count-spacing-block:9px;--text-field-character-count-spacing-block-quiet:-3px;--text-field-character-count-spacing-block-side:11px;--text-area-min-block-size-quiet:var(--luzmo-component-height-l)}:host([size=xl]){--text-field-height:var(--luzmo-component-height-xl);--text-field-width:320px;--text-field-label-spacing-block-quiet:-15px;--text-field-label-spacing-inline-side-label:12px;--text-field-placeholder-font-size:18px;--text-field-spacing-inline:15px;--text-field-icon-size-invalid:22px;--text-field-icon-size-valid:14px;--text-field-icon-spacing-inline-end-invalid:18px;--text-field-icon-spacing-inline-end-valid:20px;--text-field-icon-spacing-block-invalid:12px;--text-field-icon-spacing-block-valid:13px;--text-field-icon-spacing-inline-start-invalid:18px;--text-field-icon-spacing-inline-start-valid:18px;--text-field-character-count-font-size:var(--luzmo-font-size-l);--text-field-character-count-spacing-block:11px;--text-field-character-count-spacing-block-quiet:-4px;--text-field-character-count-spacing-block-side:14px;--text-area-min-block-size-quiet:var(--luzmo-component-height-xl)}`;Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return e}});

package/components/toast/index.cjs

@@ -15,37 +15,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../base-CBCg3yyw.cjs");require("../close-button-Cbnb7XXj.cjs");const d=require("../focus-visible-B0P9aY_G.cjs"),u=require("../luzmo-icons-D4IvHgVd.cjs"),v="@media (forced-colors: active){:host{--highcontrast-toast-border-color: ButtonText;border:var(--luzmo-toast-border-width, var(--toast-border-width)) solid var(--highcontrast-toast-border-color, transparent)}}:host{box-sizing:border-box;min-block-size:var(--luzmo-toast-block-size, var(--toast-block-size));max-inline-size:var(--luzmo-toast-max-inline-size, var(--toast-max-inline-size));border-radius:var(--luzmo-toast-corner-radius, var(--toast-corner-radius));font-size:var(--luzmo-toast-font-size, var(--toast-font-size));font-weight:var(--luzmo-toast-font-weight, var(--toast-font-weight));-webkit-font-smoothing:antialiased;background-color:var(--highcontrast-toast-background-color-default, var(--luzmo-toast-background-color-default, var(--toast-background-color-default)));color:var(--highcontrast-toast-background-color-default, var(--luzmo-toast-background-color-default, var(--toast-background-color-default)));overflow-wrap:anywhere;flex-direction:row;align-items:stretch;padding-inline-start:var(--luzmo-toast-spacing-start-edge-to-text-and-icon, var(--toast-spacing-start-edge-to-text-and-icon));display:inline-flex}:host([variant=negative]){background-color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}:host([variant=negative]),:host([variant=negative]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}:host([variant=info]){background-color:var(--highcontrast-toast-informative-background-color-default, var(--luzmo-toast-informative-background-color-default, var(--toast-informative-background-color-default)))}:host([variant=info]),:host([variant=info]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-informative-background-color-default, var(--luzmo-toast-informative-background-color-default, var(--toast-informative-background-color-default)))}:host([variant=positive]){background-color:var(--highcontrast-toast-positive-background-color-default, var(--luzmo-toast-positive-background-color-default, var(--toast-positive-background-color-default)))}:host([variant=positive]),:host([variant=positive]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-positive-background-color-default, var(--luzmo-toast-positive-background-color-default, var(--toast-positive-background-color-default)))}.type{flex-grow:0;flex-shrink:0;margin-block-start:var(--luzmo-toast-spacing-top-edge-to-icon, var(--toast-spacing-top-edge-to-icon));margin-inline-start:0;margin-inline-end:var(--luzmo-toast-spacing-icon-to-text, var(--toast-spacing-icon-to-text))}.content,.type{color:var(--highcontrast-toast-text-and-icon-color, var(--luzmo-toast-text-and-icon-color, var(--toast-text-and-icon-color)))}.content{box-sizing:border-box;line-height:var(--luzmo-toast-line-height, var(--toast-line-height));text-align:start;flex:auto;padding-block-start:calc(var(--luzmo-toast-spacing-top-edge-to-text, var(--toast-spacing-top-edge-to-text)) - var(--luzmo-toast-spacing-block-start, var(--toast-spacing-block-start)));padding-block-end:calc(var(--luzmo-toast-spacing-bottom-edge-to-text, var(--toast-spacing-bottom-edge-to-text)) - var(--luzmo-toast-spacing-block-end, var(--toast-spacing-block-end)));padding-inline-start:0;padding-inline-end:var(--luzmo-toast-spacing-text-to-action-button-horizontal, var(--toast-spacing-text-to-action-button-horizontal));display:inline-block}.content:lang(ja),.content:lang(ko),.content:lang(zh){line-height:var(--luzmo-toast-line-height-cjk, var(--toast-line-height-cjk))}.buttons{border-inline-start-color:var(--luzmo-toast-divider-color, var(--toast-divider-color));flex:none;align-items:flex-start;margin-block-start:var(--luzmo-toast-spacing-top-edge-to-divider, var(--toast-spacing-top-edge-to-divider));margin-block-end:var(--luzmo-toast-spacing-bottom-edge-to-divider, var(--toast-spacing-bottom-edge-to-divider));padding-inline-end:var(--luzmo-toast-spacing-close-button, var(--toast-spacing-close-button));display:flex}.buttons .luzmo-CloseButton{align-self:flex-start}.body{flex-wrap:wrap;flex:auto;align-self:center;align-items:center;padding-block-start:var(--luzmo-toast-spacing-block-start, var(--toast-spacing-block-start));padding-block-end:var(--luzmo-toast-spacing-block-end, var(--toast-spacing-block-end));display:flex}.body ::slotted([slot=action]){margin-inline-start:auto;margin-inline-end:var(--luzmo-toast-spacing-text-and-action-button-to-divider, var(--toast-spacing-text-and-action-button-to-divider))}.body ::slotted([slot=action]:dir(rtl)),:host([dir=rtl]) .body ::slotted([slot=action]){margin-inline-end:var(--luzmo-toast-spacing-text-and-action-button-to-divider, var(--toast-spacing-text-and-action-button-to-divider))}.body+.buttons{border-inline-start-style:solid;border-inline-start-width:1px;padding-inline-start:var(--luzmo-toast-spacing-close-button, var(--toast-spacing-close-button))}:host{--toast-background-color-default: rgb(80, 80, 80);--toast-font-weight: var(--luzmo-font-weight);--toast-font-size: var(--luzmo-font-size);--toast-corner-radius: var(--luzmo-border-radius);--toast-block-size: var(--luzmo-component-height);--toast-max-inline-size: 360px;--toast-border-width: var(--luzmo-border-width);--toast-line-height: var(--luzmo-line-height);--toast-line-height-cjk: 1.5;--toast-spacing-icon-to-text: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--toast-spacing-start-edge-to-text-and-icon: var(--luzmo-spacing-5);--toast-spacing-text-and-action-button-to-divider: var(--luzmo-spacing-5);--toast-spacing-top-edge-to-divider: var(--luzmo-spacing-3);--toast-spacing-bottom-edge-to-divider: var(--luzmo-spacing-3);--toast-spacing-top-edge-to-icon: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--toast-spacing-text-to-action-button-horizontal: var(--luzmo-spacing-5);--toast-spacing-close-button: var(--luzmo-spacing-3);--toast-spacing-block-start: var(--luzmo-spacing-3);--toast-spacing-block-end: var(--luzmo-spacing-3);--toast-spacing-top-edge-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--toast-spacing-bottom-edge-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--toast-negative-background-color-default: var(--luzmo-negative-color);--toast-positive-background-color-default: var(--luzmo-positive-color);--toast-informative-background-color-default: var(--luzmo-informative-color);--toast-text-and-icon-color: rgb(255, 255, 255);--toast-divider-color: rgba(255, 255, 255, .2)}:host{--overlay-animation-distance: var(--spacing-100);--overlay-animation-duration: var(--animation-duration-100);opacity:0;pointer-events:none;transition:transform var(--overlay-animation-duration) ease-in-out,opacity var(--overlay-animation-duration) ease-in-out,visibility 0s linear var(--overlay-animation-duration);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0s;visibility:visible}:host([variant=error]),:host([variant=warning]){background-color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}:host([variant=negative]),:host([variant=negative]) .closeButton:focus-visible:not(:active),:host([variant=warning]),:host([variant=warning]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}";var g=Object.defineProperty,h=Object.getOwnPropertyDescriptor,s=(r,t,a,i)=>{for(var n=i>1?void 0:i?h(t,a):t,l=r.length-1,c;l>=0;l--)(c=r[l])&&(n=(i?c(t,a,n):c(n))||n);return i&&n&&g(t,a,n),n};const p=["negative","positive","info"];class e extends d.FocusVisiblePolyfillMixin(o.LuzmoElement){constructor(){super(...arguments),this.open=!1,this._timeout=null,this._variant="",this.countdownStart=0,this.nextCount=-1,this.doCountdown=t=>{this.countdownStart||(this.countdownStart=performance.now()),t-this.countdownStart>this._timeout?(this.shouldClose(),this.countdownStart=0):this.countdown()},this.countdown=()=>{cancelAnimationFrame(this.nextCount),this.nextCount=requestAnimationFrame(this.doCountdown)},this.holdCountdown=()=>{this.stopCountdown(),this.addEventListener("focusout",this.resumeCountdown)},this.resumeCountdown=()=>{this.removeEventListener("focusout",this.holdCountdown),this.countdown()}}static get styles(){return[o.r(v)]}set timeout(t){const i=typeof t!==null&&t>0?Math.max(6e3,t):null,n=this.timeout;i&&this.countdownStart&&(this.countdownStart=performance.now()),this._timeout=i,this.requestUpdate("timeout",n)}get timeout(){return this._timeout}set variant(t){if(t===this.variant)return;const a=this.variant;p.includes(t)?(this.setAttribute("variant",t),this._variant=t):(this.removeAttribute("variant"),this._variant=""),this.requestUpdate("variant",a)}get variant(){return this._variant}renderIcon(t,a){switch(t){case"info":return o.x`
-          <luzmo-icon
-            .icon=${u.p1}
-            label=${a||"Information"}
-            class="type"
-          ></luzmo-icon>
-        `;case"negative":return o.x`
-          <luzmo-icon
-            .icon=${u.I}
-            label=${a||"Error"}
-            class="type"
-          ></luzmo-icon>
-        `;case"positive":return o.x`
-          <luzmo-icon
-            .icon=${u.C0}
-            label=${a||"Success"}
-            class="type"
-          ></luzmo-icon>
-        `;default:return o.x``}}startCountdown(){this.countdown(),this.addEventListener("focusin",this.holdCountdown)}stopCountdown(){cancelAnimationFrame(this.nextCount),this.countdownStart=0}shouldClose(){this.dispatchEvent(new CustomEvent("close",{composed:!0,bubbles:!0,cancelable:!0}))&&this.close()}close(){this.open=!1}render(){return o.x`
-      ${this.renderIcon(this.variant,this.iconLabel)}
-      <div class="body" role="alert">
-        <div class="content">
-          <slot></slot>
-        </div>
-        <slot name="action"></slot>
-      </div>
-      <div class="buttons">
-        <luzmo-close-button
-          @click=${this.shouldClose}
-          label="Close"
-          static-color="white"
-        ></luzmo-close-button>
-      </div>
-    `}updated(t){super.updated(t),t.has("open")&&(this.open?this.timeout&&this.startCountdown():this.timeout&&this.stopCountdown()),t.has("timeout")&&(this.timeout!==null&&this.open?this.startCountdown():this.stopCountdown())}}s([o.n({type:Boolean,reflect:!0})],e.prototype,"open",2);s([o.n({type:Number})],e.prototype,"timeout",1);s([o.n({type:String})],e.prototype,"variant",1);s([o.n({type:String,attribute:"icon-label"})],e.prototype,"iconLabel",2);customElements.get("luzmo-toast")||customElements.define("luzmo-toast",e);exports.LuzmoToast=e;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../toast-CJSQUzoW.cjs`);exports.LuzmoToast=e.t;