@getufy/flint-ui 0.1.0

package/dist/_shared/flint-format-number-g8MkggyM.js

@@ -0,0 +1,68 @@
+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 { ifDefined as o } from "lit/directives/if-defined.js";
+//#region src/format-number/flint-format-number.css?inline
+var s = ":host{display:inline}span{font:inherit;color:var(--flint-format-number-color,inherit);font-size:var(--flint-format-number-font-size,inherit);font-weight:var(--flint-format-number-font-weight,inherit);font-family:var(--flint-format-number-font-family,inherit)}span[data-sign=negative]{color:var(--flint-format-number-negative-color,var(--flint-format-number-color,inherit))}span[data-sign=positive]{color:var(--flint-format-number-positive-color,var(--flint-format-number-color,inherit))}", c = class extends t {
+	constructor(...e) {
+		super(...e), this.value = 0, this.type = "decimal", this.noGrouping = !1, this.currency = "USD", this.currencyDisplay = "symbol", this.notation = "standard", this.compactDisplay = "short", this.signDisplay = "auto", this.unit = "", this.unitDisplay = "short", this.minimumIntegerDigits = void 0, this.minimumFractionDigits = void 0, this.maximumFractionDigits = void 0, this.minimumSignificantDigits = void 0, this.maximumSignificantDigits = void 0, this.lang = "";
+	}
+	static {
+		this.styles = r(s);
+	}
+	get formattedValue() {
+		return this._format();
+	}
+	_sign() {
+		if (!(isNaN(this.value) || !isFinite(this.value))) return this.value < 0 ? "negative" : this.value > 0 ? "positive" : "zero";
+	}
+	_format() {
+		let e = { style: this.type };
+		this.noGrouping && (e.useGrouping = !1), e.notation = this.notation, this.notation === "compact" && (e.compactDisplay = this.compactDisplay), this.signDisplay !== "auto" && (e.signDisplay = this.signDisplay), this.type === "currency" && (e.currency = this.currency, e.currencyDisplay = this.currencyDisplay), this.type === "unit" && this.unit && (e.unit = this.unit, e.unitDisplay = this.unitDisplay), this.minimumSignificantDigits !== void 0 || this.maximumSignificantDigits !== void 0 ? (this.minimumSignificantDigits !== void 0 && (e.minimumSignificantDigits = this.minimumSignificantDigits), this.maximumSignificantDigits !== void 0 && (e.maximumSignificantDigits = this.maximumSignificantDigits)) : (this.minimumIntegerDigits !== void 0 && (e.minimumIntegerDigits = this.minimumIntegerDigits), this.minimumFractionDigits !== void 0 && (e.minimumFractionDigits = this.minimumFractionDigits), this.maximumFractionDigits !== void 0 && (e.maximumFractionDigits = this.maximumFractionDigits));
+		let t = this.lang || document.documentElement.lang || navigator.language || "en";
+		try {
+			return new Intl.NumberFormat(t, e).format(this.value);
+		} catch {
+			return String(this.value);
+		}
+	}
+	render() {
+		return n`<span data-sign=${o(this._sign())}>${this._format()}</span>`;
+	}
+};
+e([a({ type: Number })], c.prototype, "value", void 0), e([a({ type: String })], c.prototype, "type", void 0), e([a({
+	type: Boolean,
+	attribute: "no-grouping"
+})], c.prototype, "noGrouping", void 0), e([a({ type: String })], c.prototype, "currency", void 0), e([a({
+	type: String,
+	attribute: "currency-display"
+})], c.prototype, "currencyDisplay", void 0), e([a({ type: String })], c.prototype, "notation", void 0), e([a({
+	type: String,
+	attribute: "compact-display"
+})], c.prototype, "compactDisplay", void 0), e([a({
+	type: String,
+	attribute: "sign-display"
+})], c.prototype, "signDisplay", void 0), e([a({ type: String })], c.prototype, "unit", void 0), e([a({
+	type: String,
+	attribute: "unit-display"
+})], c.prototype, "unitDisplay", void 0), e([a({
+	type: Number,
+	attribute: "minimum-integer-digits"
+})], c.prototype, "minimumIntegerDigits", void 0), e([a({
+	type: Number,
+	attribute: "minimum-fraction-digits"
+})], c.prototype, "minimumFractionDigits", void 0), e([a({
+	type: Number,
+	attribute: "maximum-fraction-digits"
+})], c.prototype, "maximumFractionDigits", void 0), e([a({
+	type: Number,
+	attribute: "minimum-significant-digits"
+})], c.prototype, "minimumSignificantDigits", void 0), e([a({
+	type: Number,
+	attribute: "maximum-significant-digits"
+})], c.prototype, "maximumSignificantDigits", void 0), e([a({
+	attribute: "lang",
+	reflect: !0
+})], c.prototype, "lang", void 0), c = e([i("flint-format-number")], c);
+//#endregion
+export { c as t };

package/dist/_shared/flint-grid-ClCXGz3k.js

@@ -0,0 +1,177 @@
+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";
+import { styleMap as c } from "lit/directives/style-map.js";
+//#region src/grid/flint-grid.css?inline
+var l = ":host{display:block}.grid-wrapper{box-sizing:border-box;display:block}.grid-wrapper.container{flex-wrap:wrap;width:100%;display:flex}.direction-row{flex-direction:row}.direction-row-reverse{flex-direction:row-reverse}.direction-column{flex-direction:column}.direction-column-reverse{flex-direction:column-reverse}.wrap-nowrap{flex-wrap:nowrap}.wrap-wrap-reverse{flex-wrap:wrap-reverse}.grid-item{box-sizing:border-box;margin:0}", u = class extends t {
+	constructor(...e) {
+		super(...e), this.container = !1, this.direction = "row", this.wrap = "wrap", this.columns = 12, this.spacing = 0, this._currentWidth = typeof window < "u" ? window.innerWidth : 1200, this._onResize = () => {
+			this._currentWidth = window.innerWidth;
+		}, this._breakpointCache = {};
+	}
+	static {
+		this.styles = r(l);
+	}
+	_getBreakpointValue(e, t) {
+		if (this._breakpointCache[e] !== void 0) return this._breakpointCache[e];
+		if (typeof window < "u") {
+			let t = getComputedStyle(document.documentElement).getPropertyValue(`--flint-breakpoint-${e}`);
+			if (t && t.trim()) return this._breakpointCache[e] = parseInt(t, 10), this._breakpointCache[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);
+	}
+	_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";
+	}
+	_getEffectiveSize(e) {
+		let t = [
+			"xs",
+			"sm",
+			"md",
+			"lg",
+			"xl"
+		], n = t.indexOf(e);
+		for (let e = n; e >= 0; e--) {
+			let n = this[t[e]];
+			if (n !== void 0) return typeof n == "string" && !isNaN(Number(n)) && n.trim() !== "" ? Number(n) : n === "true" ? !0 : n === "false" ? !1 : n;
+		}
+	}
+	_getEffectiveOffset(e) {
+		if (!this.offset) return;
+		let t = [
+			"xs",
+			"sm",
+			"md",
+			"lg",
+			"xl"
+		], n = t.indexOf(e);
+		for (let e = n; e >= 0; e--) {
+			let n = this.offset[t[e]];
+			if (n !== void 0) return typeof n == "string" && !isNaN(Number(n)) && n.trim() !== "" ? Number(n) : n;
+		}
+	}
+	_resolveResponsive(e, t) {
+		if (typeof e == "object" && 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;
+			}
+			return 0;
+		}
+		return typeof e == "string" && !isNaN(Number(e)) && e.trim() !== "" ? Number(e) : e;
+	}
+	_resolveResponsiveOrder(e, t) {
+		if (typeof e == "object" && 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;
+			}
+			return;
+		}
+		return e;
+	}
+	_toPx(e) {
+		return typeof e == "number" ? `${e * 8}px` : e;
+	}
+	_getSpacingStyles(e) {
+		if (!this.container) return {};
+		let t = this._resolveResponsive(this.spacing, e), n = this.rowSpacing === void 0 ? t : this._resolveResponsive(this.rowSpacing, e), r = this.columnSpacing === void 0 ? t : this._resolveResponsive(this.columnSpacing, e);
+		return { gap: `${this._toPx(n)} ${this._toPx(r)}` };
+	}
+	_getEffectiveColumns() {
+		if (this.container) return this.columns;
+		let e = getComputedStyle(this).getPropertyValue("--flint-grid-columns").trim();
+		return e && !isNaN(Number(e)) ? Number(e) : this.columns;
+	}
+	_getItemStyles(e) {
+		let t = this.xs !== void 0 || this.sm !== void 0 || this.md !== void 0 || this.lg !== void 0 || this.xl !== void 0, n = !!this.offset, r = this.order !== void 0;
+		if (!t && !n && !r) return {};
+		let i = this._getEffectiveSize(e), a = this._getEffectiveOffset(e), o = this._getEffectiveColumns(), s = {};
+		if (i === !0) s["flex-grow"] = "1", s["flex-basis"] = "0%", s["max-width"] = "100%";
+		else if (i === "auto") s["flex-grow"] = "0", s["flex-basis"] = "auto", s.width = "auto", s["max-width"] = "none";
+		else if (typeof i == "number") {
+			let e = i / o * 100;
+			s["flex-grow"] = "0", s["flex-basis"] = `calc(${e}% - var(--flint-grid-column-gap, 0px) * ${(o - i) / o})`, s["max-width"] = `calc(${e}% - var(--flint-grid-column-gap, 0px) * ${(o - i) / o})`;
+		} else this.container || (s["flex-grow"] = "0", s["flex-basis"] = "auto", s.width = "100%");
+		if (a === "auto" ? s["margin-left"] = "auto" : typeof a == "number" && (s["margin-left"] = `${a / o * 100}%`), this.order !== void 0) {
+			let t = this._resolveResponsiveOrder(this.order, e);
+			t !== void 0 && (s.order = String(t));
+		}
+		return s;
+	}
+	updated(e) {
+		super.updated(e), this._applyItemStyles();
+	}
+	_applyItemStyles() {
+		let e = this._getBreakpoint(), t = this._getItemStyles(e);
+		if (this.style.flexGrow = "", this.style.flexBasis = "", this.style.maxWidth = "", this.style.width = "", this.style.marginLeft = "", this.style.order = "", Object.entries(t).forEach(([e, t]) => {
+			this.style.setProperty(e, t);
+		}), this.container) {
+			let t = this._getSpacingStyles(e);
+			if (t.gap) {
+				let e = t.gap.split(" "), n = e.length === 2 ? e[1] : e[0];
+				this.style.setProperty("--flint-grid-column-gap", n);
+			}
+			this.style.setProperty("--flint-grid-columns", String(this.columns));
+		}
+	}
+	render() {
+		let e = this._getBreakpoint(), t = {
+			...this._getSpacingStyles(e),
+			"align-items": this.alignItems || "",
+			"justify-content": this.justifyContent || ""
+		};
+		return n`
+      <div class=${s({
+			"grid-wrapper": !0,
+			container: this.container,
+			[`direction-${this.direction}`]: this.container,
+			[`wrap-${this.wrap}`]: this.container && this.wrap !== "wrap"
+		})} style=${c(t)}>
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+e([a({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "container", void 0), e([a({
+	type: String,
+	reflect: !0
+})], u.prototype, "direction", void 0), e([a({
+	type: String,
+	reflect: !0
+})], u.prototype, "wrap", void 0), e([a({
+	type: String,
+	attribute: "align-items",
+	reflect: !0
+})], u.prototype, "alignItems", void 0), e([a({
+	type: String,
+	attribute: "justify-content",
+	reflect: !0
+})], u.prototype, "justifyContent", void 0), e([a({ type: Number })], u.prototype, "columns", void 0), e([a({ type: Object })], u.prototype, "spacing", void 0), e([a({ type: Object })], u.prototype, "rowSpacing", void 0), e([a({ type: Object })], u.prototype, "columnSpacing", void 0), e([a()], u.prototype, "xs", void 0), e([a()], u.prototype, "sm", void 0), e([a()], u.prototype, "md", void 0), e([a()], u.prototype, "lg", void 0), e([a()], u.prototype, "xl", void 0), e([a({ type: Object })], u.prototype, "offset", void 0), e([a({ type: Object })], u.prototype, "order", void 0), e([o()], u.prototype, "_currentWidth", void 0), u = e([i("flint-grid")], u);
+//#endregion
+export { u as t };

package/dist/_shared/flint-hover-card-fSMVR0xj.js

@@ -0,0 +1,125 @@
+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/hover-card/flint-hover-card-trigger.css?inline
+var o = ":host{display:inline-block}", s = ":host{z-index:var(--flint-hovercard-z-index,1000);opacity:0;visibility:hidden;transition:opacity var(--flint-hovercard-duration,.15s) ease, visibility var(--flint-hovercard-duration,.15s) ease;pointer-events:none;display:block;position:absolute}:host([open]){opacity:1;visibility:visible;pointer-events:auto}.card{background:var(--flint-hovercard-bg,var(--flint-surface-1));border:1px solid var(--flint-hovercard-border-color,var(--flint-border-color));border-radius:var(--flint-hovercard-radius,8px);box-shadow:var(--flint-hovercard-shadow,0 4px 16px #0000001f);padding:var(--flint-hovercard-padding,16px);min-width:var(--flint-hovercard-min-width,200px);font-family:var(--flint-font-family);font-size:var(--flint-hovercard-font-size,.875rem);color:var(--flint-hovercard-color,var(--flint-text-color));line-height:1.5}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", c = ":host{display:inline-block;position:relative}", l = class extends t {
+	constructor(...e) {
+		super(...e), this._handleMouseEnter = () => this._getRoot()?.handleTriggerEnter(), this._handleMouseLeave = () => this._getRoot()?.handleTriggerLeave(), this._handleFocusIn = () => this._getRoot()?.handleTriggerEnter(), this._handleFocusOut = () => this._getRoot()?.handleTriggerLeave();
+	}
+	static {
+		this.styles = r(o);
+	}
+	_getRoot() {
+		return this.closest("flint-hover-card");
+	}
+	render() {
+		return n`
+            <div
+                @mouseenter=${this._handleMouseEnter}
+                @mouseleave=${this._handleMouseLeave}
+                @focusin=${this._handleFocusIn}
+                @focusout=${this._handleFocusOut}
+            >
+                <slot></slot>
+            </div>
+        `;
+	}
+};
+l = e([i("flint-hover-card-trigger")], l);
+var u = class extends t {
+	constructor(...e) {
+		super(...e), this.side = "bottom", this.align = "center", this.open = !1, this._handleMouseEnter = () => this._getRoot()?.handleContentEnter(), this._handleMouseLeave = () => this._getRoot()?.handleContentLeave();
+	}
+	static {
+		this.styles = r(s);
+	}
+	_getRoot() {
+		return this.closest("flint-hover-card");
+	}
+	firstUpdated() {
+		this._applyPosition();
+	}
+	updated(e) {
+		(e.has("side") || e.has("align")) && this._applyPosition();
+	}
+	_applyPosition() {
+		let { side: e, align: t } = this, n = "var(--flint-hovercard-offset, 8px)";
+		this.style.removeProperty("top"), this.style.removeProperty("bottom"), this.style.removeProperty("left"), this.style.removeProperty("right"), this.style.removeProperty("transform"), e === "bottom" || e === "top" ? (this.style.setProperty(e === "bottom" ? "top" : "bottom", `calc(100% + ${n})`), t === "start" ? this.style.setProperty("left", "0") : t === "end" ? this.style.setProperty("right", "0") : (this.style.setProperty("left", "50%"), this.style.setProperty("transform", "translateX(-50%)"))) : (this.style.setProperty(e === "right" ? "left" : "right", `calc(100% + ${n})`), t === "start" ? this.style.setProperty("top", "0") : t === "end" ? this.style.setProperty("bottom", "0") : (this.style.setProperty("top", "50%"), this.style.setProperty("transform", "translateY(-50%)")));
+	}
+	render() {
+		return n`
+            <div
+                class="card"
+                @mouseenter=${this._handleMouseEnter}
+                @mouseleave=${this._handleMouseLeave}
+            >
+                <slot></slot>
+            </div>
+        `;
+	}
+};
+e([a({
+	type: String,
+	reflect: !0
+})], u.prototype, "side", void 0), e([a({
+	type: String,
+	reflect: !0
+})], u.prototype, "align", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "open", void 0), u = e([i("flint-hover-card-content")], u);
+var d = class extends t {
+	constructor(...e) {
+		super(...e), this.openDelay = 700, this.closeDelay = 300, this._isOpen = !1, this._openTimer = null, this._closeTimer = null;
+	}
+	static {
+		this.styles = r(c);
+	}
+	get isOpen() {
+		return this._isOpen;
+	}
+	handleTriggerEnter() {
+		this._cancelClose(), this._isOpen || (this._openTimer = setTimeout(() => this._setOpen(!0), this.openDelay));
+	}
+	handleTriggerLeave() {
+		this._cancelOpen(), this._cancelClose(), this._closeTimer = setTimeout(() => this._setOpen(!1), this.closeDelay);
+	}
+	handleContentEnter() {
+		this._cancelClose();
+	}
+	handleContentLeave() {
+		this._cancelClose(), this._closeTimer = setTimeout(() => this._setOpen(!1), this.closeDelay);
+	}
+	_cancelOpen() {
+		this._openTimer !== null && (clearTimeout(this._openTimer), this._openTimer = null);
+	}
+	_cancelClose() {
+		this._closeTimer !== null && (clearTimeout(this._closeTimer), this._closeTimer = null);
+	}
+	_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
+		})));
+	}
+	_syncChildren() {
+		this.querySelectorAll("flint-hover-card-content").forEach((e) => {
+			e.closest("flint-hover-card") === this && (e.open = this._isOpen);
+		});
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._cancelOpen(), this._cancelClose();
+	}
+	render() {
+		return n`<slot @slotchange=${() => this._syncChildren()}></slot>`;
+	}
+};
+e([a({
+	type: Number,
+	attribute: "open-delay"
+})], d.prototype, "openDelay", void 0), e([a({
+	type: Number,
+	attribute: "close-delay"
+})], d.prototype, "closeDelay", void 0), d = e([i("flint-hover-card")], d);
+//#endregion
+export { u as n, l as r, d as t };

package/dist/_shared/flint-image-comparer-DDF_wCjc.js

@@ -0,0 +1,116 @@
+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/image-comparer/flint-image-comparer.css?inline
+var o = ":host{-webkit-user-select:none;user-select:none;touch-action:none;border-radius:var(--flint-image-comparer-border-radius,var(--flint-border-radius-md));aspect-ratio:var(--flint-image-comparer-aspect-ratio,16 / 9);display:block;position:relative;overflow:hidden}.base{width:100%;height:100%;position:relative;overflow:hidden}.before,.after{position:absolute;inset:0;overflow:hidden}.after ::slotted(img),.after ::slotted(svg),.before ::slotted(img),.before ::slotted(svg){object-fit:cover;pointer-events:none;width:100%;max-width:none;height:100%;display:block}.before{z-index:1}.divider{z-index:2;height:100%;width:var(--flint-image-comparer-divider-width,2px);background:var(--flint-image-comparer-divider-color,var(--flint-color-white));pointer-events:none;position:absolute;top:0;transform:translate(-50%);box-shadow:0 0 4px #0000004d}.handle{z-index:3;width:var(--flint-image-comparer-handle-size,40px);height:var(--flint-image-comparer-handle-size,40px);border-radius:var(--flint-border-radius-full);background:var(--flint-image-comparer-handle-bg,var(--flint-color-white));border:2px solid var(--flint-image-comparer-handle-border-color,#00000026);box-shadow:var(--flint-shadow-md);cursor:ew-resize;outline:none;justify-content:center;align-items:center;transition:box-shadow .15s;display:flex;position:absolute;top:50%;transform:translate(-50%,-50%)}.handle:focus-visible{box-shadow:var(--flint-shadow-md), 0 0 0 3px var(--flint-primary-focus-ring)}.handle:hover{box-shadow:var(--flint-shadow-lg)}.handle svg{width:20px;height:20px;color:var(--flint-image-comparer-handle-icon-color,var(--flint-text-color-muted));flex-shrink:0}:host([disabled]){opacity:.5;pointer-events:none}@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.position = 50, this.disabled = !1, this._dragging = !1, this._onPointerDown = (e) => {
+			this.disabled || (e.preventDefault(), this._dragging = !0, this.setPointerCapture(e.pointerId), this._setPosition(this._getPositionFromPointer(e)), this.shadowRoot?.querySelector(".handle")?.focus(), this.addEventListener("pointermove", this._onPointerMove), this.addEventListener("pointerup", this._onPointerUp), this.addEventListener("pointercancel", this._onPointerUp));
+		}, this._onPointerMove = (e) => {
+			if (this._dragging) {
+				if (e.buttons === 0) {
+					this._stopDrag();
+					return;
+				}
+				this._setPosition(this._getPositionFromPointer(e));
+			}
+		}, this._onPointerUp = (e) => {
+			this.releasePointerCapture(e.pointerId), this._stopDrag();
+		}, this._onKeyDown = (e) => {
+			if (this.disabled) return;
+			let t = e.shiftKey ? 10 : 1, n = !0;
+			switch (e.key) {
+				case "ArrowLeft":
+					this._setPosition(this.position - t);
+					break;
+				case "ArrowRight":
+					this._setPosition(this.position + t);
+					break;
+				case "Home":
+					this._setPosition(0);
+					break;
+				case "End":
+					this._setPosition(100);
+					break;
+				default: n = !1;
+			}
+			n && (e.preventDefault(), e.stopPropagation());
+		};
+	}
+	static {
+		this.styles = r(o);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("pointerdown", this._onPointerDown), this.addEventListener("keydown", this._onKeyDown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("pointerdown", this._onPointerDown), this.removeEventListener("keydown", this._onKeyDown), this._stopDrag();
+	}
+	_clamp(e) {
+		return Math.min(100, Math.max(0, e));
+	}
+	_setPosition(e) {
+		let t = this._clamp(e);
+		t !== this.position && (this.position = t, this.dispatchEvent(new CustomEvent("flint-image-comparer-change", {
+			detail: { position: t },
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	_getPositionFromPointer(e) {
+		let t = this.getBoundingClientRect();
+		return (e.clientX - t.left) / t.width * 100;
+	}
+	_stopDrag() {
+		this._dragging = !1, this.removeEventListener("pointermove", this._onPointerMove), this.removeEventListener("pointerup", this._onPointerUp), this.removeEventListener("pointercancel", this._onPointerUp);
+	}
+	render() {
+		let e = this._clamp(this.position);
+		return n`
+            <div class="base" part="base">
+                <div class="after" part="after">
+                    <slot name="after"></slot>
+                </div>
+
+                <div
+                    class="before"
+                    part="before"
+                    style="clip-path: inset(0 ${100 - e}% 0 0)"
+                >
+                    <slot name="before"></slot>
+                </div>
+
+                <div
+                    class="divider"
+                    part="divider"
+                    style="left: ${e}%"
+                ></div>
+
+                <div
+                    class="handle"
+                    part="handle"
+                    role="slider"
+                    tabindex="${this.disabled ? -1 : 0}"
+                    aria-label="Image comparison slider"
+                    aria-valuemin="0"
+                    aria-valuemax="100"
+                    aria-valuenow="${e}"
+                    aria-disabled="${this.disabled ? "true" : "false"}"
+                    style="left: ${e}%"
+                >
+                    <slot name="handle">
+                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                            <path d="M15 18l6-6-6-6M9 6l-6 6 6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
+                        </svg>
+                    </slot>
+                </div>
+            </div>
+        `;
+	}
+};
+e([a({ type: Number })], s.prototype, "position", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "disabled", void 0), s = e([i("flint-image-comparer")], s);
+//#endregion
+export { s as t };

package/dist/_shared/flint-image-list-CS-XDM0T.js

@@ -0,0 +1,24 @@
+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 { styleMap as o } from "lit/directives/style-map.js";
+//#region src/image-list/flint-image-list.css?inline
+var s = ":host{display:block}.image-list{box-sizing:border-box;display:grid;overflow:hidden}.variant-standard,.variant-quilted,.variant-woven{grid-auto-rows:var(--flint-image-list-row-height,164px)}.variant-masonry{display:block}", c = class extends t {
+	constructor(...e) {
+		super(...e), this.variant = "standard", this.cols = 3, this.gap = 4, this.rowHeight = 164, this.autoRows = !1;
+	}
+	static {
+		this.styles = r(s);
+	}
+	render() {
+		let e = this.variant === "masonry", t = {};
+		return e ? (t["column-count"] = String(this.cols), t["column-gap"] = `${this.gap}px`) : (t["grid-template-columns"] = `repeat(${this.cols}, 1fr)`, t.gap = `${this.gap}px`, t["--flint-image-list-row-height"] = `${this.rowHeight}px`, t["grid-auto-rows"] = this.autoRows ? "auto" : `${this.rowHeight}px`), t["--flint-image-list-gap"] = `${this.gap}px`, n`
+      <ul class="image-list variant-${this.variant}" style="${o(t)}" role="list">
+        <slot></slot>
+      </ul>
+    `;
+	}
+};
+e([a({ type: String })], c.prototype, "variant", void 0), e([a({ type: Number })], c.prototype, "cols", void 0), e([a({ type: Number })], c.prototype, "gap", void 0), e([a({ type: Number })], c.prototype, "rowHeight", void 0), e([a({ type: Boolean })], c.prototype, "autoRows", void 0), c = e([i("flint-image-list")], c);
+//#endregion
+export { c as t };

package/dist/_shared/flint-image-list-item-CE1j29Ay.js

@@ -0,0 +1,41 @@
+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/image-list/flint-image-list-item.css?inline
+var o = ":host{display:block;position:relative;overflow:hidden}:host([bar-position=below]){flex-direction:column;display:flex;overflow:visible}:host(.masonry){break-inside:avoid;margin-bottom:var(--flint-image-list-gap,4px)}.item-wrapper{width:100%;height:100%;position:relative;overflow:hidden}:host([bar-position=below]) .item-wrapper{flex:auto;overflow:hidden}:host(.masonry) .item-wrapper{height:auto}::slotted(img){object-fit:var(--flint-image-fit,cover);width:100%;height:100%;display:block}:host(.masonry) ::slotted(img){height:auto}::slotted(flint-image-list-item-bar){position:absolute;bottom:0;left:0;right:0}::slotted(flint-image-list-item-bar[position=top]){top:0;bottom:auto}:host([bar-position=below]) ::slotted(flint-image-list-item-bar){position:static}", s = class extends t {
+	constructor(...e) {
+		super(...e), this.rows = 1, this.cols = 1, this.barPosition = "overlay", this.weave = "odd", this.aspectRatio = "auto", this.fit = "cover";
+	}
+	static {
+		this.styles = r(o);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._applyHostStyles();
+	}
+	updated(e) {
+		super.updated(e), this._applyHostStyles();
+	}
+	_applyHostStyles() {
+		let e = this.closest("flint-image-list")?.getAttribute("variant");
+		e === "woven" ? this.style.gridRow = this.weave === "odd" ? "span 2" : "span 1" : this.rows > 1 ? this.style.gridRow = `span ${this.rows}` : this.style.gridRow = "", this.cols > 1 ? this.style.gridColumn = `span ${this.cols}` : this.style.gridColumn = "", e === "masonry" ? this.classList.add("masonry") : this.classList.remove("masonry"), this.style.aspectRatio = this.aspectRatio === "auto" ? "" : this.aspectRatio, this.style.setProperty("--flint-image-fit", this.fit);
+	}
+	render() {
+		return n`
+      <div class="item-wrapper">
+        <slot></slot>
+      </div>
+      <slot name="bar"></slot>
+    `;
+	}
+};
+e([a({ type: Number })], s.prototype, "rows", void 0), e([a({ type: Number })], s.prototype, "cols", void 0), e([a({
+	type: String,
+	attribute: "bar-position",
+	reflect: !0
+})], s.prototype, "barPosition", void 0), e([a({ type: String })], s.prototype, "weave", void 0), e([a({
+	type: String,
+	attribute: "aspect-ratio",
+	reflect: !0
+})], s.prototype, "aspectRatio", void 0), e([a({ type: String })], s.prototype, "fit", void 0), s = e([i("flint-image-list-item")], s);
+//#endregion
+export { s as t };

package/dist/_shared/flint-image-list-item-bar-BZfSoVrZ.js

@@ -0,0 +1,31 @@
+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/image-list/flint-image-list-item-bar.css?inline
+var o = ":host{box-sizing:border-box;color:var(--flint-image-bar-overlay-text,var(--flint-text-color-on-primary));font-family:var(--flint-font-family);background:linear-gradient(#0000 0%,#0000004d 30%,#000000b3 100%);padding:12px 12px 8px;display:block}:host([position=top]){background:linear-gradient(#000000b3 0%,#0000004d 70%,#0000 100%);padding:8px 12px 12px}:host([position=below]){background:var(--flint-surface-1);color:var(--flint-text-color);border-top:1px solid var(--flint-border-color);padding:8px 12px}.bar-inner{align-items:center;gap:8px;display:flex}.bar-text{flex:1;min-width:0}.bar-title{text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;font-weight:600;line-height:1.3;overflow:hidden}.bar-subtitle{opacity:.8;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;font-size:.75rem;font-weight:400;overflow:hidden}.bar-action{flex-shrink:0;align-items:center;display:flex}::slotted([slot=action]){color:var(--flint-image-bar-overlay-text,var(--flint-text-color-on-primary))}:host([position=below]) ::slotted([slot=action]){color:var(--flint-text-color)}", s = class extends t {
+	constructor(...e) {
+		super(...e), this.position = "bottom";
+	}
+	static {
+		this.styles = r(o);
+	}
+	render() {
+		return n`
+      <div class="bar-inner">
+        <div class="bar-text">
+          <div class="bar-title"><slot></slot></div>
+          <div class="bar-subtitle"><slot name="subtitle"></slot></div>
+        </div>
+        <div class="bar-action">
+          <slot name="action"></slot>
+        </div>
+      </div>
+    `;
+	}
+};
+e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "position", void 0), s = e([i("flint-image-list-item-bar")], s);
+//#endregion
+export { s as t };