@trenoxxious/n-components 1.0.2 → 1.0.3

package/dist/n-components.js

@@ -0,0 +1,660 @@
+/**
+* @license
+* Copyright 2019 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+var t$2 = globalThis, e$1 = t$2.ShadowRoot && (t$2.ShadyCSS === void 0 || t$2.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s$2 = Symbol(), o$3 = /* @__PURE__ */ new WeakMap(), n$1 = class {
+	constructor(x, j, U) {
+		if (this._$cssResult$ = !0, U !== s$2) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+		this.cssText = x, this.t = j;
+	}
+	get styleSheet() {
+		let x = this.o, F = this.t;
+		if (e$1 && x === void 0) {
+			let j = F !== void 0 && F.length === 1;
+			j && (x = o$3.get(F)), x === void 0 && ((this.o = x = new CSSStyleSheet()).replaceSync(this.cssText), j && o$3.set(F, x));
+		}
+		return x;
+	}
+	toString() {
+		return this.cssText;
+	}
+}, r$1 = (x) => new n$1(typeof x == "string" ? x : x + "", void 0, s$2), i$1 = (x, ...j) => new n$1(x.length === 1 ? x[0] : j.reduce((j, F, U) => j + ((x) => {
+	if (!0 === x._$cssResult$) return x.cssText;
+	if (typeof x == "number") return x;
+	throw Error("Value passed to 'css' function must be a 'css' function result: " + x + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
+})(F) + x[U + 1], x[0]), x, s$2), S$1 = (F, U) => {
+	if (e$1) F.adoptedStyleSheets = U.map((x) => x instanceof CSSStyleSheet ? x : x.styleSheet);
+	else for (let j of U) {
+		let U = document.createElement("style"), W = t$2.litNonce;
+		W !== void 0 && U.setAttribute("nonce", W), U.textContent = j.cssText, F.appendChild(U);
+	}
+}, c$1 = e$1 ? (x) => x : (x) => x instanceof CSSStyleSheet ? ((x) => {
+	let j = "";
+	for (let F of x.cssRules) j += F.cssText;
+	return r$1(j);
+})(x) : x, { is: i$3, defineProperty: e$2, getOwnPropertyDescriptor: h$1, getOwnPropertyNames: r$2, getOwnPropertySymbols: o$2, getPrototypeOf: n$2 } = Object, a$1 = globalThis, c$2 = a$1.trustedTypes, l$1 = c$2 ? c$2.emptyScript : "", p$1 = a$1.reactiveElementPolyfillSupport, d$1 = (x, j) => x, u$1 = {
+	toAttribute(x, j) {
+		switch (j) {
+			case Boolean:
+				x = x ? l$1 : null;
+				break;
+			case Object:
+			case Array: x = x == null ? x : JSON.stringify(x);
+		}
+		return x;
+	},
+	fromAttribute(x, j) {
+		let F = x;
+		switch (j) {
+			case Boolean:
+				F = x !== null;
+				break;
+			case Number:
+				F = x === null ? null : Number(x);
+				break;
+			case Object:
+			case Array: try {
+				F = JSON.parse(x);
+			} catch {
+				F = null;
+			}
+		}
+		return F;
+	}
+}, f$1 = (x, j) => !i$3(x, j), b$1 = {
+	attribute: !0,
+	type: String,
+	converter: u$1,
+	reflect: !1,
+	useDefault: !1,
+	hasChanged: f$1
+};
+Symbol.metadata ??= Symbol("metadata"), a$1.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
+var y = class extends HTMLElement {
+	static addInitializer(x) {
+		this._$Ei(), (this.l ??= []).push(x);
+	}
+	static get observedAttributes() {
+		return this.finalize(), this._$Eh && [...this._$Eh.keys()];
+	}
+	static createProperty(x, j = b$1) {
+		if (j.state && (j.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(x) && ((j = Object.create(j)).wrapped = !0), this.elementProperties.set(x, j), !j.noAccessor) {
+			let F = Symbol(), U = this.getPropertyDescriptor(x, F, j);
+			U !== void 0 && e$2(this.prototype, x, U);
+		}
+	}
+	static getPropertyDescriptor(x, j, F) {
+		let { get: U, set: W } = h$1(this.prototype, x) ?? {
+			get() {
+				return this[j];
+			},
+			set(x) {
+				this[j] = x;
+			}
+		};
+		return {
+			get: U,
+			set(j) {
+				let G = U?.call(this);
+				W?.call(this, j), this.requestUpdate(x, G, F);
+			},
+			configurable: !0,
+			enumerable: !0
+		};
+	}
+	static getPropertyOptions(x) {
+		return this.elementProperties.get(x) ?? b$1;
+	}
+	static _$Ei() {
+		if (this.hasOwnProperty(d$1("elementProperties"))) return;
+		let x = n$2(this);
+		x.finalize(), x.l !== void 0 && (this.l = [...x.l]), this.elementProperties = new Map(x.elementProperties);
+	}
+	static finalize() {
+		if (this.hasOwnProperty(d$1("finalized"))) return;
+		if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(d$1("properties"))) {
+			let x = this.properties, j = [...r$2(x), ...o$2(x)];
+			for (let F of j) this.createProperty(F, x[F]);
+		}
+		let x = this[Symbol.metadata];
+		if (x !== null) {
+			let j = litPropertyMetadata.get(x);
+			if (j !== void 0) for (let [x, F] of j) this.elementProperties.set(x, F);
+		}
+		this._$Eh = /* @__PURE__ */ new Map();
+		for (let [x, j] of this.elementProperties) {
+			let F = this._$Eu(x, j);
+			F !== void 0 && this._$Eh.set(F, x);
+		}
+		this.elementStyles = this.finalizeStyles(this.styles);
+	}
+	static finalizeStyles(x) {
+		let j = [];
+		if (Array.isArray(x)) {
+			let F = new Set(x.flat(Infinity).reverse());
+			for (let x of F) j.unshift(c$1(x));
+		} else x !== void 0 && j.push(c$1(x));
+		return j;
+	}
+	static _$Eu(x, j) {
+		let F = j.attribute;
+		return !1 === F ? void 0 : typeof F == "string" ? F : typeof x == "string" ? x.toLowerCase() : void 0;
+	}
+	constructor() {
+		super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
+	}
+	_$Ev() {
+		this._$ES = new Promise((x) => this.enableUpdating = x), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach((x) => x(this));
+	}
+	addController(x) {
+		(this._$EO ??= /* @__PURE__ */ new Set()).add(x), this.renderRoot !== void 0 && this.isConnected && x.hostConnected?.();
+	}
+	removeController(x) {
+		this._$EO?.delete(x);
+	}
+	_$E_() {
+		let x = /* @__PURE__ */ new Map(), j = this.constructor.elementProperties;
+		for (let F of j.keys()) this.hasOwnProperty(F) && (x.set(F, this[F]), delete this[F]);
+		x.size > 0 && (this._$Ep = x);
+	}
+	createRenderRoot() {
+		let x = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
+		return S$1(x, this.constructor.elementStyles), x;
+	}
+	connectedCallback() {
+		this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(!0), this._$EO?.forEach((x) => x.hostConnected?.());
+	}
+	enableUpdating(x) {}
+	disconnectedCallback() {
+		this._$EO?.forEach((x) => x.hostDisconnected?.());
+	}
+	attributeChangedCallback(x, j, F) {
+		this._$AK(x, F);
+	}
+	_$ET(x, j) {
+		let F = this.constructor.elementProperties.get(x), U = this.constructor._$Eu(x, F);
+		if (U !== void 0 && !0 === F.reflect) {
+			let W = (F.converter?.toAttribute === void 0 ? u$1 : F.converter).toAttribute(j, F.type);
+			this._$Em = x, W == null ? this.removeAttribute(U) : this.setAttribute(U, W), this._$Em = null;
+		}
+	}
+	_$AK(x, j) {
+		let F = this.constructor, U = F._$Eh.get(x);
+		if (U !== void 0 && this._$Em !== U) {
+			let x = F.getPropertyOptions(U), W = typeof x.converter == "function" ? { fromAttribute: x.converter } : x.converter?.fromAttribute === void 0 ? u$1 : x.converter;
+			this._$Em = U;
+			let G = W.fromAttribute(j, x.type);
+			this[U] = G ?? this._$Ej?.get(U) ?? G, this._$Em = null;
+		}
+	}
+	requestUpdate(x, j, F, U = !1, W) {
+		if (x !== void 0) {
+			let G = this.constructor;
+			if (!1 === U && (W = this[x]), F ??= G.getPropertyOptions(x), !((F.hasChanged ?? f$1)(W, j) || F.useDefault && F.reflect && W === this._$Ej?.get(x) && !this.hasAttribute(G._$Eu(x, F)))) return;
+			this.C(x, j, F);
+		}
+		!1 === this.isUpdatePending && (this._$ES = this._$EP());
+	}
+	C(x, j, { useDefault: F, reflect: U, wrapped: W }, G) {
+		F && !(this._$Ej ??= /* @__PURE__ */ new Map()).has(x) && (this._$Ej.set(x, G ?? j ?? this[x]), !0 !== W || G !== void 0) || (this._$AL.has(x) || (this.hasUpdated || F || (j = void 0), this._$AL.set(x, j)), !0 === U && this._$Em !== x && (this._$Eq ??= /* @__PURE__ */ new Set()).add(x));
+	}
+	async _$EP() {
+		this.isUpdatePending = !0;
+		try {
+			await this._$ES;
+		} catch (x) {
+			Promise.reject(x);
+		}
+		let x = this.scheduleUpdate();
+		return x != null && await x, !this.isUpdatePending;
+	}
+	scheduleUpdate() {
+		return this.performUpdate();
+	}
+	performUpdate() {
+		if (!this.isUpdatePending) return;
+		if (!this.hasUpdated) {
+			if (this.renderRoot ??= this.createRenderRoot(), this._$Ep) {
+				for (let [x, j] of this._$Ep) this[x] = j;
+				this._$Ep = void 0;
+			}
+			let x = this.constructor.elementProperties;
+			if (x.size > 0) for (let [j, F] of x) {
+				let { wrapped: x } = F, U = this[j];
+				!0 !== x || this._$AL.has(j) || U === void 0 || this.C(j, void 0, F, U);
+			}
+		}
+		let x = !1, j = this._$AL;
+		try {
+			x = this.shouldUpdate(j), x ? (this.willUpdate(j), this._$EO?.forEach((x) => x.hostUpdate?.()), this.update(j)) : this._$EM();
+		} catch (j) {
+			throw x = !1, this._$EM(), j;
+		}
+		x && this._$AE(j);
+	}
+	willUpdate(x) {}
+	_$AE(x) {
+		this._$EO?.forEach((x) => x.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(x)), this.updated(x);
+	}
+	_$EM() {
+		this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
+	}
+	get updateComplete() {
+		return this.getUpdateComplete();
+	}
+	getUpdateComplete() {
+		return this._$ES;
+	}
+	shouldUpdate(x) {
+		return !0;
+	}
+	update(x) {
+		this._$Eq &&= this._$Eq.forEach((x) => this._$ET(x, this[x])), this._$EM();
+	}
+	updated(x) {}
+	firstUpdated(x) {}
+};
+y.elementStyles = [], y.shadowRootOptions = { mode: "open" }, y[d$1("elementProperties")] = /* @__PURE__ */ new Map(), y[d$1("finalized")] = /* @__PURE__ */ new Map(), p$1?.({ ReactiveElement: y }), (a$1.reactiveElementVersions ??= []).push("2.1.2");
+/**
+* @license
+* Copyright 2017 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+var t$1 = globalThis, i$2 = (x) => x, s$1 = t$1.trustedTypes, e = s$1 ? s$1.createPolicy("lit-html", { createHTML: (x) => x }) : void 0, h = "$lit$", o$1 = `lit$${Math.random().toFixed(9).slice(2)}$`, n = "?" + o$1, r = `<${n}>`, l = document, c = () => l.createComment(""), a = (x) => x === null || typeof x != "object" && typeof x != "function", u = Array.isArray, d = (x) => u(x) || typeof x?.[Symbol.iterator] == "function", f = "[ 	\n\f\r]", v = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, _ = /-->/g, m = />/g, p = RegExp(`>|${f}(?:([^\\s"'>=/]+)(${f}*=${f}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`, "g"), g = /'/g, $ = /"/g, y$1 = /^(?:script|style|textarea|title)$/i, b = ((x) => (j, ...F) => ({
+	_$litType$: x,
+	strings: j,
+	values: F
+}))(1), E = Symbol.for("lit-noChange"), A = Symbol.for("lit-nothing"), C = /* @__PURE__ */ new WeakMap(), P = l.createTreeWalker(l, 129);
+function V(x, j) {
+	if (!u(x) || !x.hasOwnProperty("raw")) throw Error("invalid template strings array");
+	return e === void 0 ? j : e.createHTML(j);
+}
+var N = (x, j) => {
+	let F = x.length - 1, U = [], W, G = j === 2 ? "<svg>" : j === 3 ? "<math>" : "", K = v;
+	for (let j = 0; j < F; j++) {
+		let F = x[j], q, J, Y = -1, X = 0;
+		for (; X < F.length && (K.lastIndex = X, J = K.exec(F), J !== null);) X = K.lastIndex, K === v ? J[1] === "!--" ? K = _ : J[1] === void 0 ? J[2] === void 0 ? J[3] !== void 0 && (K = p) : (y$1.test(J[2]) && (W = RegExp("</" + J[2], "g")), K = p) : K = m : K === p ? J[0] === ">" ? (K = W ?? v, Y = -1) : J[1] === void 0 ? Y = -2 : (Y = K.lastIndex - J[2].length, q = J[1], K = J[3] === void 0 ? p : J[3] === "\"" ? $ : g) : K === $ || K === g ? K = p : K === _ || K === m ? K = v : (K = p, W = void 0);
+		let Q = K === p && x[j + 1].startsWith("/>") ? " " : "";
+		G += K === v ? F + r : Y >= 0 ? (U.push(q), F.slice(0, Y) + h + F.slice(Y) + o$1 + Q) : F + o$1 + (Y === -2 ? j : Q);
+	}
+	return [V(x, G + (x[F] || "<?>") + (j === 2 ? "</svg>" : j === 3 ? "</math>" : "")), U];
+}, S = class x {
+	constructor({ strings: j, _$litType$: F }, U) {
+		let W;
+		this.parts = [];
+		let G = 0, K = 0, q = j.length - 1, J = this.parts, [Y, X] = N(j, F);
+		if (this.el = x.createElement(Y, U), P.currentNode = this.el.content, F === 2 || F === 3) {
+			let x = this.el.content.firstChild;
+			x.replaceWith(...x.childNodes);
+		}
+		for (; (W = P.nextNode()) !== null && J.length < q;) {
+			if (W.nodeType === 1) {
+				if (W.hasAttributes()) for (let x of W.getAttributeNames()) if (x.endsWith(h)) {
+					let j = X[K++], F = W.getAttribute(x).split(o$1), U = /([.?@])?(.*)/.exec(j);
+					J.push({
+						type: 1,
+						index: G,
+						name: U[2],
+						strings: F,
+						ctor: U[1] === "." ? I : U[1] === "?" ? L : U[1] === "@" ? z : H
+					}), W.removeAttribute(x);
+				} else x.startsWith(o$1) && (J.push({
+					type: 6,
+					index: G
+				}), W.removeAttribute(x));
+				if (y$1.test(W.tagName)) {
+					let x = W.textContent.split(o$1), j = x.length - 1;
+					if (j > 0) {
+						W.textContent = s$1 ? s$1.emptyScript : "";
+						for (let F = 0; F < j; F++) W.append(x[F], c()), P.nextNode(), J.push({
+							type: 2,
+							index: ++G
+						});
+						W.append(x[j], c());
+					}
+				}
+			} else if (W.nodeType === 8) if (W.data === n) J.push({
+				type: 2,
+				index: G
+			});
+			else {
+				let x = -1;
+				for (; (x = W.data.indexOf(o$1, x + 1)) !== -1;) J.push({
+					type: 7,
+					index: G
+				}), x += o$1.length - 1;
+			}
+			G++;
+		}
+	}
+	static createElement(x, j) {
+		let F = l.createElement("template");
+		return F.innerHTML = x, F;
+	}
+};
+function M(x, j, F = x, U) {
+	if (j === E) return j;
+	let W = U === void 0 ? F._$Cl : F._$Co?.[U], G = a(j) ? void 0 : j._$litDirective$;
+	return W?.constructor !== G && (W?._$AO?.(!1), G === void 0 ? W = void 0 : (W = new G(x), W._$AT(x, F, U)), U === void 0 ? F._$Cl = W : (F._$Co ??= [])[U] = W), W !== void 0 && (j = M(x, W._$AS(x, j.values), W, U)), j;
+}
+var R = class {
+	constructor(x, j) {
+		this._$AV = [], this._$AN = void 0, this._$AD = x, this._$AM = j;
+	}
+	get parentNode() {
+		return this._$AM.parentNode;
+	}
+	get _$AU() {
+		return this._$AM._$AU;
+	}
+	u(x) {
+		let { el: { content: j }, parts: F } = this._$AD, U = (x?.creationScope ?? l).importNode(j, !0);
+		P.currentNode = U;
+		let W = P.nextNode(), G = 0, K = 0, q = F[0];
+		for (; q !== void 0;) {
+			if (G === q.index) {
+				let j;
+				q.type === 2 ? j = new k(W, W.nextSibling, this, x) : q.type === 1 ? j = new q.ctor(W, q.name, q.strings, this, x) : q.type === 6 && (j = new Z(W, this, x)), this._$AV.push(j), q = F[++K];
+			}
+			G !== q?.index && (W = P.nextNode(), G++);
+		}
+		return P.currentNode = l, U;
+	}
+	p(x) {
+		let j = 0;
+		for (let F of this._$AV) F !== void 0 && (F.strings === void 0 ? F._$AI(x[j]) : (F._$AI(x, F, j), j += F.strings.length - 2)), j++;
+	}
+}, k = class x {
+	get _$AU() {
+		return this._$AM?._$AU ?? this._$Cv;
+	}
+	constructor(x, j, F, U) {
+		this.type = 2, this._$AH = A, this._$AN = void 0, this._$AA = x, this._$AB = j, this._$AM = F, this.options = U, this._$Cv = U?.isConnected ?? !0;
+	}
+	get parentNode() {
+		let x = this._$AA.parentNode, j = this._$AM;
+		return j !== void 0 && x?.nodeType === 11 && (x = j.parentNode), x;
+	}
+	get startNode() {
+		return this._$AA;
+	}
+	get endNode() {
+		return this._$AB;
+	}
+	_$AI(x, j = this) {
+		x = M(this, x, j), a(x) ? x === A || x == null || x === "" ? (this._$AH !== A && this._$AR(), this._$AH = A) : x !== this._$AH && x !== E && this._(x) : x._$litType$ === void 0 ? x.nodeType === void 0 ? d(x) ? this.k(x) : this._(x) : this.T(x) : this.$(x);
+	}
+	O(x) {
+		return this._$AA.parentNode.insertBefore(x, this._$AB);
+	}
+	T(x) {
+		this._$AH !== x && (this._$AR(), this._$AH = this.O(x));
+	}
+	_(x) {
+		this._$AH !== A && a(this._$AH) ? this._$AA.nextSibling.data = x : this.T(l.createTextNode(x)), this._$AH = x;
+	}
+	$(x) {
+		let { values: j, _$litType$: F } = x, U = typeof F == "number" ? this._$AC(x) : (F.el === void 0 && (F.el = S.createElement(V(F.h, F.h[0]), this.options)), F);
+		if (this._$AH?._$AD === U) this._$AH.p(j);
+		else {
+			let x = new R(U, this), F = x.u(this.options);
+			x.p(j), this.T(F), this._$AH = x;
+		}
+	}
+	_$AC(x) {
+		let j = C.get(x.strings);
+		return j === void 0 && C.set(x.strings, j = new S(x)), j;
+	}
+	k(j) {
+		u(this._$AH) || (this._$AH = [], this._$AR());
+		let F = this._$AH, U, W = 0;
+		for (let G of j) W === F.length ? F.push(U = new x(this.O(c()), this.O(c()), this, this.options)) : U = F[W], U._$AI(G), W++;
+		W < F.length && (this._$AR(U && U._$AB.nextSibling, W), F.length = W);
+	}
+	_$AR(x = this._$AA.nextSibling, j) {
+		for (this._$AP?.(!1, !0, j); x !== this._$AB;) {
+			let j = i$2(x).nextSibling;
+			i$2(x).remove(), x = j;
+		}
+	}
+	setConnected(x) {
+		this._$AM === void 0 && (this._$Cv = x, this._$AP?.(x));
+	}
+}, H = class {
+	get tagName() {
+		return this.element.tagName;
+	}
+	get _$AU() {
+		return this._$AM._$AU;
+	}
+	constructor(x, j, F, U, W) {
+		this.type = 1, this._$AH = A, this._$AN = void 0, this.element = x, this.name = j, this._$AM = U, this.options = W, F.length > 2 || F[0] !== "" || F[1] !== "" ? (this._$AH = Array(F.length - 1).fill(/* @__PURE__ */ new String()), this.strings = F) : this._$AH = A;
+	}
+	_$AI(x, j = this, F, U) {
+		let W = this.strings, G = !1;
+		if (W === void 0) x = M(this, x, j, 0), G = !a(x) || x !== this._$AH && x !== E, G && (this._$AH = x);
+		else {
+			let U = x, K, q;
+			for (x = W[0], K = 0; K < W.length - 1; K++) q = M(this, U[F + K], j, K), q === E && (q = this._$AH[K]), G ||= !a(q) || q !== this._$AH[K], q === A ? x = A : x !== A && (x += (q ?? "") + W[K + 1]), this._$AH[K] = q;
+		}
+		G && !U && this.j(x);
+	}
+	j(x) {
+		x === A ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, x ?? "");
+	}
+}, I = class extends H {
+	constructor() {
+		super(...arguments), this.type = 3;
+	}
+	j(x) {
+		this.element[this.name] = x === A ? void 0 : x;
+	}
+}, L = class extends H {
+	constructor() {
+		super(...arguments), this.type = 4;
+	}
+	j(x) {
+		this.element.toggleAttribute(this.name, !!x && x !== A);
+	}
+}, z = class extends H {
+	constructor(x, j, F, U, W) {
+		super(x, j, F, U, W), this.type = 5;
+	}
+	_$AI(x, j = this) {
+		if ((x = M(this, x, j, 0) ?? A) === E) return;
+		let F = this._$AH, U = x === A && F !== A || x.capture !== F.capture || x.once !== F.once || x.passive !== F.passive, W = x !== A && (F === A || U);
+		U && this.element.removeEventListener(this.name, this, F), W && this.element.addEventListener(this.name, this, x), this._$AH = x;
+	}
+	handleEvent(x) {
+		typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element, x) : this._$AH.handleEvent(x);
+	}
+}, Z = class {
+	constructor(x, j, F) {
+		this.element = x, this.type = 6, this._$AN = void 0, this._$AM = j, this.options = F;
+	}
+	get _$AU() {
+		return this._$AM._$AU;
+	}
+	_$AI(x) {
+		M(this, x);
+	}
+}, B = t$1.litHtmlPolyfillSupport;
+B?.(S, k), (t$1.litHtmlVersions ??= []).push("3.3.2");
+var D = (x, j, F) => {
+	let U = F?.renderBefore ?? j, W = U._$litPart$;
+	if (W === void 0) {
+		let x = F?.renderBefore ?? null;
+		U._$litPart$ = W = new k(j.insertBefore(c(), x), x, void 0, F ?? {});
+	}
+	return W._$AI(x), W;
+}, s = globalThis, i = class extends y {
+	constructor() {
+		super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
+	}
+	createRenderRoot() {
+		let x = super.createRenderRoot();
+		return this.renderOptions.renderBefore ??= x.firstChild, x;
+	}
+	update(x) {
+		let j = this.render();
+		this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(x), this._$Do = D(j, this.renderRoot, this.renderOptions);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._$Do?.setConnected(!0);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._$Do?.setConnected(!1);
+	}
+	render() {
+		return E;
+	}
+};
+i._$litElement$ = !0, i.finalized = !0, s.litElementHydrateSupport?.({ LitElement: i });
+var o = s.litElementPolyfillSupport;
+o?.({ LitElement: i }), (s.litElementVersions ??= []).push("4.2.2");
+/**
+* @license
+* Copyright 2017 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+var t = (x) => (j, F) => {
+	F === void 0 ? customElements.define(x, j) : F.addInitializer(() => {
+		customElements.define(x, j);
+	});
+};
+function __decorate(x, j, F, U) {
+	var W = arguments.length, G = W < 3 ? j : U === null ? U = Object.getOwnPropertyDescriptor(j, F) : U, K;
+	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") G = Reflect.decorate(x, j, F, U);
+	else for (var q = x.length - 1; q >= 0; q--) (K = x[q]) && (G = (W < 3 ? K(G) : W > 3 ? K(j, F, G) : K(j, F)) || G);
+	return W > 3 && G && Object.defineProperty(j, F, G), G;
+}
+var NButton = class extends i {
+	constructor(...x) {
+		super(...x), this.variant = "normal", this.thin = !1, this.thick = !1, this.outlineOnly = !1, this.scaleHover = !1, this.rounded = !1, this.sharp = !1, this.dark = !1, this.animation = "normal";
+	}
+	static #e = this.properties = {
+		variant: { type: String },
+		animation: { type: String },
+		thin: { type: Boolean },
+		thick: { type: Boolean },
+		outlineOnly: { type: Boolean },
+		rounded: { type: Boolean },
+		sharp: { type: Boolean },
+		scaleHover: { type: Boolean },
+		dark: { type: Boolean }
+	};
+	static #t = this.styles = i$1`
+        button {
+            padding: 8px 16px;
+            border: none;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 400;
+            border-radius: 2px;
+            transition: all;
+            animation-duration: 0.3s;
+            min-width: 100px;
+        }
+
+        button.info {
+            background-color: #007bff;
+            color: white;
+            border: 1px solid #2c92ffff;
+        }
+
+        button.info:hover {
+            background-color: #268fffff;
+            border: 1px solid #4da3ffff;
+        }
+
+        button.normal {
+            background-color: #e0e0e0;
+            color: #242424ff;
+            border: 1px solid #ddd;
+        }
+
+        button.normal:hover {
+            background-color: #f5f5f5ff;
+            border: 1px solid #ffffffff;
+        }
+
+        button.warning {
+            background-color: rgba(241, 132, 7, 1);
+            color: white;
+            border: 1px solid rgba(248, 142, 42, 1);
+        }
+
+        button.warning:hover {
+            background-color: rgba(240, 162, 16, 1);
+            border: 1px solid rgba(255, 184, 53, 1);
+        }
+
+        button.alert {
+            background-color: rgba(233, 30, 23, 1);
+            color: white;
+            border: 1px solid rgba(248, 49, 42, 1);
+        }
+
+        button.alert:hover {
+            background-color: rgba(248, 44, 44, 1);
+            border: 1px solid rgba(255, 76, 76, 1);
+        }
+
+        button.thin {
+            padding: 4px 8px;
+        }
+
+        button.thick {
+            padding: 12px 24px;
+        }
+
+        button.outline-only {
+            background-color: transparent !important;
+        }
+
+        button.scale-hover:hover {
+            transform: scale(1.05);
+        }
+
+        .animation-fast {
+            transition: all 0.10s;
+        }
+
+        .animation-normal {
+            transition: all 0.25s;
+        }
+
+        .animation-slow {
+            transition: all 0.45s;
+        }
+
+        .animation-extra-slow {
+            transition: all 1s;
+        }
+
+        .rounded {
+            border-radius: 4px;
+        }
+
+        .sharp {
+            border-radius: 0;
+        }
+
+        @media screen and (width <= 1024px) {
+            button {
+                font-size: 12px;
+            }   
+        }
+    `;
+	render() {
+		let x = this.variant === "normal" && this.dark ? "white" : "";
+		return b`<button 
+            class="${this.variant}${this.thin && !this.thick ? " thin" : this.thick ? " thick" : ""}${this.outlineOnly ? " outline-only" : ""}${this.scaleHover ? " scale-hover" : ""}${this.rounded && !this.sharp ? " rounded" : this.sharp ? " sharp" : ""} animation-${this.animation}"
+            style="${x ? `color: ${x}` : ""}">
+            <slot></slot>
+        </button>`;
+	}
+};
+NButton = __decorate([t("n-button")], NButton);
+export { NButton };

package/package.json

@@ -2,16 +2,18 @@
     "name": "@trenoxxious/n-components",
     "description": "Customizable components for use with vanilla HTML, Javascript and CSS.",
     "private": false,
-    "version": "1.0.2",
+    "version": "1.0.3",
     "repository": "github:Trenoxxious/n-components",
     "keywords": [
         "web-components",
         "lit-element"
     ],
     "type": "module",
+    "files": [
+        "dist"
+    ],
     "exports": {
-        ".": "./dist/index.js",
-        "./n-button": "./dist/components/n-button.js"
+        ".": "./dist/n-components.js"
     },
     "scripts": {
         "dev": "vite",
@@ -28,4 +30,4 @@
     "overrides": {
         "vite": "npm:rolldown-vite@7.2.5"
     }
-}
+}

package/index.html

@@ -1,77 +0,0 @@
-<!doctype html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>n-components</title>
-    <link rel="stylesheet" href="./src/index.css" />
-    <script type="module" src="/src/index.ts"></script>
-</head>
-
-<body>
-    <header>
-        <h1>
-            n-components
-        </h1>
-        <p>Light-weight web components for use with vanilla HTML, JS and CSS.</p>
-    </header>
-    <p class="sec">You want some buttons? We have some cool, customizable buttons.</p>
-    <div class="components-grid">
-        <div class="component-card">
-            <div class="component-header">
-                <h3>Base Buttons</h3>
-                <div class="code w-full">&lt;<span class="html-red">n-button</span>&nbsp;<span class="html-orange">variant=</span><span class="html-green">"info"</span>&gt;<pre>More Info</pre>&lt;/<span class="html-red">n-button</span>&gt;</div>
-                <n-button variant="info">More Info</n-button>
-            </div>
-            <div class="button-grid">
-                <n-button variant="normal">Normal</n-button>
-                <n-button variant="info">Info</n-button>
-                <n-button variant="warning">Warning</n-button>
-                <n-button variant="alert">Alert</n-button>
-            </div>
-        </div>
-        <div class="component-card">
-            <div class="component-header">
-                <h3>Thin Buttons</h3>
-                <div class="code w-full">&lt;<span class="html-red">n-button</span>&nbsp;<span class="html-orange">variant=</span><span class="html-green">"warning"</span>&nbsp;<span class="html-orange">thin</span>&gt;<pre>A warning!</pre>&lt;/<span class="html-red">n-button</span>&gt;</div>
-                <n-button variant="warning" thin>A warning!</n-button>
-            </div>
-            <div class="button-grid">
-                <n-button variant="normal" thin>Thin</n-button>
-                <n-button variant="info" thin>Thin</n-button>
-                <n-button variant="warning" thin>Thin</n-button>
-                <n-button variant="alert" thin>Thin</n-button>
-            </div>
-        </div>
-        <div class="component-card">
-            <div class="component-header">
-                <h3>Thick Buttons</h3>
-                <div class="code w-full">&lt;<span class="html-red">n-button</span>&nbsp;<span class="html-orange">thick</span>&gt;<pre>Play</pre>&lt;/<span class="html-red">n-button</span>&gt;</div>
-                <n-button thick>Play</n-button>
-            </div>
-            <div class="button-grid">
-                <n-button variant="normal" thick>Thick</n-button>
-                <n-button variant="info" thick>Thick</n-button>
-                <n-button variant="warning" thick>Thick</n-button>
-                <n-button variant="alert" thick>Thick</n-button>
-            </div>
-        </div>
-        <div class="component-card">
-            <div class="component-header">
-                <h3>Outlined Buttons, w/ Dark Mode</h3>
-                <div class="code w-full">&lt;<span class="html-red">n-button</span>&nbsp;<span class="html-orange">outlineOnly dark thin</span>&gt;<pre>Go!</pre>&lt;/<span class="html-red">n-button</span>&gt;</div>
-                <n-button outlineOnly dark thin>Go!</n-button>
-            </div>
-            <div class="button-grid">
-                <n-button variant="normal" outlineOnly dark>Outlined</n-button>
-                <n-button variant="info" outlineOnly dark>Outlined</n-button>
-                <n-button variant="warning" outlineOnly dark>Outlined</n-button>
-                <n-button variant="alert" outlineOnly dark>Outlined</n-button>
-            </div>
-        </div>
-    </div>
-</body>
-
-</html>

package/src/assets/lit.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="25.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 320"><path fill="#00E8FF" d="m64 192l25.926-44.727l38.233-19.114l63.974 63.974l10.833 61.754L192 320l-64-64l-38.074-25.615z"></path><path fill="#283198" d="M128 256V128l64-64v128l-64 64ZM0 256l64 64l9.202-60.602L64 192l-37.542 23.71L0 256Z"></path><path fill="#324FFF" d="M64 192V64l64-64v128l-64 64Zm128 128V192l64-64v128l-64 64ZM0 256V128l64 64l-64 64Z"></path><path fill="#0FF" d="M64 320V192l64 64z"></path></svg>

package/src/components/n-button.ts

@@ -1,140 +0,0 @@
-import { LitElement, css, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
-
-@customElement('n-button')
-export class NButton extends LitElement {
-    static properties = {
-        variant: { type: String },
-        animation: { type: String },
-        thin: { type: Boolean },
-        thick: { type: Boolean },
-        outlineOnly: { type: Boolean },
-        rounded: { type: Boolean },
-        sharp: { type: Boolean },
-        scaleHover: { type: Boolean },
-        dark: { type: Boolean },
-    };
-
-    variant: 'normal' | 'info' | 'warning' | 'alert' = 'normal';
-    thin = false;
-    thick = false;
-    outlineOnly = false;
-    scaleHover = false;
-    rounded = false;
-    sharp = false;
-    dark = false;
-    animation: 'fast' | 'normal' | 'slow' | 'extra-slow' = 'normal';
-
-    static styles = css`
-        button {
-            padding: 8px 16px;
-            border: none;
-            cursor: pointer;
-            font-size: 14px;
-            font-weight: 400;
-            border-radius: 2px;
-            transition: all;
-            animation-duration: 0.3s;
-            min-width: 100px;
-        }
-
-        button.info {
-            background-color: #007bff;
-            color: white;
-            border: 1px solid #2c92ffff;
-        }
-
-        button.info:hover {
-            background-color: #268fffff;
-            border: 1px solid #4da3ffff;
-        }
-
-        button.normal {
-            background-color: #e0e0e0;
-            color: #242424ff;
-            border: 1px solid #ddd;
-        }
-
-        button.normal:hover {
-            background-color: #f5f5f5ff;
-            border: 1px solid #ffffffff;
-        }
-
-        button.warning {
-            background-color: rgba(241, 132, 7, 1);
-            color: white;
-            border: 1px solid rgba(248, 142, 42, 1);
-        }
-
-        button.warning:hover {
-            background-color: rgba(240, 162, 16, 1);
-            border: 1px solid rgba(255, 184, 53, 1);
-        }
-
-        button.alert {
-            background-color: rgba(233, 30, 23, 1);
-            color: white;
-            border: 1px solid rgba(248, 49, 42, 1);
-        }
-
-        button.alert:hover {
-            background-color: rgba(248, 44, 44, 1);
-            border: 1px solid rgba(255, 76, 76, 1);
-        }
-
-        button.thin {
-            padding: 4px 8px;
-        }
-
-        button.thick {
-            padding: 12px 24px;
-        }
-
-        button.outline-only {
-            background-color: transparent !important;
-        }
-
-        button.scale-hover:hover {
-            transform: scale(1.05);
-        }
-
-        .animation-fast {
-            transition: all 0.10s;
-        }
-
-        .animation-normal {
-            transition: all 0.25s;
-        }
-
-        .animation-slow {
-            transition: all 0.45s;
-        }
-
-        .animation-extra-slow {
-            transition: all 1s;
-        }
-
-        .rounded {
-            border-radius: 4px;
-        }
-
-        .sharp {
-            border-radius: 0;
-        }
-
-        @media screen and (width <= 1024px) {
-            button {
-                font-size: 12px;
-            }   
-        }
-    `;
-
-    render() {
-        const color = this.variant === 'normal' && this.dark ? 'white' : '';
-        return html`<button 
-            class="${this.variant}${this.thin && !this.thick ? ' thin' : this.thick ? ' thick' : ''}${this.outlineOnly ? ' outline-only' : ''}${this.scaleHover ? ' scale-hover' : ''}${this.rounded && !this.sharp ? ' rounded' : this.sharp ? ' sharp' : ''} animation-${this.animation}"
-            style="${color ? `color: ${color}` : ''}">
-            <slot></slot>
-        </button>`;
-    }
-}

package/src/index.css

@@ -1,188 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Manjari:wght@100;400;700&display=swap');
-
-:root {
-    font-family: "Cal Sans", system-ui, Avenir, Helvetica, Arial, sans-serif;
-    line-height: 1.5;
-    font-weight: 300;
-    font-size: 16px;
-    color-scheme: light dark;
-    color: rgba(255, 255, 255, 0.87);
-    background: linear-gradient(to top, #182633, #242424);
-    font-synthesis: none;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-* {
-    margin: 0;
-    padding: 0;
-    text-align: center;
-    text-wrap: pretty;
-}
-
-body {
-    margin: 0;
-    min-width: 320px;
-    min-height: 100vh;
-}
-
-header {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    background-clip: text;
-    margin-left: 5%;
-    margin-right: 5%;
-    margin-bottom: 50px;
-}
-
-header h1 {
-    position: relative;
-    background-clip: text;
-    background-image: linear-gradient(2deg, rgb(255, 255, 255) 40%, transparent 40.5%);
-    -webkit-background-clip: text;
-    color: transparent;
-    font-size: 9rem;
-    -webkit-text-stroke-color: rgb(255, 255, 255);
-    -webkit-text-stroke-width: 2px;
-    overflow: hidden;
-    text-wrap: nowrap;
-}
-
-header p {
-    text-align: center;
-    text-wrap: pretty;
-    font-size: 1.8rem;
-}
-
-.sec {
-    margin-top: 15px;
-    margin-bottom: 15px;
-    font-size: 1.5rem;
-    font-family: "Manjari", sans-serif, system-ui;
-    font-weight: 400;
-}
-
-.components-grid {
-    font-family: "Manjari", sans-serif, system-ui;
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-    gap: 24px;
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 20px;
-}
-
-.component-card {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    padding: 24px;
-    background: rgba(36, 36, 36, 0.6);
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    border-radius: 4px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-    transition: border-color 0.2s ease;
-}
-
-.component-header {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    align-items: flex-start;
-    padding-bottom: 12px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.component-header h3 {
-    margin: 0;
-    font-size: 1.25rem;
-    font-weight: 500;
-    color: rgba(255, 255, 255, 0.95);
-    font-family: "Manjari", sans-serif, system-ui;
-}
-
-.button-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 12px;
-    padding: 16px;
-    background: rgba(24, 38, 51, 0.4);
-    border: 1px dashed rgba(255, 255, 255, 0.1);
-    border-radius: 4px;
-}
-
-.button-grid n-button {
-    padding: 8px;
-}
-
-.code {
-    text-wrap: nowrap;
-    text-align: left;
-    overflow-x: auto;
-    display: inline;
-    justify-content: flex-start;
-    align-items: center;
-    padding: 5px 5px 0 5px;
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: 4px;
-    font-size: 1rem;
-    height: 100px;
-    color: rgba(194, 194, 194, 1);
-    font-weight: 500;
-    border: 1px dotted rgba(255, 255, 255, 0.25);
-}
-
-pre {
-    text-align: left;
-    margin-left: 25px;
-}
-
-.code span {
-    text-wrap: nowrap;
-}
-
-.html-red {
-    color: rgba(255, 84, 84, 1);
-}
-
-.html-orange {
-    color: rgba(255, 158, 79, 1);
-}
-
-.html-green {
-    color: rgba(101, 255, 121, 1);
-}
-
-.w-full {
-    width: -webkit-fill-available;
-    width: -moz-available;
-    width: stretch;
-}
-
-@media (prefers-color-scheme: light) {
-    :root {
-        color: #213547;
-        background-color: #ffffff;
-    }
-}
-
-@media screen and (width < 1050px) {
-    header h1 {
-        font-size: 3rem;
-        -webkit-text-stroke-width: 1px;
-        background-image: linear-gradient(2deg, rgb(255, 255, 255) 39%, transparent 39.5%);
-    }
-
-    header p {
-        font-size: 1rem;
-    }
-
-    .sec {
-        font-size: 1.25rem;
-    }
-}

package/src/index.ts

@@ -1 +0,0 @@
-export { NButton } from './components/n-button.js';

package/tsconfig.json

@@ -1,27 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "experimentalDecorators": true,
-    "useDefineForClassFields": false,
-    "module": "ESNext",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "types": ["vite/client"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["src"]
-}