@getufy/flint-ui 0.1.0

package/dist/_shared/flint-checkbox-GnuZq0Yy.js

@@ -0,0 +1,82 @@
+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 } from "lit/decorators.js";
+import { classMap as c } from "lit/directives/class-map.js";
+//#region src/checkbox/flint-checkbox.css?inline
+var l = ":host{font-family:var(--flint-font-family);color:var(--flint-text-color);display:inline-block}.wrapper{cursor:pointer;align-items:center;display:inline-flex}.wrapper.disabled{opacity:.5;cursor:not-allowed}.checkbox{width:var(--flint-checkbox-size,18px);height:var(--flint-checkbox-size,18px);border:2px solid var(--flint-input-border-color);border-radius:var(--flint-checkbox-border-radius,var(--flint-border-radius-sm));background-color:var(--flint-surface-1);margin-right:var(--flint-checkbox-gap,8px);flex-shrink:0;justify-content:center;align-items:center;transition:all .2s;display:inline-flex;position:relative}:host([size=sm]) .checkbox{width:var(--flint-checkbox-size-sm,14px);height:var(--flint-checkbox-size-sm,14px)}:host([size=lg]) .checkbox{width:var(--flint-checkbox-size-lg,22px);height:var(--flint-checkbox-size-lg,22px)}.wrapper:hover:not(.disabled) .checkbox{border-color:var(--flint-primary-color)}.checkbox.checked,.checkbox.indeterminate{background-color:var(--flint-primary-color);border-color:var(--flint-primary-color)}.icon{fill:none;stroke:var(--flint-text-color-on-primary);stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;width:var(--flint-checkbox-icon-size,12px);height:var(--flint-checkbox-icon-size,12px);opacity:0;transition:all .2s cubic-bezier(.175,.885,.32,1.275);transform:scale(.5)}:host([size=sm]) .icon{width:var(--flint-checkbox-icon-size-sm,10px);height:var(--flint-checkbox-icon-size-sm,10px)}:host([size=lg]) .icon{width:var(--flint-checkbox-icon-size-lg,16px);height:var(--flint-checkbox-icon-size-lg,16px)}.checked .icon,.indeterminate .icon{opacity:1;transform:scale(1)}input{opacity:0;width:0;height:0;margin:0;position:absolute}input:focus-visible+.checkbox{outline:2px solid var(--flint-primary-color);outline-offset:2px}.label{font-size:var(--flint-checkbox-label-font-size,14px);-webkit-user-select:none;user-select:none;line-height:1.5}:host([size=sm]) .label{font-size:var(--flint-checkbox-label-font-size-sm,12px)}:host([size=lg]) .label{font-size:var(--flint-checkbox-label-font-size-lg,16px)}::slotted(*),.label{cursor:inherit}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", u = class extends t(n) {
+	constructor(...e) {
+		super(...e), this.checked = !1, this.indeterminate = !1, this.disabled = !1, this.required = !1, this.size = "md", this.label = "", this.name = "", this.value = "on", this.defaultChecked = !1, this.ariaLabel = null;
+	}
+	static {
+		this.styles = a(l);
+	}
+	willUpdate(e) {
+		super.willUpdate(e), this._firstUpdate && (this._firstUpdate = !1, this.defaultChecked && (this.checked = !0));
+	}
+	updated(e) {
+		super.updated(e), (e.has("checked") || e.has("value")) && this._initFormValue(this.checked ? this.value : null), (e.has("checked") || e.has("required")) && this._initFormValidity(this.required, !this.checked, "Please check this box.");
+	}
+	_handleChange(e) {
+		this.disabled || (this.checked = e.target.checked, this.indeterminate = !1, this.dispatchEvent(new CustomEvent("flint-checkbox-change", {
+			detail: {
+				checked: this.checked,
+				value: this.value,
+				indeterminate: !1
+			},
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	render() {
+		return r`
+      <label class=${c({
+			wrapper: !0,
+			disabled: this.disabled
+		})}>
+        <input
+          type="checkbox"
+          .checked=${this.checked}
+          .indeterminate=${this.indeterminate}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          name=${this.name || i}
+          .value=${this.value}
+          aria-label=${this.ariaLabel ?? i}
+          @change=${this._handleChange}
+        >
+        <div class=${c({
+			checkbox: !0,
+			checked: this.checked,
+			indeterminate: this.indeterminate
+		})}>
+          <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
+            ${this.indeterminate ? r`<line x1="4" y1="12" x2="20" y2="12"></line>` : r`<polyline points="20 6 9 17 4 12"></polyline>`}
+          </svg>
+        </div>
+        ${this.label ? r`<span class="label">${this.label}</span>` : r`<slot class="label"></slot>`}
+      </label>
+    `;
+	}
+};
+e([s({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "checked", void 0), e([s({ type: Boolean })], u.prototype, "indeterminate", void 0), e([s({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "disabled", void 0), e([s({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "required", void 0), e([s({
+	type: String,
+	reflect: !0
+})], u.prototype, "size", void 0), e([s({ type: String })], u.prototype, "label", void 0), e([s({ type: String })], u.prototype, "name", void 0), e([s({ type: String })], u.prototype, "value", void 0), e([s({
+	type: Boolean,
+	attribute: "default-checked"
+})], u.prototype, "defaultChecked", void 0), e([s({
+	type: String,
+	attribute: "aria-label"
+})], u.prototype, "ariaLabel", void 0), u = e([o("flint-checkbox")], u);
+//#endregion
+export { u as t };

package/dist/_shared/flint-chip-5QF8rU8e.js

@@ -0,0 +1,86 @@
+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";
+import { ifDefined as s } from "lit/directives/if-defined.js";
+//#region src/chip/flint-chip.css?inline
+var c = ":host{vertical-align:middle;font-family:var(--flint-font-family);display:inline-block}.chip{height:var(--flint-chip-height,32px);padding:0 var(--flint-chip-padding-x,12px);border-radius:var(--flint-chip-border-radius,16px);font-size:var(--flint-chip-font-size,.875rem);white-space:nowrap;background-color:var(--flint-surface-2);color:var(--flint-text-color);-webkit-user-select:none;user-select:none;align-items:center;gap:var(--flint-chip-gap,8px);border:1px solid #0000;outline:none;font-weight:500;transition:all .2s;display:inline-flex;overflow:hidden}.chip.size-sm{height:var(--flint-chip-height-sm,24px);padding:0 var(--flint-chip-padding-x-sm,8px);font-size:var(--flint-chip-font-size-sm,.75rem);border-radius:var(--flint-chip-border-radius-sm,12px)}.chip.size-lg{height:var(--flint-chip-height-lg,40px);padding:0 var(--flint-chip-padding-x-lg,16px);font-size:var(--flint-chip-font-size-lg,1rem);border-radius:var(--flint-chip-border-radius-lg,20px)}.chip.clickable{cursor:pointer}.chip.clickable:hover:not(.disabled){background-color:var(--flint-hover-color)}.chip.clickable:active:not(.disabled){background-color:var(--flint-active-color)}.chip.outlined{border-color:var(--flint-input-border-color);background-color:#0000}.chip.primary:not(.outlined){background-color:var(--flint-primary-color);color:var(--flint-text-color-on-primary)}.chip.secondary:not(.outlined){background-color:var(--flint-secondary-color);color:var(--flint-text-color-on-primary)}.chip.outlined.primary{color:var(--flint-primary-color);border-color:var(--flint-primary-color)}.chip.outlined.secondary{color:var(--flint-secondary-color);border-color:var(--flint-secondary-color)}.chip.primary.clickable:hover:not(.disabled),.chip.secondary.clickable:hover:not(.disabled){filter:brightness(.9);box-shadow:var(--flint-shadow-sm)}.chip.disabled{opacity:.5;cursor:not-allowed}.chip:focus-visible{outline:2px solid var(--flint-primary-color);outline-offset:2px}.delete-icon{cursor:pointer;width:18px;height:18px;color:inherit;opacity:.7;border-radius:50%;outline:none;justify-content:center;align-items:center;margin-right:-4px;transition:opacity .2s,background-color .2s;display:flex}.delete-icon:hover{opacity:1;background-color:var(--flint-active-color)}.delete-icon:focus-visible{opacity:1;outline-offset:1px;outline:2px solid}.chip.disabled .delete-icon{cursor:not-allowed;pointer-events:none}::slotted([slot=avatar]){--flint-avatar-size:24px;border-radius:50%;flex-shrink:0;width:24px;height:24px;margin-left:-8px;overflow:hidden}::slotted([slot=icon]){flex-shrink:0;justify-content:center;align-items:center;width:18px;height:18px;margin-left:-4px;line-height:1;display:inline-flex}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", l = class extends t {
+	constructor(...e) {
+		super(...e), this.label = "", this.variant = "filled", this.color = "default", this.size = "md", this.clickable = !1, this.deletable = !1, this.disabled = !1;
+	}
+	static {
+		this.styles = r(c);
+	}
+	_handleClick(e) {
+		e.stopPropagation(), !(this.disabled || !this.clickable) && this.dispatchEvent(new CustomEvent("click", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_handleKeyDown(e) {
+		e.key !== "Enter" && e.key !== " " || (e.preventDefault(), !this.disabled && this.clickable && this.dispatchEvent(new CustomEvent("click", {
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	_handleDelete(e) {
+		e.stopPropagation(), !this.disabled && this.dispatchEvent(new CustomEvent("flint-chip-delete", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_handleDeleteKeyDown(e) {
+		e.key !== "Enter" && e.key !== " " || (e.preventDefault(), e.stopPropagation(), this.disabled || this.dispatchEvent(new CustomEvent("flint-chip-delete", {
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	render() {
+		return n`
+      <div
+        class=${o({
+			chip: !0,
+			clickable: this.clickable,
+			disabled: this.disabled,
+			outlined: this.variant === "outlined",
+			primary: this.color === "primary",
+			secondary: this.color === "secondary",
+			"size-sm": this.size === "sm",
+			"size-lg": this.size === "lg"
+		})}
+        @click=${this._handleClick}
+        @keydown=${this._handleKeyDown}
+        role=${s(this.clickable ? "button" : void 0)}
+        tabindex=${this.clickable && !this.disabled ? "0" : "-1"}
+        aria-disabled=${this.disabled ? "true" : "false"}
+      >
+        <slot name="avatar"></slot>
+        <slot name="icon"></slot>
+        <span class="label">${this.label}</span>
+        ${this.deletable ? n`
+          <span
+            class="delete-icon"
+            @click=${this._handleDelete}
+            @keydown=${this._handleDeleteKeyDown}
+            tabindex=${this.disabled ? "-1" : "0"}
+            role="button"
+            aria-label="Remove ${this.label}"
+          >
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+              <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/>
+            </svg>
+          </span>
+        ` : ""}
+      </div>
+    `;
+	}
+};
+e([a({ type: String })], l.prototype, "label", void 0), e([a({ type: String })], l.prototype, "variant", void 0), e([a({ type: String })], l.prototype, "color", void 0), e([a({
+	type: String,
+	reflect: !0
+})], l.prototype, "size", void 0), e([a({ type: Boolean })], l.prototype, "clickable", void 0), e([a({ type: Boolean })], l.prototype, "deletable", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "disabled", void 0), l = e([i("flint-chip")], l);
+//#endregion
+export { l as t };

package/dist/_shared/flint-circular-progress-CuR8VdqI.js

@@ -0,0 +1,68 @@
+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/progress/flint-circular-progress.css?inline
+var c = ":host{--flint-circular-progress-size:40px;--flint-circular-progress-color:var(--flint-primary-color);--flint-circular-progress-thickness:3.6;display:inline-block}.circular-root{width:var(--flint-circular-progress-size);height:var(--flint-circular-progress-size);animation:1.4s linear infinite rotate;display:inline-block}.circular-root.determinate{animation:none;transform:rotate(-90deg)}svg{display:block}circle{stroke:var(--flint-circular-progress-color);stroke-linecap:round;transition:stroke-dashoffset .3s}.indeterminate circle{stroke-dasharray:80 200;stroke-dashoffset:0;animation:1.4s ease-in-out infinite dash}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1 200;stroke-dashoffset:0}50%{stroke-dasharray:89 200;stroke-dashoffset:-35px}to{stroke-dasharray:89 200;stroke-dashoffset:-124px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", l, u = class extends t {
+	static {
+		l = this;
+	}
+	constructor(...e) {
+		super(...e), this.variant = "indeterminate", this.value = 0, this.size = 40, this.thickness = 3.6, this.color = "primary", this.label = "";
+	}
+	static {
+		this.styles = i(c);
+	}
+	static {
+		this._colorMap = {
+			primary: "var(--flint-primary-color, #2563eb)",
+			success: "var(--flint-success-color, #15803d)",
+			error: "var(--flint-error-color, #dc2626)",
+			warning: "var(--flint-warning-color, #92400e)"
+		};
+	}
+	get _safeValue() {
+		return Math.min(100, Math.max(0, this.value));
+	}
+	render() {
+		let e = this.variant === "determinate", t = 20 - this.thickness / 2, i = 2 * Math.PI * t, a = i - this._safeValue / 100 * i, o = l._colorMap[this.color] ?? l._colorMap.primary;
+		return n`
+      <div
+        class="circular-root ${s({
+			determinate: e,
+			indeterminate: !e
+		})}"
+        style="--flint-circular-progress-size: ${this.size}px; --flint-circular-progress-thickness: ${this.thickness}; --flint-circular-progress-color: ${o}"
+        role="progressbar"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow="${e ? this._safeValue : r}"
+        aria-label="${this.label || "Progress"}"
+      >
+        <svg viewBox="22 22 44 44">
+          <circle
+            class="circle"
+            cx="44"
+            cy="44"
+            r="${t}"
+            fill="none"
+            stroke-width="${this.thickness}"
+            style="${e ? `stroke-dasharray: ${i}; stroke-dashoffset: ${a}px` : ""}"
+          ></circle>
+        </svg>
+      </div>
+    `;
+	}
+};
+e([o({
+	type: String,
+	reflect: !0
+})], u.prototype, "variant", void 0), e([o({
+	type: Number,
+	reflect: !0
+})], u.prototype, "value", void 0), e([o({ type: Number })], u.prototype, "size", void 0), e([o({ type: Number })], u.prototype, "thickness", void 0), e([o({
+	type: String,
+	reflect: !0
+})], u.prototype, "color", void 0), e([o({ type: String })], u.prototype, "label", void 0), u = l = e([a("flint-circular-progress")], u);
+//#endregion
+export { u as t };

package/dist/_shared/flint-collapsible-BJ4LwGpz.js

@@ -0,0 +1,101 @@
+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/collapsible/flint-collapsible-trigger.css?inline
+var o = ":host{display:block}.trigger{cursor:pointer;width:100%;font:inherit;color:inherit;text-align:left;background:0 0;border:none;align-items:center;margin:0;padding:0;display:flex}:host([disabled]) .trigger{cursor:not-allowed;opacity:.5}", s = ":host{display:block}.panel{transition:grid-template-rows var(--flint-collapsible-duration,.2s) var(--flint-collapsible-easing,ease);grid-template-rows:0fr;display:grid;overflow:hidden}:host([open]) .panel{grid-template-rows:1fr}.panel-inner{overflow:hidden}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", c = ":host{display:block}", l = class extends t {
+	constructor(...e) {
+		super(...e), this.expanded = !1, this.disabled = !1;
+	}
+	static {
+		this.styles = r(o);
+	}
+	_handleClick() {
+		this.disabled || this.closest("flint-collapsible")?.toggle();
+	}
+	render() {
+		return n`
+            <button
+                class="trigger"
+                aria-expanded=${this.expanded ? "true" : "false"}
+                ?disabled=${this.disabled}
+                @click=${this._handleClick}
+            >
+                <slot></slot>
+            </button>
+        `;
+	}
+};
+e([a({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "expanded", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "disabled", void 0), l = e([i("flint-collapsible-trigger")], l);
+var u = class extends t {
+	constructor(...e) {
+		super(...e), this.open = !1;
+	}
+	static {
+		this.styles = r(s);
+	}
+	updated() {
+		this.open ? this.removeAttribute("inert") : this.setAttribute("inert", "");
+	}
+	render() {
+		return n`
+            <div class="panel" aria-hidden=${!this.open}>
+                <div class="panel-inner">
+                    <slot></slot>
+                </div>
+            </div>
+        `;
+	}
+};
+e([a({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "open", void 0), u = e([i("flint-collapsible-content")], u);
+var d = class extends t {
+	constructor(...e) {
+		super(...e), this.open = !1, this.defaultOpen = !1, this.disabled = !1, this._firstUpdate = !0;
+	}
+	static {
+		this.styles = r(c);
+	}
+	willUpdate(e) {
+		this._firstUpdate && (this._firstUpdate = !1, this.defaultOpen && !this.open && (this.open = !0));
+	}
+	updated(e) {
+		(e.has("open") || e.has("disabled")) && this._syncChildren();
+	}
+	toggle() {
+		this.disabled || (this.open = !this.open, this.dispatchEvent(new CustomEvent("flint-collapsible-change", {
+			detail: { open: this.open },
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	_syncChildren() {
+		this.querySelectorAll("flint-collapsible-content").forEach((e) => {
+			e.closest("flint-collapsible") === this && (e.open = this.open);
+		}), this.querySelectorAll("flint-collapsible-trigger").forEach((e) => {
+			e.closest("flint-collapsible") === this && (e.expanded = this.open, e.disabled = this.disabled);
+		});
+	}
+	render() {
+		return n`<slot @slotchange=${() => this._syncChildren()}></slot>`;
+	}
+};
+e([a({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "open", void 0), e([a({
+	type: Boolean,
+	attribute: "default-open"
+})], d.prototype, "defaultOpen", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "disabled", void 0), d = e([i("flint-collapsible")], d);
+//#endregion
+export { u as n, l as r, d as t };

package/dist/_shared/flint-command-DGhby0QI.js

@@ -0,0 +1,318 @@
+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/command/flint-command-shortcut.css?inline
+var l = ":host{letter-spacing:.05em;color:var(--flint-text-color-muted);font-size:.6875rem;font-family:var(--flint-font-family);align-items:center;margin-left:auto;padding-left:8px;display:inline-flex}", u = ":host{background:var(--flint-border-color);height:1px;margin:4px 0;display:block}:host([hidden]){display:none!important}", d = ":host{display:block}:host([hidden]){display:none!important}.item{cursor:pointer;color:var(--flint-text-color);font-size:.875rem;line-height:1.25rem;font-family:var(--flint-font-family);-webkit-user-select:none;user-select:none;border-radius:4px;outline:none;align-items:center;gap:8px;padding:6px 8px;transition:background .1s;display:flex}:host([highlighted]) .item{background:var(--flint-command-highlight-bg,var(--flint-hover-color));color:var(--flint-command-highlight-color,var(--flint-text-color))}.item:hover{background:var(--flint-hover-color)}:host([highlighted]) .item:hover{background:var(--flint-command-highlight-bg,var(--flint-hover-color))}:host([disabled]) .item{opacity:.38;cursor:not-allowed;pointer-events:none}.icon{width:16px;height:16px;color:var(--flint-text-color-muted);flex-shrink:0;justify-content:center;align-items:center;display:flex}.label{flex:1}[hidden]{display:none!important}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", f = ":host{text-align:center;color:var(--flint-text-color-muted);font-size:.875rem;font-family:var(--flint-font-family);padding:24px 8px;display:block}:host([hidden]){display:none!important}", p = ":host{font-family:var(--flint-font-family);display:block}:host([hidden]){display:none!important}.heading{letter-spacing:.04em;text-transform:uppercase;color:var(--flint-text-color-muted);padding:6px 8px 2px;font-size:.6875rem;font-weight:600}.heading:empty{display:none}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", m = ":host{max-height:var(--flint-command-list-max-height,300px);display:block;overflow-y:auto}.list{outline:none;padding:4px}.list:focus-visible{outline:2px solid var(--flint-primary-color);outline-offset:-2px}", h = ":host{font-family:var(--flint-font-family);display:block}.input-wrap{border-bottom:1px solid var(--flint-border-color);align-items:center;gap:8px;padding:10px 12px;display:flex}.search-icon{color:var(--flint-text-color-muted);flex-shrink:0;align-items:center;display:flex}input{color:var(--flint-text-color);background:0 0;border:none;outline:none;flex:1;min-width:0;font-family:inherit;font-size:.9375rem}input::placeholder{color:var(--flint-text-color-muted)}input[type=search]::-webkit-search-cancel-button{display:none}input[type=search]::-webkit-search-decoration{display:none}", g = ":host{font-family:var(--flint-font-family);background:var(--flint-command-bg,var(--flint-surface-1));border-radius:var(--flint-border-radius-md);border:1px solid var(--flint-command-border-color,var(--flint-border-color));display:block;overflow:hidden}.command{flex-direction:column;display:flex}", _ = ":host{display:block}.backdrop{background:var(--flint-command-backdrop-bg,#00000080);z-index:var(--flint-command-z-index,1400);opacity:0;visibility:hidden;pointer-events:none;justify-content:center;align-items:flex-start;padding-top:12vh;transition:opacity .18s,visibility .18s;display:flex;position:fixed;inset:0}.backdrop.open{opacity:1;visibility:visible;pointer-events:auto}.panel{width:100%;max-width:var(--flint-command-dialog-width,512px);background:var(--flint-command-bg,var(--flint-surface-1));border-radius:var(--flint-border-radius-md);border:1px solid var(--flint-command-panel-border-color,var(--flint-border-color));transition:transform .18s cubic-bezier(.4,0,.2,1);overflow:hidden;transform:scale(.94)translateY(-8px);box-shadow:0 20px 25px -5px #00000026,0 10px 10px -5px #0000000f}.backdrop.open .panel{transform:scale(1)translateY(0)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", v = class extends t {
+	static {
+		this.styles = i(l);
+	}
+	render() {
+		return n`<slot></slot>`;
+	}
+};
+v = e([a("flint-command-shortcut")], v);
+var y = class extends t {
+	static {
+		this.styles = i(u);
+	}
+	render() {
+		return n``;
+	}
+};
+y = e([a("flint-command-separator")], y);
+var b = class extends t {
+	constructor(...e) {
+		super(...e), this.value = "", this.disabled = !1, this.highlighted = !1, this._hasIcon = !1;
+	}
+	static {
+		this.styles = i(d);
+	}
+	_onIconSlotChange(e) {
+		this._hasIcon = e.target.assignedNodes({ flatten: !0 }).length > 0;
+	}
+	scrollIntoViewIfNeeded() {
+		typeof this.scrollIntoView == "function" && this.scrollIntoView({ block: "nearest" });
+	}
+	_handleClick() {
+		this.disabled || this.dispatchEvent(new CustomEvent("flint-command-item-select", {
+			bubbles: !0,
+			composed: !0,
+			detail: { value: this.value || this.textContent?.trim() || "" }
+		}));
+	}
+	render() {
+		return n`
+            <div
+                class="item"
+                role="option"
+                aria-selected=${this.highlighted ? "true" : "false"}
+                aria-disabled=${this.disabled ? "true" : "false"}
+                tabindex="-1"
+                @click=${this._handleClick}
+            >
+                <span class="icon" ?hidden=${!this._hasIcon}>
+                    <slot name="icon" @slotchange=${this._onIconSlotChange}></slot>
+                </span>
+                <span class="label"><slot></slot></span>
+                <slot name="shortcut"></slot>
+            </div>
+        `;
+	}
+};
+e([o({
+	type: String,
+	reflect: !0
+})], b.prototype, "value", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], b.prototype, "disabled", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], b.prototype, "highlighted", void 0), e([s()], b.prototype, "_hasIcon", void 0), b = e([a("flint-command-item")], b);
+var x = class extends t {
+	static {
+		this.styles = i(f);
+	}
+	render() {
+		return n`<slot></slot>`;
+	}
+};
+x = e([a("flint-command-empty")], x);
+var S = class extends t {
+	constructor(...e) {
+		super(...e), this.heading = "";
+	}
+	static {
+		this.styles = i(p);
+	}
+	render() {
+		return n`
+            <div class="heading">${this.heading}</div>
+            <slot></slot>
+        `;
+	}
+};
+e([o({
+	type: String,
+	reflect: !0
+})], S.prototype, "heading", void 0), S = e([a("flint-command-group")], S);
+var C = class extends t {
+	static {
+		this.styles = i(m);
+	}
+	render() {
+		return n`
+            <div class="list" role="listbox" tabindex="0" aria-label="Command results">
+                <slot></slot>
+            </div>
+        `;
+	}
+};
+C = e([a("flint-command-list")], C);
+var w = class extends t {
+	constructor(...e) {
+		super(...e), this.placeholder = "Type a command or search...", this.value = "";
+	}
+	static {
+		this.styles = i(h);
+	}
+	_handleInput(e) {
+		let t = e.target;
+		this.value = t.value, this.dispatchEvent(new CustomEvent("_cmd-filter", {
+			bubbles: !0,
+			composed: !0,
+			detail: { query: t.value }
+		}));
+	}
+	focus() {
+		this.shadowRoot?.querySelector("input")?.focus();
+	}
+	reset() {
+		let e = this.shadowRoot?.querySelector("input");
+		e && (e.value = ""), this.value = "", this.dispatchEvent(new CustomEvent("_cmd-filter", {
+			bubbles: !0,
+			composed: !0,
+			detail: { query: "" }
+		}));
+	}
+	render() {
+		return n`
+            <div class="input-wrap">
+                <span class="search-icon" aria-hidden="true">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
+                         stroke="currentColor" stroke-width="2"
+                         stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="11" cy="11" r="8"></circle>
+                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                    </svg>
+                </span>
+                <input
+                    type="search"
+                    .value=${this.value}
+                    placeholder=${this.placeholder}
+                    aria-label="Search commands"
+                    @input=${this._handleInput}
+                    autocomplete="off"
+                    spellcheck="false"
+                />
+            </div>
+        `;
+	}
+};
+e([o({ type: String })], w.prototype, "placeholder", void 0), e([o({
+	type: String,
+	reflect: !0
+})], w.prototype, "value", void 0), w = e([a("flint-command-input")], w);
+var T = class extends t {
+	constructor(...e) {
+		super(...e), this._query = "", this._highlightedItem = null, this._handleFilter = (e) => {
+			this._applyFilter(e.detail.query);
+		}, this._handleMouseOver = (e) => {
+			let t = e.target;
+			if (t.tagName?.toLowerCase() !== "flint-command-item") return;
+			let n = t;
+			!n.disabled && !n.hidden && this._setHighlight(n, !1);
+		}, this._handleKeyDown = (e) => {
+			let t = this._getNavigableItems();
+			if (t.length === 0) return;
+			let n = this._highlightedItem ? t.indexOf(this._highlightedItem) : -1;
+			switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault(), this._setHighlight(t[(n + 1) % t.length]);
+					break;
+				case "ArrowUp":
+					e.preventDefault(), this._setHighlight(t[(n - 1 + t.length) % t.length]);
+					break;
+				case "Enter":
+					e.preventDefault(), this._highlightedItem && this._activateItem(this._highlightedItem);
+					break;
+				case "Home":
+					e.preventDefault(), this._setHighlight(t[0]);
+					break;
+				case "End":
+					e.preventDefault(), this._setHighlight(t[t.length - 1]);
+					break;
+			}
+		};
+	}
+	static {
+		this.styles = i(g);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("_cmd-filter", this._handleFilter), this.addEventListener("keydown", this._handleKeyDown), this.addEventListener("mouseover", this._handleMouseOver);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("_cmd-filter", this._handleFilter), this.removeEventListener("keydown", this._handleKeyDown), this.removeEventListener("mouseover", this._handleMouseOver);
+	}
+	_getNavigableItems() {
+		return [...this.querySelectorAll("flint-command-item")].filter((e) => !e.hidden && !e.disabled);
+	}
+	_setHighlight(e, t = !0) {
+		this._highlightedItem && (this._highlightedItem.highlighted = !1), this._highlightedItem = e, e && (e.highlighted = !0, t && e.scrollIntoViewIfNeeded());
+	}
+	_activateItem(e) {
+		e.dispatchEvent(new CustomEvent("flint-command-item-select", {
+			bubbles: !0,
+			composed: !0,
+			detail: { value: e.value || e.textContent?.trim() || "" }
+		}));
+	}
+	_applyFilter(e) {
+		this._query = e;
+		let t = e.toLowerCase(), n = [...this.querySelectorAll("flint-command-item")], r = 0;
+		for (let e of n) {
+			let n = (e.value || e.textContent || "").toLowerCase().trim(), i = t === "" || n.includes(t);
+			e.hidden = !i, i && r++;
+		}
+		let i = [...this.querySelectorAll("flint-command-group")];
+		for (let e of i) {
+			let t = [...e.querySelectorAll("flint-command-item")];
+			e.hidden = t.length === 0 || t.every((e) => e.hidden);
+		}
+		let a = this.querySelector("flint-command-empty");
+		a && (a.hidden = r > 0);
+		let o = this.querySelector("flint-command-list");
+		if (o) {
+			let e = [...o.children], t = (e) => e.tagName.toLowerCase() !== "flint-command-separator" && e.tagName.toLowerCase() !== "flint-command-empty" && !e.hidden;
+			for (let n of e) {
+				if (n.tagName.toLowerCase() !== "flint-command-separator") continue;
+				let r = e.indexOf(n), i = e.slice(0, r).some(t), a = e.slice(r + 1).some(t);
+				n.hidden = !i || !a;
+			}
+		}
+		this._setHighlight(this._getNavigableItems()[0] ?? null, !1);
+	}
+	_onSlotChange() {
+		this._applyFilter(this._query);
+	}
+	reset() {
+		let e = this.querySelector("flint-command-input");
+		e ? e.reset() : this._applyFilter("");
+	}
+	render() {
+		return n`
+            <div class="command" part="command">
+                <slot @slotchange=${this._onSlotChange}></slot>
+            </div>
+        `;
+	}
+};
+T = e([a("flint-command")], T);
+var E = class extends t {
+	constructor(...e) {
+		super(...e), this.open = !1, this._boundKeyDown = (e) => {
+			this.open && e.key === "Escape" && (e.stopPropagation(), this._close());
+		};
+	}
+	static {
+		this.styles = i(_);
+	}
+	connectedCallback() {
+		super.connectedCallback(), window.addEventListener("keydown", this._boundKeyDown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), window.removeEventListener("keydown", this._boundKeyDown);
+	}
+	updated(e) {
+		e.has("open") && (this.open ? requestAnimationFrame(() => {
+			this.querySelector("flint-command-input")?.focus();
+		}) : this.querySelector("flint-command")?.reset());
+	}
+	_close() {
+		this.dispatchEvent(new CustomEvent("flint-command-dialog-close", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_handleBackdropClick(e) {
+		e.target === e.currentTarget && this._close();
+	}
+	render() {
+		return n`
+            <div
+                class=${c({
+			backdrop: !0,
+			open: this.open
+		})}
+                aria-hidden=${this.open ? r : "true"}
+                @click=${this._handleBackdropClick}
+            >
+                <div
+                    class="panel"
+                    role="dialog"
+                    aria-modal="true"
+                    aria-label="Command menu"
+                >
+                    <slot></slot>
+                </div>
+            </div>
+        `;
+	}
+};
+e([o({
+	type: Boolean,
+	reflect: !0
+})], E.prototype, "open", void 0), E = e([a("flint-command-dialog")], E);
+//#endregion
+export { w as a, y as c, S as i, v as l, E as n, b as o, x as r, C as s, T as t };