@moni-labs/moni-ui 0.4.8 → 0.4.10

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

@@ -1013,6 +1013,13 @@ var H = class extends Le {
 	.field[class*='round'].extra {
 		border-radius: 2rem;
 	}
+	/* Compact rounding for dense forms without falling back to square corners. */
+	.field.small-round,
+	.field.small-round.small,
+	.field.small-round.large,
+	.field.small-round.extra {
+		border-radius: 0.5rem;
+	}
 
 	/* ─── Icon positioning ───────────────────────────────────────────────────── */
 	/* Generic rule: absolutely positions any icon/image/svg inside the field. */
@@ -1273,6 +1280,11 @@ var H = class extends Le {
 	.field.label[class*='round'] > label {
 		inset: -0.5rem 1.9375rem 0 var(--_start);
 	}
+	/* Compact rounding keeps the label closer to the edge than pill fields. */
+	.field.label.small-round > label {
+		--_start: 1rem;
+		inset: -0.5rem 0.9375rem 0 var(--_start);
+	}
 
 	/* ─── Label lift selector group ──────────────────────────────────────────── */
 	/* The label lifts (scales down + moves up) in four conditions:
@@ -1396,6 +1408,16 @@ var H = class extends Le {
 		clip-path: polygon(-2% -2%,1.25rem -2%,1.25rem .5rem,calc(100% - 2rem) .5rem,calc(100% - 2rem) -2%,102% -2%,102% 102%,-2% 102%);
 	}
 
+	/* The compact shape needs a narrower leading segment so it never crosses
+	   the first glyph of the floating label. */
+	.field.label.border.small-round:not(.fill)
+		> :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active),
+	.field.label.border.small-round:not(.fill) > select,
+	.field.label.border.small-round:not(.fill) > input.active,
+	.field.label.border.small-round:not(.fill) > select.active {
+		clip-path: polygon(-2% -2%,.75rem -2%,.75rem .5rem,calc(100% - 1rem) .5rem,calc(100% - 1rem) -2%,102% -2%,102% 102%,-2% 102%);
+	}
+
 	/* ─── Label color changes ─────────────────────────────────────────────────── */
 	/* On focus: label turns primary-colored to draw attention. */
 	.field.label > :focus + label {
@@ -6835,6 +6857,7 @@ var K = class extends H {
 			suffix: !0,
 			invalid: this.error,
 			round: this.shape === "round",
+			"small-round": this.shape === "small-round",
 			square: this.shape === "no-round"
 		}, o = this.icon ? L`<i class="leading-icon" part="leading-icon"
 					><moni-icon name="${this.icon}"></moni-icon
@@ -8069,6 +8092,7 @@ var q = class extends H {
 			suffix: t,
 			invalid: this.error,
 			round: this.shape === "round",
+			"small-round": this.shape === "small-round",
 			square: this.shape === "no-round"
 		}, a = this.placeholder || (this.label ? " " : ""), o = this.icon ? L`<i class="leading-icon" part="leading-icon"
 					><moni-icon name="${this.icon}"></moni-icon
@@ -11311,6 +11335,7 @@ var Rt = /* @__PURE__ */ c((/* @__PURE__ */ o(((e, t) => {
 			"suffix-action-field": !!this.suffixButtonIcon || this._hasSuffixSlot,
 			invalid: this.error,
 			round: this.shape === "round" && this.variant !== "underlined",
+			"small-round": this.shape === "small-round" && this.variant !== "underlined",
 			square: this.shape === "no-round"
 		}, i = this.placeholder || (this.label ? " " : ""), a = this.icon ? L`<i class="leading-icon" part="leading-icon"
 					><moni-icon name="${this.icon}"></moni-icon