@getufy/flint-ui 0.1.0

package/dist/_shared/flint-pagination-D-KNsfjM.js

@@ -0,0 +1,143 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { LitElement as t, html as n, nothing as r, unsafeCSS as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+import { classMap as s } from "lit/directives/class-map.js";
+//#region src/pagination/flint-pagination.css?inline
+var c = ":host{align-items:center;gap:var(--flint-pagination-gap,4px);font-family:var(--flint-font-family);flex-wrap:wrap;display:inline-flex}nav,ol,li{display:contents}.page-btn{min-width:var(--flint-pagination-btn-size,36px);height:var(--flint-pagination-btn-size,36px);border-radius:var(--flint-pagination-btn-radius,4px);color:var(--flint-text-color);font-family:inherit;font-size:var(--flint-pagination-btn-font-size,.875rem);cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;background:0 0;border:none;outline:none;justify-content:center;align-items:center;padding:0 6px;font-weight:400;text-decoration:none;transition:background .15s,color .15s,border-color .15s;display:inline-flex}.page-btn:hover:not(:disabled){background:var(--flint-hover-color)}.page-btn:focus-visible{outline:2px solid var(--flint-pagination-focus-ring-color,var(--flint-primary-color));outline-offset:2px}.page-btn.active{background:var(--flint-pagination-active-bg,var(--flint-primary-color));color:var(--flint-pagination-active-color,var(--flint-text-color-on-primary));font-weight:600}.page-btn:disabled{opacity:var(--flint-pagination-disabled-opacity,.38);cursor:default;pointer-events:none}.page-btn.ellipsis{cursor:default;pointer-events:none;color:var(--flint-text-color-muted)}:host([variant=outlined]) .page-btn{border:1px solid var(--flint-pagination-outlined-border,var(--flint-border-color))}:host([variant=outlined]) .page-btn.active{border-color:var(--flint-pagination-active-bg,var(--flint-primary-color));background:var(--flint-pagination-active-bg,var(--flint-primary-color));color:var(--flint-pagination-active-color,var(--flint-text-color-on-primary))}:host([variant=outlined]) .page-btn:hover:not(:disabled):not(.active){background:var(--flint-pagination-outlined-hover-bg,var(--flint-primary-color-light));border-color:var(--flint-pagination-outlined-hover-border,var(--flint-primary-color))}:host([color=secondary]) .page-btn.active{background:var(--flint-pagination-active-bg-secondary,var(--flint-secondary-color))}:host([color=secondary][variant=outlined]) .page-btn.active{background:var(--flint-pagination-active-bg-secondary,var(--flint-secondary-color));border-color:var(--flint-pagination-active-bg-secondary,var(--flint-secondary-color))}:host([color=standard]) .page-btn.active{background:var(--flint-pagination-active-bg-standard,var(--flint-text-color));color:var(--flint-pagination-active-color,var(--flint-text-color-on-primary))}:host([color=standard][variant=outlined]) .page-btn.active{background:var(--flint-pagination-active-bg-standard,var(--flint-text-color));border-color:var(--flint-pagination-active-bg-standard,var(--flint-text-color));color:var(--flint-pagination-active-color,var(--flint-text-color-on-primary))}:host([shape=rounded]) .page-btn{border-radius:var(--flint-pagination-btn-radius-rounded,8px)}:host([shape=circular]) .page-btn{min-width:var(--flint-pagination-btn-size,36px);aspect-ratio:1;border-radius:50%}:host([size=small]) .page-btn{min-width:var(--flint-pagination-btn-size-sm,28px);height:var(--flint-pagination-btn-size-sm,28px);font-size:var(--flint-pagination-btn-font-size-sm,.8125rem)}:host([size=small][shape=circular]) .page-btn{min-width:var(--flint-pagination-btn-size-sm,28px)}:host([size=large]) .page-btn{min-width:var(--flint-pagination-btn-size-lg,44px);height:var(--flint-pagination-btn-size-lg,44px);font-size:var(--flint-pagination-btn-font-size-lg,.9375rem)}:host([disabled]) .page-btn{opacity:var(--flint-pagination-disabled-opacity,.38);pointer-events:none}svg{display:block}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", l = n`<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"/></svg>`, u = n`<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"/></svg>`, d = n`<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>`, f = n`<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>`, p = n`<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>`;
+function m(e, t) {
+	return Array.from({ length: t - e + 1 }, (t, n) => e + n);
+}
+function h(e, t, n, r) {
+	let i = m(1, Math.min(r, e)), a = m(Math.max(e - r + 1, r + 1), e), o = Math.max(Math.min(t - n, e - r - n * 2 - 1), r + 2), s = Math.min(Math.max(t + n, r + n * 2 + 2), a.length > 0 ? a[0] - 2 : e - 1), c = [
+		...i,
+		...o > r + 2 ? ["start-ellipsis"] : r + 1 < e - r ? [r + 1] : [],
+		...m(o, s),
+		...s < e - r - 1 ? ["end-ellipsis"] : e - r > r ? [e - r] : [],
+		...a
+	], l = /* @__PURE__ */ new Set();
+	return c.filter((e) => {
+		let t = String(e);
+		return l.has(t) ? !1 : (l.add(t), !0);
+	});
+}
+var g = class extends t {
+	constructor(...e) {
+		super(...e), this.count = 1, this.page = 1, this.defaultPage = 1, this.label = "", this.variant = "text", this.shape = "circular", this.size = "medium", this.color = "primary", this.showFirstButton = !1, this.showLastButton = !1, this.hidePrevButton = !1, this.hideNextButton = !1, this.siblingCount = 1, this.boundaryCount = 1, this.disabled = !1, this._firstUpdate = !0;
+	}
+	static {
+		this.styles = i(c);
+	}
+	willUpdate() {
+		this._firstUpdate && this.defaultPage !== 1 && (this.page = this.defaultPage), this._firstUpdate = !1;
+	}
+	get _safeCount() {
+		return Math.max(1, this.count);
+	}
+	get _safePage() {
+		return Math.min(Math.max(1, this.page), this._safeCount);
+	}
+	_emit(e) {
+		this.dispatchEvent(new CustomEvent("flint-pagination-change", {
+			detail: { page: e },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_go(e) {
+		let t = this._safeCount, n = this._safePage;
+		e < 1 || e > t || e === n || (this.page = e, this._emit(e));
+	}
+	_renderNavBtn(e, t, i, a, o, s) {
+		return s ? r : n`
+            <li>
+                <button
+                    class="page-btn"
+                    aria-label=${e}
+                    ?disabled=${o || this.disabled}
+                    @click=${a}
+                ><slot name=${t}>${i}</slot></button>
+            </li>
+        `;
+	}
+	render() {
+		let e = this._safeCount, t = this._safePage, i = h(e, t, this.siblingCount, this.boundaryCount);
+		return n`
+            <nav aria-label=${this.label || "pagination navigation"}>
+                <ol>
+                    ${this._renderNavBtn("Go to first page", "first-icon", l, () => this._go(1), t === 1, !this.showFirstButton)}
+                    ${this._renderNavBtn("Go to previous page", "prev-icon", d, () => this._go(t - 1), t === 1, this.hidePrevButton)}
+
+                    ${i.map((e) => {
+			if (e === "start-ellipsis" || e === "end-ellipsis") return n`
+                            <li>
+                                <button class="page-btn ellipsis" tabindex="-1" aria-hidden="true">
+                                    <slot name="ellipsis-icon">${p}</slot>
+                                </button>
+                            </li>`;
+			let i = e === t;
+			return n`
+                        <li>
+                            <button
+                                class=${s({
+				"page-btn": !0,
+				active: i
+			})}
+                                aria-label=${"Page " + e}
+                                aria-current=${i ? "page" : r}
+                                ?disabled=${this.disabled}
+                                @click=${() => this._go(e)}
+                            >${e}</button>
+                        </li>
+                    `;
+		})}
+
+                    ${this._renderNavBtn("Go to next page", "next-icon", f, () => this._go(t + 1), t === e, this.hideNextButton)}
+                    ${this._renderNavBtn("Go to last page", "last-icon", u, () => this._go(e), t === e, !this.showLastButton)}
+                </ol>
+            </nav>
+        `;
+	}
+};
+e([o({ type: Number })], g.prototype, "count", void 0), e([o({ type: Number })], g.prototype, "page", void 0), e([o({
+	type: Number,
+	attribute: "default-page"
+})], g.prototype, "defaultPage", void 0), e([o({ type: String })], g.prototype, "label", void 0), e([o({
+	type: String,
+	reflect: !0
+})], g.prototype, "variant", void 0), e([o({
+	type: String,
+	reflect: !0
+})], g.prototype, "shape", void 0), e([o({
+	type: String,
+	reflect: !0
+})], g.prototype, "size", void 0), e([o({
+	type: String,
+	reflect: !0
+})], g.prototype, "color", void 0), e([o({
+	type: Boolean,
+	reflect: !0,
+	attribute: "show-first-button"
+})], g.prototype, "showFirstButton", void 0), e([o({
+	type: Boolean,
+	reflect: !0,
+	attribute: "show-last-button"
+})], g.prototype, "showLastButton", void 0), e([o({
+	type: Boolean,
+	reflect: !0,
+	attribute: "hide-prev-button"
+})], g.prototype, "hidePrevButton", void 0), e([o({
+	type: Boolean,
+	reflect: !0,
+	attribute: "hide-next-button"
+})], g.prototype, "hideNextButton", void 0), e([o({
+	type: Number,
+	attribute: "sibling-count"
+})], g.prototype, "siblingCount", void 0), e([o({
+	type: Number,
+	attribute: "boundary-count"
+})], g.prototype, "boundaryCount", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], g.prototype, "disabled", void 0), g = e([a("flint-pagination")], g);
+//#endregion
+export { h as n, g as t };

package/dist/_shared/flint-paper-CArGvvRa.js

@@ -0,0 +1,27 @@
+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/paper/flint-paper.css?inline
+var o = ":host{box-sizing:border-box;background-color:var(--flint-surface-1);color:var(--flint-text-color);border-radius:var(--flint-border-radius-md);padding:var(--flint-paper-padding,0);border:1px solid #0000;transition:box-shadow .25s cubic-bezier(.4,0,.2,1),border-color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1);display:block}:host([square]){border-radius:0}:host([variant=outlined]){border:1px solid var(--flint-border-color);box-shadow:none!important}:host([variant=flat]){box-shadow:none;border:none}:host([variant=elevated][elevation=\"0\"]){box-shadow:none}:host([variant=elevated][elevation=\"1\"]){box-shadow:0 2px 4px #0000000d}:host([variant=elevated][elevation=\"2\"]){box-shadow:0 3px 6px #00000012}:host([variant=elevated][elevation=\"3\"]){box-shadow:0 4px 12px #00000014}:host([variant=elevated][elevation=\"4\"]){box-shadow:0 8px 16px #00000017}:host([variant=elevated][elevation=\"6\"]){box-shadow:0 12px 24px #0000001a}:host([variant=elevated][elevation=\"8\"]){box-shadow:0 16px 32px #0000001c}:host([variant=elevated][elevation=\"12\"]){box-shadow:0 20px 40px #0000001f}:host([variant=elevated][elevation=\"16\"]){box-shadow:0 24px 48px #00000021}:host([variant=elevated][elevation=\"24\"]){box-shadow:0 32px 64px #00000026}@media (prefers-color-scheme:dark){:host{background-color:var(--flint-surface-background-flat)}:host([variant=elevated][elevation=\"0\"]){box-shadow:none}:host([variant=elevated][elevation=\"1\"]){box-shadow:0 2px 4px #0000004d}:host([variant=elevated][elevation=\"2\"]){box-shadow:0 3px 6px #00000059}:host([variant=elevated][elevation=\"3\"]){box-shadow:0 4px 12px #0006}:host([variant=elevated][elevation=\"4\"]){box-shadow:0 8px 16px #00000073}:host([variant=elevated][elevation=\"6\"]){box-shadow:0 12px 24px #00000080}:host([variant=elevated][elevation=\"8\"]){box-shadow:0 16px 32px #0000008c}:host([variant=elevated][elevation=\"12\"]){box-shadow:0 20px 40px #0009}:host([variant=elevated][elevation=\"16\"]){box-shadow:0 24px 48px #000000a6}:host([variant=elevated][elevation=\"24\"]){box-shadow:0 32px 64px #000000b3}}@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.elevation = 1, this.square = !1, this.variant = "elevated";
+	}
+	static {
+		this.styles = r(o);
+	}
+	render() {
+		return n`<slot></slot>`;
+	}
+};
+e([a({
+	type: Number,
+	reflect: !0
+})], s.prototype, "elevation", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "square", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "variant", void 0), s = e([i("flint-paper")], s);
+//#endregion
+export { s as t };

package/dist/_shared/flint-radio-B_C3wNRn.js

@@ -0,0 +1,165 @@
+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 { ifDefined as c } from "lit/directives/if-defined.js";
+//#region src/radio/flint-radio-group.css?inline
+var l = ":host{font-family:var(--flint-font-family);color:var(--flint-text-color);display:block}:host([disabled]){opacity:var(--flint-radio-disabled-opacity,.5);pointer-events:none}.group-container{gap:var(--flint-radio-group-gap,8px);flex-direction:column;display:flex}:host([orientation=horizontal]) .group-container{flex-flow:wrap}", u = ":host{cursor:pointer;display:inline-block}:host([disabled]){cursor:not-allowed}.wrapper{cursor:pointer;align-items:center;display:inline-flex}.wrapper.disabled{opacity:var(--flint-radio-disabled-opacity,.5);cursor:not-allowed}.radio-circle{width:var(--flint-radio-size,18px);height:var(--flint-radio-size,18px);border:2px solid var(--flint-input-border-color);background-color:var(--flint-surface-1);margin-right:var(--flint-radio-gap,8px);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:border-color .2s,background-color .2s;display:inline-flex;position:relative}:host([size=sm]) .radio-circle{width:var(--flint-radio-size-sm,14px);height:var(--flint-radio-size-sm,14px)}:host([size=lg]) .radio-circle{width:var(--flint-radio-size-lg,22px);height:var(--flint-radio-size-lg,22px)}.wrapper:hover:not(.disabled) .radio-circle,.radio-circle.checked{border-color:var(--flint-primary-color)}.radio-circle:after{content:\"\";width:var(--flint-radio-dot-size,8px);height:var(--flint-radio-dot-size,8px);background-color:var(--flint-primary-color);opacity:0;border-radius:50%;transition:opacity .2s cubic-bezier(.175,.885,.32,1.275),transform .2s cubic-bezier(.175,.885,.32,1.275);transform:scale(.5)}:host([size=sm]) .radio-circle:after{width:var(--flint-radio-dot-size-sm,6px);height:var(--flint-radio-dot-size-sm,6px)}:host([size=lg]) .radio-circle:after{width:var(--flint-radio-dot-size-lg,10px);height:var(--flint-radio-dot-size-lg,10px)}.checked:after{opacity:1;transform:scale(1)}input{opacity:0;width:0;height:0;margin:0;position:absolute}input:focus-visible+.radio-circle{outline:2px solid var(--flint-primary-color);outline-offset:2px;box-shadow:0 0 0 4px var(--flint-primary-focus-ring)}.label{font-size:var(--flint-radio-label-font-size,14px);-webkit-user-select:none;user-select:none;line-height:1.5}:host([size=sm]) .label{font-size:var(--flint-radio-label-font-size-sm,12px)}:host([size=lg]) .label{font-size:var(--flint-radio-label-font-size-lg,16px)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", d = class extends t(n) {
+	constructor(...e) {
+		super(...e), this.label = "", this.name = "", this.value = "", this.defaultValue = "", this.disabled = !1, this.required = !1, this.orientation = "vertical", this.size = "md", this._handleRadioSelect = (e) => {
+			this._onRadioSelect(e);
+		}, this._handleKeyDown = (e) => {
+			this._onKeyDown(e);
+		};
+	}
+	static {
+		this.styles = i(l);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("flint-radio-select", this._handleRadioSelect), this.addEventListener("keydown", this._handleKeyDown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("flint-radio-select", this._handleRadioSelect), this.removeEventListener("keydown", this._handleKeyDown);
+	}
+	willUpdate() {
+		this._firstUpdate && (this._firstUpdate = !1, this.defaultValue && !this.value && (this.value = this.defaultValue));
+	}
+	updated(e) {
+		(e.has("value") || e.has("name") || e.has("size") || e.has("required")) && this._syncChildren(), (e.has("value") || e.has("name") || e.has("required")) && this._updateFormValue();
+	}
+	formResetCallback() {
+		this.value = this.defaultValue || "", this._updateFormValue();
+	}
+	_updateFormValue() {
+		this._initFormValue(this.value || null), this._initFormValidity(this.required, !this.value, "Please select an option.");
+	}
+	_getRadios() {
+		return Array.from(this.querySelectorAll("flint-radio"));
+	}
+	_getEnabledRadios() {
+		return this._getRadios().filter((e) => !e.disabled);
+	}
+	_onRadioSelect(e) {
+		if (this.disabled) return;
+		let { value: t } = e.detail;
+		this.value = t, this._syncChildren(), this.dispatchEvent(new CustomEvent("flint-radio-group-change", {
+			detail: { value: t },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_onKeyDown(e) {
+		if (this.disabled || ![
+			"ArrowDown",
+			"ArrowUp",
+			"ArrowLeft",
+			"ArrowRight"
+		].includes(e.key)) return;
+		let t = this._getEnabledRadios();
+		if (!t.length) return;
+		let n = e.composedPath(), r = t.find((e) => n.includes(e)), i = r ? t.indexOf(r) : t.findIndex((e) => e.value === this.value), a = i >= 0 ? i : 0;
+		e.preventDefault();
+		let o = t[e.key === "ArrowDown" || e.key === "ArrowRight" ? (a + 1) % t.length : (a - 1 + t.length) % t.length];
+		o.focus(), this.value = o.value, this._syncChildren(), this.dispatchEvent(new CustomEvent("flint-radio-group-change", {
+			detail: { value: this.value },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_syncChildren() {
+		this._getRadios().forEach((e) => {
+			e.checked = e.value === this.value, this.name && (e.name = this.name), e.size = this.size, e.required = this.required;
+		});
+	}
+	_handleSlotChange() {
+		this._syncChildren();
+	}
+	render() {
+		return r`
+            <div
+                class="group-container"
+                role="radiogroup"
+                aria-label=${c(this.label || void 0)}
+                aria-disabled=${c(this.disabled ? "true" : void 0)}
+                aria-required=${c(this.required ? "true" : void 0)}
+            >
+                <slot @slotchange=${this._handleSlotChange}></slot>
+            </div>
+        `;
+	}
+};
+e([o({ type: String })], d.prototype, "label", void 0), e([o({ type: String })], d.prototype, "name", void 0), e([o({ type: String })], d.prototype, "value", void 0), e([o({
+	type: String,
+	attribute: "default-value"
+})], d.prototype, "defaultValue", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "disabled", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "required", void 0), e([o({
+	type: String,
+	reflect: !0
+})], d.prototype, "orientation", void 0), e([o({
+	type: String,
+	reflect: !0
+})], d.prototype, "size", void 0), d = e([a("flint-radio-group")], d);
+var f = class extends n {
+	constructor(...e) {
+		super(...e), this.checked = !1, this.disabled = !1, this.required = !1, this.name = "", this.value = "", this.label = "", this.size = "md";
+	}
+	static {
+		this.styles = i(u);
+	}
+	focus(e) {
+		this.shadowRoot?.querySelector("input")?.focus(e);
+	}
+	_handleChange() {
+		this.disabled || this.dispatchEvent(new CustomEvent("flint-radio-select", {
+			detail: { value: this.value },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	render() {
+		return r`
+            <label class=${s({
+			wrapper: !0,
+			disabled: this.disabled
+		})}>
+                <input
+                    type="radio"
+                    .name=${this.name}
+                    .value=${this.value}
+                    .checked=${this.checked}
+                    ?disabled=${this.disabled}
+                    ?required=${this.required}
+                    @change=${this._handleChange}
+                >
+                <div class=${s({
+			"radio-circle": !0,
+			checked: this.checked
+		})}></div>
+                <span class="label">
+                    ${this.label ? this.label : r`<slot></slot>`}
+                </span>
+            </label>
+        `;
+	}
+};
+e([o({
+	type: Boolean,
+	reflect: !0
+})], f.prototype, "checked", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], f.prototype, "disabled", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], f.prototype, "required", void 0), e([o({ type: String })], f.prototype, "name", void 0), e([o({ type: String })], f.prototype, "value", void 0), e([o({ type: String })], f.prototype, "label", void 0), e([o({
+	type: String,
+	reflect: !0
+})], f.prototype, "size", void 0), f = e([a("flint-radio")], f);
+//#endregion
+export { d as n, f as t };

package/dist/_shared/flint-range-slider-IfXMtey2.js

@@ -0,0 +1,129 @@
+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";
+import { styleMap as l } from "lit/directives/style-map.js";
+import { live as u } from "lit/directives/live.js";
+//#region src/flint-range-slider/flint-range-slider.css?inline
+var d = ":host{font-family:var(--flint-font-family);color:var(--flint-text-color);--flint-range-slider-track-height:6px;--flint-range-slider-thumb-size:20px;--flint-range-slider-track-color:var(--flint-input-border-color);--flint-range-slider-fill-color:var(--flint-primary-color);--flint-range-slider-thumb-color:var(--flint-surface-1);--flint-range-slider-thumb-border:var(--flint-primary-color);padding:12px 0;display:block}:host([size=sm]){--flint-range-slider-track-height:4px;--flint-range-slider-thumb-size:16px}:host([size=lg]){--flint-range-slider-track-height:8px;--flint-range-slider-thumb-size:24px}.slider-wrapper{flex-direction:column;gap:8px;display:flex}.label-row{justify-content:space-between;align-items:center;font-size:14px;font-weight:500;display:flex}.value-display{color:var(--flint-range-slider-fill-color);font-weight:600}.disabled-label{color:var(--flint-text-color-muted)}.track-container{align-items:center;height:28px;margin:4px 0;display:flex;position:relative}.track-base{height:var(--flint-range-slider-track-height);background:var(--flint-range-slider-track-color);border-radius:calc(var(--flint-range-slider-track-height) / 2);pointer-events:none;position:absolute;left:0;right:0}.track-fill{height:var(--flint-range-slider-track-height);background:var(--flint-range-slider-fill-color);border-radius:calc(var(--flint-range-slider-track-height) / 2);pointer-events:none;transition:left 50ms,width 50ms;position:absolute}:host([disabled]) .track-fill{opacity:.5}input[type=range]{appearance:none;width:100%;height:var(--flint-range-slider-track-height);cursor:pointer;pointer-events:none;background:0 0;outline:none;margin:0;position:absolute;left:0;right:0}input[type=range]:disabled{cursor:not-allowed}input[type=range]::-webkit-slider-thumb{pointer-events:all}input[type=range]::-moz-range-thumb{pointer-events:all}input[type=range]::-webkit-slider-thumb{appearance:none;width:var(--flint-range-slider-thumb-size);height:var(--flint-range-slider-thumb-size);background:var(--flint-range-slider-thumb-color);border:2px solid var(--flint-range-slider-thumb-border);box-shadow:var(--flint-shadow-sm);cursor:pointer;border-radius:50%;transition:transform .1s,box-shadow .1s}input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--flint-range-slider-fill-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)}input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed;opacity:.5;border-color:var(--flint-range-slider-track-color)}input[type=range]::-moz-range-thumb{width:calc(var(--flint-range-slider-thumb-size) - 2px);height:calc(var(--flint-range-slider-thumb-size) - 2px);background:var(--flint-range-slider-thumb-color);border:2px solid var(--flint-range-slider-thumb-border);box-shadow:var(--flint-shadow-sm);cursor:pointer;border-radius:50%}input[type=range]:disabled::-moz-range-thumb{opacity:.5;border-color:var(--flint-range-slider-track-color)}input[type=range]::-moz-range-track{background:0 0}input.thumb-start{z-index:2}input.thumb-end{z-index:3}input.thumb-start.on-top{z-index:4}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", f = class extends t {
+	constructor(...e) {
+		super(...e), this.value = [25, 75], this.min = 0, this.max = 100, this.step = 1, this.size = "md", this.disabled = !1, this.label = "", this.showValue = !1, this._activeThumb = "end";
+	}
+	static {
+		this.styles = i(d);
+	}
+	updated(e) {
+		if (this.step <= 0 && (this.step = 1), e.has("min") || e.has("max")) {
+			let e = Math.max(this.min, Math.min(this.max, this._start)), t = Math.max(this.min, Math.min(this.max, this._end));
+			(e !== this._start || t !== this._end) && (this.value = [e, t]);
+		}
+	}
+	get _start() {
+		return this.value[0];
+	}
+	get _end() {
+		return this.value[1];
+	}
+	_pct(e) {
+		return (e - this.min) / (this.max - this.min) * 100;
+	}
+	_snap(e) {
+		let t = Math.round((e - this.min) / this.step) * this.step + this.min;
+		return Math.max(this.min, Math.min(this.max, t));
+	}
+	_handleStartInput(e) {
+		let t = e.target, n = this._snap(Number(t.value));
+		n > this._end ? (this._activeThumb = "end", this._emit([this._end, n])) : this._emit([n, this._end]);
+	}
+	_handleEndInput(e) {
+		let t = e.target, n = this._snap(Number(t.value));
+		n < this._start ? (this._activeThumb = "start", this._emit([n, this._start])) : this._emit([this._start, n]);
+	}
+	_emit(e) {
+		this.value = [...e], this.dispatchEvent(new CustomEvent("flint-range-slider-change", {
+			detail: { value: this.value },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	render() {
+		let e = this._pct(this._start), t = this._pct(this._end), i = {
+			left: `${e}%`,
+			width: `${t - e}%`
+		}, a = this._activeThumb === "start" || this._start === this.max;
+		return n`
+      <div class="slider-wrapper">
+
+        <div class="label-row">
+          ${this.label ? n`
+            <label class=${c({ "disabled-label": this.disabled })}>
+              ${this.label}
+            </label>
+          ` : r}
+          ${this.showValue ? n`
+            <span class="value-display">${this._start} – ${this._end}</span>
+          ` : r}
+        </div>
+
+        <div class="track-container">
+          <div class="track-base"></div>
+          <div class="track-fill" style=${l(i)}></div>
+
+          <!-- Start thumb -->
+          <input
+            type="range"
+            class=${c({
+			"thumb-start": !0,
+			"on-top": a
+		})}
+            .min=${this.min.toString()}
+            .max=${this.max.toString()}
+            .step=${this.step.toString()}
+            .value=${u(this._start.toString())}
+            ?disabled=${this.disabled}
+            aria-label=${this.label ? `${this.label} start` : "Range start"}
+            aria-valuemin=${this.min}
+            aria-valuemax=${this.max}
+            aria-valuenow=${this._start}
+            @input=${this._handleStartInput}
+            @pointerdown=${() => {
+			this._activeThumb = "start";
+		}}
+          >
+
+          <!-- End thumb -->
+          <input
+            type="range"
+            class="thumb-end"
+            .min=${this.min.toString()}
+            .max=${this.max.toString()}
+            .step=${this.step.toString()}
+            .value=${u(this._end.toString())}
+            ?disabled=${this.disabled}
+            aria-label=${this.label ? `${this.label} end` : "Range end"}
+            aria-valuemin=${this.min}
+            aria-valuemax=${this.max}
+            aria-valuenow=${this._end}
+            @input=${this._handleEndInput}
+            @pointerdown=${() => {
+			this._activeThumb = "end";
+		}}
+          >
+        </div>
+
+      </div>
+    `;
+	}
+};
+e([o({ attribute: !1 })], f.prototype, "value", void 0), e([o({ type: Number })], f.prototype, "min", void 0), e([o({ type: Number })], f.prototype, "max", void 0), e([o({ type: Number })], f.prototype, "step", void 0), e([o({
+	type: String,
+	reflect: !0
+})], f.prototype, "size", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], f.prototype, "disabled", void 0), e([o({ type: String })], f.prototype, "label", void 0), e([o({
+	type: Boolean,
+	attribute: "show-value"
+})], f.prototype, "showValue", void 0), e([s()], f.prototype, "_activeThumb", void 0), f = e([a("flint-range-slider")], f);
+//#endregion
+export { f as t };

package/dist/_shared/flint-rating-9FxNfBNa.js

@@ -0,0 +1,148 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { LitElement as t, html as n, svg 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/rating/flint-rating.css?inline
+var l = ":host{font-family:var(--flint-font-family);--flint-rating-color:#ffb400;--flint-rating-empty-color:#faaf0033;--flint-rating-size:2rem;font-size:var(--flint-rating-size);display:inline-block}:host([size=sm]){--flint-rating-size:1.25rem}:host([size=md]){--flint-rating-size:2rem}:host([size=lg]){--flint-rating-size:2.75rem}:host([disabled]){opacity:.4;cursor:not-allowed}:host([readonly]) .rating-container{cursor:default}.rating-container{cursor:pointer;gap:.1em;font-size:1em;line-height:1;display:inline-flex;position:relative}.rating-container:focus{outline:none}.star-wrapper{outline:none;transition:transform .1s;display:inline-flex;position:relative}.star-wrapper:focus-visible{box-shadow:0 0 0 2px var(--flint-rating-color);border-radius:2px}.star-wrapper:not(.readonly):not(.disabled):hover{transform:scale(1.1)}svg{width:1em;height:1em;fill:var(--flint-rating-empty-color);stroke:var(--flint-rating-color);stroke-width:1px;transition:fill .2s,stroke .2s;overflow:visible}.active svg{fill:var(--flint-rating-color)}.hover svg{fill:var(--flint-rating-color);opacity:.7}.half svg .star-full{display:none}.half svg .star-half{display:block}.star-half{display:none}.hidden-input{opacity:0;pointer-events:none;width:0;height:0;margin:0;position:absolute}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", u = class extends t {
+	constructor(...e) {
+		super(...e), this.value = 0, this.max = 5, this.readonly = !1, this.disabled = !1, this.clearable = !1, this.defaultValue = 0, this.size = "md", this.name = "", this.label = "Rating", this.precision = 1, this._hoverValue = -1, this._firstUpdate = !0;
+	}
+	static {
+		this.styles = i(l);
+	}
+	willUpdate(e) {
+		this._firstUpdate && this.defaultValue !== 0 && (this.value = this.defaultValue), this._firstUpdate = !1, (e.has("value") || e.has("name")) && this._syncHiddenInput();
+	}
+	_syncHiddenInput() {
+		let e = this.shadowRoot?.querySelector(".hidden-input");
+		e && (e.name = this.name, e.value = String(this.value));
+	}
+	firstUpdated() {
+		this._syncHiddenInput();
+	}
+	_isInteractive() {
+		return !this.readonly && !this.disabled;
+	}
+	_handleMouseEnter(e) {
+		this._isInteractive() && (this._hoverValue = e);
+	}
+	_handleMouseLeave() {
+		this._isInteractive() && (this._hoverValue = -1);
+	}
+	_handleMouseMove(e, t) {
+		if (!this._isInteractive() || this.precision !== .5) return;
+		let { left: n, width: r } = e.currentTarget.getBoundingClientRect();
+		this._hoverValue = e.clientX - n < r / 2 ? t - .5 : t;
+	}
+	_handleClick(e) {
+		this._isInteractive() && (this.value = this.clearable && this.value === e ? 0 : e, this.dispatchEvent(new CustomEvent("flint-rating-change", {
+			detail: { value: this.value },
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	_handleKeydown(e, t) {
+		if (!this._isInteractive()) return;
+		let n = this.precision === .5 ? .5 : 1, r = this.value;
+		switch (e.key) {
+			case "ArrowRight":
+			case "ArrowUp":
+				e.preventDefault(), r = Math.min(this.max, this.value + n);
+				break;
+			case "ArrowLeft":
+			case "ArrowDown":
+				e.preventDefault(), r = Math.max(0, this.value - n);
+				break;
+			case "Home":
+				e.preventDefault(), r = 0;
+				break;
+			case "End":
+				e.preventDefault(), r = this.max;
+				break;
+			case " ":
+			case "Enter":
+				e.preventDefault(), this._handleClick(t);
+				return;
+			default: return;
+		}
+		r !== this.value && (this.value = r, this.dispatchEvent(new CustomEvent("flint-rating-change", {
+			detail: { value: this.value },
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	_starSvg(e) {
+		let t = "flint-rating-half";
+		return r`
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+                ${e === "half" ? r`
+                    <defs>
+                        <linearGradient id="${t}">
+                            <stop offset="50%" stop-color="var(--flint-rating-color)"></stop>
+                            <stop offset="50%" stop-color="var(--flint-rating-empty-color)"></stop>
+                        </linearGradient>
+                    </defs>
+                    <path fill="url(#${t})" stroke="var(--flint-rating-color)" stroke-width="1"
+                        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
+                ` : r`
+                    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
+                `}
+            </svg>
+        `;
+	}
+	render() {
+		let e = Math.ceil(this.value) || 1, t = [];
+		for (let r = 1; r <= this.max; r++) {
+			let i = this._hoverValue === -1 ? this.value : this._hoverValue, a = this.precision === .5 && i >= r - .5 && i < r, o = i >= r, s = this._hoverValue !== -1, l;
+			l = a ? "half" : o ? "full" : "empty";
+			let u = {
+				"star-wrapper": !0,
+				active: l === "full" && !s,
+				hover: l === "full" && s,
+				half: l === "half",
+				readonly: this.readonly,
+				disabled: this.disabled
+			};
+			t.push(n`
+                <span
+                    class=${c(u)}
+                    role="radio"
+                    aria-label="${r} ${r === 1 ? "star" : "stars"}"
+                    aria-checked=${this.value >= r ? "true" : "false"}
+                    tabindex=${r === e && !this.disabled ? "0" : "-1"}
+                    @mouseenter=${() => this._handleMouseEnter(r)}
+                    @mousemove=${(e) => this._handleMouseMove(e, r)}
+                    @click=${() => this._handleClick(this._hoverValue === -1 ? r : this._hoverValue)}
+                    @keydown=${(e) => this._handleKeydown(e, r)}
+                >
+                    ${this._starSvg(l)}
+                </span>
+            `);
+		}
+		return n`
+            <input class="hidden-input" type="hidden" .name=${this.name} .value=${String(this.value)}>
+            <div
+                class="rating-container"
+                role="radiogroup"
+                aria-label=${this.label}
+                aria-disabled=${this.disabled ? "true" : "false"}
+                aria-readonly=${this.readonly ? "true" : "false"}
+                @mouseleave=${this._handleMouseLeave}
+            >
+                ${t}
+            </div>
+        `;
+	}
+};
+e([o({ type: Number })], u.prototype, "value", void 0), e([o({ type: Number })], u.prototype, "max", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "readonly", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "disabled", void 0), e([o({ type: Boolean })], u.prototype, "clearable", void 0), e([o({ type: Number })], u.prototype, "defaultValue", void 0), e([o({
+	type: String,
+	reflect: !0
+})], u.prototype, "size", void 0), e([o({ type: String })], u.prototype, "name", void 0), e([o({ type: String })], u.prototype, "label", void 0), e([o({ type: Number })], u.prototype, "precision", void 0), e([s()], u.prototype, "_hoverValue", void 0), u = e([a("flint-rating")], u);
+//#endregion
+export { u as t };