@getufy/flint-ui 0.2.1 → 0.3.0

package/README.md

@@ -11,6 +11,12 @@ A modern, lightweight web component library built with [Lit](https://lit.dev). 5
 npm install @getufy/flint-ui lit
 ```
 
+## Resources
+
+- **[Documentation](https://getufy.github.io/flint-ui/)** — full component docs, guides, and examples
+- **[Live Storybook](https://getufy.github.io/flint-ui/storybook/)** — interactive component playground
+- **[React wrappers](https://www.npmjs.com/package/@getufy/flint-ui-react)** — `@getufy/flint-ui-react` for React projects
+
 ## Usage
 
 ```html

package/dist/_shared/{flint-accordion-CnXIksxN.js → flint-accordion-C1ZeUTPt.js}

@@ -6,13 +6,16 @@ var o = ":host{border-top:1px solid var(--flint-border-color);background-color:v
 	static {
 		this.styles = r(o);
 	}
+	willUpdate(e) {
+		this._firstUpdate && (this._firstUpdate = !1, this.defaultExpanded && !this.expanded && (this.expanded = !0));
+	}
 	updated(e) {
 		(e.has("expanded") || e.has("disabled")) && this.querySelectorAll("flint-accordion-summary, flint-accordion-details, flint-accordion-actions").forEach((e) => {
 			this.expanded ? e.setAttribute("expanded", "") : e.removeAttribute("expanded"), this.disabled ? e.setAttribute("disabled", "") : e.removeAttribute("disabled");
 		});
 	}
 	constructor() {
-		super(), this.expanded = !1, this.disabled = !1, this._uid = `flint-accordion-${++u}`, this._handleToggle = () => {
+		super(), this.expanded = !1, this.defaultExpanded = !1, this.disabled = !1, this._uid = `flint-accordion-${++u}`, this._firstUpdate = !0, this._handleToggle = () => {
 			this.disabled || (this.expanded = !this.expanded, this.dispatchEvent(new CustomEvent("flint-accordion-change", {
 				detail: { expanded: this.expanded },
 				bubbles: !0,
@@ -35,6 +38,9 @@ e([a({
 	type: Boolean,
 	reflect: !0
 })], d.prototype, "expanded", void 0), e([a({
+	type: Boolean,
+	attribute: "default-expanded"
+})], d.prototype, "defaultExpanded", void 0), e([a({
 	type: Boolean,
 	reflect: !0
 })], d.prototype, "disabled", void 0), d = e([i("flint-accordion")], d);

package/dist/_shared/{flint-alert-DNcwWxQL.js → flint-alert-XVhCfLTJ.js}

@@ -17,7 +17,10 @@ var s = ":host{width:100%;font-family:var(--flint-font-family);margin-bottom:1re
 		this.dispatchEvent(new CustomEvent("flint-alert-close", {
 			bubbles: !0,
 			composed: !0,
-			detail: { severity: this.severity }
+			detail: {
+				open: !1,
+				severity: this.severity
+			}
 		})), this.style.opacity = "0", this.style.transform = "translateY(-4px)", this.style.transition = "opacity 0.2s ease, transform 0.2s ease", this._closeTimer = setTimeout(() => {
 			this.remove();
 		}, 200);

package/dist/_shared/{flint-backdrop-BszHm5cJ.js → flint-backdrop-B28XJbZN.js}

@@ -19,13 +19,15 @@ var c = ":host{--flint-backdrop-color:#00000080;--flint-backdrop-z-index:1200;di
 	_handleKeydown(e) {
 		e.key === "Escape" && this.open && this.dispatchEvent(new CustomEvent("flint-backdrop-close", {
 			bubbles: !0,
-			composed: !0
+			composed: !0,
+			detail: { open: !1 }
 		}));
 	}
 	_handleClick(e) {
 		e.target === e.currentTarget && this.dispatchEvent(new CustomEvent("flint-backdrop-close", {
 			bubbles: !0,
-			composed: !0
+			composed: !0,
+			detail: { open: !1 }
 		}));
 	}
 	render() {

package/dist/_shared/{flint-bottom-navigation-B4-3_1w7.js → flint-bottom-navigation-_0CMIMiw.js}

@@ -5,11 +5,14 @@ import { customElement as a, property as o, queryAssignedElements as s } from "l
 //#region src/bottom-navigation/flint-bottom-navigation.css?inline
 var c = ":host{background-color:var(--flint-surface-1);height:56px;box-shadow:var(--flint-shadow-lg);justify-content:center;width:100%;display:flex;position:relative}.container{flex:1;max-width:100%;display:flex}", l = class extends n {
 	constructor(...e) {
-		super(...e), this.showLabels = !1;
+		super(...e), this.showLabels = !1, this._firstUpdate = !0;
 	}
 	static {
 		this.styles = i(c);
 	}
+	willUpdate(e) {
+		this._firstUpdate && (this._firstUpdate = !1, this.defaultValue !== void 0 && (this.value = this.defaultValue));
+	}
 	updated(e) {
 		(e.has("value") || e.has("showLabels")) && this._updateActions();
 	}
@@ -38,7 +41,7 @@ var c = ":host{background-color:var(--flint-surface-1);height:56px;box-shadow:va
         `;
 	}
 };
-e([o()], l.prototype, "value", void 0), e([o({
+e([o()], l.prototype, "value", void 0), e([o({ attribute: "default-value" })], l.prototype, "defaultValue", void 0), e([o({
 	type: Boolean,
 	attribute: "show-labels"
 })], l.prototype, "showLabels", void 0), e([s({ selector: "flint-bottom-navigation-action" })], l.prototype, "_actions", void 0), l = e([a("flint-bottom-navigation")], l);

package/dist/_shared/{flint-chip-5QF8rU8e.js → flint-chip-CBKDllYk.js}

@@ -26,13 +26,15 @@ var c = ":host{vertical-align:middle;font-family:var(--flint-font-family);displa
 	_handleDelete(e) {
 		e.stopPropagation(), !this.disabled && this.dispatchEvent(new CustomEvent("flint-chip-delete", {
 			bubbles: !0,
-			composed: !0
+			composed: !0,
+			detail: { value: this.label }
 		}));
 	}
 	_handleDeleteKeyDown(e) {
 		e.key !== "Enter" && e.key !== " " || (e.preventDefault(), e.stopPropagation(), this.disabled || this.dispatchEvent(new CustomEvent("flint-chip-delete", {
 			bubbles: !0,
-			composed: !0
+			composed: !0,
+			detail: { value: this.label }
 		})));
 	}
 	render() {

package/dist/_shared/{flint-command-COftXb8j.js → flint-command-BuXwceg_.js}

@@ -282,7 +282,8 @@ var T = class extends t {
 	_close() {
 		this.dispatchEvent(new CustomEvent("flint-command-dialog-close", {
 			bubbles: !0,
-			composed: !0
+			composed: !0,
+			detail: { open: !1 }
 		}));
 	}
 	_handleBackdropClick(e) {

package/dist/_shared/{flint-date-field-CYSc9ezt.js → flint-date-field-lcBa5fNS.js}

@@ -38,7 +38,7 @@ var m = [
 	"year"
 ], h = class extends t {
 	constructor(...e) {
-		super(...e), this.value = "", this.label = "", this.name = "", this.min = "", this.max = "", this.disabled = !1, this.readonly = !1, this.error = !1, this.helperText = "", this._internals = this.attachInternals(), this._month = null, this._day = null, this._year = null, this._active = null, this._focused = !1, this._buf = "";
+		super(...e), this.value = "", this.label = "", this.name = "", this.min = "", this.max = "", this.disabled = !1, this.readonly = !1, this.error = !1, this.helperText = "", this.errorMessage = "", this._internals = this.attachInternals(), this._month = null, this._day = null, this._year = null, this._active = null, this._focused = !1, this._buf = "";
 	}
 	static {
 		this.formAssociated = !0;
@@ -264,7 +264,7 @@ var m = [
         </div>
       </div>
 
-      ${this.helperText ? n`<small class="helper">${this.helperText}</small>` : r}
+      ${this.error && this.errorMessage ? n`<small class="helper error-text" role="alert">${this.errorMessage}</small>` : this.helperText ? n`<small class="helper">${this.helperText}</small>` : r}
     `;
 	}
 };
@@ -283,6 +283,9 @@ e([o({ type: String })], h.prototype, "value", void 0), e([o({ type: String })],
 })], h.prototype, "error", void 0), e([o({
 	type: String,
 	attribute: "helper-text"
-})], h.prototype, "helperText", void 0), e([s()], h.prototype, "_month", void 0), e([s()], h.prototype, "_day", void 0), e([s()], h.prototype, "_year", void 0), e([s()], h.prototype, "_active", void 0), e([s()], h.prototype, "_focused", void 0), e([s()], h.prototype, "_buf", void 0), h = e([a("flint-date-field")], h);
+})], h.prototype, "helperText", void 0), e([o({
+	type: String,
+	attribute: "error-message"
+})], h.prototype, "errorMessage", void 0), e([s()], h.prototype, "_month", void 0), e([s()], h.prototype, "_day", void 0), e([s()], h.prototype, "_year", void 0), e([s()], h.prototype, "_active", void 0), e([s()], h.prototype, "_focused", void 0), e([s()], h.prototype, "_buf", void 0), h = e([a("flint-date-field")], h);
 //#endregion
 export { h as t };

package/dist/_shared/{flint-date-picker-CmCtDBVO.js → flint-date-picker-C_7LYa9d.js}

@@ -206,7 +206,7 @@ var b = class extends t {
 e([o({ type: String })], b.prototype, "value", void 0), e([o({ type: String })], b.prototype, "min", void 0), e([o({ type: String })], b.prototype, "max", void 0), e([o({ type: Boolean })], b.prototype, "disabled", void 0), e([s()], b.prototype, "_viewYear", void 0), e([s()], b.prototype, "_viewMonth", void 0), e([s()], b.prototype, "_mode", void 0), b = e([a("flint-date-picker-calendar")], b);
 var x = class extends t {
 	constructor(...e) {
-		super(...e), this.value = "", this.label = "Date", this.placeholder = "MM/DD/YYYY", this.name = "", this.variant = "desktop", this.min = "", this.max = "", this.disabled = !1, this.readonly = !1, this.error = !1, this.helperText = "", this._open = !1, this._pendingValue = "";
+		super(...e), this.value = "", this.label = "Date", this.placeholder = "MM/DD/YYYY", this.name = "", this.variant = "desktop", this.min = "", this.max = "", this.disabled = !1, this.readonly = !1, this.error = !1, this.helperText = "", this.errorMessage = "", this._open = !1, this._pendingValue = "";
 	}
 	static {
 		this.styles = i(d);
@@ -285,7 +285,7 @@ var x = class extends t {
           📅
         </button>
       </div>
-      ${this.helperText ? n`<p class="helper-text">${this.helperText}</p>` : r}
+      ${this.error && this.errorMessage ? n`<p class="helper-text error-text" role="alert">${this.errorMessage}</p>` : this.helperText ? n`<p class="helper-text">${this.helperText}</p>` : r}
     `;
 	}
 	_renderDesktop() {
@@ -365,6 +365,9 @@ e([o({ type: String })], x.prototype, "value", void 0), e([o({ type: String })],
 })], x.prototype, "error", void 0), e([o({
 	type: String,
 	attribute: "helper-text"
-})], x.prototype, "helperText", void 0), e([s()], x.prototype, "_open", void 0), e([s()], x.prototype, "_pendingValue", void 0), x = e([a("flint-date-picker")], x);
+})], x.prototype, "helperText", void 0), e([o({
+	type: String,
+	attribute: "error-message"
+})], x.prototype, "errorMessage", void 0), e([s()], x.prototype, "_open", void 0), e([s()], x.prototype, "_pendingValue", void 0), x = e([a("flint-date-picker")], x);
 //#endregion
 export { b as n, x as t };

package/dist/_shared/{flint-date-range-picker-DiVjn_ST.js → flint-date-range-picker-D7Ehbx-c.js}

@@ -5,7 +5,7 @@ import { customElement as c, property as l, state as u } from "lit/decorators.js
 //#region src/date-range-picker/flint-date-range-picker.css?inline
 var d = ":host{font-family:var(--flint-font-family);display:inline-block}.field-label{color:var(--flint-text-color-muted);margin-bottom:4px;font-size:.75rem;font-weight:500;display:block}.mobile-field{background:var(--flint-input-bg);border:1.5px solid var(--flint-border-color);border-radius:var(--flint-border-radius-md);color:var(--flint-text-color);cursor:pointer;box-sizing:border-box;align-items:center;gap:8px;min-width:260px;padding:10px 44px 10px 14px;font-size:.9375rem;transition:border-color .15s;display:inline-flex;position:relative}.mobile-field:hover{border-color:var(--flint-primary-color)}:host([disabled]) .mobile-field{background:var(--flint-input-disabled-bg);color:var(--flint-text-color-muted);cursor:not-allowed;border-color:var(--flint-border-color)}.mobile-field-placeholder{color:var(--flint-input-placeholder-color)}.mobile-field-icon{color:var(--flint-text-color-muted);font-size:1rem;position:absolute;right:12px}.popover-anchor{display:inline-block;position:relative}.popover{z-index:1400;background:var(--flint-surface-1);border-radius:var(--flint-border-radius-xl);box-shadow:var(--flint-shadow-lg);transform-origin:0 0;opacity:0;visibility:hidden;pointer-events:none;transition:transform .15s cubic-bezier(.4,0,.2,1),opacity .15s,visibility .15s;display:flex;position:absolute;top:calc(100% + 6px);left:0;transform:scale(.94)translateY(-4px)}.popover.open{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1)translateY(0)}.shortcuts-panel{border-right:1px solid var(--flint-border-color);background:var(--flint-surface-1);flex-direction:column;gap:2px;min-width:148px;padding:12px 8px;display:flex}.shortcut-btn{text-align:left;cursor:pointer;color:var(--flint-text-color);white-space:nowrap;background:0 0;border:none;border-radius:6px;padding:8px 12px;font-family:inherit;font-size:.8125rem;transition:background .12s,color .12s}.shortcut-btn:hover{background:var(--flint-primary-color-light);color:var(--flint-primary-color)}.shortcut-btn.active{background:var(--flint-primary-color);color:var(--flint-text-color-on-primary)}.popover-body{flex-direction:column;display:flex}.popover-actions{border-top:1px solid var(--flint-border-color);justify-content:flex-end;gap:8px;padding:4px 12px 12px;display:flex}.action-btn{cursor:pointer;border:none;border-radius:6px;padding:6px 14px;font-family:inherit;font-size:.875rem;font-weight:600;transition:background .12s}.action-btn.cancel{color:var(--flint-text-color-muted);background:0 0}.action-btn.cancel:hover{background:var(--flint-hover-color)}.action-btn.ok{background:var(--flint-primary-color);color:var(--flint-text-color-on-primary)}.action-btn.ok:hover{background:var(--flint-primary-color-hover)}.click-away{z-index:1399;display:none;position:fixed;inset:0}.click-away.open{display:block}.static-wrapper{border-radius:var(--flint-border-radius-xl);box-shadow:var(--flint-shadow-sm), 0 0 0 1px var(--flint-border-color);display:inline-block;overflow:hidden}.helper-text{color:var(--flint-text-color-muted);margin-top:4px;font-size:.75rem}:host([error]) .helper-text{color:var(--flint-error-color)}:host([error]) flint-single-input-date-range-field{--flint-border-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}}", f = class extends i {
 	constructor(...e) {
-		super(...e), this.value = [...t], this.label = "Date Range", this.variant = "desktop", this.multiInput = !1, this.shortcuts = !1, this.shortcutItems = [], this.min = "", this.max = "", this.name = "", this.disabled = !1, this.readonly = !1, this.error = !1, this.helperText = "", this._open = !1, this._pendingValue = [...t], this._activeShortcut = "";
+		super(...e), this.value = [...t], this.label = "Date Range", this.variant = "desktop", this.multiInput = !1, this.shortcuts = !1, this.shortcutItems = [], this.min = "", this.max = "", this.name = "", this.disabled = !1, this.readonly = !1, this.error = !1, this.helperText = "", this.errorMessage = "", this._open = !1, this._pendingValue = [...t], this._activeShortcut = "";
 	}
 	static {
 		this.styles = s(d);
@@ -99,7 +99,7 @@ var d = ":host{font-family:var(--flint-font-family);display:inline-block}.field-
         @flint-date-range-picker-change=${this._handleFieldRangeChange}
         @focus=${this._openPicker}
       ></flint-single-input-date-range-field>
-      ${this.helperText ? a`<p class="helper-text">${this.helperText}</p>` : o}
+      ${this.error && this.errorMessage ? a`<p class="helper-text error-text" role="alert">${this.errorMessage}</p>` : this.helperText ? a`<p class="helper-text">${this.helperText}</p>` : o}
     `;
 	}
 	_renderMobileField() {
@@ -118,7 +118,7 @@ var d = ":host{font-family:var(--flint-font-family);display:inline-block}.field-
         ${e ? a`<span>${e}</span>` : a`<span class="mobile-field-placeholder">Start date – End date</span>`}
         <span class="mobile-field-icon">📅</span>
       </div>
-      ${this.helperText ? a`<p class="helper-text">${this.helperText}</p>` : o}
+      ${this.error && this.errorMessage ? a`<p class="helper-text error-text" role="alert">${this.errorMessage}</p>` : this.helperText ? a`<p class="helper-text">${this.helperText}</p>` : o}
     `;
 	}
 	_renderDesktop() {
@@ -196,6 +196,9 @@ e([l({ type: Array })], f.prototype, "value", void 0), e([l({ type: String })],
 })], f.prototype, "error", void 0), e([l({
 	type: String,
 	attribute: "helper-text"
-})], f.prototype, "helperText", void 0), e([u()], f.prototype, "_open", void 0), e([u()], f.prototype, "_pendingValue", void 0), e([u()], f.prototype, "_activeShortcut", void 0), f = e([c("flint-date-range-picker")], f);
+})], f.prototype, "helperText", void 0), e([l({
+	type: String,
+	attribute: "error-message"
+})], f.prototype, "errorMessage", void 0), e([u()], f.prototype, "_open", void 0), e([u()], f.prototype, "_pendingValue", void 0), e([u()], f.prototype, "_activeShortcut", void 0), f = e([c("flint-date-range-picker")], f);
 //#endregion
 export { f as t };

package/dist/_shared/{flint-dialog-CH1ylFUb.js → flint-dialog-kIyxDuO7.js}

@@ -5,13 +5,16 @@ import { classMap as o } from "lit/directives/class-map.js";
 //#region src/dialog/flint-dialog.css?inline
 var s = ":host{display:block}.dialog-panel{background-color:var(--flint-surface-background,white);border-radius:var(--flint-border-radius-xl,12px);box-shadow:var(--flint-shadow-xl,0 20px 25px -5px #0000001a);max-width:90vw;max-height:var(--flint-dialog-max-height,90vh);width:var(--flint-dialog-width,444px);opacity:0;pointer-events:none;flex-direction:column;transition:opacity .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden;transform:scale(.9)}.dialog-panel.open{opacity:1;pointer-events:auto;transform:scale(1)}.dialog-panel.transition-slide-up{transform:translateY(40px)}.dialog-panel.transition-slide-up.open{transform:translateY(0)}.dialog-panel.transition-slide-down{transform:translateY(-40px)}.dialog-panel.transition-slide-down.open{transform:translateY(0)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", c = ":host{font-family:var(--flint-font-family);color:var(--flint-text-color);padding:20px 24px 12px;font-size:1.25rem;font-weight:600;display:block}", l = ":host{-webkit-overflow-scrolling:touch;flex:auto;padding:0 24px 20px;display:block;overflow-y:auto}", u = ":host{font-family:var(--flint-font-family);color:var(--flint-text-color-muted);margin-bottom:8px;font-size:.9375rem;line-height:1.6;display:block}", d = ":host{border-top:1px solid var(--flint-border-color);justify-content:flex-end;align-items:center;gap:8px;padding:8px 16px 16px;display:flex}:host([align=start]){justify-content:flex-start}:host([align=center]){justify-content:center}:host([align=space-between]){justify-content:space-between}", f = [], p = class extends t {
 	constructor(...e) {
-		super(...e), this.open = !1, this._lastFocused = null, this.transition = "scale", this.disableBackdropClose = !1, this._handleKeyDown = (e) => {
+		super(...e), this.open = !1, this.defaultOpen = !1, this._firstUpdate = !0, this._lastFocused = null, this.transition = "scale", this.disableBackdropClose = !1, this._handleKeyDown = (e) => {
 			e.key === "Escape" && this.open && f[f.length - 1] === this && this.requestClose();
 		};
 	}
 	static {
 		this.styles = r(s);
 	}
+	willUpdate(e) {
+		this._firstUpdate && (this._firstUpdate = !1, this.defaultOpen && !this.open && (this.open = !0));
+	}
 	connectedCallback() {
 		super.connectedCallback(), window.addEventListener("keydown", this._handleKeyDown);
 	}
@@ -32,7 +35,8 @@ var s = ":host{display:block}.dialog-panel{background-color:var(--flint-surface-
 	requestClose() {
 		this.dispatchEvent(new CustomEvent("close", {
 			bubbles: !0,
-			composed: !0
+			composed: !0,
+			detail: { open: !1 }
 		}));
 	}
 	_handleBackdropClose(e) {
@@ -63,7 +67,10 @@ var s = ":host{display:block}.dialog-panel{background-color:var(--flint-surface-
 e([a({
 	type: Boolean,
 	reflect: !0
-})], p.prototype, "open", void 0), e([a({ type: String })], p.prototype, "transition", void 0), e([a({
+})], p.prototype, "open", void 0), e([a({
+	type: Boolean,
+	attribute: "default-open"
+})], p.prototype, "defaultOpen", void 0), e([a({ type: String })], p.prototype, "transition", void 0), e([a({
 	type: Boolean,
 	attribute: "disable-backdrop-close"
 })], p.prototype, "disableBackdropClose", void 0), p = e([i("flint-dialog")], p);

package/dist/_shared/{flint-drawer-BAukflTn.js → flint-drawer-jR9Z3p_w.js}

@@ -4,13 +4,16 @@ import { customElement as i, property as a } from "lit/decorators.js";
 //#region src/drawer/flint-drawer.css?inline
 var o = ":host,:host([variant=temporary]){z-index:var(--flint-drawer-z-index,1200);pointer-events:none;display:block;position:fixed;inset:0;overflow:hidden}:host([container]),:host([container][variant=temporary]){position:absolute}:host([variant=persistent]){display:contents}:host([variant=mini]){pointer-events:auto;z-index:auto;display:flex;position:static;inset:auto;overflow:visible}.backdrop{background:var(--flint-backdrop-color);opacity:0;pointer-events:none;transition:opacity .25s;position:absolute;inset:0}.backdrop.open{opacity:1;pointer-events:auto}.paper{background:var(--flint-drawer-bg,var(--flint-surface-1));pointer-events:auto;outline:none;flex-direction:column;display:flex;position:absolute;overflow-y:auto}:host(:not([variant])) .paper,:host([variant=temporary]) .paper{width:var(--flint-drawer-width,250px);box-shadow:var(--flint-drawer-shadow);transition:transform var(--flint-drawer-transition,.225s cubic-bezier(0, 0, .2, 1));top:0;bottom:0;left:0;transform:translate(-100%)}:host(:not([variant])[open]) .paper,:host([variant=temporary][open]) .paper{transform:translate(0)}:host([variant=temporary][anchor=right]) .paper{left:auto;right:0;transform:translate(100%)}:host([variant=temporary][anchor=right][open]) .paper{transform:translate(0)}:host([variant=temporary][anchor=top]) .paper{width:auto;height:var(--flint-drawer-height,auto);inset:0 0 auto;transform:translateY(-100%)}:host([variant=temporary][anchor=top][open]) .paper{transform:translateY(0)}:host([variant=temporary][anchor=bottom]) .paper{width:auto;height:var(--flint-drawer-height,auto);inset:auto 0 0;transform:translateY(100%)}:host([variant=temporary][anchor=bottom][open]) .paper{transform:translateY(0)}:host([variant=persistent]) .paper{box-shadow:none;border-right:1px solid var(--flint-border-color);pointer-events:auto;transition:none;position:relative;transform:none}:host([variant=persistent][anchor=right]) .paper{border-right:none;border-left:1px solid var(--flint-border-color)}:host([variant=persistent]) .paper:not(.open){display:none}:host([variant=mini]) .paper{box-shadow:none;border-right:1px solid var(--flint-border-color);width:var(--flint-drawer-mini-width,72px);white-space:nowrap;transition:width var(--flint-drawer-transition,.225s cubic-bezier(0, 0, .2, 1));pointer-events:auto;flex-shrink:0;position:relative;overflow-x:hidden;transform:none}:host([variant=mini][anchor=right]) .paper{border-right:none;border-left:1px solid var(--flint-border-color)}:host([variant=mini][open]) .paper{width:var(--flint-drawer-width,250px)}:host([variant=mini]:not([open])) ::slotted([data-drawer-hide-mini]){opacity:0;pointer-events:none}::slotted([data-drawer-hide-mini]){transition:opacity .18s}.edge{background:var(--flint-drawer-bg,var(--flint-surface-1));border:1px solid var(--flint-border-color);cursor:pointer;pointer-events:auto;justify-content:center;align-items:center;display:none;position:absolute;box-shadow:0 1px 3px #0000001f}:host([edge]:not([variant])) .edge,:host([edge][variant=temporary]) .edge{display:flex}.edge-left{width:var(--flint-drawer-edge-width,16px);border-radius:0 8px 8px 0;top:0;bottom:0;left:0}.edge-right{width:var(--flint-drawer-edge-width,16px);border-radius:8px 0 0 8px;top:0;bottom:0;right:0}.edge-top{height:var(--flint-drawer-edge-width,16px);border-radius:0 0 8px 8px;top:0;left:0;right:0}.edge-bottom{height:var(--flint-drawer-edge-width,16px);border-radius:8px 8px 0 0;bottom:0;left:0;right:0}.edge-handle{background:var(--flint-border-color);border-radius:2px;width:4px;height:32px}.edge-top .edge-handle,.edge-bottom .edge-handle{width:32px;height:4px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", s = class extends t {
 	constructor(...e) {
-		super(...e), this.open = !1, this.anchor = "left", this.variant = "temporary", this.edge = !1, this.container = !1, this.label = "Drawer", this._lastFocused = null, this._boundKeyDown = (e) => {
+		super(...e), this.open = !1, this.defaultOpen = !1, this.anchor = "left", this.variant = "temporary", this.edge = !1, this.container = !1, this.label = "Drawer", this._firstUpdate = !0, this._lastFocused = null, this._boundKeyDown = (e) => {
 			e.defaultPrevented || this.open && e.key === "Escape" && this.variant === "temporary" && (e.preventDefault(), this._close());
 		};
 	}
 	static {
 		this.styles = r(o);
 	}
+	willUpdate(e) {
+		this._firstUpdate && (this._firstUpdate = !1, this.defaultOpen && !this.open && (this.open = !0));
+	}
 	connectedCallback() {
 		super.connectedCallback(), window.addEventListener("keydown", this._boundKeyDown);
 	}
@@ -23,7 +26,8 @@ var o = ":host,:host([variant=temporary]){z-index:var(--flint-drawer-z-index,120
 	_close() {
 		this.dispatchEvent(new CustomEvent("flint-drawer-close", {
 			bubbles: !0,
-			composed: !0
+			composed: !0,
+			detail: { open: !1 }
 		}));
 	}
 	render() {
@@ -63,6 +67,9 @@ e([a({
 	type: Boolean,
 	reflect: !0
 })], s.prototype, "open", void 0), e([a({
+	type: Boolean,
+	attribute: "default-open"
+})], s.prototype, "defaultOpen", void 0), e([a({
 	type: String,
 	reflect: !0
 })], s.prototype, "anchor", void 0), e([a({

package/dist/_shared/{flint-hover-card-fSMVR0xj.js → flint-hover-card-BTdefGOR.js}

@@ -99,7 +99,8 @@ var d = class extends t {
 	_setOpen(e) {
 		this._isOpen !== e && (this._isOpen = e, this._syncChildren(), this.dispatchEvent(new CustomEvent(e ? "flint-hover-card-open" : "flint-hover-card-close", {
 			bubbles: !0,
-			composed: !0
+			composed: !0,
+			detail: { open: e }
 		})));
 	}
 	_syncChildren() {

package/dist/_shared/{flint-input-BV4Glu8N.js → flint-input-CuVd-L9A.js}

@@ -6,7 +6,7 @@ import { classMap as s } from "lit/directives/class-map.js";
 //#region src/input/flint-input.css?inline
 var c = ":host{font-family:var(--flint-font-family);display:block}.input-wrapper{flex-direction:column;gap:6px;display:flex}label{color:var(--flint-label-color);font-size:14px;font-weight:500}input{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);outline:none;padding:10px 14px;font-family:inherit;font-size:14px;transition:border-color .2s,box-shadow .2s}:host([size=sm]) input{padding:6px 10px;font-size:13px}:host([size=lg]) input{padding:12px 16px;font-size:16px}input::placeholder{color:var(--flint-input-placeholder-color)}input:hover:not(:disabled):not(.error-input){border-color:var(--flint-input-border-hover-color)}input:focus-visible{border-color:var(--flint-primary-color);box-shadow:0 0 0 3px var(--flint-primary-focus-ring)}input[aria-invalid=true]{border-color:var(--flint-error-color)}input[aria-invalid=true]:focus-visible{box-shadow:0 0 0 3px var(--flint-error-focus-ring)}input:disabled{background-color:var(--flint-input-disabled-bg);color:var(--flint-input-disabled-color);cursor:not-allowed;opacity:1}input[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}}", l = 0, u = class extends t(n) {
 	constructor(...e) {
-		super(...e), this._inputId = `flint-input-${++l}`, this.label = "", this.value = "", this.type = "text", this.placeholder = "", this.helpText = "", this.error = !1, this.errorMessage = "", this.disabled = !1, this.required = !1, this.readonly = !1, this.name = "", this.autocomplete = "", this.size = "default";
+		super(...e), this._inputId = `flint-input-${++l}`, this.label = "", this.value = "", this.type = "text", this.placeholder = "", this.helperText = "", this.error = !1, this.errorMessage = "", this.disabled = !1, this.required = !1, this.readonly = !1, this.name = "", this.autocomplete = "", this.size = "default";
 	}
 	static {
 		this.styles = i(c);
@@ -14,14 +14,17 @@ var c = ":host{font-family:var(--flint-font-family);display:block}.input-wrapper
 	get inputElement() {
 		return this.shadowRoot.querySelector("input");
 	}
+	willUpdate(e) {
+		super.willUpdate(e), this._firstUpdate && (this._firstUpdate = !1, this.defaultValue && !this.value && (this.value = this.defaultValue));
+	}
 	formResetCallback() {
-		this.value = "", this._updateFormValue();
+		this.value = this.defaultValue ?? "", this._updateFormValue();
 	}
 	_updateFormValue() {
 		this._initFormValue(this.value || null), this._initFormValidity(this.required, !this.value, "Please fill out this field.");
 	}
 	render() {
-		let e = this.error || !!this.errorMessage, t = e && this.errorMessage || this.helpText ? `${this._inputId}-desc` : void 0;
+		let e = this.error || !!this.errorMessage, t = e && this.errorMessage || this.helperText ? `${this._inputId}-desc` : void 0;
 		return r`
       <div class="input-wrapper" part="wrapper">
         ${this.label ? r`<label for=${this._inputId} part="label">${this.label}</label>` : ""}
@@ -45,7 +48,7 @@ var c = ":host{font-family:var(--flint-font-family);display:block}.input-wrapper
           @change=${this._handleChange}
         />
 
-        ${e && this.errorMessage ? r`<p id=${t} class="help-text error-text" part="error-text" role="alert">${this.errorMessage}</p>` : this.helpText ? r`<p id=${t} class="help-text" part="help-text">${this.helpText}</p>` : ""}
+        ${e && this.errorMessage ? r`<p id=${t} class="help-text error-text" part="error-text" role="alert">${this.errorMessage}</p>` : this.helperText ? r`<p id=${t} class="help-text" part="help-text">${this.helperText}</p>` : ""}
       </div>
     `;
 	}
@@ -66,8 +69,8 @@ var c = ":host{font-family:var(--flint-font-family);display:block}.input-wrapper
 };
 e([o({ type: String })], u.prototype, "label", void 0), e([o({ type: String })], u.prototype, "value", void 0), e([o({ type: String })], u.prototype, "type", void 0), e([o({ type: String })], u.prototype, "placeholder", void 0), e([o({
 	type: String,
-	attribute: "help-text"
-})], u.prototype, "helpText", void 0), e([o({ type: Boolean })], u.prototype, "error", void 0), e([o({
+	attribute: "helper-text"
+})], u.prototype, "helperText", void 0), e([o({ type: Boolean })], u.prototype, "error", void 0), e([o({
 	type: String,
 	attribute: "error-message"
 })], u.prototype, "errorMessage", void 0), e([o({
@@ -82,6 +85,9 @@ e([o({ type: String })], u.prototype, "label", void 0), e([o({ type: String })],
 })], u.prototype, "readonly", void 0), e([o({ type: String })], u.prototype, "name", void 0), e([o({ type: String })], u.prototype, "autocomplete", void 0), e([o({
 	type: String,
 	reflect: !0
-})], u.prototype, "size", void 0), u = e([a("flint-input")], u);
+})], u.prototype, "size", void 0), e([o({
+	type: String,
+	attribute: "default-value"
+})], u.prototype, "defaultValue", void 0), u = e([a("flint-input")], u);
 //#endregion
 export { u as t };

package/dist/_shared/{flint-menu-EOF1QvHq.js → flint-menu-rsxjVen9.js}

@@ -162,7 +162,8 @@ var _ = class extends t {
 	_close() {
 		this.dispatchEvent(new CustomEvent("flint-menu-close", {
 			bubbles: !0,
-			composed: !0
+			composed: !0,
+			detail: { open: !1 }
 		}));
 	}
 	_handleItemSelect() {

package/dist/_shared/{flint-menubar-7AuGQli6.js → flint-menubar-C1Q_-F8q.js}

@@ -416,7 +416,8 @@ var M = class extends t {
 	_requestClose() {
 		this.dispatchEvent(new CustomEvent("flint-menubar-request-close", {
 			bubbles: !0,
-			composed: !0
+			composed: !0,
+			detail: { open: !1 }
 		}));
 	}
 	resetHighlight() {

package/dist/_shared/{flint-single-input-date-range-field-BVGf6515.js → flint-single-input-date-range-field-CnKdZow6.js}

@@ -20,7 +20,7 @@ function m(e, t) {
 }
 var h = class extends r {
 	constructor(...e) {
-		super(...e), this.value = [...t], this.label = "", this.name = "", this.min = "", this.max = "", this.disabled = !1, this.readonly = !1, this.error = !1, this.helperText = "", this._sm = null, this._sd = null, this._sy = null, this._em = null, this._ed = null, this._ey = null, this._active = null, this._focused = !1, this._buf = "";
+		super(...e), this.value = [...t], this.label = "", this.name = "", this.min = "", this.max = "", this.disabled = !1, this.readonly = !1, this.error = !1, this.helperText = "", this.errorMessage = "", this._sm = null, this._sd = null, this._sy = null, this._em = null, this._ed = null, this._ey = null, this._active = null, this._focused = !1, this._buf = "";
 	}
 	static {
 		this.styles = o(d);
@@ -288,7 +288,7 @@ var h = class extends r {
         </div>
       </div>
 
-      ${this.helperText ? i`<small class="helper">${this.helperText}</small>` : a}
+      ${this.error && this.errorMessage ? i`<small class="helper error-text" role="alert">${this.errorMessage}</small>` : this.helperText ? i`<small class="helper">${this.helperText}</small>` : a}
 
       ${this.name ? i`
         <input type="hidden" name="${this.name}-start" .value=${this.value[0]}>
@@ -309,6 +309,9 @@ e([c({ type: Array })], h.prototype, "value", void 0), e([c({ type: String })],
 })], h.prototype, "error", void 0), e([c({
 	type: String,
 	attribute: "helper-text"
-})], h.prototype, "helperText", void 0), e([l()], h.prototype, "_sm", void 0), e([l()], h.prototype, "_sd", void 0), e([l()], h.prototype, "_sy", void 0), e([l()], h.prototype, "_em", void 0), e([l()], h.prototype, "_ed", void 0), e([l()], h.prototype, "_ey", void 0), e([l()], h.prototype, "_active", void 0), e([l()], h.prototype, "_focused", void 0), e([l()], h.prototype, "_buf", void 0), h = e([s("flint-single-input-date-range-field")], h);
+})], h.prototype, "helperText", void 0), e([c({
+	type: String,
+	attribute: "error-message"
+})], h.prototype, "errorMessage", void 0), e([l()], h.prototype, "_sm", void 0), e([l()], h.prototype, "_sd", void 0), e([l()], h.prototype, "_sy", void 0), e([l()], h.prototype, "_em", void 0), e([l()], h.prototype, "_ed", void 0), e([l()], h.prototype, "_ey", void 0), e([l()], h.prototype, "_active", void 0), e([l()], h.prototype, "_focused", void 0), e([l()], h.prototype, "_buf", void 0), h = e([s("flint-single-input-date-range-field")], h);
 //#endregion
 export { h as t };

package/dist/_shared/{flint-snackbar-DS5F7oXF.js → flint-snackbar-D8-hpqLp.js}

@@ -5,18 +5,23 @@ import { classMap as s } from "lit/directives/class-map.js";
 //#region src/snackbar/flint-snackbar.css?inline
 var c = ":host{pointer-events:none;z-index:var(--flint-snackbar-z-index,1400);justify-content:center;align-items:center;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:fixed}:host([anchor-origin*=bottom]){bottom:var(--flint-snackbar-offset,24px)}:host([anchor-origin*=top]){top:var(--flint-snackbar-offset,24px)}:host([anchor-origin*=left]){left:var(--flint-snackbar-offset,24px)}:host([anchor-origin*=right]){right:var(--flint-snackbar-offset,24px)}:host([anchor-origin*=center]){left:50%;transform:translate(-50%)}.snackbar{background-color:var(--flint-snackbar-bg,#313131);color:var(--flint-snackbar-color,#fff);font-family:var(--flint-font-family);letter-spacing:.01071em;border-radius:var(--flint-border-radius-md);box-shadow:var(--flint-shadow-lg);min-width:var(--flint-snackbar-min-width,288px);max-width:var(--flint-snackbar-max-width,560px);pointer-events:auto;opacity:0;visibility:hidden;align-items:center;padding:6px 16px;font-size:.875rem;line-height:1.43;transition:opacity .225s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.4,0,.2,1);display:flex;transform:scale(.85)}.snackbar.open{opacity:1;visibility:visible;transform:scale(1)}:host([variant=info]) .snackbar{background-color:var(--flint-snackbar-bg-info,#0288d1)}:host([variant=success]) .snackbar{background-color:var(--flint-snackbar-bg-success,#2e7d32)}:host([variant=warning]) .snackbar{background-color:var(--flint-snackbar-bg-warning,#ed6c02)}:host([variant=error]) .snackbar{background-color:var(--flint-snackbar-bg-error,#d32f2f)}.message{flex-grow:1;padding:8px 0}.action{align-items:center;margin-left:8px;margin-right:-8px;padding-left:16px;display:flex}.action.hidden{display:none}.close-btn{color:inherit;cursor:pointer;opacity:.8;background:0 0;border:none;border-radius:2px;align-items:center;margin-left:8px;margin-right:-8px;padding:4px 8px;line-height:0;display:flex}.close-btn:hover{opacity:1}::slotted(flint-alert){width:100%;min-width:288px;margin-bottom:0!important}@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.open = !1, this.message = "", this.autoHideDuration = 5e3, this.anchorOrigin = "bottom-center", this.pauseOnHover = !0, this.closable = !1, this.variant = "default", this._hasAction = !1, this._timer = null, this._remainingTime = 0, this._timerStartedAt = 0;
+		super(...e), this.open = !1, this.defaultOpen = !1, this.message = "", this.autoHideDuration = 5e3, this.anchorOrigin = "bottom-center", this.pauseOnHover = !0, this.closable = !1, this.variant = "default", this._firstUpdate = !0, this._hasAction = !1, this._timer = null, this._remainingTime = 0, this._timerStartedAt = 0;
 	}
 	static {
 		this.styles = r(c);
 	}
+	willUpdate(e) {
+		this._firstUpdate && (this._firstUpdate = !1, this.defaultOpen && !this.open && (this.open = !0));
+	}
 	updated(e) {
 		e.has("open") && (this.open ? (this._remainingTime = this.autoHideDuration, this._startTimer(this._remainingTime), this.dispatchEvent(new CustomEvent("flint-snackbar-open", {
 			bubbles: !0,
-			composed: !0
+			composed: !0,
+			detail: { open: !0 }
 		}))) : (this._clearTimer(), this.dispatchEvent(new CustomEvent("flint-snackbar-close", {
 			bubbles: !0,
-			composed: !0
+			composed: !0,
+			detail: { open: !1 }
 		}))));
 	}
 	disconnectedCallback() {
@@ -81,7 +86,10 @@ var c = ":host{pointer-events:none;z-index:var(--flint-snackbar-z-index,1400);ju
 e([a({
 	type: Boolean,
 	reflect: !0
-})], l.prototype, "open", void 0), e([a({ type: String })], l.prototype, "message", void 0), e([a({
+})], l.prototype, "open", void 0), e([a({
+	type: Boolean,
+	attribute: "default-open"
+})], l.prototype, "defaultOpen", void 0), e([a({ type: String })], l.prototype, "message", void 0), e([a({
 	type: Number,
 	attribute: "auto-hide-duration"
 })], l.prototype, "autoHideDuration", void 0), e([a({

package/dist/_shared/{flint-speed-dial-DTZ2WaBh.js → flint-speed-dial-DYU66D0P.js}

@@ -140,7 +140,8 @@ var f = class extends t {
 	_setOpen(e) {
 		this.open = e, this._updateActionTooltips(), this.dispatchEvent(new CustomEvent(e ? "flint-speed-dial-open" : "flint-speed-dial-close", {
 			bubbles: !0,
-			composed: !0
+			composed: !0,
+			detail: { open: e }
 		}));
 	}
 	_toggle() {

package/dist/_shared/{flint-stepper-DdkEEVXE.js → flint-stepper-Dh0ZOPQc.js}

@@ -74,7 +74,7 @@ var y = class extends t {
 	}
 	_fire() {
 		this.disabled || this.dispatchEvent(new CustomEvent("flint-step-click", {
-			detail: { index: this.stepIndex },
+			detail: { step: this.stepIndex },
 			bubbles: !0,
 			composed: !0
 		}));
@@ -162,9 +162,9 @@ e([o({
 })], y.prototype, "prevCompleted", void 0), y = e([a("flint-step")], y);
 var b = class extends t {
 	constructor(...e) {
-		super(...e), this.activeStep = 0, this.orientation = "horizontal", this.alternativeLabel = !1, this.nonLinear = !1, this.label = "steps", this._onStepClick = (e) => {
-			this.activeStep = e.detail.index, this.dispatchEvent(new CustomEvent("flint-step-change", {
-				detail: { step: e.detail.index },
+		super(...e), this.activeStep = 0, this.orientation = "horizontal", this.alternativeLabel = !1, this.nonLinear = !1, this.label = "steps", this._firstUpdate = !0, this._onStepClick = (e) => {
+			this.activeStep = e.detail.step, this.dispatchEvent(new CustomEvent("flint-step-change", {
+				detail: { step: e.detail.step },
 				bubbles: !0,
 				composed: !0
 			})), this._syncSteps();
@@ -173,6 +173,9 @@ var b = class extends t {
 	static {
 		this.styles = i(f);
 	}
+	willUpdate(e) {
+		this._firstUpdate && (this._firstUpdate = !1, this.defaultActiveStep !== void 0 && (this.activeStep = this.defaultActiveStep));
+	}
 	_syncSteps() {
 		let e = Array.from(this.querySelectorAll(":scope > flint-step"));
 		e.forEach((t, n) => {
@@ -204,6 +207,9 @@ e([o({
 	type: Number,
 	attribute: "active-step"
 })], b.prototype, "activeStep", void 0), e([o({
+	type: Number,
+	attribute: "default-active-step"
+})], b.prototype, "defaultActiveStep", void 0), e([o({
 	type: String,
 	reflect: !0
 })], b.prototype, "orientation", void 0), e([o({

package/dist/_shared/{flint-text-field-DlLvuIJW.js → flint-text-field--jqYDj7o.js}

@@ -5,11 +5,14 @@ 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;
+		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.defaultValue = "", this._focused = !1, this._firstUpdate = !0;
 	}
 	static {
 		this.styles = r(c);
 	}
+	willUpdate(e) {
+		super.willUpdate(e), this._firstUpdate && (this._firstUpdate = !1, this.defaultValue && !this.value && (this.value = this.defaultValue));
+	}
 	_handleInput(e) {
 		this.value = e.target.value, this.dispatchEvent(new CustomEvent("input", {
 			detail: { value: this.value },
@@ -71,6 +74,9 @@ var c = ":host{font-family:var(--flint-font-family);margin-bottom:1rem;display:b
     `;
 	}
 };
-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);
+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([a({
+	type: String,
+	attribute: "default-value"
+})], l.prototype, "defaultValue", 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 → flint-textarea-D15Eq154.js}

@@ -10,7 +10,7 @@ var u = ":host{font-family:var(--flint-font-family);display:block}.textarea-wrap
 		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}`;
+		super(), this.value = "", this.placeholder = "", this.disabled = !1, this.readonly = !1, this.required = !1, this.error = !1, this.errorMessage = "", this.helperText = "", 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;
@@ -40,7 +40,7 @@ var u = ":host{font-family:var(--flint-font-family);display:block}.textarea-wrap
 		}));
 	}
 	render() {
-		let e = this.error || !!this.errorMessage, t = e && !!this.errorMessage || !!this.helpText;
+		let e = this.error || !!this.errorMessage, t = e && !!this.errorMessage || !!this.helperText;
 		return r`
       <div class="textarea-wrapper" part="wrapper">
         ${this.label ? r`
@@ -69,7 +69,7 @@ var u = ":host{font-family:var(--flint-font-family);display:block}.textarea-wrap
           @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}
+        ${e && this.errorMessage ? r`<p id=${this._descId} class="help-text error-text" part="error-text" role="alert">${this.errorMessage}</p>` : this.helperText ? r`<p id=${this._descId} class="help-text" part="help-text">${this.helperText}</p>` : i}
       </div>
     `;
 	}
@@ -88,8 +88,8 @@ e([s({ type: String })], f.prototype, "value", 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({
+	attribute: "helper-text"
+})], f.prototype, "helperText", 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({