@getufy/flint-ui 0.1.0

package/dist/_shared/flint-list-DJCPEDre.js

@@ -0,0 +1,113 @@
+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";
+//#region src/list/flint-list.css?inline
+var c = ":host{background-color:var(--flint-surface-background,white);margin:0;padding:8px 0;list-style:none;display:block}:host([disable-padding]){padding:0}:host([dense]){--flint-list-item-padding:4px 16px;--flint-list-item-gap:8px}", l = ":host{box-sizing:border-box;display:block}li{padding:var(--flint-list-item-padding,8px 16px);align-items:center;gap:var(--flint-list-item-gap,16px);list-style:none;display:flex}", u = ":host{box-sizing:border-box;display:block}li{padding:var(--flint-list-item-padding,8px 16px);align-items:center;gap:var(--flint-list-item-gap,16px);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;list-style:none;transition:background-color .2s;display:flex}li:hover{background-color:var(--flint-hover-color)}li:active{background-color:var(--flint-active-color)}li:focus-visible{background-color:var(--flint-hover-color);box-shadow:inset 0 0 0 2px var(--flint-primary-color)}:host([selected]) li{background-color:var(--flint-primary-color-light);color:var(--flint-primary-color)}:host([disabled]) li{opacity:.5;cursor:default;pointer-events:none}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", d = ":host{min-width:40px;color:var(--flint-text-color-muted);flex-shrink:0;display:inline-flex}::slotted(*){width:24px;height:24px}", f = ":host{flex-shrink:0;min-width:56px;display:inline-flex}", p = ":host{flex:auto;margin-top:4px;margin-bottom:4px}.primary{font-family:var(--flint-font-family);color:var(--flint-text-color);font-size:1rem;line-height:1.5;display:block}.secondary{font-family:var(--flint-font-family);color:var(--flint-text-color-muted);font-size:.875rem;line-height:1.43;display:block}", m = ":host{text-transform:uppercase;letter-spacing:.05em;color:var(--flint-text-color-muted);font-size:.75rem;font-weight:700;font-family:var(--flint-font-family);padding:16px;line-height:1;display:block}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", h = class extends t {
+	constructor(...e) {
+		super(...e), this.disablePadding = !1, this.dense = !1;
+	}
+	static {
+		this.styles = i(c);
+	}
+	render() {
+		return n`<ul role="list" style="margin: 0; padding: 0; list-style: none;"><slot></slot></ul>`;
+	}
+};
+e([o({
+	type: Boolean,
+	reflect: !0,
+	attribute: "disable-padding"
+})], h.prototype, "disablePadding", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], h.prototype, "dense", void 0), h = e([a("flint-list")], h);
+var g = class extends t {
+	static {
+		this.styles = i(l);
+	}
+	render() {
+		return n`<li role="listitem"><slot></slot></li>`;
+	}
+};
+g = e([a("flint-list-item")], g);
+var _ = class extends t {
+	constructor(...e) {
+		super(...e), this.disabled = !1, this.selected = !1, this._handleKeydown = (e) => {
+			this.disabled || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.click());
+		};
+	}
+	static {
+		this.styles = i(u);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "listitem");
+	}
+	render() {
+		return n`
+      <div
+        role="button"
+        tabindex=${this.disabled ? "-1" : "0"}
+        aria-disabled=${this.disabled ? "true" : r}
+        aria-current=${this.selected ? "true" : r}
+        @keydown=${this._handleKeydown}
+      ><slot></slot></div>
+    `;
+	}
+};
+e([o({
+	type: Boolean,
+	reflect: !0
+})], _.prototype, "disabled", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], _.prototype, "selected", void 0), _ = e([a("flint-list-item-button")], _);
+var v = class extends t {
+	static {
+		this.styles = i(d);
+	}
+	render() {
+		return n`<slot></slot>`;
+	}
+};
+v = e([a("flint-list-item-icon")], v);
+var y = class extends t {
+	static {
+		this.styles = i(f);
+	}
+	render() {
+		return n`<slot></slot>`;
+	}
+};
+y = e([a("flint-list-item-avatar")], y);
+var b = class extends t {
+	constructor(...e) {
+		super(...e), this.primary = "", this.secondary = "", this._hasSecondarySlot = !1;
+	}
+	static {
+		this.styles = i(p);
+	}
+	_onSecondarySlotChange(e) {
+		this._hasSecondarySlot = e.target.assignedNodes({ flatten: !0 }).length > 0;
+	}
+	render() {
+		let e = !!this.secondary || this._hasSecondarySlot;
+		return n`
+      <span class="primary">${this.primary}<slot name="primary"></slot></span>
+      <span class="secondary" style=${e ? "" : "display:none"}>
+        ${this.secondary}<slot name="secondary" @slotchange=${this._onSecondarySlotChange}></slot>
+      </span>
+    `;
+	}
+};
+e([o({ type: String })], b.prototype, "primary", void 0), e([o({ type: String })], b.prototype, "secondary", void 0), e([s()], b.prototype, "_hasSecondarySlot", void 0), b = e([a("flint-list-item-text")], b);
+var x = class extends t {
+	static {
+		this.styles = i(m);
+	}
+	render() {
+		return n`<slot></slot>`;
+	}
+};
+x = e([a("flint-list-subheader")], x);
+//#endregion
+export { v as a, _ as i, g as n, b as o, y as r, x as s, h as t };

package/dist/_shared/flint-menu-EOF1QvHq.js

@@ -0,0 +1,207 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { LitElement as t, html as n, nothing as r, unsafeCSS as i } from "lit";
+import { customElement as a, property as o, state as s } from "lit/decorators.js";
+import { classMap as c } from "lit/directives/class-map.js";
+import { ifDefined as l } from "lit/directives/if-defined.js";
+//#region src/menu/flint-menu-item.css?inline
+var u = ":host{font-family:var(--flint-font-family);display:block}.item{cursor:pointer;-webkit-user-select:none;user-select:none;min-height:40px;color:var(--flint-text-color);text-align:left;box-sizing:border-box;background:0 0;border:none;border-radius:0;outline:none;align-items:center;gap:12px;width:100%;padding:8px 16px;font-size:.9375rem;transition:background .12s;display:flex;position:relative}.item:hover{background:var(--flint-hover-color)}.item:active{background:var(--flint-active-color)}.item:focus-visible{background:var(--flint-hover-color);outline:2px solid var(--flint-primary-color);outline-offset:-2px}:host([selected]) .item{background:var(--flint-primary-color-light);color:var(--flint-primary-color);font-weight:600}:host([selected]) .item:hover{background:var(--flint-primary-color-light-hover)}:host([disabled]) .item{opacity:.38;cursor:not-allowed;pointer-events:none}[hidden]{display:none!important}.icon-wrap{width:24px;height:24px;color:var(--flint-text-color-muted);flex-shrink:0;justify-content:center;align-items:center;display:flex}:host([selected]) .icon-wrap{color:var(--flint-primary-color)}.end-icon-wrap{color:var(--flint-text-color-muted);align-items:center;margin-left:auto;padding-left:16px;font-size:.75rem;display:flex}.label{flex:1;line-height:1.5}:host([dense]) .item{min-height:32px;padding:4px 16px;font-size:.875rem}:host([divider]){border-bottom:1px solid var(--flint-border-color);margin-bottom:4px;padding-bottom:4px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", d = ":host{background:var(--flint-border-color);height:1px;margin:4px 0;display:block}", f = ":host{display:block}.group-label{letter-spacing:.06em;text-transform:uppercase;color:var(--flint-text-color-muted);-webkit-user-select:none;user-select:none;padding:6px 16px 2px;font-size:.6875rem;font-weight:600}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", p = ":host{--flint-menu-z-index:1300;--flint-menu-min-width:120px;display:block;position:relative}.backdrop{z-index:calc(var(--flint-menu-z-index) - 1);display:none;position:fixed;inset:0}.backdrop.open{display:block}.menu-paper{background:var(--flint-surface-1);border-radius:var(--flint-border-radius-md);box-shadow:var(--flint-shadow-md), var(--flint-shadow-lg);min-width:var(--flint-menu-min-width);z-index:var(--flint-menu-z-index);transform-origin:0 0;opacity:0;visibility:hidden;pointer-events:none;padding:4px 0;transition:transform .15s cubic-bezier(.4,0,.2,1),opacity .15s cubic-bezier(.4,0,.2,1),visibility .15s;position:absolute;overflow:hidden;transform:scale(.85)}.menu-paper.open{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1)}.pos-bottom-start{transform-origin:0 0;top:100%;left:0}.pos-bottom-end{transform-origin:100% 0;top:100%;right:0}.pos-top-start{transform-origin:0 100%;bottom:100%;left:0}.pos-top-end{transform-origin:100% 100%;bottom:100%;right:0}.pos-right-start{transform-origin:0 0;top:0;left:100%}.pos-left-start{transform-origin:100% 0;top:0;right:100%}.menu-paper.scrollable{max-height:var(--flint-menu-max-height,300px);overflow-y:auto}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", m = class extends t {
+	constructor(...e) {
+		super(...e), this.selected = !1, this.disabled = !1, this.dense = !1, this.divider = !1, this._hasIcon = !1, this._hasEndIcon = !1;
+	}
+	static {
+		this.styles = i(u);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "menuitem");
+	}
+	_onIconSlotChange(e) {
+		this._hasIcon = e.target.assignedNodes({ flatten: !0 }).length > 0;
+	}
+	_onEndIconSlotChange(e) {
+		this._hasEndIcon = e.target.assignedNodes({ flatten: !0 }).length > 0;
+	}
+	_getLabelText() {
+		return (this.shadowRoot?.querySelector("slot:not([name])"))?.assignedNodes({ flatten: !0 }).map((e) => e.textContent ?? "").join("").trim() ?? "";
+	}
+	_handleClick() {
+		if (this.disabled) return;
+		let e = this._getLabelText();
+		this.dispatchEvent(new CustomEvent("flint-menu-item-select", {
+			bubbles: !0,
+			composed: !0,
+			detail: {
+				value: this.value === void 0 ? e : this.value,
+				label: e
+			}
+		}));
+	}
+	render() {
+		return n`
+            <div
+                class="item"
+                role="menuitem"
+                aria-disabled=${this.disabled ? "true" : "false"}
+                tabindex=${this.disabled ? -1 : 0}
+                @click=${this._handleClick}
+                @keydown=${(e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._handleClick());
+		}}
+            >
+                <span class="icon-wrap" ?hidden=${!this._hasIcon}>
+                    <slot name="icon" @slotchange=${this._onIconSlotChange}></slot>
+                </span>
+                <span class="label"><slot></slot></span>
+                <span class="end-icon-wrap" ?hidden=${!this._hasEndIcon}>
+                    <slot name="end-icon" @slotchange=${this._onEndIconSlotChange}></slot>
+                </span>
+            </div>
+        `;
+	}
+};
+e([o({
+	type: Boolean,
+	reflect: !0
+})], m.prototype, "selected", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], m.prototype, "disabled", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], m.prototype, "dense", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], m.prototype, "divider", void 0), e([o({
+	type: String,
+	reflect: !0
+})], m.prototype, "value", void 0), e([s()], m.prototype, "_hasIcon", void 0), e([s()], m.prototype, "_hasEndIcon", void 0), m = e([a("flint-menu-item")], m);
+var h = class extends t {
+	static {
+		this.styles = i(d);
+	}
+	render() {
+		return n``;
+	}
+};
+h = e([a("flint-menu-divider")], h);
+var g = class extends t {
+	constructor(...e) {
+		super(...e), this.label = "";
+	}
+	static {
+		this.styles = i(f);
+	}
+	render() {
+		return n`
+            <div role="group" aria-label=${l(this.label || void 0)}>
+                ${this.label ? n`<div class="group-label">${this.label}</div>` : ""}
+                <slot></slot>
+            </div>
+        `;
+	}
+};
+e([o({ type: String })], g.prototype, "label", void 0), g = e([a("flint-menu-group")], g);
+var _ = class extends t {
+	constructor(...e) {
+		super(...e), this.open = !1, this.placement = "bottom-start", this.closeOnSelect = !0, this.scrollable = !1, this._boundKeyDown = (e) => {
+			this.open && e.key === "Escape" && (e.stopPropagation(), this._close());
+		}, this._boundNavKeyDown = (e) => {
+			this.open && this._handleNavKeyDown(e);
+		};
+	}
+	static {
+		this.styles = i(p);
+	}
+	connectedCallback() {
+		super.connectedCallback(), window.addEventListener("keydown", this._boundKeyDown), this.addEventListener("keydown", this._boundNavKeyDown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), window.removeEventListener("keydown", this._boundKeyDown), this.removeEventListener("keydown", this._boundNavKeyDown);
+	}
+	updated(e) {
+		e.has("open") && this.open && setTimeout(() => {
+			let e = this._getEnabledItems();
+			e.length && this._focusItem(e[0]);
+		}, 0);
+	}
+	_getEnabledItems() {
+		return Array.from(this.querySelectorAll("flint-menu-item")).filter((e) => !e.disabled);
+	}
+	_focusItem(e) {
+		let t = e.shadowRoot?.querySelector(".item") ?? e;
+		typeof t.focus == "function" && (t.focus(), typeof t.scrollIntoView == "function" && t.scrollIntoView({ block: "nearest" }));
+	}
+	_handleNavKeyDown(e) {
+		let t = this._getEnabledItems();
+		if (!t.length) return;
+		let n = t.findIndex((e) => e.shadowRoot?.activeElement != null || document.activeElement === e);
+		switch (e.key) {
+			case "ArrowDown": {
+				e.preventDefault();
+				let r = n < 0 || n >= t.length - 1 ? 0 : n + 1;
+				this._focusItem(t[r]);
+				break;
+			}
+			case "ArrowUp": {
+				e.preventDefault();
+				let r = n <= 0 ? t.length - 1 : n - 1;
+				this._focusItem(t[r]);
+				break;
+			}
+			case "Home":
+				e.preventDefault(), this._focusItem(t[0]);
+				break;
+			case "End":
+				e.preventDefault(), this._focusItem(t[t.length - 1]);
+				break;
+			default: if (e.key.length === 1) {
+				let r = e.key.toLowerCase(), i = n < 0 ? 0 : (n + 1) % t.length, a = [...t.slice(i), ...t.slice(0, i)].find((e) => ((e.shadowRoot?.querySelector("slot:not([name])"))?.assignedNodes({ flatten: !0 }).map((e) => e.textContent ?? "").join("").trim().toLowerCase() ?? "").startsWith(r));
+				a && this._focusItem(a);
+			}
+		}
+	}
+	_close() {
+		this.dispatchEvent(new CustomEvent("flint-menu-close", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_handleItemSelect() {
+		this.closeOnSelect && this._close();
+	}
+	render() {
+		let e = c({
+			"menu-paper": !0,
+			open: this.open,
+			[`pos-${this.placement}`]: !!this.placement,
+			scrollable: this.scrollable
+		});
+		return n`
+            <div class=${c({
+			backdrop: !0,
+			open: this.open
+		})} @click=${this._close} aria-hidden="true"></div>
+            <div
+                class=${e}
+                role="menu"
+                tabindex=${this.scrollable ? "0" : r}
+                aria-label=${l(this.label)}
+                aria-hidden=${this.open ? "false" : "true"}
+                @flint-menu-item-select=${this._handleItemSelect}
+            >
+                <slot></slot>
+            </div>
+        `;
+	}
+};
+e([o({
+	type: Boolean,
+	reflect: !0
+})], _.prototype, "open", void 0), e([o({
+	type: String,
+	reflect: !0
+})], _.prototype, "placement", void 0), e([o({
+	type: Boolean,
+	attribute: "close-on-select"
+})], _.prototype, "closeOnSelect", void 0), e([o({ type: Boolean })], _.prototype, "scrollable", void 0), e([o({ type: String })], _.prototype, "label", void 0), _ = e([a("flint-menu")], _);
+//#endregion
+export { m as i, h as n, g as r, _ as t };