@lablup/ui-common 0.2.0-alpha.16 → 0.2.0-alpha.18

package/dist/components/Board/Board2.js

@@ -0,0 +1,607 @@
+import { useUicTranslator as e } from "../../i18n/useUicTranslator.js";
+import { getMinColumnSpan as t, getMinRowSpan as n, interpretItems as r, transformItems as i } from "./layout.js";
+import { LayoutEngine as a, appendPath as o, removeItem as s } from "./engine.js";
+import { autoScrollStep as c, compensateForScroll as l, findScrollParent as u, scrollBounds as d } from "./scroll.js";
+/* empty css      */
+import { useEffect as f, useRef as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { IconButton as _ } from "@astryxdesign/core/IconButton";
+import { VisuallyHidden as v } from "@astryxdesign/core/VisuallyHidden";
+//#region src/components/Board/Board.tsx
+var y = [
+	{
+		minWidth: 0,
+		columns: 1
+	},
+	{
+		minWidth: 688,
+		columns: 2
+	},
+	{
+		minWidth: 912,
+		columns: 4
+	},
+	{
+		minWidth: 2100,
+		columns: 6
+	}
+], b = (e) => {
+	let t = e?.getBoundingClientRect();
+	return {
+		x: t?.left ?? 0,
+		y: t?.top ?? 0
+	};
+}, ee = (e, t, n) => Math.min(Math.max(e, t), Math.max(t, n));
+function x(e, t) {
+	let n = 0;
+	for (let r of [...t].sort((e, t) => e.minWidth - t.minWidth)) r.minWidth <= e && (n = r.columns);
+	return n;
+}
+var S = (e, t) => Math.max(0, Math.min(e.right, t.right) - Math.max(e.left, t.left)) * Math.max(0, Math.min(e.bottom, t.bottom) - Math.max(e.top, t.top));
+function te(e, t, n, r) {
+	let i = r.cellWidth + r.gap, a = r.cellHeight + r.gap, o = (e, t, n) => Math.abs(t - n) < Math.abs(e - n) ? t : e, s = (e, t) => ({
+		left: e * i,
+		top: t * a,
+		right: e * i + r.cellWidth,
+		bottom: t * a + r.cellHeight
+	}), c = {
+		left: Infinity,
+		top: Infinity,
+		right: Infinity,
+		bottom: Infinity
+	};
+	for (let r = 0; r < n; r++) for (let n = 0; n < t; n++) {
+		let t = s(n, r);
+		S(t, e) > 0 && (c = {
+			left: o(c.left, t.left, e.left),
+			top: o(c.top, t.top, e.top),
+			right: o(c.right, t.right, e.right),
+			bottom: o(c.bottom, t.bottom, e.bottom)
+		});
+	}
+	let l = null;
+	for (let e = 0; e < n; e++) for (let n = 0; n < t; n++) {
+		let t = s(n, e);
+		if (t.top >= c.top && t.left >= c.left && t.right <= c.right && t.bottom <= c.bottom) if (!l) l = {
+			x: n,
+			y: e,
+			width: 1,
+			height: 1
+		};
+		else {
+			let t = Math.min(l.x, n), r = Math.min(l.y, e);
+			l = {
+				x: t,
+				y: r,
+				width: Math.max(l.x + l.width, n + 1) - t,
+				height: Math.max(l.y + l.height, e + 1) - r
+			};
+		}
+	}
+	return l;
+}
+function C() {
+	return /* @__PURE__ */ g("svg", {
+		width: "1em",
+		height: "1em",
+		viewBox: "0 0 16 16",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ h("circle", {
+				cx: "6",
+				cy: "3",
+				r: "1.5"
+			}),
+			/* @__PURE__ */ h("circle", {
+				cx: "10",
+				cy: "3",
+				r: "1.5"
+			}),
+			/* @__PURE__ */ h("circle", {
+				cx: "6",
+				cy: "8",
+				r: "1.5"
+			}),
+			/* @__PURE__ */ h("circle", {
+				cx: "10",
+				cy: "8",
+				r: "1.5"
+			}),
+			/* @__PURE__ */ h("circle", {
+				cx: "6",
+				cy: "13",
+				r: "1.5"
+			}),
+			/* @__PURE__ */ h("circle", {
+				cx: "10",
+				cy: "13",
+				r: "1.5"
+			})
+		]
+	});
+}
+function ne() {
+	return /* @__PURE__ */ g("svg", {
+		width: "1em",
+		height: "1em",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ h("path", { d: "M13 8 8 13" }), /* @__PURE__ */ h("path", { d: "M13 3 3 13" })]
+	});
+}
+var w = {
+	up: "M8 12V4M4 8l4-4 4 4",
+	down: "M8 4v8M4 8l4 4 4-4",
+	left: "M12 8H4M8 4 4 8l4 4",
+	right: "M4 8h8M8 4l4 4-4 4"
+};
+function re({ direction: e }) {
+	return /* @__PURE__ */ h("svg", {
+		width: "1em",
+		height: "1em",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ h("path", { d: w[e] })
+	});
+}
+var ie = [
+	"up",
+	"down",
+	"left",
+	"right"
+], ae = {
+	up: "uic.Board.directionUp",
+	down: "uic.Board.directionDown",
+	left: "uic.Board.directionLeft",
+	right: "uic.Board.directionRight"
+}, T = (...e) => e.filter(Boolean).join(" ");
+function E({ items: S, renderItem: w, onItemsChange: E, isMovable: oe = !1, isResizable: se = !1, variant: ce = "plain", emptyContent: le, columnBreakpoints: ue = y, itemClassName: D, dragHandleIcon: de, resizeHandleIcon: fe, dragHandleLabel: pe, resizeHandleLabel: me, liveAnnouncementDndStarted: he, liveAnnouncementDndItemMoved: ge, liveAnnouncementDndItemResized: _e, liveAnnouncementDndCommitted: ve, liveAnnouncementDndDiscarded: ye, liveAnnouncementItemRemoved: be, className: xe, ...Se }) {
+	let O = e(), k = p(null), A = p(null), j = p(/* @__PURE__ */ new Map()), [M, N] = m(null), [P, Ce] = m(null), [we, F] = m(""), I = p(null), L = (e) => {
+		I.current = e, Ce(e);
+	}, R = p(S);
+	R.current = S;
+	let z = p(null);
+	f(() => {
+		let e = k.current;
+		if (!e) return;
+		if (typeof ResizeObserver > "u") {
+			N(e.clientWidth);
+			return;
+		}
+		let t = new ResizeObserver((t) => {
+			let n = t[0];
+			N(n ? n.contentRect.width : e.clientWidth);
+		});
+		return t.observe(e), () => t.disconnect();
+	}, []);
+	let Te = M === null ? 0 : x(M, ue), B = P ? P.base.columns : Te, Ee = r(S, B), De = (e) => F(he?.(e) ?? O(e === "resize" ? "uic.Board.resizeStarted" : "uic.Board.moveStarted")), Oe = (e, t) => {
+		let n = R.current.find((t) => t.id === e.itemId);
+		if (!n) return;
+		let r = {
+			item: n,
+			placement: { ...t }
+		};
+		F(e.operation === "resize" ? _e?.(r) ?? O("uic.Board.itemResized", {
+			columns: t.width,
+			rows: t.height
+		}) : ge?.(r) ?? O("uic.Board.itemMoved", {
+			column: t.x + 1,
+			row: t.y + 1
+		}));
+	}, V = (e, t) => F(t ? ve?.(e) ?? O(e === "resize" ? "uic.Board.resizeCommitted" : "uic.Board.moveCommitted") : ye?.(e) ?? O(e === "resize" ? "uic.Board.resizeDiscarded" : "uic.Board.moveDiscarded")), ke = (e, t, n) => {
+		let r = A.current;
+		if (!r) return {
+			cellWidth: 0,
+			cellHeight: 0,
+			gap: 0
+		};
+		let i = getComputedStyle(r), a = parseFloat(i.rowGap) || 0, o = j.current.get(t)?.getBoundingClientRect(), s = (e, t) => e === void 0 ? 0 : Math.max((e - a * (t - 1)) / t, 0), c = r.getBoundingClientRect().width;
+		return {
+			cellWidth: c > 0 && e > 0 ? Math.max((c - a * (e - 1)) / e, 0) : s(o?.width, n.width),
+			cellHeight: parseFloat(i.gridAutoRows) || s(o?.height, n.height),
+			gap: a
+		};
+	}, H = (e) => {
+		let t = (e.shift?.next ?? e.base).items.find((t) => t.id === e.itemId);
+		return t ? {
+			x: t.x,
+			y: t.y,
+			width: t.width,
+			height: t.height
+		} : e.origin;
+	}, Ae = (e) => {
+		let t = e.shift?.next ?? e.base, n = H(e);
+		return e.operation === "resize" ? Math.max(t.rows, n.y + n.height + 1) : Math.max(t.rows, e.base.rows + n.height);
+	}, U = (e, t, n, i) => {
+		let o = r(R.current, B), s = o.items.find((e) => e.id === n);
+		if (!s) return null;
+		let c = {
+			x: s.x,
+			y: s.y,
+			width: s.width,
+			height: s.height
+		}, l = {
+			operation: e,
+			interaction: t,
+			itemId: n,
+			base: o,
+			engine: new a(o),
+			origin: c,
+			path: t === "keyboard" ? [e === "resize" ? {
+				x: c.x + c.width,
+				y: c.y + c.height
+			} : {
+				x: c.x,
+				y: c.y
+			}] : [],
+			shift: null,
+			hovered: null,
+			metrics: ke(B, n, c),
+			pointer: i
+		};
+		return L(l), De(e), l;
+	}, je = (e, t) => {
+		let n = o(e.path, t);
+		try {
+			return {
+				path: n,
+				shift: e.operation === "resize" ? e.engine.resize(e.itemId, n) : e.engine.move(e.itemId, n)
+			};
+		} catch (e) {
+			if (e instanceof RangeError) return null;
+			throw e;
+		}
+	}, W = p(null), Me = () => {
+		let e = I.current;
+		if (!e) return null;
+		let t = j.current.get(e.itemId), n = typeof document > "u" ? null : document.activeElement;
+		return W.current = t && n instanceof HTMLElement && t.contains(n) ? {
+			itemId: e.itemId,
+			operation: e.operation
+		} : null, L(null), z.current = null, e;
+	};
+	f(() => {
+		let e = W.current;
+		if (!e || P) return;
+		W.current = null;
+		let t = j.current.get(e.itemId)?.querySelector(e.operation === "resize" ? ".uic-board-item__resize-handle" : ".uic-board-item__drag-handle");
+		t && document.activeElement !== t && t.focus({ preventScroll: !0 });
+	});
+	let G = () => {
+		let e = Me();
+		if (!e) return;
+		let { shift: t } = e;
+		if (t !== null && t.conflicts.length === 0 && t.moves.length > 0) {
+			let n = e.operation === "resize" ? e.itemId : void 0, r = i(R.current, t.next, n), a = r.find((t) => t.id === e.itemId);
+			E(e.operation === "resize" ? {
+				items: r,
+				resizedItem: a
+			} : {
+				items: r,
+				movedItem: a
+			});
+		}
+		let n = t === null ? e.interaction === "pointer" : t.conflicts.length > 0;
+		V(e.operation, !n);
+	}, K = () => {
+		let e = Me();
+		e && V(e.operation, !1);
+	}, Ne = p(K);
+	Ne.current = K;
+	let q = P?.pointer !== void 0;
+	f(() => {
+		if (!q) return;
+		let e = (e) => {
+			e.key === "Escape" && (e.preventDefault(), Ne.current());
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [q]);
+	let Pe = (e) => {
+		let t = r(R.current, B), n = R.current.filter((t) => t.id !== e.id);
+		E({
+			items: i(n, s(t, e.id)),
+			removedItem: e
+		}), F(be?.({ item: e }) ?? O("uic.Board.itemRemoved"));
+	}, Fe = (e, r) => {
+		let i = r === "left" ? -1 : +(r === "right"), a = r === "up" ? -1 : +(r === "down"), o = e.path[e.path.length - 1];
+		if (!o) return;
+		if (e.operation === "resize") {
+			let r = R.current.find((t) => t.id === e.itemId), o = H(e), s = r ? t(r, e.base.columns) : 1, c = r ? n(r) : 1;
+			if (o.width + i < s || o.height + a < c) return;
+		}
+		let s = je(e, {
+			x: o.x + i,
+			y: o.y + a
+		});
+		if (!s) return;
+		let c = {
+			...e,
+			...s,
+			hovered: null
+		};
+		L(c), Oe(c, H(c));
+	}, Ie = (e, t) => (n) => {
+		n.button !== 0 || I.current?.pointer || (typeof n.currentTarget.setPointerCapture == "function" && n.currentTarget.setPointerCapture(n.pointerId), z.current = {
+			operation: e,
+			itemId: t,
+			pointerId: n.pointerId,
+			start: {
+				x: n.clientX,
+				y: n.clientY
+			}
+		});
+	}, Le = (e, t) => {
+		let n = j.current.get(e.itemId), r = b(A.current), i = n?.getBoundingClientRect(), a = i ? {
+			left: i.left - r.x,
+			top: i.top - r.y,
+			right: i.right - r.x,
+			bottom: i.bottom - r.y
+		} : {
+			left: 0,
+			top: 0,
+			right: 0,
+			bottom: 0
+		};
+		return I.current && L(null), U(e.operation, "pointer", e.itemId, {
+			id: e.pointerId,
+			start: e.start,
+			gridOrigin: r,
+			last: t,
+			itemBox: a,
+			dx: 0,
+			dy: 0
+		});
+	}, J = (e, r) => {
+		let i = e.pointer;
+		if (!i) return;
+		let a = l(r, i.start, i.gridOrigin, b(A.current)), { itemBox: o } = i, { cellWidth: s, cellHeight: c, gap: u } = e.metrics, d = (e, t) => Math.max(e * t + (e - 1) * u, 0), f = R.current.find((t) => t.id === e.itemId), p = e.base.columns, m = Ae(e), h, g = i.size;
+		if (e.operation === "resize") {
+			let r = d(f ? t(f, p) : 1, s), i = d(f ? n(f) : 1, c), l = d(p - e.origin.x, s);
+			g = {
+				width: ee(o.right - o.left + a.x, r, l),
+				height: Math.max(o.bottom - o.top + a.y, i)
+			}, h = {
+				left: o.left,
+				top: o.top,
+				right: o.left + g.width,
+				bottom: o.top + g.height
+			};
+		} else h = {
+			left: o.left + a.x,
+			top: o.top + a.y,
+			right: o.right + a.x,
+			bottom: o.bottom + a.y
+		};
+		let _ = te(h, p, m, e.metrics), v = H(e), y = _ !== null && (e.operation === "resize" || _.width * _.height >= v.width * v.height), { shift: x, path: S } = e;
+		if (!y) x = null;
+		else {
+			let t = e.operation === "resize" ? {
+				x: _.x + _.width,
+				y: _.y + _.height
+			} : {
+				x: _.x,
+				y: _.y
+			}, n = S[S.length - 1];
+			if (!n || n.x !== t.x || n.y !== t.y || x === null) {
+				let n = je(e, t);
+				n && ({shift: x, path: S} = n);
+			}
+		}
+		let C = {
+			...e,
+			shift: x,
+			path: S,
+			hovered: y ? _ : null,
+			pointer: {
+				...i,
+				last: r,
+				dx: a.x,
+				dy: a.y,
+				size: g
+			}
+		};
+		L(C);
+	}, Re = p(J);
+	Re.current = J;
+	let Y = (e) => {
+		let t = {
+			x: e.clientX,
+			y: e.clientY
+		}, n = z.current;
+		if (n && n.pointerId === e.pointerId) {
+			if (!(Math.abs(t.x - n.start.x) > 3 || Math.abs(t.y - n.start.y) > 3)) return;
+			z.current = null;
+			let e = Le(n, t);
+			e && J(e, t);
+			return;
+		}
+		let r = I.current;
+		!r?.pointer || r.pointer.id !== e.pointerId || J(r, t);
+	};
+	f(() => {
+		if (!q) return;
+		let e = () => {
+			let e = I.current;
+			e?.pointer && Re.current(e, e.pointer.last);
+		};
+		window.addEventListener("scroll", e, {
+			capture: !0,
+			passive: !0
+		});
+		let t = A.current, n = t ? u(t) : null, r = 0, i = () => {
+			let t = I.current;
+			if (t?.pointer && n) {
+				let r = c(t.pointer.last, d(n));
+				(r.x !== 0 || r.y !== 0) && typeof n.scrollBy == "function" && (n.scrollBy(r.x, r.y), e());
+			}
+			r = requestAnimationFrame(i);
+		};
+		return typeof requestAnimationFrame == "function" && (r = requestAnimationFrame(i)), () => {
+			window.removeEventListener("scroll", e, { capture: !0 }), r && cancelAnimationFrame(r);
+		};
+	}, [q]);
+	let ze = (e) => {
+		let t = z.current;
+		if (t && t.pointerId === e.pointerId) {
+			z.current = null;
+			let n = I.current;
+			n && G(), n && n.itemId === t.itemId && n.operation === t.operation || (e.currentTarget.focus({ preventScroll: !0 }), U(t.operation, "keyboard", t.itemId));
+			return;
+		}
+		let n = I.current;
+		!n?.pointer || n.pointer.id !== e.pointerId || G();
+	}, Be = (e) => {
+		z.current?.pointerId === e.pointerId && (z.current = null);
+		let t = I.current;
+		!t?.pointer || t.pointer.id !== e.pointerId || K();
+	}, Ve = (e, t) => (n) => {
+		let r = I.current;
+		if (!(r && (r.itemId !== t || r.operation !== e))) switch (n.key) {
+			case "ArrowUp":
+			case "ArrowDown":
+			case "ArrowLeft":
+			case "ArrowRight":
+				if (r?.interaction !== "keyboard") return;
+				n.preventDefault(), Fe(r, n.key.slice(5).toLowerCase());
+				return;
+			case "Enter":
+			case " ":
+				n.preventDefault(), r ? G() : U(e, "keyboard", t);
+				return;
+			case "Escape":
+				r && (n.preventDefault(), K());
+				return;
+			default: return;
+		}
+	}, He = () => {
+		I.current?.interaction === "keyboard" && G();
+	}, Ue = P ? P.shift?.next ?? P.base : null, We = new Map(Ue?.items.map((e) => [e.id, e]) ?? []), X = P ? H(P) : null, Z = P?.hovered ?? (P?.interaction === "keyboard" && P.shift ? X : null), Ge = [];
+	if (P) {
+		let e = Ae(P);
+		for (let t = 0; t < e; t++) for (let e = 0; e < B; e++) {
+			let n = Z !== null && e >= Z.x && e < Z.x + Z.width && t >= Z.y && t < Z.y + Z.height;
+			Ge.push(/* @__PURE__ */ h("div", {
+				className: T("uic-board__placeholder", "uic-board__placeholder--active", n && "uic-board__placeholder--hover"),
+				style: {
+					gridColumn: `${e + 1} / span 1`,
+					gridRow: `${t + 1} / span 1`
+				}
+			}, `placeholder-${t}-${e}`));
+		}
+	}
+	let Ke = new Map(S.map((e) => [e.id, e])), Q = (e, t) => e * (t + (P?.metrics.gap ?? 0)), $ = (e, t) => P === null || P.interaction !== "keyboard" || P.itemId !== t || P.operation !== e ? null : ie.map((e) => /* @__PURE__ */ h("button", {
+		type: "button",
+		tabIndex: -1,
+		className: T("uic-board__direction", `uic-board__direction--${e}`),
+		"aria-label": O(ae[e]),
+		"data-direction": e,
+		onPointerDown: (e) => e.preventDefault(),
+		onClick: () => {
+			let t = I.current;
+			t && Fe(t, e);
+		},
+		children: /* @__PURE__ */ h(re, { direction: e })
+	}, e));
+	return /* @__PURE__ */ g("div", {
+		ref: k,
+		className: T("uic-board", P && "uic-board--active", xe),
+		...Se,
+		children: [B > 0 && S.length > 0 ? /* @__PURE__ */ g("div", {
+			ref: A,
+			className: "uic-board__grid",
+			style: { gridTemplateColumns: `repeat(${B}, minmax(0, 1fr))` },
+			children: [Ge, Ee.items.map((e) => {
+				let t = Ke.get(e.id);
+				if (!t) return null;
+				let n = P?.itemId === e.id, r = n ? P?.pointer : void 0, i = `${e.x + 1} / span ${e.width}`, a = `${e.y + 1} / span ${e.height}`, o, s, c;
+				if (P && n && X) if (P.operation === "resize") r?.size ? (s = r.size.width, c = r.size.height) : (i = `${e.x + 1} / span ${X.width}`, a = `${e.y + 1} / span ${X.height}`);
+				else if (r) o = `translate(${r.dx}px, ${r.dy}px)`;
+				else {
+					let { cellWidth: t, cellHeight: n } = P.metrics;
+					o = `translate(${Q(X.x - e.x, t)}px, ${Q(X.y - e.y, n)}px)`;
+				}
+				else if (P) {
+					let t = We.get(e.id);
+					if (t && (t.x !== e.x || t.y !== e.y)) {
+						let { cellWidth: n, cellHeight: r } = P.metrics;
+						o = `translate(${Q(t.x - e.x, n)}px, ${Q(t.y - e.y, r)}px)`;
+					}
+				}
+				let l = {
+					gridColumn: i,
+					gridRow: a,
+					transform: o,
+					width: s,
+					height: c
+				}, u = typeof D == "function" ? D(t) : D;
+				return /* @__PURE__ */ g("div", {
+					ref: (e) => {
+						e ? j.current.set(t.id, e) : j.current.delete(t.id);
+					},
+					className: T("uic-board-item", ce === "bordered" && "uic-board-item--bordered", n && "uic-board-item--active", P !== null && "uic-board-item--sliding", r && P?.operation === "move" && "uic-board-item--dragging", r && P?.operation === "resize" && "uic-board-item--resizing", u),
+					style: l,
+					"data-board-item-id": t.id,
+					children: [
+						oe ? /* @__PURE__ */ g("span", {
+							className: "uic-board-item__handle uic-board-item__handle--drag",
+							children: [/* @__PURE__ */ h(_, {
+								className: "uic-board-item__drag-handle",
+								variant: "ghost",
+								size: "sm",
+								label: pe ?? O("uic.Board.dragHandle"),
+								icon: de ?? /* @__PURE__ */ h(C, {}),
+								onPointerDown: Ie("move", t.id),
+								onPointerMove: Y,
+								onPointerUp: ze,
+								onPointerCancel: Be,
+								onKeyDown: Ve("move", t.id),
+								onBlur: He
+							}), $("move", t.id)]
+						}) : null,
+						/* @__PURE__ */ h("div", {
+							className: "uic-board-item__content",
+							children: w(t, { removeItem: () => Pe(t) })
+						}),
+						se ? /* @__PURE__ */ g("span", {
+							className: "uic-board-item__handle uic-board-item__handle--resize",
+							children: [/* @__PURE__ */ h(_, {
+								className: "uic-board-item__resize-handle",
+								variant: "ghost",
+								size: "sm",
+								label: me ?? O("uic.Board.resizeHandle"),
+								icon: fe ?? /* @__PURE__ */ h(ne, {}),
+								onPointerDown: Ie("resize", t.id),
+								onPointerMove: Y,
+								onPointerUp: ze,
+								onPointerCancel: Be,
+								onKeyDown: Ve("resize", t.id),
+								onBlur: He
+							}), $("resize", t.id)]
+						}) : null
+					]
+				}, t.id);
+			})]
+		}) : S.length === 0 ? le : null, /* @__PURE__ */ h(v, {
+			as: "div",
+			"aria-live": "polite",
+			"aria-atomic": "true",
+			children: we
+		})]
+	});
+}
+E.displayName = "Board";
+//#endregion
+export { E as Board, y as DEFAULT_BOARD_COLUMN_BREAKPOINTS, x as columnsForWidth, te as hoveredCells };
+
+//# sourceMappingURL=Board2.js.map
+import "../../assets/components/Board/Board.css";