@getufy/flint-ui 0.1.0

package/dist/_shared/flint-scroll-area-Dn9yT7ZU.js

@@ -0,0 +1,227 @@
+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, query as o, state as s } from "lit/decorators.js";
+//#region src/scroll-area/flint-scroll-area.css?inline
+var c = ":host{display:block;position:relative;overflow:hidden}.root{width:100%;height:100%;position:relative}.viewport{scrollbar-width:none;-ms-overflow-style:none;width:100%;height:100%;overflow:scroll}.viewport::-webkit-scrollbar{display:none}.scrollbar{z-index:10;opacity:0;background:var(--flint-scrollbar-track-color,transparent);touch-action:none;-webkit-user-select:none;user-select:none;border-radius:var(--flint-scrollbar-thumb-radius,9999px);transition:opacity .15s;position:absolute}.scrollbar--y{width:var(--flint-scrollbar-size,8px);top:0;bottom:0;right:0}.scrollbar--x{bottom:0;left:0;right:var(--flint-scrollbar-size,8px);height:var(--flint-scrollbar-size,8px)}:host([dir=rtl]) .scrollbar--y{left:0;right:auto}:host([dir=rtl]) .scrollbar--x{left:var(--flint-scrollbar-size,8px);right:0}:host([type=always]) .scrollbar,:host([type=auto]) .scrollbar--visible,:host([type=hover]) .root:hover .scrollbar--visible,:host([type=scroll]) .scrollbar--visible.scrollbar--active{opacity:1}.thumb{border-radius:var(--flint-scrollbar-thumb-radius,9999px);background:var(--flint-scrollbar-thumb-color,#00000059);cursor:grab;transition:background .15s;position:absolute}.thumb:active,.thumb--dragging{cursor:grabbing;background:var(--flint-scrollbar-thumb-hover-color,#00000080)}.scrollbar:hover .thumb{background:var(--flint-scrollbar-thumb-hover-color,#00000080)}.thumb--y{min-height:20px;left:2px;right:2px}.thumb--x{min-width:20px;top:2px;bottom:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", l = ":host{z-index:10;touch-action:none;-webkit-user-select:none;user-select:none;background:var(--flint-scrollbar-track-color,transparent);border-radius:var(--flint-scrollbar-thumb-radius,9999px);opacity:0;transition:opacity .15s;display:block;position:absolute}:host([data-visible]){opacity:1}:host([orientation=vertical]){width:var(--flint-scrollbar-size,8px);top:0;bottom:0;right:0}:host([orientation=horizontal]){bottom:0;left:0;right:var(--flint-scrollbar-size,8px);height:var(--flint-scrollbar-size,8px)}.track{cursor:pointer;width:100%;height:100%;position:relative}.thumb{border-radius:var(--flint-scrollbar-thumb-radius,9999px);background:var(--flint-scrollbar-thumb-color,#00000059);cursor:grab;transition:background .15s;position:absolute}.thumb:active,.thumb--dragging{cursor:grabbing;background:var(--flint-scrollbar-thumb-hover-color,#00000080)}:host(:hover) .thumb{background:var(--flint-scrollbar-thumb-hover-color,#00000080)}:host([orientation=vertical]) .thumb{min-height:20px;left:2px;right:2px}:host([orientation=horizontal]) .thumb{min-width:20px;top:2px;bottom:2px}@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.orientation = "vertical", this._thumbPos = 0, this._thumbSize = 100, this._dragging = !1, this._dragStart = 0, this._scrollStart = 0;
+	}
+	static {
+		this.styles = r(l);
+	}
+	setThumb(e, t) {
+		this._thumbPos = e, this._thumbSize = t;
+	}
+	setVisible(e) {
+		this.toggleAttribute("data-visible", e);
+	}
+	get _area() {
+		return this.closest("flint-scroll-area");
+	}
+	_onPointerDown(e) {
+		e.preventDefault(), this._dragging = !0, this._dragStart = this.orientation === "vertical" ? e.clientY : e.clientX, this._scrollStart = this._area?._getScrollPos(this.orientation) ?? 0, e.currentTarget.setPointerCapture(e.pointerId);
+	}
+	_onPointerMove(e) {
+		if (!this._dragging) return;
+		let t = this._area;
+		if (!t) return;
+		let n = this.orientation === "vertical" ? e.clientY - this._dragStart : e.clientX - this._dragStart, r = this.orientation === "vertical" ? this.offsetHeight : this.offsetWidth;
+		if (r === 0) return;
+		let i = t._getScrollRange(this.orientation);
+		t._setScrollPos(this.orientation, this._scrollStart + n / r * i);
+	}
+	_onPointerUp(e) {
+		this._dragging && (this._dragging = !1, e.currentTarget.releasePointerCapture(e.pointerId));
+	}
+	render() {
+		let e = this.orientation === "vertical" ? `height: ${this._thumbSize}%; top: ${this._thumbPos}%;` : `width: ${this._thumbSize}%; left: ${this._thumbPos}%;`;
+		return n`
+            <div
+                class="track"
+                role="scrollbar"
+                aria-orientation=${this.orientation}
+                aria-valuenow=${Math.round(this._thumbPos)}
+                aria-valuemin="0"
+                aria-valuemax="100"
+                @pointerdown=${this._onPointerDown}
+                @pointermove=${this._onPointerMove}
+                @pointerup=${this._onPointerUp}
+                @pointercancel=${this._onPointerUp}
+            >
+                <div
+                    class="thumb ${this._dragging ? "thumb--dragging" : ""}"
+                    style=${e}
+                ></div>
+            </div>
+        `;
+	}
+};
+e([a({ reflect: !0 })], u.prototype, "orientation", void 0), e([s()], u.prototype, "_thumbPos", void 0), e([s()], u.prototype, "_thumbSize", void 0), e([s()], u.prototype, "_dragging", void 0), u = e([i("flint-scroll-bar")], u);
+var d = class extends t {
+	constructor(...e) {
+		super(...e), this.type = "hover", this.dir = "ltr", this._thumbYPos = 0, this._thumbYSize = 100, this._thumbXPos = 0, this._thumbXSize = 100, this._hasOverflowY = !1, this._hasOverflowX = !1, this._isScrolling = !1, this._hideTimer = null, this._draggingY = !1, this._dragYStart = 0, this._scrollYStart = 0, this._draggingX = !1, this._dragXStart = 0, this._scrollXStart = 0;
+	}
+	static {
+		this.styles = r(c);
+	}
+	firstUpdated() {
+		typeof ResizeObserver < "u" && (this._resizeObserver = new ResizeObserver(() => {
+			this._updateOverflow(), this._syncScrollBars();
+		}), this._resizeObserver.observe(this._viewport)), this._updateOverflow(), this._syncScrollBars();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._resizeObserver?.disconnect(), this._hideTimer && clearTimeout(this._hideTimer);
+	}
+	scrollTo(e, t) {
+		typeof this._viewport?.scrollTo == "function" && (typeof e == "number" ? this._viewport.scrollTo(e, t ?? 0) : this._viewport.scrollTo(e));
+	}
+	scrollBy(e, t) {
+		typeof this._viewport?.scrollBy == "function" && (typeof e == "number" ? this._viewport.scrollBy(e, t ?? 0) : this._viewport.scrollBy(e));
+	}
+	_getScrollPos(e) {
+		return this._viewport ? e === "vertical" ? this._viewport.scrollTop : this._viewport.scrollLeft : 0;
+	}
+	_getScrollRange(e) {
+		return this._viewport ? e === "vertical" ? this._viewport.scrollHeight - this._viewport.clientHeight : this._viewport.scrollWidth - this._viewport.clientWidth : 0;
+	}
+	_setScrollPos(e, t) {
+		if (!this._viewport) return;
+		let n = this._getScrollRange(e), r = Math.max(0, Math.min(t, n));
+		e === "vertical" ? this._viewport.scrollTop = r : this._viewport.scrollLeft = r;
+	}
+	_onScroll() {
+		this._updateOverflow(), this._syncScrollBars(), this.type === "scroll" && (this._isScrolling = !0, this._hideTimer && clearTimeout(this._hideTimer), this._hideTimer = setTimeout(() => {
+			this._isScrolling = !1;
+		}, 600));
+	}
+	_updateOverflow() {
+		let e = this._viewport;
+		e && (this._hasOverflowY = e.scrollHeight > e.clientHeight + 1, this._hasOverflowX = e.scrollWidth > e.clientWidth + 1);
+	}
+	_computeThumb(e) {
+		let t = this._viewport;
+		if (!t) return {
+			pos: 0,
+			size: 100
+		};
+		let n = e === "vertical" ? t.scrollHeight : t.scrollWidth, r = e === "vertical" ? t.clientHeight : t.clientWidth, i = this._getScrollPos(e), a = this._getScrollRange(e);
+		if (n <= r || a <= 0) return {
+			pos: 0,
+			size: 100
+		};
+		let o = Math.max(10, r / n * 100);
+		return {
+			pos: i / a * (100 - o),
+			size: o
+		};
+	}
+	_syncScrollBars() {
+		let { pos: e, size: t } = this._computeThumb("vertical"), { pos: n, size: r } = this._computeThumb("horizontal");
+		this._thumbYPos = e, this._thumbYSize = t, this._thumbXPos = n, this._thumbXSize = r, this.querySelectorAll("flint-scroll-bar").forEach((i) => {
+			if (i.closest("flint-scroll-area") !== this) return;
+			let a = i;
+			a.orientation === "vertical" ? (a.setThumb(e, t), a.setVisible(this._shouldShowBar("vertical"))) : (a.setThumb(n, r), a.setVisible(this._shouldShowBar("horizontal")));
+		});
+	}
+	_shouldShowBar(e) {
+		let t = e === "vertical" ? this._hasOverflowY : this._hasOverflowX;
+		switch (this.type) {
+			case "always": return !0;
+			case "auto": return t;
+			case "scroll": return this._isScrolling && t;
+			case "hover": return t;
+			default: return t;
+		}
+	}
+	_scrollbarClasses(e) {
+		return `scrollbar scrollbar--${e === "vertical" ? "y" : "x"} ${this._shouldShowBar(e) ? "scrollbar--visible" : ""} ${this._isScrolling ? "scrollbar--active" : ""}`.trim();
+	}
+	_onThumbYDown(e) {
+		e.preventDefault(), this._draggingY = !0, this._dragYStart = e.clientY, this._scrollYStart = this._getScrollPos("vertical"), e.currentTarget.setPointerCapture(e.pointerId), this.requestUpdate();
+	}
+	_onThumbYMove(e) {
+		if (!this._draggingY) return;
+		let t = this._scrollbarY?.offsetHeight ?? 0;
+		if (t === 0) return;
+		let n = e.clientY - this._dragYStart;
+		this._setScrollPos("vertical", this._scrollYStart + n / t * this._getScrollRange("vertical"));
+	}
+	_onThumbYUp(e) {
+		this._draggingY && (this._draggingY = !1, e.currentTarget.releasePointerCapture(e.pointerId), this.requestUpdate());
+	}
+	_onThumbXDown(e) {
+		e.preventDefault(), this._draggingX = !0, this._dragXStart = e.clientX, this._scrollXStart = this._getScrollPos("horizontal"), e.currentTarget.setPointerCapture(e.pointerId), this.requestUpdate();
+	}
+	_onThumbXMove(e) {
+		if (!this._draggingX) return;
+		let t = this._scrollbarX?.offsetWidth ?? 0;
+		if (t === 0) return;
+		let n = e.clientX - this._dragXStart;
+		this._setScrollPos("horizontal", this._scrollXStart + n / t * this._getScrollRange("horizontal"));
+	}
+	_onThumbXUp(e) {
+		this._draggingX && (this._draggingX = !1, e.currentTarget.releasePointerCapture(e.pointerId), this.requestUpdate());
+	}
+	_onSlotChange() {
+		this._resizeObserver && this.shadowRoot.querySelector("slot:not([name])")?.assignedElements({ flatten: !0 }).forEach((e) => {
+			this._resizeObserver.observe(e);
+		}), this._updateOverflow(), this._syncScrollBars();
+	}
+	render() {
+		let e = `height: ${this._thumbYSize}%; top: ${this._thumbYPos}%;`, t = `width: ${this._thumbXSize}%; left: ${this._thumbXPos}%;`;
+		return n`
+            <div class="root">
+                <div class="viewport" dir=${this.dir} tabindex="0" @scroll=${this._onScroll}>
+                    <slot @slotchange=${this._onSlotChange}></slot>
+                </div>
+
+                <!-- built-in vertical scrollbar -->
+                <div
+                    class=${this._scrollbarClasses("vertical")}
+                    role="scrollbar"
+                    aria-orientation="vertical"
+                    aria-valuenow=${Math.round(this._thumbYPos)}
+                    aria-valuemin="0"
+                    aria-valuemax="100"
+                >
+                    <div
+                        class="thumb thumb--y ${this._draggingY ? "thumb--dragging" : ""}"
+                        style=${e}
+                        @pointerdown=${this._onThumbYDown}
+                        @pointermove=${this._onThumbYMove}
+                        @pointerup=${this._onThumbYUp}
+                        @pointercancel=${this._onThumbYUp}
+                    ></div>
+                </div>
+
+                <!-- built-in horizontal scrollbar -->
+                <div
+                    class=${this._scrollbarClasses("horizontal")}
+                    role="scrollbar"
+                    aria-orientation="horizontal"
+                    aria-valuenow=${Math.round(this._thumbXPos)}
+                    aria-valuemin="0"
+                    aria-valuemax="100"
+                >
+                    <div
+                        class="thumb thumb--x ${this._draggingX ? "thumb--dragging" : ""}"
+                        style=${t}
+                        @pointerdown=${this._onThumbXDown}
+                        @pointermove=${this._onThumbXMove}
+                        @pointerup=${this._onThumbXUp}
+                        @pointercancel=${this._onThumbXUp}
+                    ></div>
+                </div>
+
+                <!-- slot for user-provided flint-scroll-bar elements -->
+                <slot
+                    name="scrollbar"
+                    @slotchange=${() => this._syncScrollBars()}
+                ></slot>
+            </div>
+        `;
+	}
+};
+e([a({ reflect: !0 })], d.prototype, "type", void 0), e([a({ reflect: !0 })], d.prototype, "dir", void 0), e([o(".viewport")], d.prototype, "_viewport", void 0), e([o(".scrollbar--y")], d.prototype, "_scrollbarY", void 0), e([o(".scrollbar--x")], d.prototype, "_scrollbarX", void 0), e([s()], d.prototype, "_thumbYPos", void 0), e([s()], d.prototype, "_thumbYSize", void 0), e([s()], d.prototype, "_thumbXPos", void 0), e([s()], d.prototype, "_thumbXSize", void 0), e([s()], d.prototype, "_hasOverflowY", void 0), e([s()], d.prototype, "_hasOverflowX", void 0), e([s()], d.prototype, "_isScrolling", void 0), d = e([i("flint-scroll-area")], d);
+//#endregion
+export { u as n, d as t };

package/dist/_shared/flint-select-Bhc3BR09.js

@@ -0,0 +1,249 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { t } from "./form-associated-EGIhyHHt.js";
+import { LitElement as n, html as r, nothing as i, unsafeCSS as a } from "lit";
+import { customElement as o, property as s, state as c } from "lit/decorators.js";
+import { classMap as l } from "lit/directives/class-map.js";
+import { repeat as u } from "lit/directives/repeat.js";
+//#region src/select/flint-select.css?inline
+var d = ":host{--_h:40px;--_px:12px;--_font:.875rem;--flint-select-bg:var(--flint-input-bg);--flint-select-border:var(--flint-input-border-color);--flint-select-radius:var(--flint-input-border-radius);--flint-select-focus-color:var(--flint-primary-color);--flint-select-error-color:var(--flint-error-color);--flint-select-option-hover-bg:var(--flint-hover-color);--flint-select-option-selected-bg:var(--flint-primary-color-light);--flint-select-option-selected-color:var(--flint-primary-color);--flint-select-chip-bg:var(--flint-primary-color);--flint-select-chip-color:var(--flint-text-color-on-primary);--flint-select-chip-radius:16px;font-family:var(--flint-font-family);display:block}:host([size=sm]){--_h:32px;--_px:8px;--_font:.8125rem}:host([size=md]){--_h:40px;--_px:12px;--_font:.875rem}:host([size=lg]){--_h:48px;--_px:16px;--_font:.9375rem}.wrapper{flex-direction:column;gap:6px;display:flex;position:relative}label{color:var(--flint-label-color);margin-left:2px;font-size:.875rem;font-weight:500}.select-trigger{min-height:var(--_h);padding:0 var(--_px);background-color:var(--flint-select-bg);border:1.5px solid var(--flint-select-border);border-radius:var(--flint-select-radius);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;align-items:center;gap:10px;transition:border-color .2s,box-shadow .2s;display:flex;position:relative}.select-trigger:hover:not(.disabled):not(.readonly){border-color:var(--flint-input-border-hover-color)}.select-trigger.focused{border-color:var(--flint-select-focus-color);box-shadow:0 0 0 3px var(--flint-primary-focus-ring)}:host([error]) .select-trigger{border-color:var(--flint-select-error-color)}:host([error]) .select-trigger.focused{box-shadow:0 0 0 3px var(--flint-error-focus-ring)}.select-trigger.disabled{opacity:.6;cursor:not-allowed;background-color:var(--flint-input-disabled-bg)}.select-trigger.readonly{cursor:default;background-color:var(--flint-input-readonly-bg)}.value-container{flex-wrap:wrap;flex:1;align-items:center;gap:6px;min-height:24px;padding:6px 0;display:flex;overflow:hidden}.placeholder{color:var(--flint-input-placeholder-color);font-size:var(--_font)}.single-value{color:var(--flint-text-color);font-size:var(--_font);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.chip{background-color:var(--flint-select-chip-bg);color:var(--flint-select-chip-color);border-radius:var(--flint-select-chip-radius);align-items:center;gap:4px;padding:2px 8px 2px 10px;font-size:.75rem;font-weight:600;animation:.2s ease-out chip-in;display:flex}@keyframes chip-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.chip-remove{cursor:pointer;opacity:.8;color:inherit;background:0 0;border:none;justify-content:center;align-items:center;padding:0;line-height:0;transition:opacity .2s;display:flex}.chip-remove:hover{opacity:1}.arrow{color:var(--flint-text-color-muted);flex-shrink:0;justify-content:center;align-items:center;transition:transform .3s;display:flex}.select-trigger.open .arrow{color:var(--flint-select-focus-color);transform:rotate(180deg)}.dropdown{background-color:var(--flint-select-bg);border-radius:var(--flint-select-radius);box-shadow:var(--flint-shadow-lg);border:1px solid var(--flint-border-color);z-index:1000;opacity:0;pointer-events:none;max-height:260px;transition:opacity .15s,transform .15s;position:absolute;left:0;right:0;overflow-y:auto}.dropdown.below{top:calc(100% + 6px);transform:translateY(-8px)}.dropdown.above{bottom:calc(100% + 6px);transform:translateY(8px)}.dropdown.open{opacity:1;pointer-events:auto;transform:translateY(0)}.option{cursor:pointer;color:var(--flint-text-color);font-size:var(--_font);justify-content:space-between;align-items:center;padding:10px 14px;transition:background-color .15s;display:flex}.option.highlighted{background-color:var(--flint-select-option-hover-bg)}.option.selected{background-color:var(--flint-select-option-selected-bg);color:var(--flint-select-option-selected-color);font-weight:600}.option.option-disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.check-icon{color:var(--flint-select-option-selected-color);opacity:0;flex-shrink:0;transition:opacity .15s}.option.selected .check-icon{opacity:1}.no-options{color:var(--flint-text-color-muted);cursor:default;padding:12px 16px;font-size:.875rem}.error-message{color:var(--flint-select-error-color);margin-left:2px;font-size:.75rem}.dropdown::-webkit-scrollbar{width:6px}.dropdown::-webkit-scrollbar-track{background:0 0}.dropdown::-webkit-scrollbar-thumb{background:var(--flint-border-color);border-radius:3px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", f = 0, p = class extends t(n) {
+	constructor(...e) {
+		super(...e), this.label = "", this.options = [], this.value = [], this.multiple = !1, this.placeholder = "Select an option", this.disabled = !1, this.readonly = !1, this.required = !1, this.error = !1, this.errorMessage = "", this.name = "", this.size = "md", this.defaultValue = "", this._isOpen = !1, this._highlightedIndex = -1, this._isFocused = !1, this._opensUp = !1, this._uid = `flint-select-${++f}`, this._handleOutsideClick = (e) => {
+			if (!this._isOpen) return;
+			let t = e.composedPath();
+			(t.length > 0 ? t.includes(this) : this.contains(e.target)) || (this._isOpen = !1, this._highlightedIndex = -1);
+		}, this._handleKeydown = (e) => {
+			let t = this.options.map((e, t) => ({
+				o: e,
+				i: t
+			})).filter(({ o: e }) => !e.disabled);
+			switch (e.key) {
+				case "ArrowDown":
+					if (e.preventDefault(), !this._isOpen) this._toggleDropdown(), this._highlightedIndex === -1 && t.length > 0 && (this._highlightedIndex = t[0].i);
+					else {
+						let e = t[t.findIndex(({ i: e }) => e === this._highlightedIndex) + 1];
+						e && (this._highlightedIndex = e.i, this._scrollOptionIntoView(e.i));
+					}
+					break;
+				case "ArrowUp":
+					if (e.preventDefault(), this._isOpen) {
+						let e = t.findIndex(({ i: e }) => e === this._highlightedIndex), n = e > 0 ? t[e - 1] : null;
+						n && (this._highlightedIndex = n.i, this._scrollOptionIntoView(n.i));
+					}
+					break;
+				case "Home":
+					e.preventDefault(), this._isOpen && t.length > 0 && (this._highlightedIndex = t[0].i, this._scrollOptionIntoView(t[0].i));
+					break;
+				case "End":
+					e.preventDefault(), this._isOpen && t.length > 0 && (this._highlightedIndex = t[t.length - 1].i, this._scrollOptionIntoView(t[t.length - 1].i));
+					break;
+				case "Enter":
+				case " ":
+					e.preventDefault(), this._isOpen ? this._highlightedIndex >= 0 && this._handleOptionClick(this.options[this._highlightedIndex], e) : this._toggleDropdown();
+					break;
+				case "Escape":
+					this._isOpen && (e.preventDefault(), this._isOpen = !1, this._highlightedIndex = -1);
+					break;
+				case "Tab":
+					this._isOpen && (this._isOpen = !1, this._highlightedIndex = -1);
+					break;
+			}
+		};
+	}
+	static {
+		this.styles = a(d);
+	}
+	connectedCallback() {
+		super.connectedCallback(), document.addEventListener("click", this._handleOutsideClick);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick);
+	}
+	formResetCallback() {
+		this.value = this.defaultValue ? [this.defaultValue] : [], this._updateFormValue();
+	}
+	willUpdate(e) {
+		this._firstUpdate && (this._firstUpdate = !1, this.defaultValue && this.value.length === 0 && (this.value = [this.defaultValue])), (e.has("value") || e.has("name") || e.has("required")) && this._updateFormValue();
+	}
+	_updateFormValue() {
+		if (this.multiple) {
+			let e = new FormData();
+			this.value.forEach((t) => e.append(this.name || "select", t)), this._initFormValue(e);
+		} else this._initFormValue(this.value[0] ?? "");
+		this._initFormValidity(this.required, this.value.length === 0, "Please select an option");
+	}
+	_toggleDropdown() {
+		if (!(this.disabled || this.readonly)) {
+			if (this._isOpen) this._highlightedIndex = -1;
+			else {
+				let e = this.getBoundingClientRect();
+				this._opensUp = window.innerHeight - e.bottom < 280, this._highlightedIndex = this.value.length > 0 ? this.options.findIndex((e) => e.value === this.value[0]) : -1;
+			}
+			this._isOpen = !this._isOpen;
+		}
+	}
+	_handleOptionClick(e, t) {
+		if (!e.disabled) {
+			if (t.stopPropagation(), this.multiple) {
+				let t = [...this.value], n = t.indexOf(e.value);
+				n > -1 ? t.splice(n, 1) : t.push(e.value), this.value = t;
+			} else this.value = [e.value], this._isOpen = !1, this._highlightedIndex = -1;
+			this._dispatchChange();
+		}
+	}
+	_removeValue(e, t) {
+		t.stopPropagation(), this.value = this.value.filter((t) => t !== e), this._dispatchChange(), this.shadowRoot?.querySelector(".select-trigger")?.focus();
+	}
+	_dispatchChange() {
+		this.dispatchEvent(new CustomEvent("flint-select-change", {
+			detail: { value: this.multiple ? this.value : this.value[0] ?? null },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_scrollOptionIntoView(e) {
+		this.updateComplete.then(() => {
+			let t = this.shadowRoot?.querySelector(`#${this._uid}-opt-${e}`);
+			t && typeof t.scrollIntoView == "function" && t.scrollIntoView({ block: "nearest" });
+		});
+	}
+	render() {
+		let e = this.options.filter((e) => this.value.includes(e.value)), t = `${this._uid}-label`, n = `${this._uid}-listbox`, a = this._highlightedIndex >= 0 ? `${this._uid}-opt-${this._highlightedIndex}` : "";
+		return r`
+      <div class="wrapper">
+        ${this.label ? r`<label id=${t}>${this.label}</label>` : i}
+
+        <div
+          class=${l({
+			"select-trigger": !0,
+			focused: this._isOpen || this._isFocused,
+			open: this._isOpen,
+			disabled: this.disabled,
+			readonly: this.readonly,
+			"has-value": e.length > 0
+		})}
+          tabindex=${this.disabled ? "-1" : "0"}
+          role="combobox"
+          aria-expanded=${this._isOpen ? "true" : "false"}
+          aria-haspopup="listbox"
+          aria-controls=${n}
+          aria-labelledby=${this.label ? t : i}
+          aria-activedescendant=${a || i}
+          aria-disabled=${this.disabled ? "true" : i}
+          aria-required=${this.required ? "true" : i}
+          @click=${this._toggleDropdown}
+          @keydown=${this._handleKeydown}
+          @focus=${() => {
+			this._isFocused = !0;
+		}}
+          @blur=${() => {
+			this._isFocused = !1;
+		}}
+        >
+          <slot name="icon"></slot>
+
+          <div class="value-container">
+            ${e.length === 0 ? r`
+              <span class="placeholder">${this.placeholder}</span>
+            ` : i}
+
+            ${this.multiple ? u(e, (e) => e.value, (e) => r`
+                  <span class="chip">
+                    ${e.label}
+                    <button
+                      type="button"
+                      class="chip-remove"
+                      aria-label="Remove ${e.label}"
+                      @click=${(t) => this._removeValue(e.value, t)}
+                    >
+                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+                        <path d="M18 6L6 18M6 6l12 12"></path>
+                      </svg>
+                    </button>
+                  </span>
+                `) : e[0] ? r`
+                  <span class="single-value">${e[0].label}</span>
+                ` : i}
+          </div>
+
+          <div class="arrow">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="6 9 12 15 18 9"></polyline>
+            </svg>
+          </div>
+        </div>
+
+        <div
+          id=${n}
+          class=${l({
+			dropdown: !0,
+			open: this._isOpen,
+			above: this._opensUp,
+			below: !this._opensUp
+		})}
+          role="listbox"
+          aria-multiselectable=${this.multiple ? "true" : "false"}
+        >
+          ${this.options.length === 0 ? r`<div class="no-options">No options available</div>` : u(this.options, (e) => e.value, (e, t) => {
+			let n = this.value.includes(e.value);
+			return r`
+                  <div
+                    id=${`${this._uid}-opt-${t}`}
+                    class=${l({
+				option: !0,
+				selected: n,
+				highlighted: t === this._highlightedIndex,
+				"option-disabled": !!e.disabled
+			})}
+                    @click=${(t) => this._handleOptionClick(e, t)}
+                    @mouseenter=${() => {
+				e.disabled || (this._highlightedIndex = t);
+			}}
+                    role="option"
+                    aria-selected=${n ? "true" : "false"}
+                    aria-disabled=${e.disabled ? "true" : i}
+                  >
+                    <span>${e.label}</span>
+                    <div class="check-icon">
+                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+                        <polyline points="20 6 9 17 4 12"></polyline>
+                      </svg>
+                    </div>
+                  </div>
+                `;
+		})}
+        </div>
+
+        ${this.error ? r`
+          <span class="error-message" role="alert">
+            ${this.errorMessage}
+            <slot name="error-message"></slot>
+          </span>
+        ` : i}
+      </div>
+    `;
+	}
+};
+e([s({ type: String })], p.prototype, "label", void 0), e([s({ type: Array })], p.prototype, "options", void 0), e([s({ type: Array })], p.prototype, "value", void 0), e([s({ type: Boolean })], p.prototype, "multiple", void 0), e([s({ type: String })], p.prototype, "placeholder", void 0), e([s({
+	type: Boolean,
+	reflect: !0
+})], p.prototype, "disabled", void 0), e([s({
+	type: Boolean,
+	reflect: !0
+})], p.prototype, "readonly", void 0), e([s({
+	type: Boolean,
+	reflect: !0
+})], p.prototype, "required", void 0), e([s({
+	type: Boolean,
+	reflect: !0
+})], p.prototype, "error", void 0), e([s({
+	type: String,
+	attribute: "error-message"
+})], p.prototype, "errorMessage", void 0), e([s({ type: String })], p.prototype, "name", void 0), e([s({
+	type: String,
+	reflect: !0
+})], p.prototype, "size", void 0), e([s({
+	type: String,
+	attribute: "default-value"
+})], p.prototype, "defaultValue", void 0), e([c()], p.prototype, "_isOpen", void 0), e([c()], p.prototype, "_highlightedIndex", void 0), e([c()], p.prototype, "_isFocused", void 0), e([c()], p.prototype, "_opensUp", void 0), p = e([o("flint-select")], p);
+//#endregion
+export { p as t };

package/dist/_shared/flint-simple-tree-view-DD3zHLzJ.js

@@ -0,0 +1,175 @@
+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/tree-view/flint-simple-tree-view.css?inline
+var o = ":host{font-family:var(--flint-font-family,system-ui, sans-serif);display:block}.tree-root{padding:4px 0}", s = class extends t {
+	constructor(...e) {
+		super(...e), this.disabledItemsFocusable = !1, this.defaultExpandedItems = [], this.expansionTrigger = "content", this._internalExpandedItems = /* @__PURE__ */ new Set(), this._expansionInitialized = !1, this._handleKeydown = (e) => {
+			let t = e.target;
+			if (t.tagName !== "FLINT-TREE-ITEM") return;
+			let n = t, r = this._getFocusableItems(), i = r.indexOf(n);
+			switch (e.key) {
+				case "ArrowDown": {
+					e.preventDefault();
+					let t = r[i + 1];
+					t && this._focusItem(t);
+					break;
+				}
+				case "ArrowUp": {
+					e.preventDefault();
+					let t = r[i - 1];
+					t && this._focusItem(t);
+					break;
+				}
+				case "ArrowRight":
+					if (e.preventDefault(), n.disabled) break;
+					if (!n.expanded && this._itemHasChildren(n)) this._handleToggle(n, !0);
+					else if (n.expanded) {
+						let e = this._getFocusableItems(), t = e[e.indexOf(n) + 1];
+						t && this._focusItem(t);
+					}
+					break;
+				case "ArrowLeft":
+					if (e.preventDefault(), n.disabled) break;
+					if (n.expanded) this._handleToggle(n, !1);
+					else {
+						let e = n.parentElement;
+						e && e.tagName === "FLINT-TREE-ITEM" && this._focusItem(e);
+					}
+					break;
+				case "Home": {
+					e.preventDefault();
+					let t = r[0];
+					t && this._focusItem(t);
+					break;
+				}
+				case "End": {
+					e.preventDefault();
+					let t = r[r.length - 1];
+					t && this._focusItem(t);
+					break;
+				}
+				case "Enter":
+				case " ":
+					if (e.preventDefault(), n.disabled) break;
+					this._itemHasChildren(n) && this._handleToggle(n, !n.expanded), this.onItemClick?.(n.itemId), this.dispatchEvent(new CustomEvent("flint-tree-view-item-click", {
+						detail: { itemId: n.itemId },
+						bubbles: !1
+					}));
+					break;
+				default: if (e.key.length === 1) {
+					let t = e.key.toLowerCase(), n = i < 0 ? 0 : i + 1, a = [...r.slice(n), ...r.slice(0, n)].find((e) => e.label.toLowerCase().startsWith(t));
+					a && this._focusItem(a);
+				}
+			}
+		};
+	}
+	static {
+		this.styles = r(o);
+	}
+	get _isControlled() {
+		return this.expandedItems !== void 0;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("keydown", this._handleKeydown), this.addEventListener("flint-tree-item-click", this._handleItemClick), this.addEventListener("flint-tree-item-toggle", this._handleFlintToggle), this.addEventListener("focusin", this._handleFocusIn);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("keydown", this._handleKeydown), this.removeEventListener("flint-tree-item-click", this._handleItemClick), this.removeEventListener("flint-tree-item-toggle", this._handleFlintToggle), this.removeEventListener("focusin", this._handleFocusIn);
+	}
+	updated(e) {
+		super.updated(e), e.has("disabledItemsFocusable") && this._initRovingTabindex(), e.has("expandedItems") && this._syncExpansion();
+	}
+	_getAllItems() {
+		return Array.from(this.querySelectorAll("flint-tree-item"));
+	}
+	_getVisibleItems() {
+		return this._getAllItems().filter((e) => this._isVisible(e));
+	}
+	_isVisible(e) {
+		let t = e.parentElement;
+		for (; t && t !== this;) {
+			if (t.tagName === "FLINT-TREE-ITEM" && !t.expanded) return !1;
+			t = t.parentElement;
+		}
+		return !0;
+	}
+	_getFocusableItems() {
+		let e = this._getVisibleItems();
+		return this.disabledItemsFocusable ? e : e.filter((e) => !e.disabled);
+	}
+	_itemHasChildren(e) {
+		return Array.from(e.children).some((e) => e.tagName === "FLINT-TREE-ITEM");
+	}
+	_initExpansion() {
+		this._expansionInitialized || (this._expansionInitialized = !0, !this._isControlled && this.defaultExpandedItems.length > 0 && (this._internalExpandedItems = new Set(this.defaultExpandedItems)));
+	}
+	_syncExpansion() {
+		let e = this._isControlled ? new Set(this.expandedItems) : this._internalExpandedItems;
+		this._getAllItems().forEach((t) => {
+			let n = e.has(t.itemId);
+			t.expanded !== n && (t.expanded = n);
+		});
+	}
+	_handleToggle(e, t) {
+		if (this._isControlled) {
+			let n = new Set(this.expandedItems);
+			t ? n.add(e.itemId) : n.delete(e.itemId);
+			let r = Array.from(n);
+			this.onExpandedItemsChange?.(r), this.dispatchEvent(new CustomEvent("flint-tree-view-expanded-items-change", {
+				detail: { expandedItems: r },
+				bubbles: !1
+			})), this._syncExpansion();
+		} else t ? this._internalExpandedItems.add(e.itemId) : this._internalExpandedItems.delete(e.itemId), this._syncExpansion();
+	}
+	_initRovingTabindex() {
+		let e = this._getAllItems();
+		if (e.length !== 0 && !e.some((e) => e.getAttribute("tabindex") === "0")) {
+			let t = this.disabledItemsFocusable ? e[0] : e.find((e) => !e.disabled);
+			t && t.setAttribute("tabindex", "0");
+		}
+	}
+	_focusItem(e) {
+		this._getAllItems().forEach((e) => e.setAttribute("tabindex", "-1")), e.setAttribute("tabindex", "0"), e.focus();
+	}
+	_handleFocusIn(e) {
+		let t = e.target;
+		t.tagName === "FLINT-TREE-ITEM" && (this._getAllItems().forEach((e) => e.setAttribute("tabindex", "-1")), t.setAttribute("tabindex", "0"));
+	}
+	_handleFlintToggle(e) {
+		let { itemId: t, expanded: n } = e.detail, r = this.getItemDOMElement(t);
+		r && this._handleToggle(r, n);
+	}
+	_handleItemClick(e) {
+		let { itemId: t } = e.detail;
+		if (this.expansionTrigger === "content") {
+			let e = this.getItemDOMElement(t);
+			e && this._itemHasChildren(e) && this._handleToggle(e, !e.expanded);
+		}
+		this.onItemClick?.(t), this.dispatchEvent(new CustomEvent("flint-tree-view-item-click", {
+			detail: { itemId: t },
+			bubbles: !1
+		}));
+	}
+	getItemDOMElement(e) {
+		return this._getAllItems().find((t) => t.itemId === e) ?? null;
+	}
+	_onSlotChange() {
+		this._initRovingTabindex(), this._initExpansion(), this._syncExpansion();
+	}
+	render() {
+		return n`
+      <div class="tree-root" role="tree">
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+    `;
+	}
+};
+e([a({
+	type: Boolean,
+	attribute: "disabled-items-focusable"
+})], s.prototype, "disabledItemsFocusable", void 0), e([a({ attribute: !1 })], s.prototype, "onItemClick", void 0), e([a({ attribute: !1 })], s.prototype, "expandedItems", void 0), e([a({ attribute: !1 })], s.prototype, "defaultExpandedItems", void 0), e([a({ attribute: !1 })], s.prototype, "onExpandedItemsChange", void 0), e([a({
+	type: String,
+	attribute: "expansion-trigger"
+})], s.prototype, "expansionTrigger", void 0), s = e([i("flint-simple-tree-view")], s);
+//#endregion
+export { s as t };