@getufy/flint-ui 0.1.0

package/dist/_shared/flint-toggle-DTT9i3J2.js

@@ -0,0 +1,61 @@
+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";
+//#region src/toggle/flint-toggle.css?inline
+var s = ":host{font-family:var(--flint-font-family);display:inline-flex}:host([disabled]){cursor:not-allowed;pointer-events:none}.toggle{border-radius:var(--flint-toggle-border-radius,var(--flint-border-radius-md));padding:var(--flint-toggle-padding-y,.5rem) var(--flint-toggle-padding-x,.75rem);min-width:var(--flint-toggle-min-width,2.25rem);min-height:var(--flint-toggle-min-height,2.25rem);font-size:var(--flint-toggle-font-size,.875rem);color:var(--flint-toggle-color,var(--flint-text-color));background-color:var(--flint-toggle-bg,transparent);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;box-sizing:border-box;border:1px solid #0000;justify-content:center;align-items:center;gap:.5rem;font-family:inherit;font-weight:500;line-height:1;text-decoration:none;transition:background-color .15s,color .15s,border-color .15s;display:inline-flex}.toggle:hover:not([disabled]){background-color:var(--flint-toggle-bg-hover,var(--flint-muted-background));color:var(--flint-toggle-color-hover,var(--flint-text-color))}.toggle[aria-pressed=true]{background-color:var(--flint-toggle-bg-pressed,var(--flint-primary-color-light));color:var(--flint-toggle-color-pressed,var(--flint-primary-color))}.toggle[aria-pressed=true]:hover:not([disabled]){background-color:var(--flint-toggle-bg-pressed-hover,var(--flint-primary-color-light-hover))}.toggle[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}.toggle:focus-visible{outline:2px solid var(--flint-primary-color);outline-offset:2px}:host([size=sm]) .toggle{padding:var(--flint-toggle-padding-y-sm,.375rem) var(--flint-toggle-padding-x-sm,.625rem);min-width:2rem;min-height:2rem;font-size:.8125rem}:host([size=lg]) .toggle{padding:var(--flint-toggle-padding-y-lg,.625rem) var(--flint-toggle-padding-x-lg,1rem);min-width:2.75rem;min-height:2.75rem;font-size:1rem}:host([variant=outline]) .toggle{border-color:var(--flint-toggle-border-color,var(--flint-border-color));background-color:var(--flint-toggle-bg,var(--flint-surface-1))}:host([variant=outline]) .toggle:hover:not([disabled]){background-color:var(--flint-toggle-bg-hover,var(--flint-muted-background));border-color:var(--flint-toggle-border-color,var(--flint-border-color))}:host([variant=outline]) .toggle[aria-pressed=true]{background-color:var(--flint-toggle-bg-pressed,var(--flint-primary-color-light));color:var(--flint-toggle-color-pressed,var(--flint-primary-color));border-color:var(--flint-toggle-border-pressed-color,var(--flint-primary-color-light-hover))}:host([variant=outline]) .toggle[aria-pressed=true]:hover:not([disabled]){background-color:var(--flint-toggle-bg-pressed-hover,var(--flint-primary-color-light-hover))}:host([dir=rtl]) .toggle{direction:rtl}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", c = class extends t {
+	constructor(...e) {
+		super(...e), this.pressed = !1, this.disabled = !1, this.variant = "default", this.size = "default", this.dir = "ltr", this.defaultPressed = !1, this.ariaLabel = null, this._firstUpdate = !0;
+	}
+	static {
+		this.styles = i(s);
+	}
+	willUpdate(e) {
+		super.willUpdate(e), this._firstUpdate && (this._firstUpdate = !1, this.defaultPressed && (this.pressed = !0));
+	}
+	_handleClick() {
+		this.disabled || (this.pressed = !this.pressed, this.dispatchEvent(new CustomEvent("flint-toggle-change", {
+			detail: { pressed: this.pressed },
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	_handleKeydown(e) {
+		(e.key === " " || e.key === "Enter") && (e.preventDefault(), this._handleClick());
+	}
+	render() {
+		return n`
+            <button
+                class="toggle"
+                type="button"
+                aria-pressed=${this.pressed ? "true" : "false"}
+                aria-label=${this.ariaLabel || r}
+                ?disabled=${this.disabled}
+                @click=${this._handleClick}
+                @keydown=${this._handleKeydown}
+            >
+                <slot></slot>
+            </button>
+        `;
+	}
+};
+e([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "pressed", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "disabled", void 0), e([o({
+	type: String,
+	reflect: !0
+})], c.prototype, "variant", void 0), e([o({
+	type: String,
+	reflect: !0
+})], c.prototype, "size", void 0), e([o({
+	type: String,
+	reflect: !0
+})], c.prototype, "dir", void 0), e([o({
+	type: Boolean,
+	attribute: "default-pressed"
+})], c.prototype, "defaultPressed", void 0), e([o({ attribute: "aria-label" })], c.prototype, "ariaLabel", void 0), c = e([a("flint-toggle")], c);
+//#endregion
+export { c as t };

package/dist/_shared/flint-toggle-button-GmL4rbZa.js

@@ -0,0 +1,48 @@
+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 { classMap as o } from "lit/directives/class-map.js";
+//#region src/button/flint-toggle-button.css?inline
+var s = ":host{display:inline-block}button{font-family:var(--flint-font-family);font-weight:500;font-size:var(--flint-toggle-button-font-size,14px);padding:var(--flint-toggle-button-padding,8px 16px);border:1px solid var(--flint-input-border-color);background-color:var(--flint-surface-1);color:var(--flint-text-color);cursor:pointer;justify-content:center;align-items:center;gap:var(--flint-toggle-button-gap,8px);border-radius:var(--flint-toggle-button-border-radius,var(--flint-border-radius-md));outline:none;line-height:1;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;display:inline-flex}button:hover:not(:disabled){background-color:var(--flint-hover-color)}button.selected{background-color:var(--flint-toggle-button-selected-bg,var(--flint-active-color));color:var(--flint-toggle-button-selected-color,var(--flint-primary-color));border-color:var(--flint-toggle-button-selected-border-color,var(--flint-primary-color));z-index:1}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible{box-shadow:0 0 0 2px var(--flint-primary-color);z-index:2}:host([size=sm]) button{gap:4px;padding:4px 10px;font-size:12px}:host([size=lg]) button{gap:10px;padding:12px 20px;font-size:16px}:host([data-first]) button,:host([data-last]) button,:host([data-first][data-last]) button{border-radius:0}:host([data-first]) button{border-top-left-radius:var(--flint-border-radius-md);border-bottom-left-radius:var(--flint-border-radius-md)}:host([data-last]) button{border-top-right-radius:var(--flint-border-radius-md);border-bottom-right-radius:var(--flint-border-radius-md)}:host([data-first][data-last]) button{border-radius:var(--flint-border-radius-md)}:host([data-last]:not([data-first])) button,:host(:not([data-first]):not([data-last])) button{margin-left:-1px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", c = class extends t {
+	constructor(...e) {
+		super(...e), this.selected = !1, this.disabled = !1, this.value = "", this.size = "md";
+	}
+	static {
+		this.styles = r(s);
+	}
+	_handleClick() {
+		this.disabled || this.dispatchEvent(new CustomEvent("flint-toggle-button-change", {
+			detail: {
+				value: this.value,
+				selected: !this.selected
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	render() {
+		return n`
+      <button
+        type="button"
+        class=${o({ selected: this.selected })}
+        ?disabled=${this.disabled}
+        @click=${this._handleClick}
+        aria-pressed=${this.selected}
+      >
+        <slot></slot>
+      </button>
+    `;
+	}
+};
+e([a({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "selected", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "disabled", void 0), e([a({ type: String })], c.prototype, "value", void 0), e([a({
+	type: String,
+	reflect: !0
+})], c.prototype, "size", void 0), c = e([i("flint-toggle-button")], c);
+//#endregion
+export { c as t };

package/dist/_shared/flint-toggle-button-group-Cp9x0wSj.js

@@ -0,0 +1,52 @@
+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/button/flint-toggle-button-group.css?inline
+var o = ":host{vertical-align:middle;display:inline-flex}", s = class extends t {
+	constructor(...e) {
+		super(...e), this.value = "", this.exclusive = !0;
+	}
+	static {
+		this.styles = r(o);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("flint-toggle-button-change", this._handleToggleClick), this._updateChildren();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("flint-toggle-button-change", this._handleToggleClick);
+	}
+	_handleToggleClick(e) {
+		let { value: t, selected: n } = e.detail;
+		if (this.exclusive) this.value = n ? t : "";
+		else {
+			let e = Array.isArray(this.value) ? [...this.value] : this.value ? [this.value] : [];
+			if (n) e.includes(t) || e.push(t);
+			else {
+				let n = e.indexOf(t);
+				n > -1 && e.splice(n, 1);
+			}
+			this.value = e;
+		}
+		this._updateChildren(), this.dispatchEvent(new CustomEvent("flint-toggle-button-group-change", {
+			detail: { value: this.value },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_updateChildren() {
+		let e = Array.from(this.querySelectorAll("flint-toggle-button"));
+		e.forEach((t, n) => {
+			let r = t;
+			r.selected = this.exclusive ? this.value === r.value : Array.isArray(this.value) && this.value.includes(r.value), n === 0 ? r.setAttribute("data-first", "") : r.removeAttribute("data-first"), n === e.length - 1 ? r.setAttribute("data-last", "") : r.removeAttribute("data-last");
+		});
+	}
+	updated(e) {
+		e.has("value") && this._updateChildren();
+	}
+	render() {
+		return n`<slot @slotchange=${this._updateChildren}></slot>`;
+	}
+};
+e([a({ type: String })], s.prototype, "value", void 0), e([a({ type: Boolean })], s.prototype, "exclusive", void 0), s = e([i("flint-toggle-button-group")], s);
+//#endregion
+export { s as t };

package/dist/_shared/flint-tooltip-C9nJvtJi.js

@@ -0,0 +1,108 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { LitElement as t, html as n, nothing as r, unsafeCSS as i } from "lit";
+import { customElement as a, property as o, state as s } from "lit/decorators.js";
+import { classMap as c } from "lit/directives/class-map.js";
+//#region src/tooltip/flint-tooltip.css?inline
+var l = ":host{display:inline-block;position:relative}.tooltip-container{display:inline-block}.tooltip-popup{background-color:var(--flint-tooltip-bg);color:var(--flint-tooltip-color);border-radius:var(--flint-border-radius-sm);font-size:.75rem;font-family:var(--flint-font-family);max-width:var(--flint-tooltip-max-width,300px);white-space:nowrap;overflow-wrap:break-word;z-index:1000;opacity:0;visibility:hidden;pointer-events:none;box-shadow:var(--flint-shadow-sm);padding:4px 8px;line-height:1.4;transition:opacity .2s,visibility .2s,transform .2s;position:absolute}.tooltip-popup.top{margin-bottom:8px;bottom:100%;left:50%;transform:translate(-50%)translateY(0)}.tooltip-popup.top.visible{transform:translate(-50%)translateY(-4px)}.tooltip-popup.bottom{margin-top:8px;top:100%;left:50%;transform:translate(-50%)translateY(0)}.tooltip-popup.bottom.visible{transform:translate(-50%)translateY(4px)}.tooltip-popup.left{margin-right:8px;top:50%;right:100%;transform:translateY(-50%)translate(0)}.tooltip-popup.left.visible{transform:translateY(-50%)translate(-4px)}.tooltip-popup.right{margin-left:8px;top:50%;left:100%;transform:translateY(-50%)translate(0)}.tooltip-popup.right.visible{transform:translateY(-50%)translate(4px)}.tooltip-popup.visible{opacity:1;visibility:visible}.arrow{border-style:solid;width:0;height:0;position:absolute}.tooltip-popup.top .arrow{border-width:5px 5px 0;border-color:var(--flint-tooltip-bg) transparent transparent transparent;top:100%;left:50%;transform:translate(-50%)}.tooltip-popup.bottom .arrow{border-width:0 5px 5px;border-color:transparent transparent var(--flint-tooltip-bg) transparent;bottom:100%;left:50%;transform:translate(-50%)}.tooltip-popup.left .arrow{border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--flint-tooltip-bg);top:50%;left:100%;transform:translateY(-50%)}.tooltip-popup.right .arrow{border-width:5px 5px 5px 0;border-color:transparent var(--flint-tooltip-bg) transparent transparent;top:50%;right:100%;transform:translateY(-50%)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", u = {
+	top: "bottom",
+	bottom: "top",
+	left: "right",
+	right: "left"
+}, d = 0, f = class extends t {
+	constructor(...e) {
+		super(...e), this.label = "", this.placement = "top", this.arrow = !1, this.disabled = !1, this.openDelay = 0, this.closeDelay = 0, this._visible = !1, this._activePlacement = this.placement, this._tooltipId = `flint-tooltip-${d++}`, this._openTimer = null, this._closeTimer = null;
+	}
+	static {
+		this.styles = i(l);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._clearTimers();
+	}
+	_clearTimers() {
+		this._openTimer !== null && (clearTimeout(this._openTimer), this._openTimer = null), this._closeTimer !== null && (clearTimeout(this._closeTimer), this._closeTimer = null);
+	}
+	_show() {
+		if (!(this.disabled || !this.label)) if (this._closeTimer !== null && (clearTimeout(this._closeTimer), this._closeTimer = null), this.openDelay > 0) {
+			if (this._openTimer !== null) return;
+			this._openTimer = setTimeout(() => {
+				this._openTimer = null, this._applyAutoFlip(), this._visible = !0;
+			}, this.openDelay);
+		} else this._applyAutoFlip(), this._visible = !0;
+	}
+	_hide() {
+		if (this._openTimer !== null && (clearTimeout(this._openTimer), this._openTimer = null), this.closeDelay > 0) {
+			if (this._closeTimer !== null) return;
+			this._closeTimer = setTimeout(() => {
+				this._closeTimer = null, this._visible = !1;
+			}, this.closeDelay);
+		} else this._visible = !1;
+	}
+	_handleKeydown(e) {
+		e.key === "Escape" && this._visible && (this._clearTimers(), this._visible = !1);
+	}
+	_applyAutoFlip() {
+		let e = this.getBoundingClientRect(), t = this.shadowRoot?.querySelector(".tooltip-popup");
+		if (!t) {
+			this._activePlacement = this.placement;
+			return;
+		}
+		let n = t.getBoundingClientRect(), r = n.width || 100, i = n.height || 30, a = !0;
+		switch (this.placement) {
+			case "top":
+				a = e.top - i - 8 >= 0;
+				break;
+			case "bottom":
+				a = e.bottom + i + 8 <= window.innerHeight;
+				break;
+			case "left":
+				a = e.left - r - 8 >= 0;
+				break;
+			case "right":
+				a = e.right + r + 8 <= window.innerWidth;
+				break;
+		}
+		this._activePlacement = a ? this.placement : u[this.placement];
+	}
+	render() {
+		let e = this._visible ? this._activePlacement : this.placement;
+		return n`
+      <div
+        class="tooltip-container"
+        @mouseenter=${this._show}
+        @mouseleave=${this._hide}
+        @focusin=${this._show}
+        @focusout=${this._hide}
+        @keydown=${this._handleKeydown}
+      >
+        <span class="trigger-wrapper" aria-describedby=${this._tooltipId}>
+          <slot></slot>
+        </span>
+        <div
+          id=${this._tooltipId}
+          role="tooltip"
+          aria-hidden=${this._visible ? "false" : "true"}
+          class=${c({
+			"tooltip-popup": !0,
+			[e]: !0,
+			visible: this._visible
+		})}
+        >
+          ${this.label}
+          ${this.arrow ? n`<div class="arrow"></div>` : r}
+        </div>
+      </div>
+    `;
+	}
+};
+e([o({ type: String })], f.prototype, "label", void 0), e([o({ type: String })], f.prototype, "placement", void 0), e([o({ type: Boolean })], f.prototype, "arrow", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], f.prototype, "disabled", void 0), e([o({
+	type: Number,
+	attribute: "open-delay"
+})], f.prototype, "openDelay", void 0), e([o({
+	type: Number,
+	attribute: "close-delay"
+})], f.prototype, "closeDelay", void 0), e([s()], f.prototype, "_visible", void 0), e([s()], f.prototype, "_activePlacement", void 0), f = e([a("flint-tooltip")], f);
+//#endregion
+export { f as t };

package/dist/_shared/flint-transfer-list-DZsAcF0l.js

@@ -0,0 +1,173 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { LitElement as t, html as n, unsafeCSS as r } from "lit";
+import { customElement as i, property as a, state as o } from "lit/decorators.js";
+import { classMap as s } from "lit/directives/class-map.js";
+import { repeat as c } from "lit/directives/repeat.js";
+//#region src/transfer-list/flint-transfer-list.css?inline
+var l = ":host{--flint-transfer-list-height:300px;--flint-transfer-list-width:200px;font-family:var(--flint-font-family);color:var(--flint-text-color);display:block}:host([disabled]){opacity:.6;cursor:not-allowed}.container{align-items:flex-start;gap:16px;display:flex}.list-wrapper{flex-direction:column;gap:8px;display:flex}.list-header{justify-content:space-between;align-items:center;gap:8px;min-height:24px;display:flex}.list-title{color:var(--flint-text-color-muted);font-size:.875rem;font-weight:600}.list-count{color:var(--flint-text-color-on-primary);background:var(--flint-primary-color);border-radius:999px;justify-content:center;align-items:center;min-width:20px;height:20px;padding:0 6px;font-size:.75rem;font-weight:500;line-height:1;display:flex}.list-search{box-sizing:border-box;width:100%;font-size:.875rem;font-family:var(--flint-font-family);color:var(--flint-text-color);background:var(--flint-surface-2);border:1.5px solid var(--flint-border-color);border-radius:var(--flint-border-radius-md,6px);outline:none;padding:6px 10px;transition:border-color .2s}.list-search:focus{border-color:var(--flint-primary-color);box-shadow:0 0 0 3px var(--flint-primary-focus-ring)}.list-search:disabled{opacity:.5;cursor:not-allowed}.list-box{width:var(--flint-transfer-list-width);height:var(--flint-transfer-list-height);background:var(--flint-surface-1);border:1.5px solid var(--flint-border-color);border-radius:var(--flint-border-radius-lg);box-shadow:var(--flint-shadow-sm);flex-direction:column;display:flex;overflow-y:auto}.list-item{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:10px;padding:10px 12px;transition:background-color .2s;display:flex}:host([disabled]) .list-item{cursor:not-allowed}.list-item:hover{background-color:var(--flint-hover-color)}.list-item.selected{background-color:var(--flint-primary-color-light)}.checkbox{border:2px solid var(--flint-border-color);border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:18px;height:18px;transition:all .2s;display:flex}.list-item.selected .checkbox{background-color:var(--flint-primary-color);border-color:var(--flint-primary-color)}.check-icon{color:var(--flint-text-color-on-primary);opacity:0;transition:all .2s;transform:scale(.5)}.list-item.selected .check-icon{opacity:1;transform:scale(1)}.item-label{font-size:.9375rem}.actions{flex-direction:column;gap:12px;padding-top:32px;display:flex}.action-button{border:1.5px solid var(--flint-border-color);background:var(--flint-surface-1);cursor:pointer;width:40px;height:40px;color:var(--flint-text-color);border-radius:8px;justify-content:center;align-items:center;transition:all .2s;display:flex}.action-button:hover:not(:disabled){border-color:var(--flint-primary-color);color:var(--flint-primary-color);box-shadow:var(--flint-shadow-md);transform:translateY(-1px)}.action-button:active:not(:disabled){transform:translateY(0)}.action-button:disabled{opacity:.4;cursor:not-allowed;background-color:var(--flint-surface-2)}.list-box::-webkit-scrollbar{width:6px}.list-box::-webkit-scrollbar-track{background:0 0}.list-box::-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}}", u = class extends t {
+	constructor(...e) {
+		super(...e), this.options = [], this.value = [], this.defaultValue = [], this.leftTitle = "Options", this.rightTitle = "Selected", this.disabled = !1, this.searchable = !1, this.leftChecked = [], this.rightChecked = [], this._leftSearch = "", this._rightSearch = "", this._firstUpdate = !0;
+	}
+	static {
+		this.styles = r(l);
+	}
+	willUpdate(e) {
+		this._firstUpdate && (this._firstUpdate = !1, this.defaultValue.length > 0 && this.value.length === 0 && (this.value = [...this.defaultValue]));
+	}
+	_toggleChecked(e, t) {
+		this.disabled || (t === "left" ? this.leftChecked.indexOf(e) > -1 ? this.leftChecked = this.leftChecked.filter((t) => t !== e) : this.leftChecked = [...this.leftChecked, e] : this.rightChecked.indexOf(e) > -1 ? this.rightChecked = this.rightChecked.filter((t) => t !== e) : this.rightChecked = [...this.rightChecked, e]);
+	}
+	_handleItemKeydown(e, t, n) {
+		(e.key === " " || e.key === "Enter") && (e.preventDefault(), this._toggleChecked(t, n));
+	}
+	_moveRight() {
+		this.disabled || (this.value = [...this.value, ...this.leftChecked], this.leftChecked = [], this._dispatchChange());
+	}
+	_moveLeft() {
+		this.disabled || (this.value = this.value.filter((e) => !this.rightChecked.includes(e)), this.rightChecked = [], this._dispatchChange());
+	}
+	_moveAllRight() {
+		this.disabled || (this.value = this.options.map((e) => e.value), this.leftChecked = [], this.rightChecked = [], this._dispatchChange());
+	}
+	_moveAllLeft() {
+		this.disabled || (this.value = [], this.leftChecked = [], this.rightChecked = [], this._dispatchChange());
+	}
+	_dispatchChange() {
+		this.dispatchEvent(new CustomEvent("change", {
+			detail: { value: this.value },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	render() {
+		let e = this.options.filter((e) => !this.value.includes(e.value)), t = this.options.filter((e) => this.value.includes(e.value)), r = this.searchable ? e.filter((e) => e.label.toLowerCase().includes(this._leftSearch.toLowerCase())) : e, i = this.searchable ? t.filter((e) => e.label.toLowerCase().includes(this._rightSearch.toLowerCase())) : t;
+		return n`
+      <div class="container">
+        <!-- Left List -->
+        <div class="list-wrapper">
+          <div class="list-header">
+            <span class="list-title">${this.leftTitle}</span>
+            <span class="list-count">${e.length}</span>
+          </div>
+          ${this.searchable ? n`
+            <input
+              class="list-search"
+              type="text"
+              placeholder="Search..."
+              .value=${this._leftSearch}
+              @input=${(e) => {
+			this._leftSearch = e.target.value;
+		}}
+              ?disabled=${this.disabled}
+            />
+          ` : ""}
+          <div class="list-box" role="listbox" aria-label="${this.leftTitle}" aria-multiselectable="true">
+            ${c(r, (e) => e.value, (e) => n`
+              <div
+                class="list-item ${s({ selected: this.leftChecked.includes(e.value) })}"
+                role="option"
+                tabindex="0"
+                aria-selected=${this.leftChecked.includes(e.value) ? "true" : "false"}
+                @click=${() => this._toggleChecked(e.value, "left")}
+                @keydown=${(t) => this._handleItemKeydown(t, e.value, "left")}
+              >
+                <div class="checkbox">
+                  <svg class="check-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4">
+                    <path d="M20 6L9 17l-5-5"/>
+                  </svg>
+                </div>
+                <span class="item-label">${e.label}</span>
+              </div>
+            `)}
+          </div>
+        </div>
+
+        <!-- Action Buttons -->
+        <div class="actions">
+          <button class="action-button" title="Move all right" aria-label="Move all right"
+            ?disabled=${this.disabled || e.length === 0} @click=${this._moveAllRight}>
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M13 17l5-5-5-5M6 17l5-5-5-5"/>
+            </svg>
+          </button>
+          <button
+            class="action-button"
+            title="Move selected right"
+            aria-label="Move selected right"
+            ?disabled=${this.disabled || this.leftChecked.length === 0}
+            @click=${this._moveRight}
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M9 18l6-6-6-6"/>
+            </svg>
+          </button>
+          <button
+            class="action-button"
+            title="Move selected left"
+            aria-label="Move selected left"
+            ?disabled=${this.disabled || this.rightChecked.length === 0}
+            @click=${this._moveLeft}
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M15 18l-6-6 6-6"/>
+            </svg>
+          </button>
+          <button class="action-button" title="Move all left" aria-label="Move all left"
+            ?disabled=${this.disabled || t.length === 0} @click=${this._moveAllLeft}>
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M11 17l-5-5 5-5M18 17l-5-5 5-5"/>
+            </svg>
+          </button>
+        </div>
+
+        <!-- Right List -->
+        <div class="list-wrapper">
+          <div class="list-header">
+            <span class="list-title">${this.rightTitle}</span>
+            <span class="list-count">${t.length}</span>
+          </div>
+          ${this.searchable ? n`
+            <input
+              class="list-search"
+              type="text"
+              placeholder="Search..."
+              .value=${this._rightSearch}
+              @input=${(e) => {
+			this._rightSearch = e.target.value;
+		}}
+              ?disabled=${this.disabled}
+            />
+          ` : ""}
+          <div class="list-box" role="listbox" aria-label="${this.rightTitle}" aria-multiselectable="true">
+            ${c(i, (e) => e.value, (e) => n`
+              <div
+                class="list-item ${s({ selected: this.rightChecked.includes(e.value) })}"
+                role="option"
+                tabindex="0"
+                aria-selected=${this.rightChecked.includes(e.value) ? "true" : "false"}
+                @click=${() => this._toggleChecked(e.value, "right")}
+                @keydown=${(t) => this._handleItemKeydown(t, e.value, "right")}
+              >
+                <div class="checkbox">
+                  <svg class="check-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4">
+                    <path d="M20 6L9 17l-5-5"/>
+                  </svg>
+                </div>
+                <span class="item-label">${e.label}</span>
+              </div>
+            `)}
+          </div>
+        </div>
+      </div>
+    `;
+	}
+};
+e([a({ type: Array })], u.prototype, "options", void 0), e([a({ type: Array })], u.prototype, "value", void 0), e([a({
+	type: Array,
+	attribute: "default-value"
+})], u.prototype, "defaultValue", void 0), e([a({ type: String })], u.prototype, "leftTitle", void 0), e([a({ type: String })], u.prototype, "rightTitle", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "disabled", void 0), e([a({ type: Boolean })], u.prototype, "searchable", void 0), e([o()], u.prototype, "leftChecked", void 0), e([o()], u.prototype, "rightChecked", void 0), e([o()], u.prototype, "_leftSearch", void 0), e([o()], u.prototype, "_rightSearch", void 0), u = e([i("flint-transfer-list")], u);
+//#endregion
+export { u as t };

package/dist/_shared/flint-tree-item-iMT216uo.js

@@ -0,0 +1,130 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { LitElement as t, html as n, nothing as r, unsafeCSS as i } from "lit";
+import { customElement as a, property as o, state as s } from "lit/decorators.js";
+import { classMap as c } from "lit/directives/class-map.js";
+//#region src/tree-view/flint-tree-item.css?inline
+var l = ":host{font-family:var(--flint-font-family);outline:none;display:block}:host(:focus-visible) .item-row{outline:2px solid var(--flint-primary-color);outline-offset:-2px}.item-row{border-radius:var(--flint-border-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none;min-height:36px;color:var(--flint-text-color);align-items:center;padding-right:8px;font-size:14px;transition:background-color .15s;display:flex;position:relative}:host(:not([disabled])) .item-row:hover{background-color:var(--flint-hover-color)}:host([disabled]) .item-row{opacity:.38;cursor:default}.expand-btn{cursor:pointer;width:28px;min-width:28px;height:28px;color:inherit;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;transition:transform .2s,background-color .15s;display:flex}.expand-btn:hover{background-color:var(--flint-active-color)}.expand-btn.expanded{transform:rotate(90deg)}.expand-placeholder{width:28px;min-width:28px}.item-label{flex:1;line-height:1.5}.children-container{display:block}.children-container[hidden]{display:none!important}.item-row.is-draggable{cursor:grab}.item-row.is-draggable:active{cursor:grabbing}:host([drop-position=before]) .item-row:before{content:\"\";background-color:var(--flint-primary-color);z-index:10;border-radius:2px;height:2px;position:absolute;top:0;left:0;right:0}:host([drop-position=after]) .item-row:after{content:\"\";background-color:var(--flint-primary-color);z-index:10;border-radius:2px;height:2px;position:absolute;bottom:0;left:0;right:0}:host([drop-position=inside]) .item-row{background-color:var(--flint-primary-color-light);outline:2px solid var(--flint-primary-color);outline-offset:-2px}:host([dragging]){opacity:.4}.drag-handle{cursor:grab;width:24px;height:24px;color:var(--flint-text-color-muted);flex-shrink:0;justify-content:center;align-items:center;margin-right:4px;display:flex}.drag-handle:active{cursor:grabbing}@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.itemId = "", this.label = "", this.disabled = !1, this.expanded = !1, this.hasChildren = !1, this._isDraggable = !1, this._handleOnly = !1, this.dropPosition = null, this.showDragHandle = !1, this._hasSlottedChildren = !1;
+	}
+	static {
+		this.styles = i(l);
+	}
+	setDraggable(e, t = !1) {
+		this._isDraggable = e, this._handleOnly = t;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.setAttribute("role", "treeitem"), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "-1");
+	}
+	updated(e) {
+		super.updated(e), this._hasSlottedChildren || this.hasChildren ? this.setAttribute("aria-expanded", String(this.expanded)) : this.removeAttribute("aria-expanded"), this.setAttribute("aria-disabled", String(this.disabled));
+	}
+	_onSlotChange(e) {
+		let t = e.target.assignedElements({ flatten: !0 }).some((e) => e.tagName === "FLINT-TREE-ITEM");
+		t !== this._hasSlottedChildren && (this._hasSlottedChildren = t);
+	}
+	_toggleExpand(e) {
+		e.stopPropagation(), !this.disabled && this.dispatchEvent(new CustomEvent("flint-tree-item-toggle", {
+			detail: {
+				itemId: this.itemId,
+				expanded: !this.expanded
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_handleRowClick() {
+		this.disabled || this.dispatchEvent(new CustomEvent("flint-tree-item-click", {
+			detail: { itemId: this.itemId },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	get _level() {
+		let e = 0, t = this.parentElement;
+		for (; t;) {
+			if (t.tagName === "FLINT-TREE-ITEM") e++;
+			else if (t.tagName === "FLINT-SIMPLE-TREE-VIEW") break;
+			t = t.parentElement;
+		}
+		return e;
+	}
+	render() {
+		let e = this._level * 24 + 8, t = this._hasSlottedChildren || this.hasChildren;
+		return n`
+      <div
+        class=${c({
+			"item-row": !0,
+			"is-draggable": this._isDraggable && !this._handleOnly
+		})}
+        style="padding-left: ${e}px"
+        draggable=${this._isDraggable && !this._handleOnly ? "true" : "false"}
+        @click=${this._handleRowClick}
+      >
+        ${this.showDragHandle ? n`
+          <div
+            class="drag-handle"
+            data-drag-handle="true"
+            draggable=${this._handleOnly ? "true" : "false"}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="9" cy="5" r="1" fill="currentColor"/>
+              <circle cx="9" cy="12" r="1" fill="currentColor"/>
+              <circle cx="9" cy="19" r="1" fill="currentColor"/>
+              <circle cx="15" cy="5" r="1" fill="currentColor"/>
+              <circle cx="15" cy="12" r="1" fill="currentColor"/>
+              <circle cx="15" cy="19" r="1" fill="currentColor"/>
+            </svg>
+          </div>
+        ` : r}
+
+        ${t ? n`
+              <button
+                class=${c({
+			"expand-btn": !0,
+			expanded: this.expanded
+		})}
+                tabindex="-1"
+                aria-hidden="true"
+                @click=${this._toggleExpand}
+              >
+                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
+                  <path d="M3 1.5L7 5 3 8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+              </button>
+            ` : n`<span class="expand-placeholder"></span>`}
+
+        <span class="item-label">${this.label}</span>
+        ${this.label ? r : n`<slot name="label"></slot>`}
+      </div>
+
+      <div class="children-container" ?hidden=${!this.expanded} role="group">
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+    `;
+	}
+};
+e([o({
+	type: String,
+	attribute: "item-id",
+	reflect: !0
+})], u.prototype, "itemId", void 0), e([o({ type: String })], u.prototype, "label", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "disabled", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "expanded", void 0), e([o({
+	type: Boolean,
+	attribute: "has-children",
+	reflect: !0
+})], u.prototype, "hasChildren", void 0), e([s()], u.prototype, "_isDraggable", void 0), e([s()], u.prototype, "_handleOnly", void 0), e([o({
+	type: String,
+	attribute: "drop-position",
+	reflect: !0
+})], u.prototype, "dropPosition", void 0), e([o({
+	type: Boolean,
+	attribute: "show-drag-handle"
+})], u.prototype, "showDragHandle", void 0), e([s()], u.prototype, "_hasSlottedChildren", void 0), u = e([a("flint-tree-item")], u);
+//#endregion
+export { u as t };

package/dist/_shared/flint-typography-D0vqF15X.js

@@ -0,0 +1,66 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { LitElement as t, unsafeCSS as n } from "lit";
+import { customElement as r, property as i } from "lit/decorators.js";
+import { html as a, literal as o } from "lit/static-html.js";
+//#region src/typography/flint-typography.css?inline
+var s = ":host{font-family:var(--flint-font-family);color:var(--flint-text-color);display:block}.typography{margin:0;padding:0}.h1{letter-spacing:-1.5px;font-size:6rem;font-weight:300;line-height:1.167}.h2{letter-spacing:-.5px;font-size:3.75rem;font-weight:300;line-height:1.2}.h3{font-size:3rem;font-weight:400;line-height:1.167}.h4{letter-spacing:.25px;font-size:2.125rem;font-weight:400;line-height:1.235}.h5{font-size:1.5rem;font-weight:400;line-height:1.334}.h6{letter-spacing:.15px;font-size:1.25rem;font-weight:500;line-height:1.6}.subtitle1{letter-spacing:.15px;font-size:1rem;font-weight:400;line-height:1.75}.subtitle2{letter-spacing:.1px;font-size:.875rem;font-weight:500;line-height:1.57}.body1{letter-spacing:.15px;font-size:1rem;font-weight:400;line-height:1.5}.body2{letter-spacing:.15px;font-size:.875rem;font-weight:400;line-height:1.43}.caption{letter-spacing:.4px;font-size:.75rem;font-weight:400;line-height:1.66}.overline{letter-spacing:1px;text-transform:uppercase;font-size:.75rem;font-weight:400;line-height:2.66}:host([color=primary]) .typography{color:var(--flint-primary-color)}:host([color=secondary]) .typography{color:var(--flint-secondary-color)}:host([color=success]) .typography{color:var(--flint-success-color)}:host([color=error]) .typography{color:var(--flint-error-color)}:host([color=warning]) .typography{color:var(--flint-warning-color)}:host([color=info]) .typography{color:var(--flint-info-icon-color)}:host([color=textPrimary]) .typography{color:var(--flint-text-color)}:host([color=textSecondary]) .typography{color:var(--flint-text-color-muted)}:host([color=inherit]) .typography{color:inherit}:host([align=left]) .typography{text-align:left}:host([align=center]) .typography{text-align:center}:host([align=right]) .typography{text-align:right}:host([align=justify]) .typography{text-align:justify}:host([noWrap]) .typography{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host([gutterBottom]) .typography{margin-bottom:.35em}:host([paragraph]) .typography{margin-bottom:16px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", c = class extends t {
+	constructor(...e) {
+		super(...e), this.variant = "body1", this.color = "textPrimary", this.align = "left", this.noWrap = !1, this.gutterBottom = !1, this.paragraph = !1;
+	}
+	static {
+		this.styles = n(s);
+	}
+	_literalTag() {
+		let e = this.component;
+		return e ? {
+			h1: o`h1`,
+			h2: o`h2`,
+			h3: o`h3`,
+			h4: o`h4`,
+			h5: o`h5`,
+			h6: o`h6`,
+			p: o`p`,
+			span: o`span`,
+			div: o`div`
+		}[e] ?? o`p` : {
+			h1: o`h1`,
+			h2: o`h2`,
+			h3: o`h3`,
+			h4: o`h4`,
+			h5: o`h5`,
+			h6: o`h6`,
+			subtitle1: o`h6`,
+			subtitle2: o`h6`,
+			body1: o`p`,
+			body2: o`p`,
+			caption: o`span`,
+			overline: o`span`,
+			inherit: o`p`
+		}[this.variant] ?? o`p`;
+	}
+	render() {
+		let e = this._literalTag();
+		return a`<${e} class="${`typography ${this.variant === "inherit" ? "" : this.variant}`}"><slot></slot></${e}>`;
+	}
+};
+e([i({
+	type: String,
+	reflect: !0
+})], c.prototype, "variant", void 0), e([i({
+	type: String,
+	reflect: !0
+})], c.prototype, "color", void 0), e([i({ type: String })], c.prototype, "component", void 0), e([i({
+	type: String,
+	reflect: !0
+})], c.prototype, "align", void 0), e([i({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "noWrap", void 0), e([i({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "gutterBottom", void 0), e([i({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "paragraph", void 0), c = e([r("flint-typography")], c);
+//#endregion
+export { c as t };