@getufy/flint-ui 0.1.0

package/dist/_shared/flint-single-input-date-range-field-BVGf6515.js

@@ -0,0 +1,314 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { EMPTY_RANGE as t, isoToDate as n } from "../date-range-picker/date-range-helpers.js";
+import { LitElement as r, html as i, nothing as a, unsafeCSS as o } from "lit";
+import { customElement as s, property as c, state as l } from "lit/decorators.js";
+import { classMap as u } from "lit/directives/class-map.js";
+//#region src/date-range-picker/flint-single-input-date-range-field.css?inline
+var d = ":host{font-family:var(--flint-font-family);display:inline-block}.field-label{letter-spacing:.01em;color:var(--flint-text-color-muted);margin-bottom:5px;font-size:.75rem;font-weight:500;transition:color .15s;display:block}:host([error]) .field-label{color:var(--flint-error-color)}.field-label.focused{color:var(--flint-primary-color)}.field-container{background:var(--flint-input-bg);border:1.5px solid var(--flint-border-color);border-radius:var(--flint-border-radius-md);cursor:text;box-sizing:border-box;align-items:center;gap:4px;min-width:300px;height:44px;padding:0 10px;transition:border-color .15s,box-shadow .15s;display:inline-flex}.field-container.focused{border-color:var(--flint-primary-color);box-shadow:0 0 0 3px var(--flint-primary-focus-ring)}:host([error]) .field-container{border-color:var(--flint-error-color)}:host([error]) .field-container.focused{box-shadow:0 0 0 3px var(--flint-error-focus-ring)}:host([disabled]) .field-container{background:var(--flint-input-disabled-bg);border-color:var(--flint-border-color);cursor:not-allowed}:host([readonly]) .field-container{cursor:default}.segments{outline:none;flex:1;align-items:center;gap:1px;min-height:100%;display:flex}.segment{font-variant-numeric:tabular-nums;color:var(--flint-text-color);cursor:text;-webkit-user-select:none;user-select:none;border-radius:4px;justify-content:center;align-items:center;min-width:2ch;padding:2px 3px;font-size:.9375rem;line-height:1;transition:background .1s;display:inline-flex}.segment.placeholder{color:var(--flint-text-color-muted)}.segment.active{background:var(--flint-primary-color);color:var(--flint-text-color-on-primary);border-radius:3px}.segment-year{min-width:4ch}:host([disabled]) .segment{color:var(--flint-text-color-muted)}:host([disabled]) .segment.active{background:var(--flint-border-color);color:var(--flint-text-color-muted)}.separator{color:var(--flint-text-color-muted);pointer-events:none;padding:0 1px;font-size:.9375rem;line-height:1}.range-dash{color:var(--flint-text-color-muted);pointer-events:none;-webkit-user-select:none;user-select:none;padding:0 6px;font-size:.9375rem}.field-actions{align-items:center;gap:2px;margin-left:auto;display:flex}.icon-btn{cursor:pointer;width:24px;height:24px;color:var(--flint-text-color-muted);background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:.875rem;transition:background .12s,color .12s;display:flex}.icon-btn:hover{background:var(--flint-hover-color)}:host([disabled]) .icon-btn{pointer-events:none;opacity:0}.helper{color:var(--flint-text-color-muted);margin-top:5px;font-size:.75rem;display:block}:host([error]) .helper{color:var(--flint-error-color)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", f = [
+	"start-month",
+	"start-day",
+	"start-year",
+	"end-month",
+	"end-day",
+	"end-year"
+];
+function p(e, t, n) {
+	return Math.min(Math.max(e, t), n);
+}
+function m(e, t) {
+	return e < 1 || e > 12 ? 31 : new Date(t || 2e3, e, 0).getDate();
+}
+var h = class extends r {
+	constructor(...e) {
+		super(...e), this.value = [...t], this.label = "", this.name = "", this.min = "", this.max = "", this.disabled = !1, this.readonly = !1, this.error = !1, this.helperText = "", this._sm = null, this._sd = null, this._sy = null, this._em = null, this._ed = null, this._ey = null, this._active = null, this._focused = !1, this._buf = "";
+	}
+	static {
+		this.styles = o(d);
+	}
+	willUpdate(e) {
+		if (e.has("value")) {
+			let [e, t] = this.value;
+			if (e) {
+				let t = n(e);
+				t && (this._sm = t.getMonth() + 1, this._sd = t.getDate(), this._sy = t.getFullYear());
+			} else this._sm = null, this._sd = null, this._sy = null;
+			if (t) {
+				let e = n(t);
+				e && (this._em = e.getMonth() + 1, this._ed = e.getDate(), this._ey = e.getFullYear());
+			} else this._em = null, this._ed = null, this._ey = null;
+		}
+	}
+	setRange(e) {
+		this.value = e, this.requestUpdate("value", null);
+	}
+	clear() {
+		this._sm = null, this._sd = null, this._sy = null, this._em = null, this._ed = null, this._ey = null, this._buf = "", this.value = [...t], this.dispatchEvent(new CustomEvent("flint-date-range-picker-clear", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_canGoNext() {
+		return this._active ? f.indexOf(this._active) < f.length - 1 : !0;
+	}
+	_canGoPrev() {
+		return this._active ? f.indexOf(this._active) > 0 : !1;
+	}
+	_commitPartialBuffer() {
+		if (!this._buf || !this._active) return;
+		let e = parseInt(this._buf);
+		if (isNaN(e)) return;
+		let t = this._active;
+		if (t === "start-month" || t === "end-month") e >= 1 && e <= 12 && this._setMonthSeg(t, e);
+		else if (t === "start-day") {
+			let t = m(this._sm ?? 1, this._sy ?? 2e3);
+			e >= 1 && e <= t && (this._sd = e);
+		} else if (t === "end-day") {
+			let t = m(this._em ?? 1, this._ey ?? 2e3);
+			e >= 1 && e <= t && (this._ed = e);
+		}
+	}
+	_setMonthSeg(e, t) {
+		e === "start-month" ? this._sm = t : this._em = t;
+	}
+	_setActive(e) {
+		this.disabled || (this._commitPartialBuffer(), this._active = e, this._buf = "");
+	}
+	_nextSegment() {
+		if (!this._active) {
+			this._setActive(f[0]);
+			return;
+		}
+		let e = f.indexOf(this._active);
+		e < f.length - 1 && this._setActive(f[e + 1]);
+	}
+	_prevSegment() {
+		if (!this._active) return;
+		let e = f.indexOf(this._active);
+		e > 0 && this._setActive(f[e - 1]);
+	}
+	_handleDigit(e) {
+		this._active || this._setActive(f[0]);
+		let t = this._active, n = this._buf + String(e);
+		if (t === "start-month" || t === "end-month") if (n.length === 1) e >= 2 && e <= 9 ? (this._setMonthSeg(t, e), this._buf = "", this._nextSegment()) : this._buf = n;
+		else {
+			let r = parseInt(n);
+			r >= 1 && r <= 12 ? (this._setMonthSeg(t, r), this._buf = "", this._nextSegment()) : (this._buf = String(e), e >= 2 && e <= 9 && (this._setMonthSeg(t, e), this._buf = "", this._nextSegment()));
+		}
+		else if (t === "start-day" || t === "end-day") {
+			let r = m(t === "start-day" ? this._sm ?? 1 : this._em ?? 1, t === "start-day" ? this._sy ?? 2e3 : this._ey ?? 2e3);
+			if (n.length === 1) e >= 4 && e <= 9 ? (t === "start-day" ? this._sd = e : this._ed = e, this._buf = "", this._nextSegment()) : this._buf = n;
+			else {
+				let i = parseInt(n);
+				i >= 1 && i <= r ? (t === "start-day" ? this._sd = i : this._ed = i, this._buf = "", this._nextSegment()) : (this._buf = String(e), e >= 4 && e <= 9 && (t === "start-day" ? this._sd = e : this._ed = e, this._buf = "", this._nextSegment()));
+			}
+		} else if ((t === "start-year" || t === "end-year") && (this._buf = n.slice(-4), this._buf.length === 4)) {
+			let e = parseInt(this._buf);
+			t === "start-year" ? this._sy = e : this._ey = e, this._buf = "", this._checkAndEmit(), this._nextSegment();
+		}
+	}
+	_adjust(e) {
+		let t = this._active;
+		if (t) {
+			if (this._buf = "", t === "start-month") this._sm = p((this._sm ?? (e > 0 ? 0 : 13)) + e, 1, 12);
+			else if (t === "end-month") this._em = p((this._em ?? (e > 0 ? 0 : 13)) + e, 1, 12);
+			else if (t === "start-day") {
+				let t = m(this._sm ?? 1, this._sy ?? 2e3);
+				this._sd = p((this._sd ?? (e > 0 ? 0 : t + 1)) + e, 1, t);
+			} else if (t === "end-day") {
+				let t = m(this._em ?? 1, this._ey ?? 2e3);
+				this._ed = p((this._ed ?? (e > 0 ? 0 : t + 1)) + e, 1, t);
+			} else t === "start-year" ? this._sy = p((this._sy ?? (/* @__PURE__ */ new Date()).getFullYear()) + e, 1, 9999) : t === "end-year" && (this._ey = p((this._ey ?? (/* @__PURE__ */ new Date()).getFullYear()) + e, 1, 9999));
+			this._checkAndEmit();
+		}
+	}
+	_checkAndEmit() {
+		let e = [this._sm !== null && this._sd !== null && this._sy !== null ? `${String(this._sy).padStart(4, "0")}-${String(this._sm).padStart(2, "0")}-${String(this._sd).padStart(2, "0")}` : "", this._em !== null && this._ed !== null && this._ey !== null ? `${String(this._ey).padStart(4, "0")}-${String(this._em).padStart(2, "0")}-${String(this._ed).padStart(2, "0")}` : ""], [t, n] = this.value;
+		(e[0] !== t || e[1] !== n) && (this.value = e, this.dispatchEvent(new CustomEvent("flint-date-range-picker-change", {
+			detail: { value: e },
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	_handleKeyDown(e) {
+		if (!(this.disabled || this.readonly)) {
+			if (e.key >= "0" && e.key <= "9") {
+				e.preventDefault(), e.stopPropagation(), this._active || this._setActive(f[0]), this._handleDigit(parseInt(e.key));
+				return;
+			}
+			switch (e.key) {
+				case "ArrowLeft":
+					e.preventDefault(), e.stopPropagation(), this._prevSegment();
+					break;
+				case "ArrowRight":
+				case "/":
+					e.preventDefault(), e.stopPropagation(), this._nextSegment();
+					break;
+				case "ArrowUp":
+					e.preventDefault(), e.stopPropagation(), this._active || this._setActive(f[0]), this._adjust(1);
+					break;
+				case "ArrowDown":
+					e.preventDefault(), e.stopPropagation(), this._active || this._setActive(f[0]), this._adjust(-1);
+					break;
+				case "Tab":
+					!e.shiftKey && this._canGoNext() ? (e.preventDefault(), e.stopPropagation(), this._nextSegment()) : e.shiftKey && this._canGoPrev() && (e.preventDefault(), e.stopPropagation(), this._prevSegment());
+					break;
+				case "Backspace":
+				case "Delete":
+					switch (e.preventDefault(), e.stopPropagation(), this._buf = "", this._active) {
+						case "start-month":
+							this._sm = null;
+							break;
+						case "start-day":
+							this._sd = null;
+							break;
+						case "start-year":
+							this._sy = null;
+							break;
+						case "end-month":
+							this._em = null;
+							break;
+						case "end-day":
+							this._ed = null;
+							break;
+						case "end-year":
+							this._ey = null;
+							break;
+					}
+					break;
+				case "Escape":
+					e.preventDefault(), e.stopPropagation(), this.clear();
+					break;
+			}
+		}
+	}
+	_handleFocus() {
+		this._focused = !0, this._active || this._setActive(f[0]);
+	}
+	_handleBlur(e) {
+		this.shadowRoot?.contains(e.relatedTarget) || (this._focused = !1, this._active = null, this._buf = "");
+	}
+	_segText(e) {
+		let t = this._active === e && !this.disabled, n = e === "start-month" ? this._sm : this._em, r = e === "start-day" ? this._sd : this._ed, i = e === "start-year" ? this._sy : this._ey;
+		return e === "start-month" || e === "end-month" ? t && this._buf ? {
+			text: this._buf.padEnd(2, "_"),
+			isPlaceholder: !1
+		} : n === null ? {
+			text: "MM",
+			isPlaceholder: !0
+		} : {
+			text: String(n).padStart(2, "0"),
+			isPlaceholder: !1
+		} : e === "start-day" || e === "end-day" ? t && this._buf ? {
+			text: this._buf.padEnd(2, "_"),
+			isPlaceholder: !1
+		} : r === null ? {
+			text: "DD",
+			isPlaceholder: !0
+		} : {
+			text: String(r).padStart(2, "0"),
+			isPlaceholder: !1
+		} : t && this._buf ? {
+			text: this._buf.padEnd(4, "_"),
+			isPlaceholder: !1
+		} : i === null ? {
+			text: "YYYY",
+			isPlaceholder: !0
+		} : {
+			text: String(i).padStart(4, "0"),
+			isPlaceholder: !1
+		};
+	}
+	_hasAnyValue() {
+		return [
+			this._sm,
+			this._sd,
+			this._sy,
+			this._em,
+			this._ed,
+			this._ey
+		].some((e) => e !== null);
+	}
+	_renderSeg(e) {
+		let { text: t, isPlaceholder: n } = this._segText(e), r = e === "start-year" || e === "end-year";
+		return i`<span
+      class=${u({
+			segment: !0,
+			active: this._active === e,
+			placeholder: n,
+			"segment-year": r
+		})}
+      @click=${(t) => {
+			t.stopPropagation(), this._setActive(e), (this.shadowRoot?.querySelector(".segments"))?.focus();
+		}}
+    >${t}</span>`;
+	}
+	render() {
+		let e = u({
+			"field-label": !0,
+			focused: this._focused
+		}), t = u({
+			"field-container": !0,
+			focused: this._focused
+		});
+		return i`
+      ${this.label ? i`<label class=${e}>${this.label}</label>` : a}
+
+      <div class=${t}>
+        <div
+          class="segments"
+          role="group"
+          aria-label=${this.label || "Date range"}
+          tabindex=${this.disabled ? -1 : 0}
+          @keydown=${this._handleKeyDown}
+          @focus=${this._handleFocus}
+          @blur=${this._handleBlur}
+        >
+          ${this._renderSeg("start-month")}
+          <span class="separator">/</span>
+          ${this._renderSeg("start-day")}
+          <span class="separator">/</span>
+          ${this._renderSeg("start-year")}
+
+          <span class="range-dash">–</span>
+
+          ${this._renderSeg("end-month")}
+          <span class="separator">/</span>
+          ${this._renderSeg("end-day")}
+          <span class="separator">/</span>
+          ${this._renderSeg("end-year")}
+        </div>
+
+        <div class="field-actions">
+          ${this._hasAnyValue() && !this.disabled && !this.readonly ? i`
+            <button class="icon-btn" aria-label="Clear range" tabindex="-1"
+              @click=${(e) => {
+			e.stopPropagation(), this.clear();
+		}}>✕</button>
+          ` : a}
+        </div>
+      </div>
+
+      ${this.helperText ? i`<small class="helper">${this.helperText}</small>` : a}
+
+      ${this.name ? i`
+        <input type="hidden" name="${this.name}-start" .value=${this.value[0]}>
+        <input type="hidden" name="${this.name}-end" .value=${this.value[1]}>
+      ` : a}
+    `;
+	}
+};
+e([c({ type: Array })], h.prototype, "value", void 0), e([c({ type: String })], h.prototype, "label", void 0), e([c({ type: String })], h.prototype, "name", void 0), e([c({ type: String })], h.prototype, "min", void 0), e([c({ type: String })], h.prototype, "max", void 0), e([c({
+	type: Boolean,
+	reflect: !0
+})], h.prototype, "disabled", void 0), e([c({
+	type: Boolean,
+	reflect: !0
+})], h.prototype, "readonly", void 0), e([c({
+	type: Boolean,
+	reflect: !0
+})], h.prototype, "error", void 0), e([c({
+	type: String,
+	attribute: "helper-text"
+})], h.prototype, "helperText", void 0), e([l()], h.prototype, "_sm", void 0), e([l()], h.prototype, "_sd", void 0), e([l()], h.prototype, "_sy", void 0), e([l()], h.prototype, "_em", void 0), e([l()], h.prototype, "_ed", void 0), e([l()], h.prototype, "_ey", void 0), e([l()], h.prototype, "_active", void 0), e([l()], h.prototype, "_focused", void 0), e([l()], h.prototype, "_buf", void 0), h = e([s("flint-single-input-date-range-field")], h);
+//#endregion
+export { h as t };

package/dist/_shared/flint-skeleton-CWFa-PkE.js

@@ -0,0 +1,54 @@
+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/skeleton/flint-skeleton.css?inline
+var s = ":host{display:block}.skeleton{background-color:var(--flint-skeleton-bg,var(--flint-surface-3,#0000001c));display:block;position:relative;overflow:hidden}@media (prefers-color-scheme:dark){.skeleton{background-color:var(--flint-skeleton-bg-dark,#ffffff21)}}:host([dark]) .skeleton{background-color:var(--flint-skeleton-bg-dark,#ffffff21)}.skeleton.pulse{animation:pulse var(--flint-skeleton-animation-duration,1.5s) ease-in-out .5s infinite}.skeleton.wave:after{content:\"\";background:linear-gradient(90deg, transparent, var(--flint-skeleton-wave-color,#fff6), transparent);animation:wave var(--flint-skeleton-animation-duration,1.6s) linear infinite;position:absolute;inset:0;transform:translate(-100%)}@keyframes pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes wave{0%{transform:translate(-100%)}to{transform:translate(100%)}}.text{border-radius:var(--flint-border-radius-sm)}.circular{border-radius:50%}.rectangular{border-radius:var(--flint-border-radius-md)}.rounded{border-radius:var(--flint-border-radius-lg)}@media (prefers-reduced-motion:reduce){.skeleton.pulse{animation:none}.skeleton.wave:after{display:none}}", c = class extends t {
+	constructor(...e) {
+		super(...e), this.dark = !1, this.animation = "pulse", this.variant = "text", this.width = "", this.height = "", this.label = "Loading...";
+	}
+	static {
+		this.styles = r(s);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "status"), this._syncLabel();
+	}
+	updated(e) {
+		e.has("label") && this._syncLabel();
+	}
+	_syncLabel() {
+		this.label ? this.setAttribute("aria-label", this.label) : this.removeAttribute("aria-label");
+	}
+	render() {
+		let e = this.variant === "text", t = this.animation === "none" ? "" : this.animation, r = {
+			display: "block",
+			backgroundColor: "var(--flint-skeleton-bg, var(--flint-surface-3, rgba(0, 0, 0, 0.11)))",
+			position: "relative",
+			overflow: "hidden",
+			width: this.width || (e ? "100%" : ""),
+			height: this.height || (e ? "0.8em" : ""),
+			marginTop: e ? "0.3em" : "",
+			marginBottom: e ? "0.3em" : ""
+		};
+		return n`
+            <span
+                part="skeleton"
+                class="skeleton ${t} ${this.variant}"
+                style=${o(r)}
+                aria-hidden="true"
+            ></span>
+        `;
+	}
+};
+e([a({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "dark", void 0), e([a({
+	type: String,
+	reflect: !0
+})], c.prototype, "animation", void 0), e([a({
+	type: String,
+	reflect: !0
+})], c.prototype, "variant", void 0), e([a({ type: String })], c.prototype, "width", void 0), e([a({ type: String })], c.prototype, "height", void 0), e([a({ type: String })], c.prototype, "label", void 0), c = e([i("flint-skeleton")], c);
+//#endregion
+export { c as t };

package/dist/_shared/flint-slider-CVb_rYPp.js

@@ -0,0 +1,97 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { t } from "./form-associated-EGIhyHHt.js";
+import { LitElement as n, html 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";
+import { styleMap as c } from "lit/directives/style-map.js";
+//#region src/slider/flint-slider.css?inline
+var l = ":host{font-family:var(--flint-font-family);color:var(--flint-text-color);--_track-height:6px;--_thumb-size:20px;--_font-size:14px;padding:12px 0;display:block}:host([size=sm]){--_track-height:4px;--_thumb-size:14px;--_font-size:12px}:host([size=lg]){--_track-height:8px;--_thumb-size:24px;--_font-size:16px}:host([vertical]){height:var(--flint-slider-vertical-height,200px);padding:0 12px;display:inline-flex}.slider-wrapper{flex-direction:column;gap:8px;display:flex}.slider-wrapper.vertical{flex-direction:column-reverse;justify-content:flex-end;align-items:center;gap:12px;width:100%;height:100%}.label-row{font-size:var(--_font-size);justify-content:space-between;align-items:center;font-weight:500;display:flex}.label-row.vertical{flex-direction:column;flex-shrink:0;align-items:center;gap:2px}.value-display{color:var(--flint-primary-color);font-weight:600}.track-container{flex:1;justify-content:center;align-items:center;width:100%;display:flex}.track-container.vertical{flex:1;justify-content:center;align-items:center;width:auto;height:100%;min-height:0;display:flex}input[type=range]{appearance:none;width:100%;height:var(--_track-height);background:var(--flint-input-border-color);cursor:pointer;border-radius:3px;outline:none;margin:10px 0;transition:all .2s}input[type=range].vertical{writing-mode:vertical-lr;width:var(--_track-height);appearance:slider-vertical;direction:rtl;height:100%;margin:0}@supports not (appearance:slider-vertical){input[type=range].vertical{writing-mode:vertical-lr;width:var(--_track-height);direction:rtl;height:100%;margin:0}}input[type=range]:disabled{cursor:not-allowed;opacity:.5}input[type=range]::-webkit-slider-thumb{appearance:none;width:var(--_thumb-size);height:var(--_thumb-size);background:var(--flint-surface-1);border:2px solid var(--flint-primary-color);box-shadow:var(--flint-shadow-sm);cursor:pointer;border-radius:50%;transition:transform .1s,box-shadow .1s}input[type=range]::-moz-range-thumb{width:calc(var(--_thumb-size) - 2px);height:calc(var(--_thumb-size) - 2px);background:var(--flint-surface-1);border:2px solid var(--flint-primary-color);box-shadow:var(--flint-shadow-sm);cursor:pointer;border-radius:50%}input[type=range]::-moz-range-progress{background:var(--flint-primary-color);height:var(--_track-height);border-radius:3px}input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--flint-primary-color);outline-offset:4px}input[type=range]:not(:disabled):hover::-webkit-slider-thumb{box-shadow:var(--flint-shadow-md);transform:scale(1.1)}input[type=range]:active::-webkit-slider-thumb{transform:scale(.95)}.disabled-label{color:var(--flint-text-color-muted)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", u = class extends t(n) {
+	constructor(...e) {
+		super(...e), this.value = 50, this.defaultValue = void 0, this.min = 0, this.max = 100, this.step = 1, this.disabled = !1, this.label = "", this.showValue = !1, this.vertical = !1, this.size = "md", this.name = "", this.formatValue = void 0;
+	}
+	static {
+		this.styles = i(l);
+	}
+	get _safeMin() {
+		return this.min < this.max ? this.min : 0;
+	}
+	get _safeMax() {
+		return this.max > this.min ? this.max : this._safeMin + 100;
+	}
+	get _safeValue() {
+		return Math.min(this._safeMax, Math.max(this._safeMin, this.value));
+	}
+	willUpdate(e) {
+		this._firstUpdate && this.defaultValue !== void 0 && (this.value = this.defaultValue), this._firstUpdate = !1, (e.has("value") || e.has("name")) && this._initFormValue(this._safeValue.toString());
+	}
+	_handleInput(e) {
+		let t = e.target;
+		this.value = Number(t.value), this.dispatchEvent(new CustomEvent("flint-slider-change", {
+			detail: { value: this.value },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	render() {
+		let e = this._safeValue, t = this._safeMin, n = this._safeMax, i = (e - t) / (n - t) * 100, a = this.formatValue ? this.formatValue(e) : String(e), o = this.vertical ? { background: `linear-gradient(to left, var(--flint-primary-color, #2563eb) 0%, var(--flint-primary-color, #2563eb) ${i}%, var(--flint-input-border-color, #d1d5db) ${i}%, var(--flint-input-border-color, #d1d5db) 100%)` } : { background: `linear-gradient(to right, var(--flint-primary-color, #2563eb) 0%, var(--flint-primary-color, #2563eb) ${i}%, var(--flint-input-border-color, #d1d5db) ${i}%, var(--flint-input-border-color, #d1d5db) 100%)` }, l = {
+			"slider-wrapper": !0,
+			vertical: this.vertical
+		}, u = {
+			"label-row": !0,
+			vertical: this.vertical
+		}, d = {
+			"track-container": !0,
+			vertical: this.vertical
+		}, f = { vertical: this.vertical }, p = "slider-input";
+		return r`
+      <div class=${s(l)}>
+        <div class=${s(u)}>
+          ${this.label ? r`<label
+                for=${p}
+                class=${s({ "disabled-label": this.disabled })}
+              >${this.label}</label>` : ""}
+          ${this.showValue ? r`<span class="value-display">${a}</span>` : ""}
+        </div>
+        <div class=${s(d)}>
+          <input
+            id=${p}
+            type="range"
+            class=${s(f)}
+            .min=${t.toString()}
+            .max=${n.toString()}
+            .step=${this.step.toString()}
+            .value=${e.toString()}
+            ?disabled=${this.disabled}
+            aria-disabled=${this.disabled ? "true" : "false"}
+            @input=${this._handleInput}
+            style=${c(o)}
+            aria-label=${this.label || "Slider"}
+            aria-orientation=${this.vertical ? "vertical" : "horizontal"}
+            aria-valuemin=${t}
+            aria-valuemax=${n}
+            aria-valuenow=${e}
+            aria-valuetext=${this.formatValue ? a : ""}
+          >
+        </div>
+      </div>
+    `;
+	}
+};
+e([o({ type: Number })], u.prototype, "value", void 0), e([o({
+	type: Number,
+	attribute: "default-value"
+})], u.prototype, "defaultValue", void 0), e([o({ type: Number })], u.prototype, "min", void 0), e([o({ type: Number })], u.prototype, "max", void 0), e([o({ type: Number })], u.prototype, "step", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "disabled", void 0), e([o({ type: String })], u.prototype, "label", void 0), e([o({
+	type: Boolean,
+	attribute: "show-value"
+})], u.prototype, "showValue", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "vertical", void 0), e([o({
+	type: String,
+	reflect: !0
+})], u.prototype, "size", void 0), e([o({ type: String })], u.prototype, "name", void 0), e([o({ attribute: !1 })], u.prototype, "formatValue", void 0), u = e([a("flint-slider")], u);
+//#endregion
+export { u as t };

package/dist/_shared/flint-snackbar-DS5F7oXF.js

@@ -0,0 +1,102 @@
+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/snackbar/flint-snackbar.css?inline
+var c = ":host{pointer-events:none;z-index:var(--flint-snackbar-z-index,1400);justify-content:center;align-items:center;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:fixed}:host([anchor-origin*=bottom]){bottom:var(--flint-snackbar-offset,24px)}:host([anchor-origin*=top]){top:var(--flint-snackbar-offset,24px)}:host([anchor-origin*=left]){left:var(--flint-snackbar-offset,24px)}:host([anchor-origin*=right]){right:var(--flint-snackbar-offset,24px)}:host([anchor-origin*=center]){left:50%;transform:translate(-50%)}.snackbar{background-color:var(--flint-snackbar-bg,#313131);color:var(--flint-snackbar-color,#fff);font-family:var(--flint-font-family);letter-spacing:.01071em;border-radius:var(--flint-border-radius-md);box-shadow:var(--flint-shadow-lg);min-width:var(--flint-snackbar-min-width,288px);max-width:var(--flint-snackbar-max-width,560px);pointer-events:auto;opacity:0;visibility:hidden;align-items:center;padding:6px 16px;font-size:.875rem;line-height:1.43;transition:opacity .225s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.4,0,.2,1);display:flex;transform:scale(.85)}.snackbar.open{opacity:1;visibility:visible;transform:scale(1)}:host([variant=info]) .snackbar{background-color:var(--flint-snackbar-bg-info,#0288d1)}:host([variant=success]) .snackbar{background-color:var(--flint-snackbar-bg-success,#2e7d32)}:host([variant=warning]) .snackbar{background-color:var(--flint-snackbar-bg-warning,#ed6c02)}:host([variant=error]) .snackbar{background-color:var(--flint-snackbar-bg-error,#d32f2f)}.message{flex-grow:1;padding:8px 0}.action{align-items:center;margin-left:8px;margin-right:-8px;padding-left:16px;display:flex}.action.hidden{display:none}.close-btn{color:inherit;cursor:pointer;opacity:.8;background:0 0;border:none;border-radius:2px;align-items:center;margin-left:8px;margin-right:-8px;padding:4px 8px;line-height:0;display:flex}.close-btn:hover{opacity:1}::slotted(flint-alert){width:100%;min-width:288px;margin-bottom:0!important}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", l = class extends t {
+	constructor(...e) {
+		super(...e), this.open = !1, this.message = "", this.autoHideDuration = 5e3, this.anchorOrigin = "bottom-center", this.pauseOnHover = !0, this.closable = !1, this.variant = "default", this._hasAction = !1, this._timer = null, this._remainingTime = 0, this._timerStartedAt = 0;
+	}
+	static {
+		this.styles = r(c);
+	}
+	updated(e) {
+		e.has("open") && (this.open ? (this._remainingTime = this.autoHideDuration, this._startTimer(this._remainingTime), this.dispatchEvent(new CustomEvent("flint-snackbar-open", {
+			bubbles: !0,
+			composed: !0
+		}))) : (this._clearTimer(), this.dispatchEvent(new CustomEvent("flint-snackbar-close", {
+			bubbles: !0,
+			composed: !0
+		}))));
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._clearTimer();
+	}
+	_startTimer(e) {
+		this._clearTimer(), e > 0 && (this._timerStartedAt = Date.now(), this._timer = setTimeout(() => this.close(), e));
+	}
+	_clearTimer() {
+		this._timer &&= (clearTimeout(this._timer), null);
+	}
+	_handleMouseEnter() {
+		if (!this.pauseOnHover || !this.open || this._timer === null) return;
+		let e = Date.now() - this._timerStartedAt;
+		this._remainingTime = Math.max(0, this._remainingTime - e), this._clearTimer();
+	}
+	_handleMouseLeave() {
+		!this.pauseOnHover || !this.open || this._startTimer(this._remainingTime);
+	}
+	_handleActionSlotChange(e) {
+		this._hasAction = e.target.assignedNodes({ flatten: !0 }).length > 0;
+	}
+	close() {
+		this.open = !1;
+	}
+	render() {
+		let e = {
+			snackbar: !0,
+			open: this.open
+		}, t = {
+			action: !0,
+			hidden: !this._hasAction
+		};
+		return n`
+            <div
+                class=${s(e)}
+                part="snackbar"
+                role="status"
+                aria-live="polite"
+                aria-atomic="true"
+                @mouseenter=${this._handleMouseEnter}
+                @mouseleave=${this._handleMouseLeave}
+            >
+                <div class="message">
+                    <slot>${this.message}</slot>
+                </div>
+                <div class=${s(t)}>
+                    <slot name="action" @slotchange=${this._handleActionSlotChange}></slot>
+                </div>
+                ${this.closable ? n`
+                    <button class="close-btn" aria-label="Close" @click=${() => this.close()}>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <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: Boolean,
+	reflect: !0
+})], l.prototype, "open", void 0), e([a({ type: String })], l.prototype, "message", void 0), e([a({
+	type: Number,
+	attribute: "auto-hide-duration"
+})], l.prototype, "autoHideDuration", void 0), e([a({
+	type: String,
+	attribute: "anchor-origin",
+	reflect: !0
+})], l.prototype, "anchorOrigin", void 0), e([a({
+	type: Boolean,
+	attribute: "pause-on-hover"
+})], l.prototype, "pauseOnHover", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "closable", void 0), e([a({
+	type: String,
+	reflect: !0
+})], l.prototype, "variant", void 0), e([o()], l.prototype, "_hasAction", void 0), l = e([i("flint-snackbar")], l);
+//#endregion
+export { l as t };