@getufy/flint-ui 0.2.2 → 0.4.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-card-C-j6SYxM.js → flint-card-CQCJ9CY-.js}

@@ -3,7 +3,7 @@ import { LitElement as t, html as n, unsafeCSS as r } from "lit";
 import { customElement as i, property as a } from "lit/decorators.js";
 import { classMap as o } from "lit/directives/class-map.js";
 //#region src/card/flint-card.css?inline
-var s = ":host{font-family:Inter,sans-serif;display:block}.card{background:var(--flint-card-background);border-radius:var(--flint-card-border-radius);box-shadow:var(--flint-card-shadow);border:1px solid var(--flint-card-border-color);padding:var(--flint-card-padding,0);flex-direction:column;transition:box-shadow .3s,border-color .3s;display:flex;overflow:hidden}.card.interactive:hover{box-shadow:var(--flint-card-shadow-hover);cursor:pointer}.card.variant-outlined{box-shadow:none;border:1px solid var(--flint-card-border-color)}.card.variant-flat{box-shadow:none;background:var(--flint-card-background-flat);border:none}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", c = class extends t {
+var s = ":host{font-family:Inter,sans-serif;display:block}.card{background:var(--flint-card-background);border-radius:var(--flint-card-border-radius);box-shadow:var(--flint-card-shadow);border:1px solid var(--flint-card-border-color);padding:var(--flint-card-padding,0);flex-direction:column;transition:box-shadow .3s,border-color .3s;display:flex;overflow:clip}.card.interactive:hover{box-shadow:var(--flint-card-shadow-hover);cursor:pointer}.card.variant-outlined{box-shadow:none;border:1px solid var(--flint-card-border-color)}.card.variant-flat{box-shadow:none;background:var(--flint-card-background-flat);border:none}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", c = class extends t {
 	constructor(...e) {
 		super(...e), this.variant = "elevated", this.interactive = !1;
 	}

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

@@ -12,13 +12,13 @@ var c = ":host{vertical-align:middle;font-family:var(--flint-font-family);displa
 		this.styles = r(c);
 	}
 	_handleClick(e) {
-		e.stopPropagation(), !(this.disabled || !this.clickable) && this.dispatchEvent(new CustomEvent("click", {
+		e.stopPropagation(), !(this.disabled || !this.clickable) && this.dispatchEvent(new CustomEvent("flint-chip-click", {
 			bubbles: !0,
 			composed: !0
 		}));
 	}
 	_handleKeyDown(e) {
-		e.key !== "Enter" && e.key !== " " || (e.preventDefault(), !this.disabled && this.clickable && this.dispatchEvent(new CustomEvent("click", {
+		e.key !== "Enter" && e.key !== " " || (e.preventDefault(), !this.disabled && this.clickable && this.dispatchEvent(new CustomEvent("flint-chip-click", {
 			bubbles: !0,
 			composed: !0
 		})));
@@ -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-BmCBZr-w.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);
@@ -233,7 +233,7 @@ var x = class extends t {
 			this._closePicker();
 			return;
 		}
-		this.value = e, this.dispatchEvent(new CustomEvent("change", {
+		this.value = e, this.dispatchEvent(new CustomEvent("flint-date-picker-change", {
 			detail: { value: e },
 			bubbles: !0,
 			composed: !0
@@ -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() {
@@ -314,7 +314,7 @@ var x = class extends t {
         <flint-dialog
           .open=${this._open}
           disable-backdrop-close
-          @close=${this._closePicker}
+          @flint-dialog-close=${this._closePicker}
           style="--flint-dialog-width:320px"
         >
           <flint-dialog-title>Select Date</flint-dialog-title>
@@ -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-BmADbduG.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() {
@@ -146,7 +146,7 @@ var d = ":host{font-family:var(--flint-font-family);display:inline-block}.field-
         <flint-dialog
           .open=${this._open}
           disable-backdrop-close
-          @close=${this._closePicker}
+          @flint-dialog-close=${this._closePicker}
           style="--flint-dialog-width:640px"
         >
           <flint-dialog-title>Select Date Range</flint-dialog-title>
@@ -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-CK6ltziy.js}

@@ -3,15 +3,18 @@ import { LitElement as t, html as n, unsafeCSS as r } from "lit";
 import { customElement as i, property as a } from "lit/decorators.js";
 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 {
+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:clip;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);
 	}
@@ -30,9 +33,10 @@ var s = ":host{display:block}.dialog-panel{background-color:var(--flint-surface-
 		e !== -1 && f.splice(e, 1), this._lastFocused = null;
 	}
 	requestClose() {
-		this.dispatchEvent(new CustomEvent("close", {
+		this.dispatchEvent(new CustomEvent("flint-dialog-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-input-otp-__geY8N4.js → flint-input-otp-C2GUUYS9.js}

@@ -42,24 +42,24 @@ var g = class extends t {
 	static {
 		f = this;
 	}
+	constructor(...e) {
+		super(...e), this.value = "", this.defaultValue = "", this.maxLength = 6, this.pattern = "", this.disabled = !1, this.label = "One-time password", this.description = "", this._internalValue = "", this._focused = !1, this._cursorIndex = 0, this._firstUpdate = !0, this._handleClick = (e) => {
+			if (this.disabled) return;
+			let t = e.target.closest("flint-input-otp-slot");
+			this._hiddenInput?.focus(), t && (this._cursorIndex = Math.min(t.index, this._internalValue.length), this._syncSlots());
+		}, this._descId = `flint-input-otp-desc-${f._uidCounter++}`;
+	}
 	static {
 		this.styles = i(d);
 	}
 	static {
 		this._uidCounter = 0;
 	}
-	constructor() {
-		super(), this.value = "", this.defaultValue = "", this.maxLength = 6, this.pattern = "", this.disabled = !1, this.label = "One-time password", this.description = "", this._internalValue = "", this._focused = !1, this._cursorIndex = 0, this._firstUpdate = !0, this._handleClick = (e) => {
-			if (this.disabled) return;
-			let t = e.target.closest("flint-input-otp-slot");
-			this._hiddenInput?.focus(), t && (this._cursorIndex = Math.min(t.index, this._internalValue.length), this._syncSlots());
-		}, this._descId = `flint-input-otp-desc-${f._uidCounter++}`, this.addEventListener("click", this._handleClick);
-	}
 	connectedCallback() {
-		super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "group");
+		super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "group"), this.addEventListener("click", this._handleClick);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.removeEventListener("click", this._handleClick);
+		this.removeEventListener("click", this._handleClick), super.disconnectedCallback();
 	}
 	willUpdate(e) {
 		if (this._firstUpdate) {

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

@@ -4,7 +4,7 @@ import { customElement as a, property as o, state 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/menu/flint-menu-item.css?inline
-var u = ":host{font-family:var(--flint-font-family);display:block}.item{cursor:pointer;-webkit-user-select:none;user-select:none;min-height:40px;color:var(--flint-text-color);text-align:left;box-sizing:border-box;background:0 0;border:none;border-radius:0;outline:none;align-items:center;gap:12px;width:100%;padding:8px 16px;font-size:.9375rem;transition:background .12s;display:flex;position:relative}.item:hover{background:var(--flint-hover-color)}.item:active{background:var(--flint-active-color)}.item:focus-visible{background:var(--flint-hover-color);outline:2px solid var(--flint-primary-color);outline-offset:-2px}:host([selected]) .item{background:var(--flint-primary-color-light);color:var(--flint-primary-color);font-weight:600}:host([selected]) .item:hover{background:var(--flint-primary-color-light-hover)}:host([disabled]) .item{opacity:.38;cursor:not-allowed;pointer-events:none}[hidden]{display:none!important}.icon-wrap{width:24px;height:24px;color:var(--flint-text-color-muted);flex-shrink:0;justify-content:center;align-items:center;display:flex}:host([selected]) .icon-wrap{color:var(--flint-primary-color)}.end-icon-wrap{color:var(--flint-text-color-muted);align-items:center;margin-left:auto;padding-left:16px;font-size:.75rem;display:flex}.label{flex:1;line-height:1.5}:host([dense]) .item{min-height:32px;padding:4px 16px;font-size:.875rem}:host([divider]){border-bottom:1px solid var(--flint-border-color);margin-bottom:4px;padding-bottom:4px}@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-border-color);height:1px;margin:4px 0;display:block}", f = ":host{display:block}.group-label{letter-spacing:.06em;text-transform:uppercase;color:var(--flint-text-color-muted);-webkit-user-select:none;user-select:none;padding:6px 16px 2px;font-size:.6875rem;font-weight:600}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", p = ":host{--flint-menu-z-index:1300;--flint-menu-min-width:120px;display:block;position:relative}.backdrop{z-index:calc(var(--flint-menu-z-index) - 1);display:none;position:fixed;inset:0}.backdrop.open{display:block}.menu-paper{background:var(--flint-surface-1);border-radius:var(--flint-border-radius-md);box-shadow:var(--flint-shadow-md), var(--flint-shadow-lg);min-width:var(--flint-menu-min-width);z-index:var(--flint-menu-z-index);transform-origin:0 0;opacity:0;visibility:hidden;pointer-events:none;padding:4px 0;transition:transform .15s cubic-bezier(.4,0,.2,1),opacity .15s cubic-bezier(.4,0,.2,1),visibility .15s;position:absolute;overflow:hidden;transform:scale(.85)}.menu-paper.open{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1)}.pos-bottom-start{transform-origin:0 0;top:100%;left:0}.pos-bottom-end{transform-origin:100% 0;top:100%;right:0}.pos-top-start{transform-origin:0 100%;bottom:100%;left:0}.pos-top-end{transform-origin:100% 100%;bottom:100%;right:0}.pos-right-start{transform-origin:0 0;top:0;left:100%}.pos-left-start{transform-origin:100% 0;top:0;right:100%}.menu-paper.scrollable{max-height:var(--flint-menu-max-height,300px);overflow-y:auto}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", m = class extends t {
+var u = ":host{font-family:var(--flint-font-family);display:block}.item{cursor:pointer;-webkit-user-select:none;user-select:none;min-height:40px;color:var(--flint-text-color);text-align:left;box-sizing:border-box;background:0 0;border:none;border-radius:0;outline:none;align-items:center;gap:12px;min-width:100%;padding:8px 16px;font-size:.9375rem;transition:background .12s;display:flex;position:relative}.item:hover{background:var(--flint-hover-color)}.item:active{background:var(--flint-active-color)}.item:focus-visible{background:var(--flint-hover-color);outline:2px solid var(--flint-primary-color);outline-offset:-2px}:host([selected]) .item{background:var(--flint-primary-color-light);color:var(--flint-primary-color);font-weight:600}:host([selected]) .item:hover{background:var(--flint-primary-color-light-hover)}:host([disabled]) .item{opacity:.38;cursor:not-allowed;pointer-events:none}[hidden]{display:none!important}.icon-wrap{width:24px;height:24px;color:var(--flint-text-color-muted);flex-shrink:0;justify-content:center;align-items:center;display:flex}:host([selected]) .icon-wrap{color:var(--flint-primary-color)}.end-icon-wrap{color:var(--flint-text-color-muted);align-items:center;margin-left:auto;padding-left:16px;font-size:.75rem;display:flex}.label{flex:1;line-height:1.5}:host([dense]) .item{min-height:32px;padding:4px 16px;font-size:.875rem}:host([divider]){border-bottom:1px solid var(--flint-border-color);margin-bottom:4px;padding-bottom:4px}@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-border-color);height:1px;margin:4px 0;display:block}", f = ":host{display:block}.group-label{letter-spacing:.06em;text-transform:uppercase;color:var(--flint-text-color-muted);-webkit-user-select:none;user-select:none;padding:6px 16px 2px;font-size:.6875rem;font-weight:600}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", p = ":host{--flint-menu-z-index:1300;--flint-menu-min-width:200px;display:block;position:relative}.backdrop{z-index:calc(var(--flint-menu-z-index) - 1);display:none;position:fixed;inset:0}.backdrop.open{display:block}.menu-paper{background:var(--flint-surface-1);border-radius:var(--flint-border-radius-md);box-shadow:var(--flint-shadow-md), var(--flint-shadow-lg);min-width:var(--flint-menu-min-width);width:max-content;max-width:var(--flint-menu-max-width,360px);z-index:var(--flint-menu-z-index);color:var(--flint-text-color);transform-origin:0 0;opacity:0;visibility:hidden;pointer-events:none;padding:4px 0;transition:transform .15s cubic-bezier(.4,0,.2,1),opacity .15s cubic-bezier(.4,0,.2,1),visibility .15s;position:absolute;overflow:visible;transform:scale(.85)}.menu-paper.open{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1)}.pos-bottom-start{transform-origin:0 0;top:100%;left:0}.pos-bottom-end{transform-origin:100% 0;top:100%;right:0}.pos-top-start{transform-origin:0 100%;bottom:100%;left:0}.pos-top-end{transform-origin:100% 100%;bottom:100%;right:0}.pos-right-start{transform-origin:0 0;top:0;left:100%}.pos-left-start{transform-origin:100% 0;top:0;right:100%}.menu-paper.scrollable{max-height:var(--flint-menu-max-height,300px);overflow-y:auto}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", m = class extends t {
 	constructor(...e) {
 		super(...e), this.selected = !1, this.disabled = !1, this.dense = !1, this.divider = !1, this._hasIcon = !1, this._hasEndIcon = !1;
 	}
@@ -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-select-Bhc3BR09.js → flint-select-Cuu4rHts.js}

@@ -95,7 +95,7 @@ var d = ":host{--_h:40px;--_px:12px;--_font:.875rem;--flint-select-bg:var(--flin
 	}
 	_dispatchChange() {
 		this.dispatchEvent(new CustomEvent("flint-select-change", {
-			detail: { value: this.multiple ? this.value : this.value[0] ?? null },
+			detail: { value: this.multiple ? this.value : this.value[0] === void 0 ? [] : [this.value[0]] },
 			bubbles: !0,
 			composed: !0
 		}));

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 };