courthive-components 3.2.0 → 3.3.0

package/dist/{range-CBX41Ttl.mjs → range-CRxwaxeo.mjs}

@@ -1,50 +1,84 @@
-//#region node_modules/.pnpm/timepicker-ui@4.3.0/node_modules/timepicker-ui/dist/plugins/range.js
-function e(e) {
-	if (!e || e === "--:--") return null;
-	let t = e.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
-	if (t) return {
-		hour: t[1],
-		minutes: t[2],
-		type: t[3].toUpperCase()
-	};
-	let n = e.match(/^(\d{1,2}):(\d{2})$/);
+//#region node_modules/.pnpm/timepicker-ui@4.4.0/node_modules/timepicker-ui/dist/plugins/range.js
+var e = /^(1[0-2]|[1-9]):([0-5][0-9])\s*(AM|PM)$/i, t = /^([0-1]?[0-9]|2[0-3]):([0-5][0-9])$/;
+function n(t) {
+	let n = t.match(e);
+	return n ? {
+		hour: n[1],
+		minutes: n[2],
+		type: n[3].toUpperCase()
+	} : null;
+}
+function r(e) {
+	let n = e.match(t);
 	return n ? {
 		hour: n[1],
 		minutes: n[2]
 	} : null;
 }
-function t(e) {
+function i(e, t) {
+	let n = parseInt(e.hour, 10), r = parseInt(e.minutes, 10);
+	if (Number.isNaN(n) || Number.isNaN(r)) return 0;
+	if (t === "12h" && e.type) {
+		let t = e.type.toUpperCase();
+		t === "PM" && n !== 12 && (n += 12), t === "AM" && n === 12 && (n = 0);
+	}
+	return n * 60 + r;
+}
+function a(e) {
+	if (!e || e === "--:--") return null;
+	let t = n(e);
+	if (t) return {
+		hour: t.hour,
+		minutes: t.minutes,
+		type: t.type
+	};
+	let i = e.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
+	if (i) return {
+		hour: i[1],
+		minutes: i[2],
+		type: i[3].toUpperCase()
+	};
+	let a = r(e);
+	if (a) return {
+		hour: a.hour,
+		minutes: a.minutes
+	};
+	let o = e.match(/^(\d{1,2}):(\d{2})$/);
+	return o ? {
+		hour: o[1],
+		minutes: o[2]
+	} : null;
+}
+function o(e) {
 	let t = e.minutes === "--" ? "--" : e.minutes.padStart(2, "0"), n = `${e.hour}:${t}`;
 	return e.type ? `${n} ${e.type}` : n;
 }
-function n(e, t) {
-	if (!e) return 0;
-	let n = parseInt(e.hour, 10), r = parseInt(e.minutes, 10);
-	return t === "12h" && e.type && (e.type === "PM" && n !== 12 && (n += 12), e.type === "AM" && n === 12 && (n = 0)), n * 60 + r;
+function s(e, t) {
+	return e ? i(e, t) : 0;
 }
-function r(e, t, r) {
+function c(e, t, n) {
 	if (!e || !t) return 0;
-	let i = n(e, r);
-	return n(t, r) - i;
+	let r = s(e, n);
+	return s(t, n) - r;
 }
-function i(e, t) {
+function l(e, t) {
 	return e ? t === "12h" ? !!(e.hour && e.minutes && e.type) : !!(e.hour && e.minutes) : !1;
 }
-function a(t) {
-	if (!t || !t.includes(" - ")) return {
+function u(e) {
+	if (!e || !e.includes(" - ")) return {
 		from: null,
 		to: null
 	};
-	let n = t.split(" - ").map((e) => e.trim());
-	return n.length !== 2 || n[0] === "--:--" || n[1] === "--:--" ? {
+	let t = e.split(" - ").map((e) => e.trim());
+	return t.length !== 2 || t[0] === "--:--" || t[1] === "--:--" ? {
 		from: null,
 		to: null
 	} : {
-		from: e(n[0]),
-		to: e(n[1])
+		from: a(t[0]),
+		to: a(t[1])
 	};
 }
-var o = class {
+var d = class {
 	activePart = "from";
 	fromValue = null;
 	toValue = null;
@@ -78,10 +112,10 @@ var o = class {
 		this.previewValue = e;
 	}
 	isFromComplete() {
-		return i(this.fromValue, this.clockType);
+		return l(this.fromValue, this.clockType);
 	}
 	isToComplete() {
-		return i(this.toValue, this.clockType);
+		return l(this.toValue, this.clockType);
 	}
 	canSwitchToEnd() {
 		return this.isFromComplete();
@@ -107,7 +141,7 @@ var o = class {
 		this.previewValue &&= (this.activePart === "from" ? this.fromValue = this.previewValue : this.toValue = this.previewValue, null);
 	}
 	getDuration() {
-		return r(this.fromValue, this.toValue, this.clockType);
+		return c(this.fromValue, this.toValue, this.clockType);
 	}
 	validate() {
 		if (!this.fromValue || !this.toValue) return {
@@ -148,7 +182,7 @@ var o = class {
 	reset() {
 		this.activePart = "from", this.fromValue = null, this.toValue = null, this.previewValue = null;
 	}
-}, s = class {
+}, f = class {
 	core;
 	state;
 	constructor(e, t) {
@@ -163,10 +197,10 @@ var o = class {
 	updateTimeDisplay() {
 		let e = this.core.getModalElement();
 		if (!e) return;
-		let n = e.querySelector(".tp-ui-range-from-time"), r = e.querySelector(".tp-ui-range-to-time"), i = this.state.getActivePart(), a = this.state.getPreviewValue(), o = this.state.getFromValue(), s = this.state.getToValue(), c = "--:--";
-		i === "from" && a ? c = t(a) : o && (c = t(o));
+		let t = e.querySelector(".tp-ui-range-from-time"), n = e.querySelector(".tp-ui-range-to-time"), r = this.state.getActivePart(), i = this.state.getPreviewValue(), a = this.state.getFromValue(), s = this.state.getToValue(), c = "--:--";
+		r === "from" && i ? c = o(i) : a && (c = o(a));
 		let l = "--:--";
-		i === "to" && a ? l = t(a) : s && (l = t(s)), n && (n.textContent = c), r && (r.textContent = l);
+		r === "to" && i ? l = o(i) : s && (l = o(s)), t && (t.textContent = c), n && (n.textContent = l);
 	}
 	updateOkButton() {
 		let e = this.core.getOkButton();
@@ -177,8 +211,8 @@ var o = class {
 	updateInputValue() {
 		let e = this.core.getInput();
 		if (!e) return;
-		let n = this.state.getFromValue(), r = this.state.getToValue();
-		e.value = `${n ? t(n) : "--:--"} - ${r ? t(r) : "--:--"}`;
+		let t = this.state.getFromValue(), n = this.state.getToValue();
+		e.value = `${t ? o(t) : "--:--"} - ${n ? o(n) : "--:--"}`;
 	}
 	syncClockToActivePart() {
 		let e = this.state.getSavedValue(), t = this.core.getHour(), n = this.core.getMinutes();
@@ -191,29 +225,28 @@ var o = class {
 	updateAll() {
 		this.updateTabs(), this.updateTimeDisplay(), this.updateOkButton();
 	}
-}, c = class {
+};
+function p(e, t, n, r) {
+	e.on(n, r), t.push(() => e.off(n, r));
+}
+var m = class {
 	core;
 	emitter;
 	state;
 	ui;
 	cleanupHandlers = [];
 	isSyncingAmPm = !1;
-	boundHandleMinuteCommit;
-	boundHandleConfirm;
-	boundHandleUpdate;
-	boundHandleAmPm;
-	boundHandleClear;
 	constructor(e, t) {
 		this.core = e, this.emitter = t;
 		let { range: n, clock: r } = e.options;
-		this.state = new o(r.type, n?.minDuration, n?.maxDuration, t), this.ui = new s(e, this.state), this.boundHandleMinuteCommit = this.handleMinuteCommit.bind(this), this.boundHandleConfirm = this.handleConfirm.bind(this), this.boundHandleUpdate = this.handleUpdate.bind(this), this.boundHandleAmPm = this.handleAmPm.bind(this), this.boundHandleClear = this.handleClear.bind(this);
+		this.state = new d(r.type, n?.minDuration, n?.maxDuration, t), this.ui = new f(e, this.state);
 	}
 	get isEnabled() {
 		return this.core.options.range?.enabled === !0;
 	}
 	init() {
 		if (!this.isEnabled) return;
-		let { from: e, to: t } = a(this.core.getInput()?.value || "");
+		let { from: e, to: t } = u(this.core.getInput()?.value || "");
 		this.state.setFromValue(e), this.state.setToValue(t), this.state.setActivePart("from"), this.state.setPreviewValue(null), this.bindEvents(), this.ui.syncClockToActivePart(), this.emitAmPmSyncEvent(), this.ui.updateAll();
 	}
 	getActivePart() {
@@ -247,10 +280,10 @@ var o = class {
 		return this.isEnabled ? this.state.canConfirm() : !0;
 	}
 	getFormattedRange() {
-		let e = this.state.getFromValue(), n = this.state.getToValue();
-		return !e || !n ? null : {
-			from: t(e),
-			to: t(n)
+		let e = this.state.getFromValue(), t = this.state.getToValue();
+		return !e || !t ? null : {
+			from: o(e),
+			to: o(t)
 		};
 	}
 	bindEvents() {
@@ -258,14 +291,48 @@ var o = class {
 		if (!e) return;
 		let t = e.querySelector(".tp-ui-range-tab.tp-ui-range-from"), n = e.querySelector(".tp-ui-range-tab.tp-ui-range-to");
 		if (t) {
-			let e = () => this.setActivePart("from");
+			let e = () => this.activatePart("from", t);
 			t.addEventListener("click", e), this.cleanupHandlers.push(() => t.removeEventListener("click", e));
 		}
 		if (n) {
-			let e = () => this.setActivePart("to");
+			let e = () => this.activatePart("to", n);
 			n.addEventListener("click", e), this.cleanupHandlers.push(() => n.removeEventListener("click", e));
 		}
-		this.emitter.on("update", this.boundHandleUpdate), this.cleanupHandlers.push(() => this.emitter.off("update", this.boundHandleUpdate)), this.emitter.on("range:minute:commit", this.boundHandleMinuteCommit), this.cleanupHandlers.push(() => this.emitter.off("range:minute:commit", this.boundHandleMinuteCommit)), this.emitter.on("confirm", this.boundHandleConfirm), this.cleanupHandlers.push(() => this.emitter.off("confirm", this.boundHandleConfirm)), this.emitter.on("select:am", this.boundHandleAmPm), this.cleanupHandlers.push(() => this.emitter.off("select:am", this.boundHandleAmPm)), this.emitter.on("select:pm", this.boundHandleAmPm), this.cleanupHandlers.push(() => this.emitter.off("select:pm", this.boundHandleAmPm)), this.emitter.on("clear", this.boundHandleClear), this.cleanupHandlers.push(() => this.emitter.off("clear", this.boundHandleClear));
+		this.bindTabKeyboard(t, n), p(this.emitter, this.cleanupHandlers, "update", () => this.handleUpdate()), p(this.emitter, this.cleanupHandlers, "range:minute:commit", (e) => this.handleMinuteCommit(e)), p(this.emitter, this.cleanupHandlers, "confirm", () => this.handleConfirm()), p(this.emitter, this.cleanupHandlers, "select:am", () => this.handleAmPm()), p(this.emitter, this.cleanupHandlers, "select:pm", () => this.handleAmPm()), p(this.emitter, this.cleanupHandlers, "clear", () => this.handleClear());
+	}
+	isTabDisabled(e) {
+		return !e || e.getAttribute("aria-disabled") === "true" || e.classList.contains("disabled");
+	}
+	activatePart(e, t) {
+		this.isTabDisabled(t) || this.setActivePart(e);
+	}
+	bindTabKeyboard(e, t) {
+		let n = [e, t].filter((e) => e !== null);
+		n.length !== 0 && n.forEach((e, t) => {
+			let r = t === 0 ? "from" : "to", i = (i) => {
+				switch (i.key) {
+					case "ArrowRight":
+					case "ArrowLeft": {
+						i.preventDefault();
+						let e = n[((i.key === "ArrowRight" ? t + 1 : t - 1) + n.length) % n.length];
+						this.isTabDisabled(e) || e.focus();
+						break;
+					}
+					case "Home":
+						i.preventDefault(), n[0].focus();
+						break;
+					case "End":
+						i.preventDefault(), n[n.length - 1].focus();
+						break;
+					case "Enter":
+					case " ":
+					case "Spacebar":
+						i.preventDefault(), this.activatePart(r, e);
+						break;
+				}
+			};
+			e.addEventListener("keydown", i), this.cleanupHandlers.push(() => e.removeEventListener("keydown", i));
+		});
 	}
 	handleClear() {
 		this.isEnabled && (this.state.setFromValue(null), this.state.setToValue(null), this.state.setPreviewValue(null), this.state.resetActivePart());
@@ -329,14 +396,14 @@ var o = class {
 			}
 		}
 	}
-	handleConfirm(e) {
+	handleConfirm() {
 		if (!this.isEnabled) return;
 		this.state.commitPreview();
-		let n = this.state.getFromValue(), r = this.state.getToValue(), i = n ? t(n) : "--:--", a = r ? t(r) : "--:--", o = this.state.getDuration();
+		let e = this.state.getFromValue(), t = this.state.getToValue(), n = e ? o(e) : "--:--", r = t ? o(t) : "--:--", i = this.state.getDuration();
 		this.ui.updateInputValue(), this.emitter.emit("range:confirm", {
-			from: i,
-			to: a,
-			duration: o
+			from: n,
+			to: r,
+			duration: i
 		});
 	}
 	reset() {
@@ -345,9 +412,9 @@ var o = class {
 	destroy() {
 		this.cleanupHandlers.forEach((e) => e()), this.cleanupHandlers = [], this.reset();
 	}
-}, l = {
+}, h = {
 	name: "range",
-	factory: (e, t) => new c(e, t),
+	factory: (e, t) => new m(e, t),
 	clearHandler: (e, t) => {
 		if (!e.options.range?.enabled) return;
 		let n = e.getModalElement();
@@ -362,4 +429,4 @@ var o = class {
 	}
 };
 //#endregion
-export { l as RangePlugin };
+export { h as RangePlugin };

package/dist/types.d.ts

@@ -237,9 +237,21 @@ export interface CompositionColors {
     internalDividers?: string;
     /** placeholder "[Score]" text color — sets `--chc-color-score`. Falls back to `--chc-status-info`. */
     score?: string;
-    /** round header text + underline color — sets `--chc-color-round-header`.
-     * Underline falls back to `--chc-text-primary`; text falls back to inherit. */
+    /** round header text color — sets `--chc-color-round-header`. Falls back to inherit.
+     * Also acts as the underline-color fallback when `roundHeaderUnderline` is unset. */
     roundHeader?: string;
+    /** round header background color — sets `--chc-color-round-header-bg`. Falls back to transparent. */
+    roundHeaderBackground?: string;
+    /** round header underline (divider between header and participants) — sets
+     * `--chc-color-round-header-underline`. Falls back to `roundHeader`, then `--chc-text-primary`. */
+    roundHeaderUnderline?: string;
+    /** matchUp footer background color — sets `--chc-color-matchup-footer-bg`. Falls back to `matchUpBackground`. */
+    matchUpFooterBackground?: string;
+    /** matchUp footer text color — sets `--chc-color-matchup-footer-text`. Falls back to `--chc-text-muted`. */
+    matchUpFooterText?: string;
+    /** matchUp footer top divider (border between matchUp body and footer) — sets
+     * `--chc-color-matchup-footer-divider`. Falls back to transparent. */
+    matchUpFooterDivider?: string;
 }
 export interface Composition {
     theme: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "courthive-components",
-  "packageManager": "pnpm@11.5.2",
-  "version": "3.2.0",
+  "packageManager": "pnpm@11.6.0",
+  "version": "3.3.0",
   "engines": {
     "node": ">=22"
   },
@@ -78,8 +78,8 @@
     "@storybook/test-runner": "^0.24.0",
     "@types/d3": "^7.4.3",
     "@types/vanillajs-datepicker": "^1.3.5",
-    "@typescript-eslint/eslint-plugin": "8.60.0",
-    "@typescript-eslint/parser": "8.60.0",
+    "@typescript-eslint/eslint-plugin": "8.60.1",
+    "@typescript-eslint/parser": "8.60.1",
     "@vitest/browser-playwright": "^4.0.16",
     "@vitest/coverage-v8": "^4.0.16",
     "@vitest/ui": "^4.0.16",
@@ -93,7 +93,7 @@
     "lint-staged": "17.0.7",
     "playwright": "^1.57.0",
     "prettier": "^3.8.1",
-    "semver": "7.8.1",
+    "semver": "7.8.3",
     "storybook": "^10.2.17",
     "tabulator-tables": "6.4.0",
     "typescript": "^6.0.2",
@@ -117,7 +117,7 @@
     "focus-trap": "^8.0.0",
     "timepicker-ui": "^4.1.2",
     "tippy.js": "6.3.7",
-    "tods-competition-factory": "5.4.0",
+    "tods-competition-factory": "5.5.0",
     "vanillajs-datepicker": "1.3.4"
   }
 }