@moni-labs/moni-ui 0.4.8 → 0.4.10

package/custom-elements.json

@@ -4780,7 +4780,7 @@
               "name": "shape",
               "attribute": "shape",
               "type": {
-                "text": "'round' | 'square' | 'no-round'"
+                "text": "'round' | 'small-round' | 'square' | 'no-round'"
               },
               "default": "'no-round'",
               "description": "Forma (radio de borde) del campo."
@@ -6633,7 +6633,7 @@
               "name": "shape",
               "attribute": "shape",
               "type": {
-                "text": "'round' | 'no-round'"
+                "text": "'round' | 'small-round' | 'no-round'"
               },
               "default": "'no-round'",
               "description": "Forma del radio del borde (border-radius) del campo."
@@ -7109,7 +7109,7 @@
               "name": "shape",
               "attribute": "shape",
               "type": {
-                "text": "'round' | 'square' | 'no-round'"
+                "text": "'round' | 'small-round' | 'square' | 'no-round'"
               },
               "default": "'no-round'",
               "description": "Forma del radio del borde (border-radius) del campo."

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

@@ -333,6 +333,13 @@ var MoniUI=(function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Modul
 	.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. */
@@ -593,6 +600,11 @@ var MoniUI=(function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Modul
 	.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:
@@ -716,6 +728,16 @@ var MoniUI=(function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Modul
 		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 {
@@ -4606,7 +4628,7 @@ var MoniUI=(function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Modul
 						</ul>
 					</div>
 				</div>
-			`}let t={value:0};return this._parsedOptions.map(e=>this._renderDesktopNode(e,t))}render(){let e=!!this.icon,t=this._getFilteredOptions(),n=this._findOptionByValue(this.value),r=this._open&&this.searchable&&!this.sheet?this._searchQuery:n?n.label:``,i=!!(r||this.placeholder),a={field:!0,label:!!this.label,fill:this.variant===`filled`,border:this.variant===`outlined`,small:this.size===`small`,large:this.size===`large`,extra:this.size===`extra`,prefix:e,suffix:!0,invalid:this.error,round:this.shape===`round`,square:this.shape===`no-round`},o=this.icon?L`<i class="leading-icon" part="leading-icon"
+			`}let t={value:0};return this._parsedOptions.map(e=>this._renderDesktopNode(e,t))}render(){let e=!!this.icon,t=this._getFilteredOptions(),n=this._findOptionByValue(this.value),r=this._open&&this.searchable&&!this.sheet?this._searchQuery:n?n.label:``,i=!!(r||this.placeholder),a={field:!0,label:!!this.label,fill:this.variant===`filled`,border:this.variant===`outlined`,small:this.size===`small`,large:this.size===`large`,extra:this.size===`extra`,prefix:e,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
 				></i>`:R,s=this.loading?L`<i class="trailing-icon" part="trailing-icon"
 					><moni-progress
@@ -5465,7 +5487,7 @@ var MoniUI=(function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Modul
 			<slot></slot>
 		</nav>`}};G([B({reflect:!0})],Lt.prototype,`mode`,void 0),G([B({type:Boolean,reflect:!0})],Lt.prototype,`scrollable`,void 0),G([B({type:Boolean,reflect:!0})],Lt.prototype,`vertical`,void 0),G([B({reflect:!0})],Lt.prototype,`align`,void 0),G([B({reflect:!0,attribute:`indicator-size`})],Lt.prototype,`indicatorSize`,void 0),Lt=G([z(`moni-tabs`)],Lt);var J=class extends U{static{this.formAssociated=!0}constructor(){super(),this.name=``,this.label=``,this.variant=`filled`,this.size=`medium`,this.shape=`no-round`,this.icon=``,this.trailingIcon=``,this.prefix=``,this.suffix=``,this.rows=3,this.autosize=!1,this.maxRows=0,this.maxlength=null,this.required=!1,this.readonly=!1,this.minlength=null,this.autocomplete=``,this.noCounter=!1,this.loading=!1,this.disabled=!1,this.helper=``,this.errorText=``,this.error=!1,this.value=``,this.placeholder=``,this._internals=this.attachInternals()}connectedCallback(){super.connectedCallback(),this._resizeObserver=new ResizeObserver(()=>this._resizeTextarea())}disconnectedCallback(){this._resizeObserver?.disconnect(),this._resizeObserver=void 0,super.disconnectedCallback()}firstUpdated(){this._resizeObserver?.observe(this._input),this._resizeTextarea()}_handleInput(e){let t=e.currentTarget;this.value=t.value,this._internals?.setFormValue?.(this.value),this._resizeTextarea()}_resizeTextarea(){let e=this._input;if(!e)return;if(!this.autosize){e.style.removeProperty(`block-size`),e.style.removeProperty(`overflow-y`);return}let t=getComputedStyle(e),n=Number.parseFloat(t.lineHeight)||24,r=Number.parseFloat(t.paddingTop)+Number.parseFloat(t.paddingBottom),i=Number.parseFloat(t.borderTopWidth)+Number.parseFloat(t.borderBottomWidth),a=n*Math.max(1,this.rows)+r+i,o=this.maxRows>0?n*Math.max(this.rows,this.maxRows)+r+i:1/0;e.style.blockSize=`auto`;let s=Math.min(o,Math.max(a,e.scrollHeight+i));e.style.blockSize=`${s}px`,e.style.overflowY=e.scrollHeight+i>o?`auto`:`hidden`}updated(e){this._input&&(e.has(`value`)&&(this._input.value=this.value,this._internals?.setFormValue?.(this.value)),e.has(`disabled`)&&(this._input.disabled=this.disabled),e.has(`maxlength`)&&this.maxlength!=null&&(this._input.maxLength=this.maxlength),(e.has(`value`)||e.has(`autosize`)||e.has(`rows`)||e.has(`maxRows`))&&this._resizeTextarea()),this._syncValidity()}get validity(){return this._internals.validity}get validationMessage(){return this._internals.validationMessage}checkValidity(){return this._internals.checkValidity()}reportValidity(){return this._internals.reportValidity()}_syncValidity(){!this._input||!this._internals?.setValidity||this._internals.setValidity(this._input.validity,this._input.validationMessage,this._input)}static{this.styles=[W,Ke,g`
 		:host([autosize]) textarea { resize: none; }
-	`]}render(){let e=!!this.icon||!!this.prefix,t=!!this.trailingIcon||!!this.suffix||this.loading,n=!!this.value||!!this.placeholder,r=!this.noCounter&&this.maxlength!=null&&this.maxlength>0,i={field:!0,label:!!this.label,fill:this.variant===`filled`,border:this.variant===`outlined`,small:this.size===`small`,large:this.size===`large`,extra:this.size===`extra`,prefix:e,suffix:t,invalid:this.error,round:this.shape===`round`,square:this.shape===`no-round`},a=this.placeholder||(this.label?` `:``),o=this.icon?L`<i class="leading-icon" part="leading-icon"
+	`]}render(){let e=!!this.icon||!!this.prefix,t=!!this.trailingIcon||!!this.suffix||this.loading,n=!!this.value||!!this.placeholder,r=!this.noCounter&&this.maxlength!=null&&this.maxlength>0,i={field:!0,label:!!this.label,fill:this.variant===`filled`,border:this.variant===`outlined`,small:this.size===`small`,large:this.size===`large`,extra:this.size===`extra`,prefix:e,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
 				></i>`:this.prefix?L`<span class="leading-icon" part="prefix"
 						>${this.prefix}</span
@@ -5547,7 +5569,7 @@ var MoniUI=(function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Modul
 		::slotted([slot='suffix']) { pointer-events: auto; }
 		.field.suffix-action-field > input { padding-inline-end: 3.5rem; }
 		.field.suffix-action-field > input:focus { padding-inline-end: 3.4375rem; }
-	`]}render(){let e=!!this.icon||!!this.prefix,t=!!this.trailingIcon||!!this.suffix||!!this.suffixButtonIcon||this._hasSuffixSlot,n=!!this.value||!!this.placeholder,r={field:!0,label:!!this.label,fill:this.variant===`filled`,border:this.variant===`outlined`,small:this.size===`small`,large:this.size===`large`,extra:this.size===`extra`,prefix:e,suffix:t,"suffix-action-field":!!this.suffixButtonIcon||this._hasSuffixSlot,invalid:this.error,round:this.shape===`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"
+	`]}render(){let e=!!this.icon||!!this.prefix,t=!!this.trailingIcon||!!this.suffix||!!this.suffixButtonIcon||this._hasSuffixSlot,n=!!this.value||!!this.placeholder,r={field:!0,label:!!this.label,fill:this.variant===`filled`,border:this.variant===`outlined`,small:this.size===`small`,large:this.size===`large`,extra:this.size===`extra`,prefix:e,suffix: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
 				></i>`:this.prefix?L`<span class="leading-icon" part="prefix"
 						>${this.prefix}</span