@moni-labs/moni-ui 0.4.8 → 0.4.10

package/docs/components/textarea.md

@@ -88,7 +88,7 @@ Las utilities aplicadas directamente al tag afectan su caja anfitriona. No uses
 | `label` | `label` | `string` | `''` | El texto de la etiqueta flotante. |
 | `variant` | `variant` | `'filled' \| 'outlined'` | `'filled'` | Variante visual del área de texto. |
 | `size` | `size` | `'small' \| 'medium' \| 'large' \| 'extra'` | `'medium'` | Define las dimensiones del área de texto. |
-| `shape` | `shape` | `'round' \| 'square' \| 'no-round'` | `'no-round'` | Forma del radio del borde (border-radius) del campo. |
+| `shape` | `shape` | `'round' \| 'small-round' \| 'square' \| 'no-round'` | `'no-round'` | Forma del radio del borde (border-radius) del campo. |
 | `icon` | `icon` | `string` | `''` | Nombre del icono inicial (leading) (Material Symbols). |
 | `trailing-icon` | `trailingIcon` | `string` | `''` | Nombre del icono final (trailing) (Material Symbols). |
 | `prefix` | `prefix` | `string` | `''` | Prefijo de texto corto mostrado antes del valor del input. |
@@ -182,6 +182,8 @@ Forma del radio del borde (border-radius) del campo.
 
 ![moni-textarea — shape=round](../assets/moni-textarea/shape--round.png)
 
+![moni-textarea — shape=small-round](../assets/moni-textarea/shape--small-round.png)
+
 ![moni-textarea — shape=square](../assets/moni-textarea/shape--square.png)
 
 ![moni-textarea — shape=no-round](../assets/moni-textarea/shape--no-round.png)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moni-labs/moni-ui",
-	"version": "0.4.8",
+	"version": "0.4.10",
   "private": false,
   "type": "module",
   "description": "Design system unificado para Moni — Material Design 3 Expressive, mobile-first.",

package/src/components/_base/field-styles.ts

@@ -143,6 +143,13 @@ export const fieldStyles = css`
 	.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. */
@@ -403,6 +410,11 @@ export const fieldStyles = css`
 	.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:
@@ -526,6 +538,16 @@ export const fieldStyles = css`
 		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 {

package/src/components/moni-select.test.ts

@@ -23,6 +23,14 @@ describe('moni-select', () => {
 		expect(input?.getAttribute('readonly')).toBe('');
 	});
 
+	it('aplica la clase small-round para un redondeado compacto', async () => {
+		el.shape = 'small-round';
+		await el.updateComplete;
+		const field = el.shadowRoot?.querySelector('.field');
+		expect(field?.classList.contains('small-round')).toBe(true);
+		expect(field?.classList.contains('square')).toBe(false);
+	});
+
 	it('analiza las opciones insertadas en slots (slotted)', async () => {
 		const opt1 = document.createElement('moni-select-option');
 		opt1.setAttribute('value', 'v1');

package/src/components/moni-select.ts

@@ -146,11 +146,11 @@ export class MoniSelect extends MoniElement {
 
 	/**
 	 * Forma (radio de borde) del campo.
-	 * @type {'round' | 'square' | 'no-round'}
+	 * @type {'round' | 'small-round' | 'square' | 'no-round'}
 	 * @default 'no-round'
 	 */
 	@property({ reflect: true })
-	shape: 'round' | 'square' | 'no-round' = 'no-round';
+	shape: 'round' | 'small-round' | 'square' | 'no-round' = 'no-round';
 
 	/**
 	 * Deshabilita el campo select.
@@ -1694,6 +1694,7 @@ export class MoniSelect extends MoniElement {
 			suffix: true,
 			invalid: this.error,
 			round: this.shape === 'round',
+			'small-round': this.shape === 'small-round',
 			square: this.shape === 'no-round'
 		};
 

package/src/components/moni-text-field.test.ts

@@ -86,6 +86,14 @@ describe('moni-text-field', () => {
 		expect(field?.classList.contains('round')).toBe(true);
 	});
 
+	it('aplica la clase small-round para un redondeado compacto', async () => {
+		el.shape = 'small-round';
+		await el.updateComplete;
+		const field = el.shadowRoot?.querySelector('.field');
+		expect(field?.classList.contains('small-round')).toBe(true);
+		expect(field?.classList.contains('square')).toBe(false);
+	});
+
 	it('renderiza underlined sin fondo, contorno completo ni forma redondeada', async () => {
 		el.variant = 'underlined';
 		el.shape = 'round';

package/src/components/moni-text-field.ts

@@ -106,11 +106,11 @@ export class MoniTextField extends MoniElement {
 
 	/**
 	 * Forma del radio del borde (border-radius) del campo.
-	 * @type {'round' | 'no-round'}
+	 * @type {'round' | 'small-round' | 'no-round'}
 	 * @default 'no-round'
 	 */
 	@property({ reflect: true })
-	shape: 'round' | 'no-round' = 'no-round';
+	shape: 'round' | 'small-round' | 'no-round' = 'no-round';
 
 	/**
 	 * El tipo de input HTML nativo.
@@ -544,6 +544,7 @@ export class MoniTextField extends MoniElement {
 			'suffix-action-field': Boolean(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'
 		};
 		const placeholder = this.placeholder || (this.label ? ' ' : '');

package/src/components/moni-textarea.test.ts

@@ -97,6 +97,14 @@ describe('moni-textarea', () => {
 		expect(field?.classList.contains('round')).toBe(true);
 	});
 
+	it('aplica la clase small-round para un redondeado compacto', async () => {
+		el.shape = 'small-round';
+		await el.updateComplete;
+		const field = el.shadowRoot?.querySelector('.field');
+		expect(field?.classList.contains('small-round')).toBe(true);
+		expect(field?.classList.contains('square')).toBe(false);
+	});
+
 	it('no aplica la clase de forma (shape) en el contenedor de campo para shape=square', async () => {
 		el.shape = 'square';
 		await el.updateComplete;

package/src/components/moni-textarea.ts

@@ -98,11 +98,11 @@ export class MoniTextarea extends MoniElement {
 
 	/**
 	 * Forma del radio del borde (border-radius) del campo.
-	 * @type {'round' | 'square' | 'no-round'}
+	 * @type {'round' | 'small-round' | 'square' | 'no-round'}
 	 * @default 'no-round'
 	 */
 	@property({ reflect: true })
-	shape: 'round' | 'square' | 'no-round' = 'no-round';
+	shape: 'round' | 'small-round' | 'square' | 'no-round' = 'no-round';
 
 	/**
 	 * Nombre del icono inicial (leading) (Material Symbols).
@@ -364,6 +364,7 @@ export class MoniTextarea extends MoniElement {
 			suffix: hasTrailing,
 			invalid: this.error,
 			round: this.shape === 'round',
+			'small-round': this.shape === 'small-round',
 			square: this.shape === 'no-round'
 		};
 		const placeholder = this.placeholder || (this.label ? ' ' : '');

package/dist/cdn/chunks/if-defined-DlAUOFi9.js

@@ -1 +0,0 @@
-import{c as e}from"./decorate-D4jKxi6H.js";var t=t=>t??e;export{t};