@moni-labs/moni-ui 0.4.3 → 0.4.4

package/dist/browser/moni-ui.min.js

@@ -2495,6 +2495,7 @@ var Ze, Qe = class extends W {
 			.button {
 				box-sizing: var(--moni-button-box-sizing, border-box);
 				display: inline-flex;
+				inline-size: var(--moni-button-inline-size, auto);
 				--_button-visual-height: 3.5rem;
 				align-items: center;
 				justify-content: center;
@@ -10832,17 +10833,19 @@ var Ft = class extends W {
 			}
 
 			:host([orientation="horizontal"]) {
-				inline-size: auto;
+				inline-size: min(40rem, 100%);
 			}
 			:host([orientation="horizontal"]) .main-content {
 				flex-direction: row;
 				align-items: center;
+				justify-content: center;
 				gap: 2rem;
 			}
 			:host([orientation="horizontal"]) .left-pane {
 				display: flex;
 				flex-direction: column;
 				justify-content: center;
+				flex: none;
 			}
 
 			/* Main Content (Default vertical) */
@@ -10872,6 +10875,7 @@ var Ft = class extends W {
 				:host(:not([orientation])) .main-content {
 					flex-direction: row;
 					align-items: center;
+					justify-content: center;
 					gap: 2rem;
 				}
 				:host([orientation='auto']) .left-pane,
@@ -10879,6 +10883,7 @@ var Ft = class extends W {
 					display: flex;
 					flex-direction: column;
 					justify-content: center;
+					flex: none;
 				}
 			}
 
@@ -11973,7 +11978,17 @@ K([V({ reflect: !0 })], Lt.prototype, "text", void 0), K([V({ reflect: !0 })], L
 //#region src/components/moni-button-group.ts
 var Rt = class extends W {
 	constructor(...e) {
-		super(...e), this.variant = "standard", this.size = "small", this.multi = !1, this.gap = "", this.role = "group", this.label = "", this.labelledBy = "";
+		super(...e), this._activeObserver = new MutationObserver(() => this.updateSelectionNeighbors()), this.variant = "standard", this.size = "small", this.multi = !1, this.selectionRequired = !1, this.shape = "round", this.resizing = "fixed", this.gap = "", this.role = "group", this.label = "", this.labelledBy = "";
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._activeObserver.observe(this, {
+			subtree: !0,
+			attributes: !0,
+			attributeFilter: ["active"]
+		});
+	}
+	disconnectedCallback() {
+		this._activeObserver.disconnect(), super.disconnectedCallback();
 	}
 	static {
 		this.styles = [G, h`
@@ -11981,12 +11996,18 @@ var Rt = class extends W {
 				display: inline-flex;
 				align-items: center;
 				vertical-align: middle;
+				max-inline-size: 100%;
+			}
+			:host([variant='connected']),
+			:host([resizing='flexible']) {
+				inline-size: 100%;
 			}
 
 			.group-container {
 				display: inline-flex;
 				align-items: center;
 				width: 100%;
+				flex-wrap: nowrap;
 			}
 
 			slot {
@@ -12016,71 +12037,130 @@ var Rt = class extends W {
 			:host([variant='connected']) .group-container {
 				gap: 0.125rem; /* 2dp */
 			}
+			:host([variant='connected']) ::slotted(moni-button),
+			:host([variant='connected']) ::slotted(moni-icon-button),
+			:host([resizing='flexible']) ::slotted(moni-button) {
+				flex: 1 1 0;
+			}
+			:host([variant='connected']) ::slotted(moni-button) {
+				--moni-button-inline-size: 100%;
+				min-inline-size: 0;
+			}
+			:host([variant='connected'][size='xsmall']) ::slotted(moni-button),
+			:host([variant='connected'][size='xsmall']) ::slotted(moni-icon-button),
+			:host([variant='connected'][size='small']) ::slotted(moni-button),
+			:host([variant='connected'][size='small']) ::slotted(moni-icon-button) {
+				min-inline-size: 3rem;
+			}
+
+			/* M3 Expressive selection emphasis. Increasing the button's internal
+			 * space (instead of scaling the host) keeps labels and icons crisp and
+			 * lets the existing padding transition transfer width smoothly. */
+			:host([variant='standard'][size='xsmall']) ::slotted(moni-button[active]),
+			:host([variant='standard'][size='xsmall']) ::slotted(moni-button[data-group-pressed]) {
+				--moni-button-padding: 0 1.25rem;
+			}
+			:host([variant='standard'][size='small']) ::slotted(moni-button[active]),
+			:host([variant='standard'][size='small']) ::slotted(moni-button[data-group-pressed]) {
+				--moni-button-padding: 0 1.75rem;
+			}
+			:host([variant='standard'][size='medium']) ::slotted(moni-button[active]),
+			:host([variant='standard'][size='medium']) ::slotted(moni-button[data-group-pressed]) {
+				--moni-button-padding: 0 2.375rem;
+			}
+			:host([variant='standard'][size='large']) ::slotted(moni-button[active]),
+			:host([variant='standard'][size='large']) ::slotted(moni-button[data-group-pressed]) {
+				--moni-button-padding: 0 4rem;
+			}
+			:host([variant='standard'][size='xlarge']) ::slotted(moni-button[active]),
+			:host([variant='standard'][size='extra']) ::slotted(moni-button[active]),
+			:host([variant='standard'][size='xlarge']) ::slotted(moni-button[data-group-pressed]),
+			:host([variant='standard'][size='extra']) ::slotted(moni-button[data-group-pressed]) {
+				--moni-button-padding: 0 5.25rem;
+			}
+
+			:host([variant='standard'][size='xsmall']) ::slotted(moni-button[data-group-adjacent-pressed]) { --moni-button-padding: 0 .5rem; }
+			:host([variant='standard'][size='small']) ::slotted(moni-button[data-group-adjacent-pressed]) { --moni-button-padding: 0 .75rem; }
+			:host([variant='standard'][size='medium']) ::slotted(moni-button[data-group-adjacent-pressed]) { --moni-button-padding: 0 1.25rem; }
+			:host([variant='standard'][size='large']) ::slotted(moni-button[data-group-adjacent-pressed]) { --moni-button-padding: 0 2.75rem; }
+			:host([variant='standard'][size='xlarge']) ::slotted(moni-button[data-group-adjacent-pressed]),
+			:host([variant='standard'][size='extra']) ::slotted(moni-button[data-group-adjacent-pressed]) { --moni-button-padding: 0 3.75rem; }
+
+			/* A selected standard button borrows space from its immediate
+			 * neighbours, keeping the group's outside footprint stable. */
+			:host([variant='standard'][size='xsmall']) ::slotted(moni-button[data-group-adjacent-selected='shared']) { --moni-button-padding: 0 .5rem; }
+			:host([variant='standard'][size='xsmall']) ::slotted(moni-button[data-group-adjacent-selected='sole']) { --moni-button-padding: 0 .25rem; }
+			:host([variant='standard'][size='small']) ::slotted(moni-button[data-group-adjacent-selected='shared']) { --moni-button-padding: 0 .625rem; }
+			:host([variant='standard'][size='small']) ::slotted(moni-button[data-group-adjacent-selected='sole']) { --moni-button-padding: 0 .25rem; }
+			:host([variant='standard'][size='medium']) ::slotted(moni-button[data-group-adjacent-selected='shared']) { --moni-button-padding: 0 1.0625rem; }
+			:host([variant='standard'][size='medium']) ::slotted(moni-button[data-group-adjacent-selected='sole']) { --moni-button-padding: 0 .625rem; }
+			:host([variant='standard'][size='large']) ::slotted(moni-button[data-group-adjacent-selected='shared']) { --moni-button-padding: 0 2.5rem; }
+			:host([variant='standard'][size='large']) ::slotted(moni-button[data-group-adjacent-selected='sole']) { --moni-button-padding: 0 2rem; }
+			:host([variant='standard'][size='xlarge']) ::slotted(moni-button[data-group-adjacent-selected='shared']),
+			:host([variant='standard'][size='extra']) ::slotted(moni-button[data-group-adjacent-selected='shared']) { --moni-button-padding: 0 3.375rem; }
+			:host([variant='standard'][size='xlarge']) ::slotted(moni-button[data-group-adjacent-selected='sole']),
+			:host([variant='standard'][size='extra']) ::slotted(moni-button[data-group-adjacent-selected='sole']) { --moni-button-padding: 0 2.75rem; }
 		`];
 	}
 	updated(e) {
-		super.updated(e), (e.has("variant") || e.has("size") || e.has("gap")) && this.updateChildren();
+		super.updated(e), (e.has("variant") || e.has("size") || e.has("gap") || e.has("shape")) && this.updateChildren();
 	}
 	handleSlotChange() {
 		this.updateChildren();
 	}
+	getButtons() {
+		return (this.slottedButtons ?? []).filter((e) => e.tagName.toLowerCase() === "moni-button" || e.tagName.toLowerCase() === "moni-icon-button");
+	}
+	updateSelectionNeighbors() {
+		let e = this.getButtons();
+		if (e.forEach((e) => e.removeAttribute("data-group-adjacent-selected")), this.variant !== "standard" || e.filter((e) => e.hasAttribute("active")).length === 0) return;
+		let t = e.filter((e) => !e.hasAttribute("active")), n = t.length === 1 ? "sole" : "shared";
+		t.forEach((e) => e.setAttribute("data-group-adjacent-selected", n));
+	}
 	getGapValue(e) {
 		if (!e) return "";
 		let t = e.toLowerCase();
 		return t === "xs" || t === "xsmall" ? "1.125rem" : t === "s" || t === "small" ? "0.75rem" : t === "m" || t === "medium" || t === "l" || t === "large" || t === "xl" || t === "xlarge" ? "0.5rem" : e;
 	}
 	updateChildren() {
-		let e = this.slottedButtons.filter((e) => e.tagName.toLowerCase() === "moni-button" || e.tagName.toLowerCase() === "moni-icon-button"), t = this.gap.trim().toLowerCase(), n = ![
+		let e = this.getButtons(), t = this.gap.trim().toLowerCase(), n = ![
 			"0",
 			"0px",
 			"0rem",
 			"0em"
 		].includes(t);
 		e.forEach((t, r) => {
-			if (t.setAttribute("size", this.size), this.variant === "connected") n ? e.length === 1 ? t.setAttribute("shape", "round") : r === 0 ? t.setAttribute("shape", "left-round") : r === e.length - 1 ? t.setAttribute("shape", "right-round") : t.setAttribute("shape", "inner-round") : e.length === 1 ? t.setAttribute("shape", "round") : r === 0 ? t.setAttribute("shape", "left-round-flat") : r === e.length - 1 ? t.setAttribute("shape", "right-round-flat") : t.setAttribute("shape", "no-round");
-			else {
-				let e = t.getAttribute("shape");
-				(!e || [
-					"left-round-flat",
-					"right-round-flat",
-					"no-round",
-					"left-round",
-					"right-round",
-					"inner-round"
-				].includes(e)) && t.setAttribute("shape", "round");
-			}
-		});
+			t.setAttribute("size", this.size), this.variant === "connected" && this.shape === "square" ? t.setAttribute("shape", "square") : this.variant === "connected" ? n ? e.length === 1 ? t.setAttribute("shape", "round") : r === 0 ? t.setAttribute("shape", "left-round") : r === e.length - 1 ? t.setAttribute("shape", "right-round") : t.setAttribute("shape", "inner-round") : e.length === 1 ? t.setAttribute("shape", "round") : r === 0 ? t.setAttribute("shape", "left-round-flat") : r === e.length - 1 ? t.setAttribute("shape", "right-round-flat") : t.setAttribute("shape", "no-round") : t.setAttribute("shape", this.shape);
+		}), this.updateSelectionNeighbors();
 	}
 	handlePointerDown(e) {
 		if (this.variant !== "standard") return;
 		let t = e.target.closest("moni-button, moni-icon-button");
 		if (!t || t.hasAttribute("disabled")) return;
-		let n = this.slottedButtons.filter((e) => e.tagName.toLowerCase() === "moni-button" || e.tagName.toLowerCase() === "moni-icon-button"), r = n.indexOf(t);
-		if (r === -1) return;
-		let i = n[r - 1], a = n[r + 1];
-		i && (i.style.transition = "transform 200ms cubic-bezier(0.2, 0, 0, 1)", i.style.transform = "translateX(-6px) scaleX(0.92)", i.style.transformOrigin = "right center"), a && (a.style.transition = "transform 200ms cubic-bezier(0.2, 0, 0, 1)", a.style.transform = "translateX(6px) scaleX(0.92)", a.style.transformOrigin = "left center");
+		let n = this.getButtons(), r = n.indexOf(t);
+		r !== -1 && (t.setAttribute("data-group-pressed", ""), n[r - 1]?.setAttribute("data-group-adjacent-pressed", ""), n[r + 1]?.setAttribute("data-group-adjacent-pressed", ""));
 	}
 	handlePointerUp() {
-		this.slottedButtons.filter((e) => e.tagName.toLowerCase() === "moni-button" || e.tagName.toLowerCase() === "moni-icon-button").forEach((e) => {
-			e.style.transform = "", e.style.transformOrigin = "";
+		this.getButtons().forEach((e) => {
+			e.removeAttribute("data-group-pressed"), e.removeAttribute("data-group-adjacent-pressed");
 		});
 	}
 	handleClick(e) {
 		let t = e.target.closest("moni-button, moni-icon-button");
 		if (!t || t.hasAttribute("disabled")) return;
-		let n = this.slottedButtons.filter((e) => e.tagName.toLowerCase() === "moni-button" || e.tagName.toLowerCase() === "moni-icon-button");
+		let n = this.getButtons();
 		this.multi || n.forEach((e) => {
 			e !== t && (e.removeAttribute("active"), e.active = !1);
 		});
-		let r = t.hasAttribute("active");
-		r ? (t.removeAttribute("active"), t.active = !1) : (t.setAttribute("active", ""), t.active = !0), this.dispatchEvent(new CustomEvent("change", {
+		let r = t.hasAttribute("active"), i = n.filter((e) => e.hasAttribute("active")).length;
+		r && this.selectionRequired && i <= 1 || (r ? (t.removeAttribute("active"), t.active = !1) : (t.setAttribute("active", ""), t.active = !0), this.dispatchEvent(new CustomEvent("change", {
 			bubbles: !0,
 			composed: !0,
 			detail: {
 				button: t,
 				active: !r
 			}
-		}));
+		})));
 	}
 	render() {
 		let e = this.getGapValue(this.gap), t = this.gap.trim().toLowerCase(), n = [
@@ -12110,7 +12190,11 @@ var Rt = class extends W {
 K([V({ reflect: !0 })], Rt.prototype, "variant", void 0), K([V({ reflect: !0 })], Rt.prototype, "size", void 0), K([V({
 	type: Boolean,
 	reflect: !0
-})], Rt.prototype, "multi", void 0), K([V()], Rt.prototype, "gap", void 0), K([V({ reflect: !0 })], Rt.prototype, "role", void 0), K([V({ reflect: !0 })], Rt.prototype, "label", void 0), K([V({
+})], Rt.prototype, "multi", void 0), K([V({
+	type: Boolean,
+	reflect: !0,
+	attribute: "selection-required"
+})], Rt.prototype, "selectionRequired", void 0), K([V({ reflect: !0 })], Rt.prototype, "shape", void 0), K([V({ reflect: !0 })], Rt.prototype, "resizing", void 0), K([V()], Rt.prototype, "gap", void 0), K([V({ reflect: !0 })], Rt.prototype, "role", void 0), K([V({ reflect: !0 })], Rt.prototype, "label", void 0), K([V({
 	reflect: !0,
 	attribute: "labelled-by"
 })], Rt.prototype, "labelledBy", void 0), K([Ue({ flatten: !0 })], Rt.prototype, "slottedButtons", void 0), Rt = K([B("moni-button-group")], Rt);
@@ -12709,7 +12793,11 @@ var Ut = {
 			:host {
 				display: inline-block;
 				aspect-ratio: 1 / 1;
-				contain: strict;
+				/* Paint containment clipped oversized morphs in the contained
+				 * variant. Keep layout/style isolation while allowing the active
+				 * indicator to animate beyond the container surface. */
+				contain: layout style;
+				overflow: visible;
 				vertical-align: middle;
 			}
 
@@ -12741,6 +12829,19 @@ var Ut = {
 				justify-content: center;
 				border-radius: var(--moni-loading-indicator-container-shape, 9999px);
 				box-sizing: border-box;
+				overflow: visible;
+			}
+
+			.active-indicator-wrapper {
+				overflow: visible;
+			}
+
+			.active-indicator-scale {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				overflow: visible;
+				transform-origin: center;
 			}
 
 			.active-indicator {
@@ -12838,7 +12939,9 @@ var Ut = {
 		return R`
 			<div class="container animate" aria-hidden="true">
 				<div class="active-indicator-wrapper">
-					<div class="active-indicator"></div>
+					<div class="active-indicator-scale">
+						<div class="active-indicator"></div>
+					</div>
 				</div>
 			</div>
 		`;