@getufy/flint-ui 0.1.0

package/dist/_shared/decorate-DPS9PT8d.js

@@ -0,0 +1,9 @@
+//#region \0@oxc-project+runtime@0.115.0/helpers/decorate.js
+function e(e, t, n, r) {
+	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
+	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
+	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
+	return i > 3 && a && Object.defineProperty(t, n, a), a;
+}
+//#endregion
+export { e as t };

package/dist/_shared/flint-accordion-CnXIksxN.js

@@ -0,0 +1,104 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { LitElement as t, html as n, unsafeCSS as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+//#region src/accordion/flint-accordion.css?inline
+var o = ":host{border-top:1px solid var(--flint-border-color);background-color:var(--flint-surface-1);color:var(--flint-text-color);transition:margin .15s cubic-bezier(.4,0,.2,1);display:block}:host(:first-of-type){border-top-left-radius:var(--flint-border-radius-md);border-top-right-radius:var(--flint-border-radius-md);border-top:none}:host(:last-of-type){border-bottom-left-radius:var(--flint-border-radius-md);border-bottom-right-radius:var(--flint-border-radius-md)}:host([expanded]){box-shadow:var(--flint-shadow-md);border-top:none;margin:16px 0}:host([expanded]:first-of-type){margin-top:0}:host([expanded]:last-of-type){margin-bottom:0}.accordion-container{flex-direction:column;display:flex}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", s = ":host{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;min-height:48px;padding:0 16px;transition:min-height .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1);display:flex}:host(:focus-visible){outline:2px solid var(--flint-primary-color);outline-offset:-2px}:host(:hover){background-color:var(--flint-hover-color)}:host([expanded]){min-height:64px}:host([disabled]){cursor:default;opacity:.5;pointer-events:none}.content{font-family:var(--flint-font-family);flex-grow:1;margin:12px 0;font-weight:500;display:flex}.expand-icon{color:var(--flint-text-color-muted);border-radius:50%;padding:8px;transition:transform .15s cubic-bezier(.4,0,.2,1);display:flex}:host([expanded]) .expand-icon{transform:rotate(180deg)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", c = ":host{grid-template-rows:0fr;transition:grid-template-rows .15s cubic-bezier(.4,0,.2,1);display:grid;overflow:hidden}:host([expanded]){grid-template-rows:1fr}.details-inner{min-height:0}.content{font-family:var(--flint-font-family);color:var(--flint-text-color);padding:8px 16px 16px;font-size:.875rem}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", l = ":host{border-top:1px solid var(--flint-border-color);justify-content:flex-end;gap:8px;padding:8px 16px 16px;display:none}:host([expanded]){display:flex}", u = 0, d = class extends t {
+	static {
+		this.styles = r(o);
+	}
+	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 = () => {
+			this.disabled || (this.expanded = !this.expanded, this.dispatchEvent(new CustomEvent("flint-accordion-change", {
+				detail: { expanded: this.expanded },
+				bubbles: !0,
+				composed: !0
+			})));
+		}, this.addEventListener("flint-accordion-toggle", this._handleToggle);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("flint-accordion-toggle", this._handleToggle);
+	}
+	render() {
+		return n`
+            <div class="accordion-container" role="region" aria-labelledby=${this._uid + "-summary"}>
+                <slot></slot>
+            </div>
+        `;
+	}
+};
+e([a({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "expanded", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "disabled", void 0), d = e([i("flint-accordion")], d);
+var f = class extends t {
+	static {
+		this.styles = r(s);
+	}
+	constructor() {
+		super(), this._handleActivate = () => {
+			this.dispatchEvent(new CustomEvent("flint-accordion-toggle", {
+				bubbles: !0,
+				composed: !0
+			}));
+		}, this._handleKeyDown = (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._handleActivate());
+		}, this.addEventListener("click", this._handleActivate), this.addEventListener("keydown", this._handleKeyDown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("click", this._handleActivate), this.removeEventListener("keydown", this._handleKeyDown);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "button"), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0");
+		let e = this.closest("flint-accordion");
+		e && !this.hasAttribute("id") && this.setAttribute("id", e._uid + "-summary");
+	}
+	render() {
+		return n`
+            <div class="content">
+                <slot></slot>
+            </div>
+            <div class="expand-icon">
+                <slot name="expandIcon">
+                    <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <polyline points="6 9 12 15 18 9"></polyline>
+                    </svg>
+                </slot>
+            </div>
+        `;
+	}
+};
+f = e([i("flint-accordion-summary")], f);
+var p = class extends t {
+	static {
+		this.styles = r(c);
+	}
+	render() {
+		return n`
+            <div class="details-inner">
+                <div class="content">
+                    <slot></slot>
+                </div>
+            </div>
+        `;
+	}
+};
+p = e([i("flint-accordion-details")], p);
+var m = class extends t {
+	static {
+		this.styles = r(l);
+	}
+	render() {
+		return n`<slot></slot>`;
+	}
+};
+m = e([i("flint-accordion-actions")], m);
+//#endregion
+export { f as i, m as n, p as r, d as t };

package/dist/_shared/flint-alert-DNcwWxQL.js

@@ -0,0 +1,59 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { LitElement as t, html as n, unsafeCSS as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+import { classMap as o } from "lit/directives/class-map.js";
+//#region src/alert/flint-alert.css?inline
+var s = ":host{width:100%;font-family:var(--flint-font-family);margin-bottom:1rem;display:block}.alert{border-radius:var(--flint-border-radius-md);box-sizing:border-box;border:1px solid #0000;align-items:flex-start;gap:12px;padding:12px 16px;animation:.3s ease-out fadeIn;display:flex;position:relative}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.info{background-color:var(--flint-info-bg);border-color:var(--flint-info-border-color);color:var(--flint-info-text-color)}.info .icon{color:var(--flint-info-icon-color)}.success{background-color:var(--flint-success-bg);border-color:var(--flint-success-border-color);color:var(--flint-success-text-color)}.success .icon{color:var(--flint-success-icon-color)}.warning{background-color:var(--flint-warning-bg);border-color:var(--flint-warning-border-color);color:var(--flint-warning-text-color)}.warning .icon{color:var(--flint-warning-icon-color)}.error{background-color:var(--flint-error-bg);border-color:var(--flint-error-border-color);color:var(--flint-error-text-color)}.error .icon{color:var(--flint-error-icon-color)}.icon{flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;margin-top:2px;display:flex}.content{flex-grow:1}.title{margin-bottom:2px;font-size:.875rem;font-weight:600}.message{font-size:.875rem;line-height:1.5}.close-button{cursor:pointer;color:currentColor;opacity:.6;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;margin-top:-6px;margin-right:-10px;padding:6px;transition:all .2s;display:flex}.close-button:hover{opacity:1;background-color:var(--flint-active-color)}.close-button:active{transform:scale(.92)}.icon svg,.close-button svg{width:100%;height:100%}@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.severity = "info", this.title = "", this.dismissible = !1;
+	}
+	static {
+		this.styles = r(s);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), clearTimeout(this._closeTimer);
+	}
+	_handleClose() {
+		this.dispatchEvent(new CustomEvent("flint-alert-close", {
+			bubbles: !0,
+			composed: !0,
+			detail: { 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);
+	}
+	_getIcon() {
+		switch (this.severity) {
+			case "success": return n`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>`;
+			case "warning": return n`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>`;
+			case "error": return n`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>`;
+			default: return n`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>`;
+		}
+	}
+	render() {
+		return n`
+            <div class="alert ${o({ [this.severity]: !0 })}" role="alert">
+                <div class="icon">
+                    <slot name="icon">${this._getIcon()}</slot>
+                </div>
+                <div class="content">
+                    ${this.title ? n`<div class="title">${this.title}</div>` : ""}
+                    <div class="message">
+                        <slot></slot>
+                    </div>
+                </div>
+                ${this.dismissible ? n`
+                    <button class="close-button" @click=${this._handleClose} aria-label="Close">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width: 16px; height: 16px;">
+                            <line x1="18" y1="6" x2="6" y2="18"></line>
+                            <line x1="6" y1="6" x2="18" y2="18"></line>
+                        </svg>
+                    </button>
+                ` : ""}
+            </div>
+        `;
+	}
+};
+e([a({ type: String })], c.prototype, "severity", void 0), e([a({ type: String })], c.prototype, "title", void 0), e([a({ type: Boolean })], c.prototype, "dismissible", void 0), c = e([i("flint-alert")], c);
+//#endregion
+export { c as t };

package/dist/_shared/flint-app-bar-CNbq6ggt.js

@@ -0,0 +1,39 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { LitElement as t, html as n, unsafeCSS as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+import { classMap as o } from "lit/directives/class-map.js";
+//#region src/app-bar/flint-app-bar.css?inline
+var s = ":host{--flint-app-bar-height:64px;--flint-app-bar-bg:var(--flint-primary-color);--flint-app-bar-color:var(--flint-text-color-on-primary);--flint-app-bar-shadow:var(--flint-shadow-md);z-index:1100;display:block;position:relative}:host([position=fixed]){position:fixed;top:0;left:0;right:0}:host([position=absolute]){position:absolute;top:0;left:0;right:0}:host([position=sticky]){position:sticky;top:0}header{box-sizing:border-box;width:100%;height:var(--flint-app-bar-height);background-color:var(--flint-app-bar-bg);color:var(--flint-app-bar-color);box-shadow:var(--flint-app-bar-shadow);align-items:center;padding:0 16px;display:flex;position:relative}header.variant-outlined{background-color:var(--flint-surface-1);color:var(--flint-text-color);border-bottom:1px solid var(--flint-border-color);box-shadow:none}.title{min-width:0;font-family:var(--flint-font-family);white-space:nowrap;text-overflow:ellipsis;flex-grow:1;margin:0 16px;font-size:1.25rem;font-weight:500;overflow:hidden}.left-section,.right-section{flex-shrink:0;align-items:center;gap:8px;display:flex}", c = class extends t {
+	constructor(...e) {
+		super(...e), this.title = "", this.position = "static", this.variant = "regular";
+	}
+	static {
+		this.styles = r(s);
+	}
+	render() {
+		return n`
+      <header class="${o({ "variant-outlined": this.variant === "outlined" })}">
+        <div class="left-section">
+          <slot name="navigation"></slot>
+        </div>
+        
+        <div class="title">
+          ${this.title}<slot name="title"></slot>
+        </div>
+
+        <div class="right-section">
+          <slot name="actions"></slot>
+        </div>
+      </header>
+    `;
+	}
+};
+e([a({ type: String })], c.prototype, "title", void 0), e([a({
+	type: String,
+	reflect: !0
+})], c.prototype, "position", void 0), e([a({
+	type: String,
+	reflect: !0
+})], c.prototype, "variant", void 0), c = e([i("flint-app-bar")], c);
+//#endregion
+export { c as t };

package/dist/_shared/flint-autocomplete-B1tLM8lN.js

@@ -0,0 +1,131 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { LitElement as t, html as n, unsafeCSS as r } from "lit";
+import { customElement as i, property as a, state as o } from "lit/decorators.js";
+import { classMap as s } from "lit/directives/class-map.js";
+//#region src/autocomplete/flint-autocomplete.css?inline
+var c = ":host{font-family:var(--flint-font-family);width:100%;display:inline-block;position:relative}.input-wrapper{position:relative}input{border:1px solid var(--flint-input-border-color);border-radius:var(--flint-input-border-radius);box-sizing:border-box;width:100%;color:var(--flint-text-color);background:var(--flint-input-bg);outline:none;padding:8px 12px;font-family:inherit;font-size:14px;transition:border-color .2s,box-shadow .2s}input:focus{border-color:var(--flint-primary-color);box-shadow:0 0 0 1px var(--flint-primary-color)}input:disabled{background-color:var(--flint-input-disabled-bg);color:var(--flint-text-color-subtle);cursor:not-allowed}.dropdown{max-height:var(--flint-autocomplete-dropdown-max-height,250px);background:var(--flint-surface-1);border:1px solid var(--flint-input-border-color);border-radius:var(--flint-input-border-radius);z-index:var(--flint-autocomplete-z-index,10);margin-top:4px;display:none;position:absolute;top:100%;left:0;right:0;overflow-y:auto;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.dropdown.open{display:block}.option{padding:var(--flint-autocomplete-option-padding,10px 12px);cursor:pointer;color:var(--flint-text-color);font-size:14px;transition:background-color .15s}.option:hover,.option.active{background-color:var(--flint-hover-color)}.no-options{padding:var(--flint-autocomplete-option-padding,10px 12px);color:var(--flint-text-color-muted);font-size:14px}@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.options = [], this.freeSolo = !1, this.disabled = !1, this.value = "", this.placeholder = "", this._isOpen = !1, this._inputValue = "", this._filteredOptions = [], this._activeIndex = -1, this._handleOutsideClick = (e) => {
+			if (!this.contains(e.target) && (this._isOpen = !1, this._activeIndex = -1, !this.freeSolo)) {
+				let e = this.options.find((e) => e.value === this.value);
+				this._inputValue = e ? e.label : "";
+			}
+		};
+	}
+	static {
+		this.styles = r(c);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._inputValue = this.value, document.addEventListener("click", this._handleOutsideClick);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick);
+	}
+	willUpdate(e) {
+		if (e.has("options") && (this._filterOptions(), this._activeIndex = -1), e.has("value") && !e.has("_inputValue")) {
+			let e = this.options.find((e) => e.value === this.value);
+			e ? this._inputValue = e.label : this.freeSolo ? this._inputValue = this.value : this._inputValue = "";
+		}
+	}
+	_handleInput(e) {
+		this._inputValue = e.target.value, this._activeIndex = -1, this.freeSolo && (this.value = this._inputValue, this.dispatchEvent(new CustomEvent("flint-autocomplete-change", { detail: {
+			value: this.value,
+			label: this.value
+		} }))), this._filterOptions(), this._isOpen = !0;
+	}
+	_filterOptions() {
+		let e = this._inputValue.toLowerCase();
+		this._filteredOptions = this.options.filter((t) => t.label.toLowerCase().includes(e));
+	}
+	_handleFocus() {
+		this.disabled || (this._filterOptions(), this._isOpen = !0, this._activeIndex = -1);
+	}
+	_handleKeyDown(e) {
+		let t = this._filteredOptions.length;
+		if (!this._isOpen) {
+			(e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), this._filterOptions(), this._isOpen = !0, this._activeIndex = e.key === "ArrowDown" ? 0 : t - 1);
+			return;
+		}
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), this._activeIndex = Math.min(this._activeIndex + 1, t - 1), this._scrollActiveIntoView();
+				break;
+			case "ArrowUp":
+				e.preventDefault(), this._activeIndex = Math.max(this._activeIndex - 1, -1), this._scrollActiveIntoView();
+				break;
+			case "Enter":
+				this._activeIndex >= 0 && this._filteredOptions[this._activeIndex] && (e.preventDefault(), this._selectOption(this._filteredOptions[this._activeIndex]));
+				break;
+			case "Escape":
+				if (e.preventDefault(), this._isOpen = !1, this._activeIndex = -1, !this.freeSolo) {
+					let e = this.options.find((e) => e.value === this.value);
+					this._inputValue = e ? e.label : "";
+				}
+				break;
+			case "Tab":
+				this._isOpen = !1, this._activeIndex = -1;
+				break;
+			default: break;
+		}
+	}
+	_scrollActiveIntoView() {
+		this.updateComplete.then(() => {
+			if (this._activeIndex < 0) return;
+			let e = this.shadowRoot?.querySelectorAll(".option")?.[this._activeIndex];
+			e && typeof e.scrollIntoView == "function" && e.scrollIntoView({ block: "nearest" });
+		});
+	}
+	_selectOption(e) {
+		this.value = e.value, this._inputValue = e.label, this._isOpen = !1, this._activeIndex = -1, this.dispatchEvent(new CustomEvent("flint-autocomplete-change", { detail: {
+			value: e.value,
+			label: e.label
+		} }));
+	}
+	render() {
+		let e = this._isOpen && (this._filteredOptions.length > 0 || !this.freeSolo);
+		return n`
+      <div class="input-wrapper">
+        <input
+          type="text"
+          role="combobox"
+          aria-expanded=${e ? "true" : "false"}
+          aria-autocomplete="list"
+          aria-haspopup="listbox"
+          aria-activedescendant=${this._activeIndex >= 0 ? `option-${this._activeIndex}` : ""}
+          .value=${this._inputValue}
+          placeholder=${this.placeholder}
+          ?disabled=${this.disabled}
+          @input=${this._handleInput}
+          @focus=${this._handleFocus}
+          @keydown=${this._handleKeyDown}
+        />
+        <div
+          role="listbox"
+          class=${s({
+			dropdown: !0,
+			open: e
+		})}
+        >
+          ${this._filteredOptions.length > 0 ? this._filteredOptions.map((e, t) => n`
+                  <div
+                    id="option-${t}"
+                    role="option"
+                    aria-selected=${t === this._activeIndex ? "true" : "false"}
+                    class=${s({
+			option: !0,
+			active: t === this._activeIndex
+		})}
+                    @mousedown=${(e) => e.preventDefault()}
+                    @click=${() => this._selectOption(e)}
+                  >
+                    ${e.label}
+                  </div>
+                `) : n`<div class="no-options">No options</div>`}
+        </div>
+      </div>
+    `;
+	}
+};
+e([a({ type: Array })], l.prototype, "options", void 0), e([a({ type: Boolean })], l.prototype, "freeSolo", void 0), e([a({ type: Boolean })], l.prototype, "disabled", void 0), e([a({ type: String })], l.prototype, "value", void 0), e([a({ type: String })], l.prototype, "placeholder", void 0), e([o()], l.prototype, "_isOpen", void 0), e([o()], l.prototype, "_inputValue", void 0), e([o()], l.prototype, "_filteredOptions", void 0), e([o()], l.prototype, "_activeIndex", void 0), l = e([i("flint-autocomplete")], l);
+//#endregion
+export { l as t };

package/dist/_shared/flint-avatar-DSQJv4gX.js

@@ -0,0 +1,40 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { LitElement as t, html as n, nothing as r, unsafeCSS as i } from "lit";
+import { customElement as a, property as o, state as s } from "lit/decorators.js";
+import { classMap as c } from "lit/directives/class-map.js";
+//#region src/avatar/flint-avatar.css?inline
+var l = ":host{vertical-align:middle;line-height:1;display:inline-block}.avatar{width:var(--flint-avatar-size,40px);height:var(--flint-avatar-size,40px);font-family:var(--flint-font-family);font-size:calc(var(--flint-avatar-size,40px) / 2.5);-webkit-user-select:none;user-select:none;background-color:var(--flint-avatar-bg,var(--flint-surface-3));color:var(--flint-avatar-color,var(--flint-text-color-muted));border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-weight:600;transition:all .2s;display:flex;position:relative;overflow:hidden}.avatar.square{border-radius:0}.avatar.rounded{border-radius:var(--flint-border-radius-md)}img{object-fit:cover;width:100%;height:100%;display:block}.initials{text-transform:uppercase}:host([size=small]){--flint-avatar-size:32px}:host([size=medium]){--flint-avatar-size:40px}:host([size=large]){--flint-avatar-size:56px}:host([size=xlarge]){--flint-avatar-size:80px}.avatar.loading{background:linear-gradient(90deg, var(--flint-surface-2) 25%, var(--flint-surface-3) 50%, var(--flint-surface-2) 75%);background-size:200% 100%;animation:1.5s infinite loading}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", u = class extends t {
+	constructor(...e) {
+		super(...e), this.src = "", this.alt = "", this.initials = "", this.variant = "circle", this.size = "medium", this._hasError = !1, this._isLoading = !1;
+	}
+	static {
+		this.styles = i(l);
+	}
+	willUpdate(e) {
+		e.has("src") && (this._hasError = !1, this._isLoading = !!this.src);
+	}
+	_handleError() {
+		this._hasError = !0, this._isLoading = !1;
+	}
+	_handleLoad() {
+		this._isLoading = !1;
+	}
+	render() {
+		return n`
+      <div class=${c({
+			avatar: !0,
+			square: this.variant === "square",
+			rounded: this.variant === "rounded",
+			loading: this._isLoading
+		})} part="base" role="img" aria-label=${this.alt || this.initials || "avatar"}>
+        ${this.src && !this._hasError ? n`<img src=${this.src} alt=${this.alt} @error=${this._handleError} @load=${this._handleLoad} style=${this._isLoading ? "display:none" : r} part="image" />` : this.initials ? n`<span class="initials" part="initials">${this.initials.substring(0, 2)}</span>` : n`<slot><svg width="60%" height="60%" viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg></slot>`}
+      </div>
+    `;
+	}
+};
+e([o({ type: String })], u.prototype, "src", void 0), e([o({ type: String })], u.prototype, "alt", void 0), e([o({ type: String })], u.prototype, "initials", void 0), e([o({ type: String })], u.prototype, "variant", void 0), e([o({
+	type: String,
+	reflect: !0
+})], u.prototype, "size", void 0), e([s()], u.prototype, "_hasError", void 0), e([s()], u.prototype, "_isLoading", void 0), u = e([a("flint-avatar")], u);
+//#endregion
+export { u as t };

package/dist/_shared/flint-backdrop-BszHm5cJ.js

@@ -0,0 +1,58 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { LitElement as t, html as n, nothing as r, unsafeCSS as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+import { classMap as s } from "lit/directives/class-map.js";
+//#region src/backdrop/flint-backdrop.css?inline
+var c = ":host{--flint-backdrop-color:#00000080;--flint-backdrop-z-index:1200;display:block}.backdrop{position:var(--flint-backdrop-position,fixed);background-color:var(--flint-backdrop-color);z-index:var(--flint-backdrop-z-index);-webkit-tap-highlight-color:transparent;opacity:0;visibility:hidden;justify-content:center;align-items:center;transition:opacity .3s cubic-bezier(.4,0,.2,1),visibility .3s;display:flex;inset:0}:host([container]){--flint-backdrop-position:absolute}.backdrop.open{opacity:1;visibility:visible}.backdrop.invisible{background-color:#0000}.content{z-index:calc(var(--flint-backdrop-z-index) + 1)}@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.invisible = !1, this.container = !1, this._boundKeydown = this._handleKeydown.bind(this);
+	}
+	static {
+		this.styles = i(c);
+	}
+	connectedCallback() {
+		super.connectedCallback(), document.addEventListener("keydown", this._boundKeydown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), document.removeEventListener("keydown", this._boundKeydown);
+	}
+	_handleKeydown(e) {
+		e.key === "Escape" && this.open && this.dispatchEvent(new CustomEvent("flint-backdrop-close", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_handleClick(e) {
+		e.target === e.currentTarget && this.dispatchEvent(new CustomEvent("flint-backdrop-close", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	render() {
+		return n`
+      <div 
+        class="${s({
+			backdrop: !0,
+			open: this.open,
+			invisible: this.invisible
+		})}" 
+        @click="${this._handleClick}"
+        role="presentation"
+        aria-hidden="${this.open ? r : "true"}"
+      >
+        <div class="content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+	}
+};
+e([o({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "open", void 0), e([o({ type: Boolean })], l.prototype, "invisible", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "container", void 0), l = e([a("flint-backdrop")], l);
+//#endregion
+export { l as t };

package/dist/_shared/flint-badge-AzmcBWUq.js

@@ -0,0 +1,38 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { LitElement as t, html as n, unsafeCSS as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+import { classMap as o } from "lit/directives/class-map.js";
+//#region src/badge/flint-badge.css?inline
+var s = ":host{vertical-align:middle;flex-shrink:0;display:inline-flex;position:relative}.badge{box-sizing:border-box;font-family:var(--flint-font-family);z-index:1;background-color:var(--flint-badge-background,var(--flint-primary-color));min-width:20px;height:20px;color:var(--flint-badge-color,var(--flint-text-color-on-primary));transform-origin:100% 0;border:2px solid var(--flint-surface-1);border-radius:10px;flex-wrap:wrap;place-content:center;align-items:center;padding:0 6px;font-size:.75rem;font-weight:600;line-height:1;transition:transform .2s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:0;right:0;transform:scale(1)translate(50%,-50%)}.badge.hidden{transform:scale(0)translate(50%,-50%)}.badge.dot{border-radius:4px;min-width:8px;height:8px;padding:0}.primary{background-color:var(--flint-primary-color)}.secondary{background-color:var(--flint-secondary-color)}.error{background-color:var(--flint-error-color);color:var(--flint-text-color-on-primary)}.success{background-color:var(--flint-success-color);color:var(--flint-text-color-on-primary)}.warning{background-color:var(--flint-warning-color);color:var(--flint-text-color-on-primary)}@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.content = "", this.dot = !1, this.invisible = !1, this.variant = "primary", this.max = 99;
+	}
+	static {
+		this.styles = r(s);
+	}
+	get _displayContent() {
+		if (this.dot) return "";
+		let e = Number(this.content);
+		return !isNaN(e) && e > this.max ? `${this.max}+` : this.content;
+	}
+	render() {
+		let e = !this.invisible && (this.dot || this.content !== "");
+		return n`
+      <slot></slot>
+      <span
+        class="badge ${o({
+			hidden: !e,
+			dot: this.dot,
+			[this.variant]: !0
+		})}"
+        role="status"
+        aria-hidden="${e ? "false" : "true"}"
+      >
+        ${this._displayContent}
+      </span>
+    `;
+	}
+};
+e([a({ type: String })], c.prototype, "content", void 0), e([a({ type: Boolean })], c.prototype, "dot", void 0), e([a({ type: Boolean })], c.prototype, "invisible", void 0), e([a({ type: String })], c.prototype, "variant", void 0), e([a({ type: Number })], c.prototype, "max", void 0), c = e([i("flint-badge")], c);
+//#endregion
+export { c as t };

package/dist/_shared/flint-bottom-navigation-B4-3_1w7.js

@@ -0,0 +1,46 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { t } from "./flint-bottom-navigation-action-CW0ZUZlF.js";
+import { LitElement as n, html as r, unsafeCSS as i } from "lit";
+import { customElement as a, property as o, queryAssignedElements as s } from "lit/decorators.js";
+//#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;
+	}
+	static {
+		this.styles = i(c);
+	}
+	updated(e) {
+		(e.has("value") || e.has("showLabels")) && this._updateActions();
+	}
+	_handleSlotChange() {
+		this._updateActions();
+	}
+	_updateActions() {
+		let e = this._actions.length, t = this.showLabels || e <= 3;
+		this._actions.forEach((e) => {
+			e.active = e.value === this.value, e.showLabel = t || e.active;
+		});
+	}
+	_handleActionChange(e) {
+		let n = e.composedPath().find((e) => e instanceof t);
+		!n || n.value === this.value || (this.value = n.value, this.dispatchEvent(new CustomEvent("flint-bottom-navigation-change", {
+			detail: { value: n.value },
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	render() {
+		return r`
+            <div class="container" role="tablist" @click=${this._handleActionChange}>
+                <slot @slotchange=${this._handleSlotChange}></slot>
+            </div>
+        `;
+	}
+};
+e([o()], l.prototype, "value", 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);
+//#endregion
+export { l as t };

package/dist/_shared/flint-bottom-navigation-action-CW0ZUZlF.js

@@ -0,0 +1,44 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { LitElement as t, html as n, unsafeCSS as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+import { classMap as o } from "lit/directives/class-map.js";
+//#region src/bottom-navigation/flint-bottom-navigation-action.css?inline
+var s = ":host{color:var(--flint-text-color-muted);cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;flex:1;justify-content:center;align-items:center;min-width:80px;max-width:168px;padding:6px 12px 8px;transition:color .25s cubic-bezier(.4,0,.2,1),padding .25s cubic-bezier(.4,0,.2,1);display:flex}:host(:hover){background-color:var(--flint-hover-color)}:host([active]){color:var(--flint-primary-color);padding-top:8px}.icon-container{justify-content:center;align-items:center;height:24px;margin-bottom:2px;transition:transform .25s cubic-bezier(.4,0,.2,1);display:flex}:host([active]) .icon-container{transform:scale(1.1)}.label{font-family:var(--flint-font-family);opacity:1;font-size:.75rem;transition:font-size .25s cubic-bezier(.4,0,.2,1),opacity .25s cubic-bezier(.4,0,.2,1)}:host([active]) .label{font-size:.875rem}.label.hidden{opacity:0;pointer-events:none;font-size:0}@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.label = "", this.active = !1, this.showLabel = !0, this._handleKeydown = (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.click());
+		};
+	}
+	static {
+		this.styles = r(s);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "tab"), this.hasAttribute("tabindex") || (this.tabIndex = 0), this.addEventListener("keydown", this._handleKeydown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("keydown", this._handleKeydown);
+	}
+	updated(e) {
+		e.has("active") && this.setAttribute("aria-selected", String(this.active));
+	}
+	render() {
+		return n`
+            <div class="icon-container" aria-hidden="true">
+                <slot name="icon"></slot>
+                <slot></slot>
+            </div>
+            <span class="${o({
+			label: !0,
+			hidden: !this.showLabel
+		})}">
+                ${this.label}
+            </span>
+        `;
+	}
+};
+e([a({ type: String })], c.prototype, "label", void 0), e([a()], c.prototype, "value", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "active", void 0), e([a({ type: Boolean })], c.prototype, "showLabel", void 0), c = e([i("flint-bottom-navigation-action")], c);
+//#endregion
+export { c as t };