@getufy/flint-ui 0.1.0

package/dist/_shared/flint-tabs-Do8hU-DT.js

@@ -0,0 +1,226 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { LitElement as t, html as n, nothing as r, unsafeCSS as i } from "lit";
+import { customElement as a, property as o, query as s, state as c } from "lit/decorators.js";
+import { classMap as l } from "lit/directives/class-map.js";
+//#region src/tabs/flint-tab.css?inline
+var u = ":host{background:var(--flint-background);display:inline-flex;position:relative}:host([full-width]){flex:1}.tab{padding:var(--flint-tab-padding-y,10px) var(--flint-tab-padding-x,16px);min-height:var(--flint-tab-min-height,48px);cursor:pointer;font-family:var(--flint-font-family);font-size:var(--flint-tab-font-size,.875rem);font-weight:var(--flint-tab-font-weight,500);color:var(--flint-tab-inactive-color);white-space:nowrap;box-sizing:border-box;-webkit-tap-highlight-color:transparent;background:0 0;border:none;border-radius:0;outline:none;justify-content:center;align-items:center;gap:6px;width:100%;line-height:1.25;text-decoration:none;transition:color .2s,background .15s;display:inline-flex}.tab:hover:not(:disabled):not([aria-disabled=true]){color:var(--flint-tab-active-color);background:var(--flint-tab-hover-bg,var(--flint-primary-color-light))}.tab:focus-visible{outline:2px solid var(--flint-tab-active-color);outline-offset:-2px}:host([selected]) .tab{color:var(--flint-tab-active-color);font-weight:var(--flint-tab-font-weight-active,600)}.tab:disabled{opacity:var(--flint-tab-disabled-opacity,.38);cursor:not-allowed}.icon-top{min-height:var(--flint-tab-icon-min-height,72px);flex-direction:column}.icon-bottom{min-height:var(--flint-tab-icon-min-height,72px);flex-direction:column-reverse}.icon-start{flex-direction:row}.icon-end{flex-direction:row-reverse}.icon-slot{line-height:0;display:contents}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", d = ":host{background:var(--flint-background);display:block}:host([hidden]){display:none!important}.panel{padding:var(--flint-tab-panel-padding,24px);font-family:var(--flint-font-family);color:var(--flint-text-color);font-size:.875rem;line-height:1.6}", f = ":host{background:var(--flint-background);display:block;position:relative}:host([orientation=vertical]),:host([orientation=vertical]) .container{height:100%}.container{border-bottom:1px solid var(--flint-tab-border-color,var(--flint-border-color));align-items:center;display:flex;position:relative}:host([orientation=vertical]) .container{border-bottom:none;border-right:1px solid var(--flint-tab-border-color,var(--flint-border-color));flex-direction:column;align-items:stretch}.scroll-btn{cursor:pointer;color:var(--flint-text-color-muted);background:0 0;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:color .15s,background .15s;display:flex}:host(:not([orientation=vertical])) .scroll-btn{width:var(--flint-tab-scroll-btn-size,40px);height:var(--flint-tab-scroll-btn-size,40px)}:host([orientation=vertical]) .scroll-btn{width:100%;height:var(--flint-tab-scroll-btn-size,40px)}.scroll-btn:hover:not(:disabled){color:var(--flint-text-color);background:var(--flint-hover-color)}.scroll-btn:disabled{opacity:.38;cursor:default}.scroll-area{scrollbar-width:none;-ms-overflow-style:none;flex:1;min-height:0;position:relative}.scroll-area::-webkit-scrollbar{display:none}:host(:not([orientation=vertical])) .scroll-area{overflow:auto hidden}:host([orientation=vertical]) .scroll-area{overflow:hidden auto}.tabs-row{min-width:max-content;display:flex;position:relative}:host([orientation=vertical]) .tabs-row{min-width:unset;flex-direction:column;min-height:max-content}:host([variant=fullWidth]) .tabs-row{min-width:100%}:host([variant=fullWidth]) ::slotted(flint-tab){flex:1}:host([centered]) .tabs-row{justify-content:center;min-width:100%}.indicator{pointer-events:none;opacity:0;background:var(--flint-tab-indicator-color,var(--flint-tabs-ind-color,var(--flint-primary-color)));border-radius:var(--flint-tab-indicator-radius,3px);transition:left .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1),top .25s cubic-bezier(.4,0,.2,1),height .25s cubic-bezier(.4,0,.2,1),opacity .15s;position:absolute}:host(:not([orientation=vertical])) .indicator{height:var(--flint-tab-indicator-height,3px);bottom:0}:host([orientation=vertical]) .indicator{width:var(--flint-tab-indicator-width,3px);right:0}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", p = ":host{font-family:var(--flint-font-family);background:var(--flint-background);display:block}:host([orientation=vertical]) .root{height:100%;min-height:inherit;flex-direction:row;display:flex}.root{display:block}", m = (e) => n`<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="${e}"/></svg>`, h = () => m("M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"), g = () => m("M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"), _ = () => m("M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"), v = () => m("M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"), y = class extends t {
+	constructor(...e) {
+		super(...e), this.value = "", this.disabled = !1, this.selected = !1, this.iconPosition = "start", this.href = "", this.fullWidth = !1;
+	}
+	static {
+		this.styles = i(u);
+	}
+	setTabIndex(e) {
+		let t = this.shadowRoot?.querySelector("button,a");
+		t && (t.tabIndex = e);
+	}
+	focusInner() {
+		this.shadowRoot?.querySelector("button,a")?.focus();
+	}
+	_fire() {
+		this.disabled || this.dispatchEvent(new CustomEvent("flint-tab-click", {
+			detail: { value: this.value },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_inner() {
+		return n`
+            <span class="icon-slot"><slot name="icon"></slot></span>
+            <slot></slot>`;
+	}
+	render() {
+		let e = l({
+			tab: !0,
+			[`icon-${this.iconPosition}`]: !0
+		});
+		return this.href ? n`<a class=${e} href=${this.href}
+                role="tab"
+                aria-selected=${this.selected ? "true" : "false"}
+                aria-disabled=${this.disabled ? "true" : r}
+                tabindex=${this.selected ? "0" : "-1"}
+                @click=${this._fire}>${this._inner()}</a>` : n`<button class=${e}
+            role="tab"
+            ?disabled=${this.disabled}
+            aria-selected=${this.selected ? "true" : "false"}
+            tabindex=${this.selected ? "0" : "-1"}
+            @click=${this._fire}>${this._inner()}</button>`;
+	}
+};
+e([o({ reflect: !0 })], y.prototype, "value", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], y.prototype, "disabled", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], y.prototype, "selected", void 0), e([o({
+	attribute: "icon-position",
+	reflect: !0
+})], y.prototype, "iconPosition", void 0), e([o()], y.prototype, "href", void 0), e([o({
+	type: Boolean,
+	reflect: !0,
+	attribute: "full-width"
+})], y.prototype, "fullWidth", void 0), y = e([a("flint-tab")], y);
+var b = class extends t {
+	constructor(...e) {
+		super(...e), this.value = "";
+	}
+	static {
+		this.styles = i(d);
+	}
+	render() {
+		return n`<div class="panel" role="tabpanel"><slot></slot></div>`;
+	}
+};
+e([o({ reflect: !0 })], b.prototype, "value", void 0), b = e([a("flint-tab-panel")], b);
+var x = class extends t {
+	constructor(...e) {
+		super(...e), this.orientation = "horizontal", this.variant = "standard", this.centered = !1, this.scrollButtons = "auto", this.ariaLabel = "", this._canBack = !1, this._canFwd = !1, this._onScroll = () => this._checkScroll();
+	}
+	static {
+		this.styles = i(f);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+	}
+	firstUpdated() {
+		typeof ResizeObserver < "u" && (this._ro = new ResizeObserver(() => {
+			this._checkScroll(), this.syncIndicator();
+		}), this._ro.observe(this._area)), this._area.addEventListener("scroll", this._onScroll, { passive: !0 }), this._checkScroll(), requestAnimationFrame(() => this.syncIndicator());
+	}
+	disconnectedCallback() {
+		this._ro?.disconnect(), this._area?.removeEventListener("scroll", this._onScroll), super.disconnectedCallback();
+	}
+	_tabs() {
+		return this._slot ? this._slot.assignedElements({ flatten: !0 }).filter((e) => e.tagName === "FLINT-TAB") : [];
+	}
+	_checkScroll() {
+		let e = this._area;
+		e && (this.orientation === "horizontal" ? (this._canBack = e.scrollLeft > 1, this._canFwd = e.scrollLeft < e.scrollWidth - e.clientWidth - 1) : (this._canBack = e.scrollTop > 1, this._canFwd = e.scrollTop < e.scrollHeight - e.clientHeight - 1));
+	}
+	syncIndicator() {
+		let e = this._tabs().find((e) => e.selected);
+		if (!e || !this._ind || !this._row) return;
+		let t = this._row.getBoundingClientRect(), n = e.getBoundingClientRect();
+		!n.width && !n.height || (this.orientation === "horizontal" ? (this._ind.style.left = `${n.left - t.left}px`, this._ind.style.width = `${n.width}px`, this._ind.style.top = "", this._ind.style.height = "") : (this._ind.style.top = `${n.top - t.top}px`, this._ind.style.height = `${n.height}px`, this._ind.style.left = "", this._ind.style.width = ""), this._ind.style.opacity = "1");
+	}
+	_scroll(e) {
+		this.orientation === "horizontal" ? this._area.scrollBy({
+			left: e,
+			behavior: "smooth"
+		}) : this._area.scrollBy({
+			top: e,
+			behavior: "smooth"
+		});
+	}
+	_onKey(e) {
+		let t = this.orientation === "horizontal", n = t ? "ArrowLeft" : "ArrowUp", r = t ? "ArrowRight" : "ArrowDown";
+		if (![
+			n,
+			r,
+			"Home",
+			"End"
+		].includes(e.key)) return;
+		e.preventDefault();
+		let i = this._tabs().filter((e) => !e.disabled), a = i.findIndex((e) => e.shadowRoot?.activeElement != null || e === document.activeElement), o = a < 0 ? 0 : a;
+		e.key === n && (o = (o - 1 + i.length) % i.length), e.key === r && (o = (o + 1) % i.length), e.key === "Home" && (o = 0), e.key === "End" && (o = i.length - 1), i[o]?.focusInner(), typeof i[o].scrollIntoView == "function" && i[o].scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		}), i[o]?.dispatchEvent(new CustomEvent("flint-tab-click", {
+			detail: { value: i[o].value },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_onSlotChange() {
+		this._checkScroll(), requestAnimationFrame(() => this.syncIndicator());
+	}
+	render() {
+		let e = this.variant === "scrollable" && this.scrollButtons !== "false", t = this.orientation === "vertical", i = e ? n`
+            <button class="scroll-btn" aria-label="Scroll back"
+                ?disabled=${!this._canBack}
+                @click=${() => this._scroll(-200)}>
+                ${t ? _() : h()}
+            </button>` : r, a = e ? n`
+            <button class="scroll-btn" aria-label="Scroll forward"
+                ?disabled=${!this._canFwd}
+                @click=${() => this._scroll(200)}>
+                ${t ? v() : g()}
+            </button>` : r;
+		return n`
+            <div class="container">
+                ${i}
+                <div class="scroll-area" @keydown=${this._onKey}>
+                    <div class="tabs-row" role="tablist" aria-label=${this.ariaLabel || r}>
+                        <slot @slotchange=${this._onSlotChange}></slot>
+                        <div class="indicator"></div>
+                    </div>
+                </div>
+                ${a}
+            </div>`;
+	}
+};
+e([o({ reflect: !0 })], x.prototype, "orientation", void 0), e([o({ reflect: !0 })], x.prototype, "variant", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], x.prototype, "centered", void 0), e([o({ attribute: "scroll-buttons" })], x.prototype, "scrollButtons", void 0), e([o({ attribute: "aria-label" })], x.prototype, "ariaLabel", void 0), e([c()], x.prototype, "_canBack", void 0), e([c()], x.prototype, "_canFwd", void 0), e([s(".scroll-area")], x.prototype, "_area", void 0), e([s(".tabs-row")], x.prototype, "_row", void 0), e([s(".indicator")], x.prototype, "_ind", void 0), e([s("slot")], x.prototype, "_slot", void 0), x = e([a("flint-tab-list")], x);
+var S = class extends t {
+	constructor(...e) {
+		super(...e), this.value = "", this.orientation = "horizontal", this.variant = "standard", this.centered = !1, this.scrollButtons = "auto", this.textColor = "primary", this.indicatorColor = "primary", this.defaultValue = "", this._firstUpdate = !0, this._onTabClick = (e) => {
+			this.value = e.detail.value, this.dispatchEvent(new CustomEvent("flint-tab-change", {
+				detail: { value: e.detail.value },
+				bubbles: !0,
+				composed: !0
+			})), this._syncAll();
+		};
+	}
+	static {
+		this.styles = i(p);
+	}
+	willUpdate() {
+		this._firstUpdate && this.defaultValue && !this.value && (this.value = this.defaultValue), this._firstUpdate &&= !1;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("flint-tab-click", this._onTabClick);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("flint-tab-click", this._onTabClick), super.disconnectedCallback();
+	}
+	_resolveColor(e) {
+		return e === "primary" ? "var(--flint-primary-color, #3b82f6)" : e === "secondary" ? "var(--flint-accent-color, #8b5cf6)" : e === "inherit" ? "currentColor" : e;
+	}
+	_syncAll() {
+		let e = this.querySelector("flint-tab-list"), t = Array.from(this.querySelectorAll("flint-tab")), n = Array.from(this.querySelectorAll("flint-tab-panel")), r = this.value;
+		if (!r) {
+			let e = t.find((e) => !e.disabled);
+			e && (r = e.value, this.value = e.value);
+		}
+		e && (e.orientation = this.orientation, e.variant = this.variant, e.centered = this.centered, e.scrollButtons = this.scrollButtons, e.style.setProperty("--flint-tabs-ind-color", this._resolveColor(this.indicatorColor)));
+		let i = this._resolveColor(this.textColor), a = this.textColor === "inherit" ? "currentColor" : "var(--flint-text-color-muted, #4b5563)";
+		t.forEach((e) => {
+			e.selected = e.value === r, e.fullWidth = this.variant === "fullWidth", e.style.setProperty("--flint-tab-active", i), e.style.setProperty("--flint-tab-inactive", a), e.setAttribute("id", `tab-${e.value}`), e.setAttribute("aria-controls", `panel-${e.value}`);
+		}), n.forEach((e) => {
+			e.setAttribute("id", `panel-${e.value}`), e.setAttribute("aria-labelledby", `tab-${e.value}`), e.value === r ? e.removeAttribute("hidden") : e.setAttribute("hidden", "");
+		}), requestAnimationFrame(() => e?.syncIndicator());
+	}
+	updated(e) {
+		[
+			"value",
+			"orientation",
+			"variant",
+			"centered",
+			"scrollButtons",
+			"textColor",
+			"indicatorColor"
+		].some((t) => e.has(t)) && this._syncAll();
+	}
+	render() {
+		return n`
+            <div class="root">
+                <slot @slotchange=${() => this._syncAll()}></slot>
+            </div>`;
+	}
+};
+e([o({ reflect: !0 })], S.prototype, "value", void 0), e([o({ reflect: !0 })], S.prototype, "orientation", void 0), e([o()], S.prototype, "variant", void 0), e([o({ type: Boolean })], S.prototype, "centered", void 0), e([o({ attribute: "scroll-buttons" })], S.prototype, "scrollButtons", void 0), e([o({ attribute: "text-color" })], S.prototype, "textColor", void 0), e([o({ attribute: "indicator-color" })], S.prototype, "indicatorColor", void 0), e([o({ attribute: "default-value" })], S.prototype, "defaultValue", void 0), S = e([a("flint-tabs")], S);
+//#endregion
+export { S as i, x as n, b as r, y as t };

package/dist/_shared/flint-text-field-DlLvuIJW.js

@@ -0,0 +1,76 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { LitElement as t, html as n, unsafeCSS as r } from "lit";
+import { customElement as i, property as a, state as o } from "lit/decorators.js";
+import { classMap as s } from "lit/directives/class-map.js";
+//#region src/text-field/flint-text-field.css?inline
+var c = ":host{font-family:var(--flint-font-family);margin-bottom:1rem;display:block}.field-container{flex-direction:column;gap:.5rem;display:flex}.label{color:var(--flint-label-color);font-size:.875rem;font-weight:500;transition:color .2s}.input-wrapper{background-color:var(--flint-input-bg);border:1px solid var(--flint-input-border-color);border-radius:var(--flint-input-border-radius);align-items:center;transition:all .2s;display:flex;position:relative;overflow:hidden}.input-wrapper:hover:not(.disabled):not(.error){border-color:var(--flint-input-border-hover-color)}.input-wrapper.focused:not(.error){border-color:var(--flint-primary-color);box-shadow:0 0 0 3px var(--flint-primary-focus-ring)}.input-wrapper.error{border-color:var(--flint-error-color)}.input-wrapper.error.focused{box-shadow:0 0 0 3px var(--flint-error-focus-ring)}.input-wrapper.disabled{background-color:var(--flint-input-disabled-bg);cursor:not-allowed;opacity:.7}input{width:100%;color:inherit;background:0 0;border:none;outline:none;flex:1;padding:.625rem .875rem;font-family:inherit;font-size:1rem}input:disabled{cursor:not-allowed}input::placeholder{color:var(--flint-input-placeholder-color)}.icon-leading,.icon-trailing{color:var(--flint-text-color-muted);justify-content:center;align-items:center;padding:0 .75rem;display:flex}.icon-leading{padding-right:0}.icon-trailing{padding-left:0}.helper-text{color:var(--flint-help-text-color);font-size:.75rem}.error-text{color:var(--flint-error-color)}.filled .input-wrapper{background-color:var(--flint-surface-2);border-bottom:2px solid var(--flint-input-border-color);border-top:none;border-left:none;border-right:none;border-radius:4px 4px 0 0}.filled .input-wrapper.focused{border-bottom-color:var(--flint-primary-color);background-color:var(--flint-hover-color)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", l = class extends t {
+	constructor(...e) {
+		super(...e), this.label = "", this.value = "", this.placeholder = "", this.type = "text", this.variant = "outlined", this.disabled = !1, this.error = !1, this.helperText = "", this.errorMessage = "", this._focused = !1;
+	}
+	static {
+		this.styles = r(c);
+	}
+	_handleInput(e) {
+		this.value = e.target.value, this.dispatchEvent(new CustomEvent("input", {
+			detail: { value: this.value },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_handleChange(e) {
+		this.value = e.target.value, this.dispatchEvent(new CustomEvent("change", {
+			detail: { value: this.value },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_handleFocus() {
+		this._focused = !0;
+	}
+	_handleBlur() {
+		this._focused = !1;
+	}
+	render() {
+		let e = this.error || !!this.errorMessage;
+		return n`
+      <div class=${s({
+			"field-container": !0,
+			filled: this.variant === "filled"
+		})}>
+        ${this.label ? n`<label class="label">${this.label}</label>` : ""}
+        
+        <div class=${s({
+			"input-wrapper": !0,
+			focused: this._focused,
+			error: e,
+			disabled: this.disabled
+		})}>
+          <div class="icon-leading" part="leading-icon">
+            <slot name="leading"></slot>
+          </div>
+
+          <input
+            .type=${this.type}
+            .value=${this.value}
+            .placeholder=${this.placeholder}
+            ?disabled=${this.disabled}
+            @input=${this._handleInput}
+            @change=${this._handleChange}
+            @focus=${this._handleFocus}
+            @blur=${this._handleBlur}
+            aria-invalid=${e ? "true" : "false"}
+          />
+
+          <div class="icon-trailing" part="trailing-icon">
+            <slot name="trailing"></slot>
+          </div>
+        </div>
+
+        ${e && this.errorMessage ? n`<span class="helper-text error-text">${this.errorMessage}</span>` : this.helperText ? n`<span class="helper-text">${this.helperText}</span>` : ""}
+      </div>
+    `;
+	}
+};
+e([a({ type: String })], l.prototype, "label", void 0), e([a({ type: String })], l.prototype, "value", void 0), e([a({ type: String })], l.prototype, "placeholder", void 0), e([a({ type: String })], l.prototype, "type", void 0), e([a({ type: String })], l.prototype, "variant", void 0), e([a({ type: Boolean })], l.prototype, "disabled", void 0), e([a({ type: Boolean })], l.prototype, "error", void 0), e([a({ type: String })], l.prototype, "helperText", void 0), e([a({ type: String })], l.prototype, "errorMessage", void 0), e([o()], l.prototype, "_focused", void 0), l = e([i("flint-text-field")], l);
+//#endregion
+export { l as t };

package/dist/_shared/flint-textarea-wDEUC9Bt.js

@@ -0,0 +1,106 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { t } from "./form-associated-EGIhyHHt.js";
+import { LitElement as n, html as r, nothing as i, unsafeCSS as a } from "lit";
+import { customElement as o, property as s } from "lit/decorators.js";
+import { classMap as c } from "lit/directives/class-map.js";
+import { ifDefined as l } from "lit/directives/if-defined.js";
+//#region src/textarea/flint-textarea.css?inline
+var u = ":host{font-family:var(--flint-font-family);display:block}.textarea-wrapper{flex-direction:column;gap:6px;display:flex}label{color:var(--flint-label-color);font-size:14px;font-weight:500}textarea{box-sizing:border-box;border-radius:var(--flint-input-border-radius);border:1px solid var(--flint-input-border-color);background-color:var(--flint-input-bg);width:100%;color:var(--flint-text-color);resize:vertical;min-height:var(--flint-textarea-min-height,80px);outline:none;padding:10px 14px;font-family:inherit;font-size:14px;line-height:1.5;transition:border-color .2s,box-shadow .2s}:host([resize=none]) textarea{resize:none}:host([resize=both]) textarea{resize:both}:host([resize=horizontal]) textarea{resize:horizontal}:host([resize=vertical]) textarea{resize:vertical}:host([resize=auto]) textarea{resize:none;overflow:hidden}:host([size=sm]) textarea{padding:6px 10px;font-size:13px}:host([size=lg]) textarea{padding:12px 16px;font-size:16px}textarea::placeholder{color:var(--flint-input-placeholder-color)}textarea:hover:not(:disabled):not(.error-textarea){border-color:var(--flint-input-border-hover-color)}textarea:focus-visible{border-color:var(--flint-primary-color);box-shadow:0 0 0 3px var(--flint-primary-focus-ring)}textarea[aria-invalid=true]{border-color:var(--flint-error-color)}textarea[aria-invalid=true]:focus-visible{box-shadow:0 0 0 3px var(--flint-error-focus-ring)}textarea:disabled{background-color:var(--flint-input-disabled-bg);color:var(--flint-input-disabled-color);cursor:not-allowed;opacity:1}textarea[readonly]{background-color:var(--flint-input-readonly-bg);cursor:default}.help-text{color:var(--flint-help-text-color);margin:0;font-size:12px}.error-text{color:var(--flint-error-color)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", d = 0, f = class extends t(n) {
+	static {
+		this.styles = a(u);
+	}
+	constructor() {
+		super(), this.value = "", this.placeholder = "", this.disabled = !1, this.readonly = !1, this.required = !1, this.error = !1, this.errorMessage = "", this.helpText = "", this.label = "", this.size = "default", this.rows = 3, this.maxlength = void 0, this.minlength = void 0, this.name = "", this.autocomplete = "", this.resize = "vertical", this.defaultValue = "", this.ariaLabel = null, d++, this._textareaId = `flint-textarea-${d}`, this._descId = `flint-textarea-desc-${d}`;
+	}
+	get textareaElement() {
+		return this.shadowRoot?.querySelector("textarea") ?? null;
+	}
+	willUpdate(e) {
+		super.willUpdate(e), this._firstUpdate && (this._firstUpdate = !1, this.defaultValue && !this.value && (this.value = this.defaultValue));
+	}
+	updated(e) {
+		super.updated(e), e.has("value") && (this._initFormValue(this.value), this.resize === "auto" && this._autoResize()), (e.has("required") || e.has("value")) && this._initFormValidity(this.required, !this.value, "Please fill in this field.");
+	}
+	_autoResize() {
+		let e = this.textareaElement;
+		e && (e.style.height = "auto", e.style.height = `${e.scrollHeight}px`);
+	}
+	_handleInput(e) {
+		this.value = e.target.value, this.dispatchEvent(new CustomEvent("flint-textarea-input", {
+			detail: { value: this.value },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_handleChange(e) {
+		this.value = e.target.value, this.dispatchEvent(new CustomEvent("flint-textarea-change", {
+			detail: { value: this.value },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	render() {
+		let e = this.error || !!this.errorMessage, t = e && !!this.errorMessage || !!this.helpText;
+		return r`
+      <div class="textarea-wrapper" part="wrapper">
+        ${this.label ? r`
+          <label for=${this._textareaId} part="label">${this.label}</label>
+        ` : i}
+
+        <textarea
+          id=${this._textareaId}
+          part="textarea"
+          class=${c({ "error-textarea": e })}
+          .value=${this.value}
+          placeholder=${this.placeholder}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          ?required=${this.required}
+          aria-required=${this.required ? "true" : "false"}
+          rows=${this.rows}
+          maxlength=${l(this.maxlength)}
+          minlength=${l(this.minlength)}
+          name=${this.name}
+          autocomplete=${this.autocomplete || i}
+          aria-invalid=${e ? "true" : "false"}
+          aria-describedby=${t ? this._descId : i}
+          aria-label=${this.ariaLabel ?? i}
+          @input=${this._handleInput}
+          @change=${this._handleChange}
+        ></textarea>
+
+        ${e && this.errorMessage ? r`<p id=${this._descId} class="help-text error-text" part="error-text" role="alert">${this.errorMessage}</p>` : this.helpText ? r`<p id=${this._descId} class="help-text" part="help-text">${this.helpText}</p>` : i}
+      </div>
+    `;
+	}
+};
+e([s({ type: String })], f.prototype, "value", void 0), e([s({ type: String })], f.prototype, "placeholder", void 0), e([s({
+	type: Boolean,
+	reflect: !0
+})], f.prototype, "disabled", void 0), e([s({
+	type: Boolean,
+	reflect: !0
+})], f.prototype, "readonly", void 0), e([s({
+	type: Boolean,
+	reflect: !0
+})], f.prototype, "required", void 0), e([s({ type: Boolean })], f.prototype, "error", void 0), e([s({
+	type: String,
+	attribute: "error-message"
+})], f.prototype, "errorMessage", void 0), e([s({
+	type: String,
+	attribute: "help-text"
+})], f.prototype, "helpText", void 0), e([s({ type: String })], f.prototype, "label", void 0), e([s({
+	type: String,
+	reflect: !0
+})], f.prototype, "size", void 0), e([s({ type: Number })], f.prototype, "rows", void 0), e([s({ type: Number })], f.prototype, "maxlength", void 0), e([s({ type: Number })], f.prototype, "minlength", void 0), e([s({ type: String })], f.prototype, "name", void 0), e([s({ type: String })], f.prototype, "autocomplete", void 0), e([s({
+	type: String,
+	reflect: !0
+})], f.prototype, "resize", void 0), e([s({
+	type: String,
+	attribute: "default-value"
+})], f.prototype, "defaultValue", void 0), e([s({
+	type: String,
+	attribute: "aria-label"
+})], f.prototype, "ariaLabel", void 0), f = e([o("flint-textarea")], f);
+//#endregion
+export { f as t };