@getufy/flint-ui 0.1.0

package/dist/_shared/flint-sonner-DD_qGTfm.js

@@ -0,0 +1,230 @@
+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 { repeat as s } from "lit/directives/repeat.js";
+//#region src/sonner/flint-toaster.css?inline
+var c = ":host{z-index:var(--flint-toast-z-index,9999);max-width:var(--flint-toast-width,356px);width:100%;padding:var(--flint-toast-padding,16px);box-sizing:border-box;pointer-events:none;display:block;position:fixed;overflow:visible}:host,:host([position=bottom-right]){bottom:0;right:0}:host([position=bottom-left]){bottom:0;left:0;right:auto}:host([position=bottom-center]){bottom:0;left:50%;right:auto;transform:translate(-50%)}:host([position=top-right]){top:0;bottom:auto;right:0}:host([position=top-left]){inset:0 auto auto 0}:host([position=top-center]){inset:0 auto auto 50%;transform:translate(-50%)}.toaster{pointer-events:auto;flex-direction:column;gap:0;width:100%;display:flex;position:relative;overflow:visible}.toast{pointer-events:auto;background:var(--flint-toast-bg,var(--flint-surface-1,#fff));border:var(--flint-toast-border,1px solid var(--flint-border-color,#e4e4e7));border-radius:var(--flint-toast-radius,var(--flint-border-radius-lg,.5rem));box-shadow:var(--flint-toast-shadow,var(--flint-shadow-lg,0 10px 15px -3px #0000001a, 0 4px 6px -2px #0000000d));color:var(--flint-toast-color,var(--flint-text-color,#111827));font-family:var(--flint-font-family,system-ui, sans-serif);will-change:transform, opacity;align-items:flex-start;gap:10px;padding:14px 12px 14px 14px;font-size:.875rem;line-height:1.4;transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .3s,box-shadow .2s;animation:.24s cubic-bezier(.16,1,.3,1) flint-toast-in-bottom;display:flex}.toaster--top .toast{animation-name:flint-toast-in-top}@keyframes flint-toast-in-bottom{0%{opacity:0;transform:translateY(12px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes flint-toast-in-top{0%{opacity:0;transform:translateY(-12px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.toast[data-front-index=\"0\"]{z-index:3}.toast[data-front-index=\"1\"]{z-index:2}.toast[data-front-index=\"2\"]{z-index:1}.toaster:not(.toaster--expanded) .toast[data-front-index=\"1\"],.toaster:not(.toaster--expanded) .toast[data-front-index=\"2\"]{pointer-events:none;width:100%;animation:none;position:absolute;left:0}.toaster--bottom:not(.toaster--expanded) .toast[data-front-index=\"1\"],.toaster--bottom:not(.toaster--expanded) .toast[data-front-index=\"2\"]{bottom:0}.toaster--top:not(.toaster--expanded) .toast[data-front-index=\"1\"],.toaster--top:not(.toaster--expanded) .toast[data-front-index=\"2\"]{top:0}.toaster--bottom:not(.toaster--expanded) .toast{transform:scale(var(--_stack-scale,1)) translateY(calc(-1 * var(--_stack-offset,0) * 1px));opacity:var(--_stack-opacity,1)}.toaster--top:not(.toaster--expanded) .toast{transform:scale(var(--_stack-scale,1)) translateY(calc(var(--_stack-offset,0) * 1px));opacity:var(--_stack-opacity,1)}.toaster--expanded{gap:var(--flint-toast-gap,8px)}.toaster--expanded .toast{opacity:1;z-index:auto;pointer-events:auto;animation-name:none;position:relative;transform:scale(1)translateY(0)}.toast__icon{flex-shrink:0;justify-content:center;align-items:center;margin-top:1px;display:flex}.toast__icon--success{color:var(--flint-toast-success-icon-color,var(--flint-success-color,#10b981))}.toast__icon--error{color:var(--flint-toast-error-icon-color,var(--flint-error-color,#dc2626))}.toast__icon--warning{color:var(--flint-toast-warning-icon-color,var(--flint-warning-color,#f59e0b))}.toast__icon--info{color:var(--flint-toast-info-icon-color,var(--flint-primary-color,#2563eb))}.toast__icon--loading{color:var(--flint-text-color-muted,#4b5563)}.spinner{border:2px solid;border-top-color:#0000;border-radius:50%;width:16px;height:16px;animation:.65s linear infinite flint-toast-spin;display:block}@keyframes flint-toast-spin{to{transform:rotate(360deg)}}.toast__body{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.toast__message{font-weight:500}.toast__description{color:var(--flint-text-color-muted,#4b5563);margin-top:2px;font-size:.8125rem;line-height:1.5}.toast__action{border:1px solid var(--flint-border-color,#e4e4e7);border-radius:var(--flint-border-radius-md,.375rem);color:inherit;cursor:pointer;background:0 0;align-self:flex-start;margin-top:8px;padding:3px 10px;font-family:inherit;font-size:.8125rem;font-weight:500;line-height:1.5;transition:background .12s}.toast__action:hover{background:var(--flint-hover-color,#0000000a)}.toast__action:focus-visible{outline:2px solid var(--flint-primary-focus-ring,#3b82f680);outline-offset:1px}.toast__close{width:22px;height:22px;color:var(--flint-text-color-subtle,#4b5563);cursor:pointer;border-radius:var(--flint-border-radius-sm,.125rem);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;margin-left:auto;padding:0;transition:background .12s,color .12s;display:flex}.toast__close:hover{background:var(--flint-hover-color,#0000000f);color:var(--flint-text-color,#111827)}.toast__close:focus-visible{outline:2px solid var(--flint-primary-focus-ring,#3b82f680);outline-offset:1px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", l = {
+	toasts: [],
+	listeners: /* @__PURE__ */ new Set(),
+	add(e) {
+		let t = this.toasts.findIndex((t) => t.id === e.id);
+		t >= 0 ? this.toasts = this.toasts.map((n, r) => r === t ? {
+			...n,
+			...e
+		} : n) : this.toasts = [...this.toasts, e], this._notify();
+	},
+	update(e, t) {
+		this.toasts = this.toasts.map((n) => n.id === e ? {
+			...n,
+			...t
+		} : n), this._notify();
+	},
+	remove(e) {
+		this.toasts = this.toasts.filter((t) => t.id !== e), this._notify();
+	},
+	clear() {
+		this.toasts = [], this._notify();
+	},
+	_notify() {
+		this.listeners.forEach((e) => e());
+	}
+}, u = 0, d = () => `flint-toast-${++u}`;
+function f(e, t, n = {}) {
+	let r = n.id ?? d();
+	return l.add({
+		...n,
+		id: r,
+		type: t,
+		message: e,
+		dismissible: n.dismissible !== !1
+	}), r;
+}
+var p = Object.assign((e, t) => f(e, "default", t), {
+	success: (e, t) => f(e, "success", t),
+	error: (e, t) => f(e, "error", t),
+	info: (e, t) => f(e, "info", t),
+	warning: (e, t) => f(e, "warning", t),
+	loading: (e, t) => f(e, "loading", {
+		...t,
+		duration: Infinity
+	}),
+	promise(e, t, n) {
+		let r = n?.id ?? d();
+		return l.add({
+			...n,
+			id: r,
+			type: "loading",
+			message: t.loading,
+			duration: Infinity,
+			dismissible: !1
+		}), e.then((e) => {
+			let i = typeof t.success == "function" ? t.success(e) : t.success;
+			l.update(r, {
+				type: "success",
+				message: i,
+				dismissible: !0,
+				duration: n?.duration
+			});
+		}).catch((e) => {
+			let i = t.error ?? "Something went wrong", a = typeof i == "function" ? i(e) : i;
+			l.update(r, {
+				type: "error",
+				message: a,
+				dismissible: !0,
+				duration: n?.duration
+			});
+		}), r;
+	},
+	dismiss(e) {
+		e === void 0 ? l.clear() : l.remove(e);
+	}
+}), m = n`
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
+         fill="none" stroke="currentColor" stroke-width="2.5"
+         stroke-linecap="round" stroke-linejoin="round">
+        <path d="M20 6 9 17l-5-5"></path>
+    </svg>
+`, h = n`
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
+         fill="none" stroke="currentColor" stroke-width="2.5"
+         stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="10"></circle>
+        <path d="m15 9-6 6"></path>
+        <path d="m9 9 6 6"></path>
+    </svg>
+`, g = n`
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
+         fill="none" stroke="currentColor" stroke-width="2.5"
+         stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="10"></circle>
+        <path d="M12 16v-4"></path>
+        <path d="M12 8h.01"></path>
+    </svg>
+`, _ = n`
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
+         fill="none" stroke="currentColor" stroke-width="2.5"
+         stroke-linecap="round" stroke-linejoin="round">
+        <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path>
+        <path d="M12 9v4"></path>
+        <path d="M12 17h.01"></path>
+    </svg>
+`, v = n`
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
+         fill="none" stroke="currentColor" stroke-width="2.5"
+         stroke-linecap="round" stroke-linejoin="round">
+        <path d="M18 6 6 18"></path>
+        <path d="m6 6 12 12"></path>
+    </svg>
+`, y = class extends t {
+	constructor(...e) {
+		super(...e), this.position = "bottom-right", this.duration = 4e3, this.visibleToasts = 3, this._toasts = [], this._timers = /* @__PURE__ */ new Map(), this._expanded = !1, this._listener = () => {
+			this._toasts = [...l.toasts], this.requestUpdate();
+		}, this._handleExpand = () => {
+			this._expanded = !0, this.requestUpdate();
+		}, this._handleCollapse = () => {
+			this._expanded = !1, this.requestUpdate();
+		};
+	}
+	static {
+		this.styles = i(c);
+	}
+	connectedCallback() {
+		super.connectedCallback(), l.listeners.add(this._listener), this._toasts = [...l.toasts];
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), l.listeners.delete(this._listener), this._timers.forEach((e) => clearTimeout(e)), this._timers.clear();
+	}
+	updated(e) {
+		let t = new Set(this._toasts.map((e) => e.id));
+		this._timers.forEach((e, n) => {
+			t.has(n) || (clearTimeout(e), this._timers.delete(n));
+		}), this._toasts.forEach((e) => {
+			if (this._timers.has(e.id)) return;
+			let t = e.duration === void 0 ? this.duration : e.duration;
+			Number.isFinite(t) && t > 0 && this._timers.set(e.id, setTimeout(() => this._dismiss(e.id), t));
+		});
+	}
+	_dismiss(e) {
+		clearTimeout(this._timers.get(e)), this._timers.delete(e), l.remove(e);
+	}
+	_pauseTimer(e) {
+		let t = this._timers.get(e);
+		t !== void 0 && (clearTimeout(t), this._timers.delete(e));
+	}
+	_resumeTimer(e) {
+		if (this._timers.has(e.id)) return;
+		let t = e.duration === void 0 ? this.duration : e.duration;
+		Number.isFinite(t) && t > 0 && this._timers.set(e.id, setTimeout(() => this._dismiss(e.id), t));
+	}
+	_icon(e) {
+		switch (e) {
+			case "success": return n`<span class="toast__icon toast__icon--success">${m}</span>`;
+			case "error": return n`<span class="toast__icon toast__icon--error">${h}</span>`;
+			case "warning": return n`<span class="toast__icon toast__icon--warning">${_}</span>`;
+			case "info": return n`<span class="toast__icon toast__icon--info">${g}</span>`;
+			case "loading": return n`<span class="toast__icon toast__icon--loading"><span class="spinner"></span></span>`;
+			default: return r;
+		}
+	}
+	_renderToast(e, t) {
+		let i = e.type === "error" ? "assertive" : e.type === "loading" ? "off" : "polite", a = +(1 - t * .05).toFixed(3), o = t * 6, s = +Math.max(1 - t * .2, 0).toFixed(3);
+		return n`
+            <div
+                class="toast toast--${e.type}"
+                role="status"
+                aria-live=${i}
+                aria-atomic="true"
+                data-toast-id=${e.id}
+                data-front-index=${t}
+                style="--_stack-scale:${a};--_stack-offset:${o};--_stack-opacity:${s}"
+                @mouseenter=${() => this._pauseTimer(e.id)}
+                @mouseleave=${() => this._resumeTimer(e)}
+            >
+                ${this._icon(e.type)}
+                <div class="toast__body">
+                    <div class="toast__message">${e.message}</div>
+                    ${e.description ? n`<div class="toast__description">${e.description}</div>` : r}
+                    ${e.action ? n`
+                            <button
+                                class="toast__action"
+                                @click=${() => {
+			e.action.onClick(), this._dismiss(e.id);
+		}}
+                            >${e.action.label}</button>
+                          ` : r}
+                </div>
+                ${e.dismissible === !1 ? r : n`
+                        <button
+                            class="toast__close"
+                            aria-label="Dismiss notification"
+                            @click=${() => this._dismiss(e.id)}
+                        >${v}</button>
+                      `}
+            </div>
+        `;
+	}
+	render() {
+		let e = this.position.startsWith("top"), t = this._toasts.filter((e) => e.position === void 0 || e.position === this.position).slice(-this.visibleToasts), r = e ? [...t].reverse() : t, i = r.length;
+		return n`
+            <div
+                class="toaster toaster--${e ? "top" : "bottom"} ${this._expanded ? "toaster--expanded" : ""}"
+                @mouseenter=${this._handleExpand}
+                @mouseleave=${this._handleCollapse}
+            >
+                ${s(r, (e) => e.id, (t, n) => {
+			let r = e ? n : i - 1 - n;
+			return this._renderToast(t, r);
+		})}
+            </div>
+        `;
+	}
+};
+e([o({
+	type: String,
+	reflect: !0
+})], y.prototype, "position", void 0), e([o({ type: Number })], y.prototype, "duration", void 0), e([o({
+	type: Number,
+	attribute: "visible-toasts"
+})], y.prototype, "visibleToasts", void 0), y = e([a("flint-toaster")], y);
+//#endregion
+export { p as n, y as t };

package/dist/_shared/flint-speed-dial-DTZ2WaBh.js

@@ -0,0 +1,259 @@
+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/speed-dial/flint-speed-dial-action.css?inline
+var l = ":host{--flint-speed-dial-action-size:40px;align-items:center;display:flex;position:relative}.action-btn{width:var(--flint-speed-dial-action-size);height:var(--flint-speed-dial-action-size);background:var(--flint-surface-1);color:var(--flint-text-color);cursor:pointer;border:none;border-radius:50%;outline:none;flex-shrink:0;justify-content:center;align-items:center;font-size:1.25rem;transition:background .15s,box-shadow .15s,transform .15s;display:inline-flex;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024}.action-btn:hover{background:var(--flint-surface-2);transform:scale(1.08);box-shadow:0 5px 8px -1px #00000040,0 8px 12px #00000029}.action-btn:focus-visible{outline:2px solid var(--flint-primary-color);outline-offset:3px}:host([disabled]) .action-btn{opacity:.38;pointer-events:none}.tooltip{background:var(--flint-tooltip-bg);color:var(--flint-tooltip-text-color);font-family:var(--flint-font-family);letter-spacing:.02em;white-space:nowrap;pointer-events:none;opacity:0;border-radius:5px;padding:4px 10px;font-size:.75rem;font-weight:500;transition:opacity .15s;position:absolute}.tooltip.visible{opacity:1}:host([tooltip-placement=left]) .tooltip{top:50%;right:calc(100% + 10px);transform:translateY(-50%)}:host([tooltip-placement=right]) .tooltip{top:50%;left:calc(100% + 10px);transform:translateY(-50%)}:host([tooltip-placement=top]) .tooltip{bottom:calc(100% + 10px);left:50%;transform:translate(-50%)}:host([tooltip-placement=bottom]) .tooltip{top:calc(100% + 10px);left:50%;transform:translate(-50%)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", u = ":host{--flint-speed-dial-size:56px;--flint-speed-dial-bg:var(--flint-primary-color);--flint-speed-dial-color:var(--flint-text-color-on-primary);--flint-speed-dial-action-gap:12px;flex-direction:column;align-items:center;display:inline-flex;position:relative}.actions{align-items:center;gap:var(--flint-speed-dial-action-gap);display:flex}:host([direction=up]) .actions{margin-bottom:var(--flint-speed-dial-action-gap);flex-direction:column-reverse}:host([direction=down]) .actions{margin-top:var(--flint-speed-dial-action-gap);flex-direction:column}:host([direction=left]) .actions{margin-right:var(--flint-speed-dial-action-gap);flex-direction:row-reverse}:host([direction=right]) .actions{margin-left:var(--flint-speed-dial-action-gap);flex-direction:row}:host([direction=up]),:host([direction=down]){flex-direction:column;align-items:center}:host([direction=left]),:host([direction=right]){flex-direction:row;align-items:center}:host([direction=up]){flex-direction:column-reverse}.fab{width:var(--flint-speed-dial-size);height:var(--flint-speed-dial-size);background:var(--flint-speed-dial-bg);color:var(--flint-speed-dial-color);cursor:pointer;z-index:1;border:none;border-radius:50%;outline:none;flex-shrink:0;justify-content:center;align-items:center;font-size:1.5rem;transition:box-shadow .2s,background .2s;display:inline-flex;position:relative;box-shadow:0 6px 10px -2px #00000040,0 4px 5px #00000024}.fab:hover{background:var(--flint-speed-dial-bg-hover,var(--flint-primary-color-hover));box-shadow:0 8px 14px -2px #0000004d,0 6px 8px #00000029}.fab:focus-visible{outline:3px solid var(--flint-primary-color);outline-offset:3px}.fab-icon{justify-content:center;align-items:center;transition:transform .25s cubic-bezier(.4,0,.2,1),opacity .2s;display:flex}.fab-icon.close-icon{opacity:0;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;transform:rotate(-45deg)}:host([open]) .fab-icon.open-icon{opacity:0;transform:rotate(45deg)}:host([open]) .fab-icon.close-icon{opacity:1;transform:rotate(0)}::slotted(flint-speed-dial-action){opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,transform .18s cubic-bezier(.4,0,.2,1),visibility .18s;transform:scale(.6)}:host([open]) ::slotted(flint-speed-dial-action){opacity:1;visibility:visible;pointer-events:auto;transform:scale(1)}.backdrop{z-index:-1;display:none;position:fixed;inset:0}:host([open]) .backdrop{display:block}:host([disabled]) .fab{opacity:.38;pointer-events:none;cursor:default}:host([hidden]){display:none!important}svg{display:block}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", d = class extends t {
+	constructor(...e) {
+		super(...e), this.name = "", this.tooltipTitle = "", this.tooltipOpen = !1, this.tooltipPlacement = "left", this.disabled = !1, this._hovered = !1;
+	}
+	static {
+		this.styles = i(l);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "menuitem");
+	}
+	_handleClick() {
+		this.disabled || this.dispatchEvent(new CustomEvent("flint-speed-dial-action-click", {
+			bubbles: !0,
+			composed: !0,
+			detail: {
+				name: this.name,
+				tooltipTitle: this.tooltipTitle
+			}
+		}));
+	}
+	get _tooltipVisible() {
+		return this.tooltipOpen || this._hovered;
+	}
+	render() {
+		return n`
+            <button
+                class="action-btn"
+                role="menuitem"
+                aria-label=${this.tooltipTitle}
+                ?disabled=${this.disabled}
+                @click=${this._handleClick}
+                @mouseenter=${() => {
+			this._hovered = !0;
+		}}
+                @mouseleave=${() => {
+			this._hovered = !1;
+		}}
+                @focus=${() => {
+			this._hovered = !0;
+		}}
+                @blur=${() => {
+			this._hovered = !1;
+		}}
+            >
+                <slot></slot>
+            </button>
+            ${this.tooltipTitle ? n`
+                <div class="tooltip ${c({ visible: this._tooltipVisible })}">
+                    ${this.tooltipTitle}
+                </div>
+            ` : r}
+        `;
+	}
+};
+e([o({ type: String })], d.prototype, "name", void 0), e([o({
+	type: String,
+	attribute: "tooltip-title"
+})], d.prototype, "tooltipTitle", void 0), e([o({
+	type: Boolean,
+	attribute: "tooltip-open"
+})], d.prototype, "tooltipOpen", void 0), e([o({
+	type: String,
+	reflect: !0,
+	attribute: "tooltip-placement"
+})], d.prototype, "tooltipPlacement", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "disabled", void 0), e([s()], d.prototype, "_hovered", void 0), d = e([a("flint-speed-dial-action")], d);
+var f = class extends t {
+	constructor(...e) {
+		super(...e), this.open = !1, this.defaultOpen = !1, this.direction = "up", this.hidden = !1, this.disabled = !1, this.persistentTooltips = !1, this.closeIcon = "", this.ariaLabel = "Speed dial", this.isTouch = !1, this._firstUpdate = !0, this._onHostKeyDown = (e) => {
+			if (this.disabled) return;
+			let { key: t } = e, n = this.shadowRoot?.activeElement?.classList.contains("fab") ?? !1, r = this._focusedActionIndex(), i = r !== -1;
+			if (t === "Escape") {
+				this.open && (e.preventDefault(), e.stopPropagation(), this._setOpen(!1), this._focusFab());
+				return;
+			}
+			if ((t === "Home" || t === "End") && this.open && i) {
+				e.preventDefault();
+				let n = this._actionButtons();
+				n.length && n[t === "Home" ? 0 : n.length - 1].focus();
+				return;
+			}
+			if ([
+				"ArrowUp",
+				"ArrowDown",
+				"ArrowLeft",
+				"ArrowRight"
+			].includes(t)) {
+				if (e.preventDefault(), !this.open) {
+					let e = t === "ArrowDown" || t === "ArrowRight";
+					this._setOpen(!0), this.updateComplete.then(() => {
+						let t = this._actionButtons();
+						t[e ? 0 : t.length - 1]?.focus();
+					});
+					return;
+				}
+				if (i) {
+					let e = t === "ArrowUp" || t === "ArrowLeft";
+					this._focusActionAt(e ? r - 1 : r + 1);
+				} else if (n) {
+					let e = this._actionButtons();
+					e[t === "ArrowDown" || t === "ArrowRight" ? 0 : e.length - 1]?.focus();
+				}
+			}
+		}, this._suppressNextOpen = !1, this._onHostFocusOut = (e) => {
+			this.open && !this.contains(e.relatedTarget) && this._setOpen(!1);
+		};
+	}
+	static {
+		this.styles = i(u);
+	}
+	willUpdate(e) {
+		this._firstUpdate && this.defaultOpen && (this.open = !0), this._firstUpdate &&= !1;
+	}
+	connectedCallback() {
+		super.connectedCallback(), !this.hasAttribute("is-touch") && typeof window.matchMedia == "function" && (this.isTouch = window.matchMedia("(hover: none) and (pointer: coarse)").matches), this.addEventListener("keydown", this._onHostKeyDown), this.addEventListener("focusout", this._onHostFocusOut);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("keydown", this._onHostKeyDown), this.removeEventListener("focusout", this._onHostFocusOut), super.disconnectedCallback();
+	}
+	_actionButtons() {
+		return Array.from(this.querySelectorAll("flint-speed-dial-action")).filter((e) => !e.hasAttribute("disabled")).map((e) => e.shadowRoot?.querySelector(".action-btn")).filter((e) => !!e);
+	}
+	_focusedActionIndex() {
+		return Array.from(this.querySelectorAll("flint-speed-dial-action")).findIndex((e) => e.shadowRoot?.activeElement?.classList.contains("action-btn"));
+	}
+	_focusActionAt(e) {
+		let t = this._actionButtons();
+		t.length && t[Math.max(0, Math.min(e, t.length - 1))]?.focus();
+	}
+	_focusFab() {
+		this.shadowRoot?.querySelector(".fab")?.focus();
+	}
+	_setOpen(e) {
+		this.open = e, this._updateActionTooltips(), this.dispatchEvent(new CustomEvent(e ? "flint-speed-dial-open" : "flint-speed-dial-close", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_toggle() {
+		this.disabled || this._setOpen(!this.open);
+	}
+	_onFabFocus(e) {
+		this._suppressNextOpen || e.relatedTarget !== null && !this.open && this._setOpen(!0);
+	}
+	_onActionClick() {
+		this._suppressNextOpen = !0, this._setOpen(!1), this._focusFab(), Promise.resolve().then(() => {
+			this._suppressNextOpen = !1;
+		});
+	}
+	_isReversedDirection() {
+		return this.direction === "up" || this.direction === "left";
+	}
+	_updateActionTooltips() {
+		let e = this.querySelectorAll("flint-speed-dial-action"), t = this.persistentTooltips || this.isTouch, n = this._tooltipPlacement(), r = this._isReversedDirection(), i = e.length;
+		e.forEach((e, a) => {
+			e.setAttribute("tooltip-placement", n), t && this.open ? e.setAttribute("tooltip-open", "") : e.removeAttribute("tooltip-open");
+			let o = r ? i - 1 - a : a, s = r ? a : i - 1 - a;
+			e.style.transitionDelay = this.open ? `${o * 40}ms` : `${s * 30}ms`;
+		});
+	}
+	_tooltipPlacement() {
+		switch (this.direction) {
+			case "up": return "left";
+			case "down": return "left";
+			case "left": return "top";
+			case "right": return "top";
+			default: return "left";
+		}
+	}
+	updated(e) {
+		(e.has("open") || e.has("direction") || e.has("persistentTooltips") || e.has("isTouch")) && this._updateActionTooltips();
+	}
+	render() {
+		return n`
+            <!-- Click-away backdrop -->
+            <div class="backdrop" @click=${() => this._setOpen(!1)}></div>
+
+            <!-- Actions — action-click events bubble up here -->
+            <div
+                id="sd-menu"
+                class="actions"
+                role="menu"
+                aria-label="Speed dial actions"
+                aria-hidden=${this.open ? "false" : "true"}
+            >
+                <slot
+                    @slotchange=${() => this._updateActionTooltips()}
+                    @flint-speed-dial-action-click=${this._onActionClick}
+                ></slot>
+            </div>
+
+            <!-- Main FAB -->
+            <button
+                class="fab"
+                aria-label=${this.ariaLabel}
+                aria-expanded=${this.open ? "true" : "false"}
+                aria-haspopup="menu"
+                aria-controls="sd-menu"
+                aria-disabled=${this.disabled ? "true" : r}
+                ?disabled=${this.disabled}
+                @click=${this._toggle}
+                @focus=${this._onFabFocus}
+            >
+                <!-- + icon: visible when closed -->
+                <span class="fab-icon open-icon">
+                    <slot name="icon">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
+                        </svg>
+                    </slot>
+                </span>
+
+                <!-- ✕ icon: visible when open -->
+                <span class="fab-icon close-icon">
+                    <slot name="open-icon">
+                        ${this.closeIcon ? n`<span style="line-height:1;font-size:1.5rem;">${this.closeIcon}</span>` : n`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>`}
+                    </slot>
+                </span>
+            </button>
+        `;
+	}
+};
+e([o({
+	type: Boolean,
+	reflect: !0
+})], f.prototype, "open", void 0), e([o({
+	type: Boolean,
+	attribute: "default-open"
+})], f.prototype, "defaultOpen", void 0), e([o({
+	type: String,
+	reflect: !0
+})], f.prototype, "direction", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], f.prototype, "hidden", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], f.prototype, "disabled", void 0), e([o({
+	type: Boolean,
+	attribute: "persistent-tooltips"
+})], f.prototype, "persistentTooltips", void 0), e([o({
+	type: String,
+	attribute: "close-icon"
+})], f.prototype, "closeIcon", void 0), e([o({
+	type: String,
+	attribute: "aria-label"
+})], f.prototype, "ariaLabel", void 0), e([o({
+	type: Boolean,
+	attribute: "is-touch"
+})], f.prototype, "isTouch", void 0), f = e([a("flint-speed-dial")], f);
+//#endregion
+export { d as n, f as t };

package/dist/_shared/flint-stack-GAeGPdLR.js

@@ -0,0 +1,98 @@
+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 { styleMap as s } from "lit/directives/style-map.js";
+//#region src/stack/flint-stack.css?inline
+var c = ":host{display:block}.stack-wrapper{box-sizing:border-box;display:flex}.stack-wrapper.direction-column,.stack-wrapper.direction-column-reverse{width:100%}::slotted(flint-divider){margin:0!important}.stack-wrapper.no-flex-gap.direction-column ::slotted(:not(:first-child)){margin-top:var(--flint-stack-spacing,0px)}.stack-wrapper.no-flex-gap.direction-column-reverse ::slotted(:not(:last-child)){margin-bottom:var(--flint-stack-spacing,0px)}.stack-wrapper.no-flex-gap.direction-row ::slotted(:not(:first-child)){margin-left:var(--flint-stack-spacing,0px)}.stack-wrapper.no-flex-gap.direction-row-reverse ::slotted(:not(:last-child)){margin-right:var(--flint-stack-spacing,0px)}", l, u = class extends t {
+	static {
+		l = this;
+	}
+	constructor(...e) {
+		super(...e), this.direction = "column", this.spacing = 0, this.useFlexGap = !0, this._currentWidth = typeof window < "u" ? window.innerWidth : 1200, this._onResize = () => {
+			this._currentWidth = window.innerWidth, this.requestUpdate();
+		};
+	}
+	static {
+		this.styles = r(c);
+	}
+	static {
+		this._breakPoints = {};
+	}
+	_getBreakpointValue(e, t) {
+		if (l._breakPoints[e]) return l._breakPoints[e];
+		if (typeof window < "u") {
+			let t = getComputedStyle(document.documentElement).getPropertyValue(`--flint-breakpoint-${e}`);
+			if (t && t.trim()) return l._breakPoints[e] = parseInt(t, 10), l._breakPoints[e];
+		}
+		return t;
+	}
+	connectedCallback() {
+		super.connectedCallback(), typeof window < "u" && (window.addEventListener("resize", this._onResize), this._currentWidth = window.innerWidth);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), typeof window < "u" && window.removeEventListener("resize", this._onResize);
+	}
+	updated(e) {
+		super.updated(e), this._updateDividers();
+	}
+	_updateDividers() {
+		let e = this._getBreakpoint(), t = this._resolveResponsive(this.direction, e);
+		if (!t) return;
+		let n = t.startsWith("row") ? "vertical" : "horizontal";
+		this.querySelectorAll("flint-divider").forEach((e) => {
+			e.getAttribute("orientation") !== n && e.setAttribute("orientation", n);
+		});
+	}
+	_getBreakpoint() {
+		let e = this._currentWidth;
+		return e >= this._getBreakpointValue("xl", 1536) ? "xl" : e >= this._getBreakpointValue("lg", 1200) ? "lg" : e >= this._getBreakpointValue("md", 900) ? "md" : e >= this._getBreakpointValue("sm", 600) ? "sm" : "xs";
+	}
+	_resolveResponsive(e, t) {
+		if (typeof e == "object" && e && !Array.isArray(e)) {
+			let n = [
+				"xs",
+				"sm",
+				"md",
+				"lg",
+				"xl"
+			], r = n.indexOf(t);
+			for (let t = r; t >= 0; t--) {
+				let r = e[n[t]];
+				if (r !== void 0) return r;
+			}
+			let i = e, a = i.xs;
+			return a === void 0 ? i[Object.keys(e)[0]] : a;
+		}
+		return e;
+	}
+	_getSpacingPx(e) {
+		return typeof e == "number" ? `${e * 8}px` : e;
+	}
+	render() {
+		let e = this._getBreakpoint(), t = this._resolveResponsive(this.direction, e), r = this._resolveResponsive(this.spacing, e), i = this._getSpacingPx(r), a = t ?? "column", o = a.startsWith("column") ? "stretch" : "center", c = {
+			"flex-direction": a,
+			"align-items": this.alignItems || o,
+			"justify-content": this.justifyContent || "flex-start",
+			gap: this.useFlexGap ? i : "0",
+			"--flint-stack-spacing": i
+		};
+		return n`
+      <div
+        class="stack-wrapper direction-${t} ${this.useFlexGap ? "" : "no-flex-gap"}"
+        style=${s(c)}
+      >
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+e([a({ converter: { fromAttribute: (e) => {
+	if (!e) return "column";
+	try {
+		return JSON.parse(e);
+	} catch {
+		return e;
+	}
+} } })], u.prototype, "direction", void 0), e([a({ type: Object })], u.prototype, "spacing", void 0), e([a({ type: String })], u.prototype, "alignItems", void 0), e([a({ type: String })], u.prototype, "justifyContent", void 0), e([a({ type: Boolean })], u.prototype, "useFlexGap", void 0), e([o()], u.prototype, "_currentWidth", void 0), u = l = e([i("flint-stack")], u);
+//#endregion
+export { u as t };