@moni-labs/moni-ui 0.4.2 → 0.4.4

package/dist/components/moni-button-group.js

@@ -64,6 +64,7 @@ import { MoniElement, sharedStyles } from './_base/index.js';
 let MoniButtonGroup = class MoniButtonGroup extends MoniElement {
     constructor() {
         super(...arguments);
+        this._activeObserver = new MutationObserver(() => this.updateSelectionNeighbors());
         /**
          * Variante visual del grupo de botones.
          * - `standard`: Los elementos se espacian normalmente.
@@ -83,6 +84,12 @@ let MoniButtonGroup = class MoniButtonGroup extends MoniElement {
          * @type {boolean}
          */
         this.multi = false;
+        /** Impide que el grupo quede sin selección. */
+        this.selectionRequired = false;
+        /** Forma base común de los botones. La selección invierte round ↔ square. */
+        this.shape = 'round';
+        /** Controla si los botones conservan su ancho intrínseco o llenan la superficie. */
+        this.resizing = 'fixed';
         /**
          * Espacio CSS personalizado entre botones (ej., '1rem').
          * Solo se aplica cuando la variante es 'standard'.
@@ -106,6 +113,14 @@ let MoniButtonGroup = class MoniButtonGroup extends MoniElement {
          */
         this.labelledBy = '';
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this._activeObserver.observe(this, { subtree: true, attributes: true, attributeFilter: ['active'] });
+    }
+    disconnectedCallback() {
+        this._activeObserver.disconnect();
+        super.disconnectedCallback();
+    }
     static { this.styles = [
         sharedStyles,
         css `
@@ -113,12 +128,18 @@ let MoniButtonGroup = class MoniButtonGroup extends MoniElement {
 				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 {
@@ -148,6 +169,69 @@ let MoniButtonGroup = class MoniButtonGroup extends MoniElement {
 			: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; }
 		`
     ]; }
     /**
@@ -157,7 +241,7 @@ let MoniButtonGroup = class MoniButtonGroup extends MoniElement {
      */
     updated(changedProperties) {
         super.updated(changedProperties);
-        if (changedProperties.has('variant') || changedProperties.has('size') || changedProperties.has('gap')) {
+        if (changedProperties.has('variant') || changedProperties.has('size') || changedProperties.has('gap') || changedProperties.has('shape')) {
             this.updateChildren();
         }
     }
@@ -169,6 +253,24 @@ let MoniButtonGroup = class MoniButtonGroup extends MoniElement {
     handleSlotChange() {
         this.updateChildren();
     }
+    getButtons() {
+        return (this.slottedButtons ?? []).filter((el) => el.tagName.toLowerCase() === 'moni-button' || el.tagName.toLowerCase() === 'moni-icon-button');
+    }
+    /** Keeps selection emphasis inside the group's original visual footprint.
+     * The selected width is funded evenly by every unselected button so edge
+     * selections remain visually balanced instead of collapsing one neighbour. */
+    updateSelectionNeighbors() {
+        const buttons = this.getButtons();
+        buttons.forEach((button) => button.removeAttribute('data-group-adjacent-selected'));
+        if (this.variant !== 'standard')
+            return;
+        const selected = buttons.filter((button) => button.hasAttribute('active'));
+        if (selected.length === 0)
+            return;
+        const unselected = buttons.filter((button) => !button.hasAttribute('active'));
+        const weight = unselected.length === 1 ? 'sole' : 'shared';
+        unselected.forEach((button) => button.setAttribute('data-group-adjacent-selected', weight));
+    }
     getGapValue(gap) {
         if (!gap)
             return '';
@@ -193,14 +295,17 @@ let MoniButtonGroup = class MoniButtonGroup extends MoniElement {
      * correspondiente (`left-round-flat`, `inner-round`, etc.) para formar una cápsula unificada.
      */
     updateChildren() {
-        const buttons = this.slottedButtons.filter((el) => el.tagName.toLowerCase() === 'moni-button' || el.tagName.toLowerCase() === 'moni-icon-button');
+        const buttons = this.getButtons();
         const normalizedGap = this.gap.trim().toLowerCase();
         const hasConnectedGap = !['0', '0px', '0rem', '0em'].includes(normalizedGap);
         buttons.forEach((btn, index) => {
             // Propagate size
             btn.setAttribute('size', this.size);
             // Propagate shape for connected variant
-            if (this.variant === 'connected') {
+            if (this.variant === 'connected' && this.shape === 'square') {
+                btn.setAttribute('shape', 'square');
+            }
+            else if (this.variant === 'connected') {
                 if (hasConnectedGap) {
                     if (buttons.length === 1) {
                         btn.setAttribute('shape', 'round');
@@ -231,13 +336,10 @@ let MoniButtonGroup = class MoniButtonGroup extends MoniElement {
                 }
             }
             else {
-                // Standard variant: buttons retain their own shapes or default round
-                const currentShape = btn.getAttribute('shape');
-                if (!currentShape || ['left-round-flat', 'right-round-flat', 'no-round', 'left-round', 'right-round', 'inner-round'].includes(currentShape)) {
-                    btn.setAttribute('shape', 'round');
-                }
+                btn.setAttribute('shape', this.shape);
             }
         });
+        this.updateSelectionNeighbors();
     }
     /**
      * Maneja la interacción táctil o de mouse (Pointer Down).
@@ -252,22 +354,13 @@ let MoniButtonGroup = class MoniButtonGroup extends MoniElement {
         const button = target.closest('moni-button, moni-icon-button');
         if (!button || button.hasAttribute('disabled'))
             return;
-        const buttons = this.slottedButtons.filter((el) => el.tagName.toLowerCase() === 'moni-button' || el.tagName.toLowerCase() === 'moni-icon-button');
+        const buttons = this.getButtons();
         const index = buttons.indexOf(button);
         if (index === -1)
             return;
-        const prev = buttons[index - 1];
-        const next = buttons[index + 1];
-        if (prev) {
-            prev.style.transition = 'transform 200ms cubic-bezier(0.2, 0, 0, 1)';
-            prev.style.transform = 'translateX(-6px) scaleX(0.92)';
-            prev.style.transformOrigin = 'right center';
-        }
-        if (next) {
-            next.style.transition = 'transform 200ms cubic-bezier(0.2, 0, 0, 1)';
-            next.style.transform = 'translateX(6px) scaleX(0.92)';
-            next.style.transformOrigin = 'left center';
-        }
+        button.setAttribute('data-group-pressed', '');
+        buttons[index - 1]?.setAttribute('data-group-adjacent-pressed', '');
+        buttons[index + 1]?.setAttribute('data-group-adjacent-pressed', '');
     }
     /**
      * Conclusión de la interacción táctil (Pointer Up).
@@ -275,10 +368,10 @@ let MoniButtonGroup = class MoniButtonGroup extends MoniElement {
      * a su estado nativo neutro.
      */
     handlePointerUp() {
-        const buttons = this.slottedButtons.filter((el) => el.tagName.toLowerCase() === 'moni-button' || el.tagName.toLowerCase() === 'moni-icon-button');
+        const buttons = this.getButtons();
         buttons.forEach((btn) => {
-            btn.style.transform = '';
-            btn.style.transformOrigin = '';
+            btn.removeAttribute('data-group-pressed');
+            btn.removeAttribute('data-group-adjacent-pressed');
         });
     }
     /**
@@ -292,7 +385,7 @@ let MoniButtonGroup = class MoniButtonGroup extends MoniElement {
         if (!clickedButton || clickedButton.hasAttribute('disabled')) {
             return;
         }
-        const buttons = this.slottedButtons.filter((el) => el.tagName.toLowerCase() === 'moni-button' || el.tagName.toLowerCase() === 'moni-icon-button');
+        const buttons = this.getButtons();
         if (!this.multi) {
             buttons.forEach((btn) => {
                 if (btn !== clickedButton) {
@@ -303,6 +396,9 @@ let MoniButtonGroup = class MoniButtonGroup extends MoniElement {
         }
         // Toggle clicked button active state
         const wasActive = clickedButton.hasAttribute('active');
+        const activeCount = buttons.filter((btn) => btn.hasAttribute('active')).length;
+        if (wasActive && this.selectionRequired && activeCount <= 1)
+            return;
         if (wasActive) {
             clickedButton.removeAttribute('active');
             clickedButton.active = false;
@@ -366,6 +462,15 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], MoniButtonGroup.prototype, "multi", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'selection-required' })
+], MoniButtonGroup.prototype, "selectionRequired", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniButtonGroup.prototype, "shape", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniButtonGroup.prototype, "resizing", void 0);
 __decorate([
     property()
 ], MoniButtonGroup.prototype, "gap", void 0);

package/dist/components/moni-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"moni-button.d.ts","sourceRoot":"","sources":["../../src/components/moni-button.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAE5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,qBACa,UAAW,SAAQ,WAAW;IACjC,OAAO,CAAC,SAAS,CAAS;IACnC,OAAO,CAAC,MAAM,CAAC,kBAAkB,CAAS;IAE1C;;;;OAIG;IAEH,OAAO,EACJ,QAAQ,GACR,OAAO,GACP,UAAU,GACV,MAAM,GACN,MAAM,GACN,UAAU,GACV,OAAO,CAAY;IAEtB;;;;;;OAMG;IAEH,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAW;IAE7E;;;;OAIG;IAEH,KAAK,EACF,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,YAAY,GACZ,aAAa,GACb,WAAW,GACX,cAAc,GACd,iBAAiB,GACjB,kBAAkB,GAClB,gBAAgB,GAChB,mBAAmB,GACnB,aAAa,CAAW;IAE3B;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACyC,OAAO,UAAS;IAE5D;;;OAGG;IACyC,MAAM,UAAS;IAE3D;;;OAGG;IAC0B,IAAI,SAAM;IAEvC;;;OAGG;IACsD,YAAY,SAAM;IAE3E;;;;OAIG;IAEH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE/C;;;OAGG;IAC0B,IAAI,SAAM;IAEvC;;;OAGG;IAC0B,MAAM,SAAM;IAEhC,iBAAiB,IAAI,IAAI;IAclC,OAAO,CAAC,sBAAsB;IAO9B,OAAO,CAAC,sBAAsB;IAK9B,OAAgB,MAAM,4BA6jBpB;IAEF;;;;OAIG;IACH,OAAO,CAAC,eAAe;IAOvB;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2BG;IACM,MAAM;CAmFf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"moni-button.d.ts","sourceRoot":"","sources":["../../src/components/moni-button.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAE5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,qBACa,UAAW,SAAQ,WAAW;IACjC,OAAO,CAAC,SAAS,CAAS;IACnC,OAAO,CAAC,MAAM,CAAC,kBAAkB,CAAS;IAE1C;;;;OAIG;IAEH,OAAO,EACJ,QAAQ,GACR,OAAO,GACP,UAAU,GACV,MAAM,GACN,MAAM,GACN,UAAU,GACV,OAAO,CAAY;IAEtB;;;;;;OAMG;IAEH,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAW;IAE7E;;;;OAIG;IAEH,KAAK,EACF,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,YAAY,GACZ,aAAa,GACb,WAAW,GACX,cAAc,GACd,iBAAiB,GACjB,kBAAkB,GAClB,gBAAgB,GAChB,mBAAmB,GACnB,aAAa,CAAW;IAE3B;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACyC,OAAO,UAAS;IAE5D;;;OAGG;IACyC,MAAM,UAAS;IAE3D;;;OAGG;IAC0B,IAAI,SAAM;IAEvC;;;OAGG;IACsD,YAAY,SAAM;IAE3E;;;;OAIG;IAEH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE/C;;;OAGG;IAC0B,IAAI,SAAM;IAEvC;;;OAGG;IAC0B,MAAM,SAAM;IAEhC,iBAAiB,IAAI,IAAI;IAclC,OAAO,CAAC,sBAAsB;IAO9B,OAAO,CAAC,sBAAsB;IAK9B,OAAgB,MAAM,4BA8jBpB;IAEF;;;;OAIG;IACH,OAAO,CAAC,eAAe;IAOvB;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2BG;IACM,MAAM;CAmFf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD;AAED,eAAe,UAAU,CAAC"}

package/dist/components/moni-button.js

@@ -172,6 +172,7 @@ let MoniButton = class MoniButton extends MoniElement {
 			.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;

package/dist/components/moni-loading-indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"moni-loading-indicator.d.ts","sourceRoot":"","sources":["../../src/components/moni-loading-indicator.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAG7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBACa,oBAAqB,SAAQ,WAAW;IAEpD,OAAO,EAAE,aAAa,GAAG,WAAW,CAAiB;IAEhC,OAAO,CAAC,UAAU,CAAC,CAAc;IAEtD;;;;OAIG;IACM,iBAAiB;IAQ1B;;;;OAIG;IACM,oBAAoB;IAK7B;;;;OAIG;cACgB,YAAY;IAI/B;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IAMxB,OAAgB,MAAM,4BAkIpB;IAEF;;;;;;;;;;;OAWG;IACM,MAAM;CASf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,wBAAwB,EAAE,oBAAoB,CAAC;KAC/C;CACD;AAED,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"moni-loading-indicator.d.ts","sourceRoot":"","sources":["../../src/components/moni-loading-indicator.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAG7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBACa,oBAAqB,SAAQ,WAAW;IAEpD,OAAO,EAAE,aAAa,GAAG,WAAW,CAAiB;IAEhC,OAAO,CAAC,UAAU,CAAC,CAAc;IAEtD;;;;OAIG;IACM,iBAAiB;IAQ1B;;;;OAIG;IACM,oBAAoB;IAK7B;;;;OAIG;cACgB,YAAY;IAI/B;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IAMxB,OAAgB,MAAM,4BAmJpB;IAEF;;;;;;;;;;;OAWG;IACM,MAAM;CAWf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,wBAAwB,EAAE,oBAAoB,CAAC;KAC/C;CACD;AAED,eAAe,oBAAoB,CAAC"}

package/dist/components/moni-loading-indicator.js

@@ -99,7 +99,11 @@ let MoniLoadingIndicator = class MoniLoadingIndicator extends MoniElement {
 			: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;
 			}
 
@@ -131,6 +135,19 @@ let MoniLoadingIndicator = class MoniLoadingIndicator extends MoniElement {
 				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 {
@@ -240,7 +257,9 @@ let MoniLoadingIndicator = class MoniLoadingIndicator extends MoniElement {
         return html `
 			<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>
 		`;

package/dist/components/moni-time-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"moni-time-picker.d.ts","sourceRoot":"","sources":["../../src/components/moni-time-picker.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AACxB,OAAO,kBAAkB,CAAC;AAE1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,qBACa,cAAe,SAAQ,WAAW;IACjB,KAAK,SAAW;IACyB,SAAS,UAAS;IAC3D,IAAI,EAAE,MAAM,GAAG,OAAO,CAAU;IAChC,WAAW,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAU;IACX,cAAc,UAAS;IAC1B,YAAY,UAAS;IACvC,SAAS,SAAU;IACjB,WAAW,SAAY;IAEtE,OAAO,CAAC,eAAe,CAA6B;IACpD,OAAO,CAAC,MAAM,CAAqB;IAEnC,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,aAAa,CAAK;IAEb,OAAO,CAAC,WAAW,CAAC,CAAiB;IAE3D,OAAO,CAAC,UAAU,CAAS;IAE3B;;;;;;OAMG;cACgB,UAAU,CAAC,iBAAiB,EAAE,cAAc;IAM/D;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAoBlB;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAwBnB;;;OAGG;IACH,OAAO,CAAC,UAAU;IAIlB;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAIpB;;;;;OAKG;IACH,OAAO,CAAC,SAAS;IAMjB;;;;;OAKG;IACH,OAAO,CAAC,sBAAsB;IAQ9B;;;;OAIG;IACH,OAAO,CAAC,sBAAsB;IAgD9B;;;;;;OAMG;IACH,OAAO,CAAC,oBAAoB;IAa5B;;;;OAIG;IACH,OAAO,CAAC,qBAAqB;IAiB7B;;;OAGG;IACH,OAAO,CAAC,uBAAuB;IAY/B,OAAgB,MAAM,4BAiZpB;IAEF;;;;;;OAMG;IACH,OAAO,CAAC,mBAAmB;IAwI3B;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACM,MAAM;CAsFf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,cAAc,CAAC;KACnC;CACD;AAED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"moni-time-picker.d.ts","sourceRoot":"","sources":["../../src/components/moni-time-picker.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AACxB,OAAO,kBAAkB,CAAC;AAE1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,qBACa,cAAe,SAAQ,WAAW;IACjB,KAAK,SAAW;IACyB,SAAS,UAAS;IAC3D,IAAI,EAAE,MAAM,GAAG,OAAO,CAAU;IAChC,WAAW,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAU;IACX,cAAc,UAAS;IAC1B,YAAY,UAAS;IACvC,SAAS,SAAU;IACjB,WAAW,SAAY;IAEtE,OAAO,CAAC,eAAe,CAA6B;IACpD,OAAO,CAAC,MAAM,CAAqB;IAEnC,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,aAAa,CAAK;IAEb,OAAO,CAAC,WAAW,CAAC,CAAiB;IAE3D,OAAO,CAAC,UAAU,CAAS;IAE3B;;;;;;OAMG;cACgB,UAAU,CAAC,iBAAiB,EAAE,cAAc;IAM/D;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAoBlB;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAwBnB;;;OAGG;IACH,OAAO,CAAC,UAAU;IAIlB;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAIpB;;;;;OAKG;IACH,OAAO,CAAC,SAAS;IAMjB;;;;;OAKG;IACH,OAAO,CAAC,sBAAsB;IAQ9B;;;;OAIG;IACH,OAAO,CAAC,sBAAsB;IAgD9B;;;;;;OAMG;IACH,OAAO,CAAC,oBAAoB;IAa5B;;;;OAIG;IACH,OAAO,CAAC,qBAAqB;IAiB7B;;;OAGG;IACH,OAAO,CAAC,uBAAuB;IAY/B,OAAgB,MAAM,4BAqZpB;IAEF;;;;;;OAMG;IACH,OAAO,CAAC,mBAAmB;IAwI3B;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACM,MAAM;CAsFf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,cAAc,CAAC;KACnC;CACD;AAED,eAAe,cAAc,CAAC"}

package/dist/components/moni-time-picker.js

@@ -316,17 +316,19 @@ let MoniTimePicker = class MoniTimePicker extends MoniElement {
 			}
 
 			: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) */
@@ -356,6 +358,7 @@ let MoniTimePicker = class MoniTimePicker extends MoniElement {
 				:host(:not([orientation])) .main-content {
 					flex-direction: row;
 					align-items: center;
+					justify-content: center;
 					gap: 2rem;
 				}
 				:host([orientation='auto']) .left-pane,
@@ -363,6 +366,7 @@ let MoniTimePicker = class MoniTimePicker extends MoniElement {
 					display: flex;
 					flex-direction: column;
 					justify-content: center;
+					flex: none;
 				}
 			}
 

package/dist/styles/base.css

@@ -118,25 +118,45 @@ h6,
 	background-size: 200px 200px;
 }
 
-/* Scrollbar discreto */
+/* Material 3 scrollbar for document-level scroll containers. */
+* {
+	scrollbar-width: thin;
+	scrollbar-color:
+		var(--moni-scrollbar-thumb, color-mix(in srgb, var(--moni-on-surface-variant, #49454f) 38%, transparent))
+		var(--moni-scrollbar-track, transparent);
+}
+
 *::-webkit-scrollbar {
-	width: 8px;
-	height: 8px;
+	width: var(--moni-scrollbar-size, 0.625rem);
+	height: var(--moni-scrollbar-size, 0.625rem);
 }
 
 *::-webkit-scrollbar-track {
-	background: transparent;
+	background: var(--moni-scrollbar-track, transparent);
+	border-radius: 999px;
 }
 
 *::-webkit-scrollbar-thumb {
-	background: var(--color-outline-variant);
-	border-radius: 4px;
+	min-height: 2.5rem;
+	background: var(--moni-scrollbar-thumb, color-mix(in srgb, var(--moni-on-surface-variant, #49454f) 38%, transparent));
+	background-clip: padding-box;
+	border: 0.1875rem solid transparent;
+	border-radius: 999px;
 }
 
 *::-webkit-scrollbar-thumb:hover {
-	background: var(--color-outline);
+	background: var(--moni-scrollbar-thumb-hover, color-mix(in srgb, var(--moni-on-surface-variant, #49454f) 62%, transparent));
+	background-clip: padding-box;
+	border-width: 0.125rem;
 }
 
+*::-webkit-scrollbar-thumb:active {
+	background: var(--moni-scrollbar-thumb-active, color-mix(in srgb, var(--moni-primary, #6750a4) 76%, transparent));
+	background-clip: padding-box;
+}
+
+*::-webkit-scrollbar-corner { background: transparent; }
+
 /* Focus visible */
 :focus-visible {
 	outline: 2px solid var(--color-primary);

package/package.json

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

package/src/components/_base/shared-styles.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest';
+import { sharedStyles } from './shared-styles.js';
+
+describe('sharedStyles Material scrollbar', () => {
+	it('styles scroll containers inside every component shadow root', () => {
+		const styles = sharedStyles.cssText;
+
+		expect(styles).toContain('--moni-scrollbar-size');
+		expect(styles).toContain('scrollbar-width: thin');
+		expect(styles).toContain('*::-webkit-scrollbar-thumb');
+		expect(styles).toContain('*::-webkit-scrollbar-thumb:hover');
+		expect(styles).toContain('*::-webkit-scrollbar-thumb:active');
+		expect(styles).toContain('border-radius: 999px');
+	});
+});

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

@@ -206,6 +206,62 @@ export const sharedStyles = css`
 		--ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
 		--duration-fast: 150ms;
 		--duration-normal: 250ms;
+
+		/* ─── Material 3 scrollbar ─── */
+		--_scrollbar-size: var(--moni-scrollbar-size, 0.625rem);
+		--_scrollbar-track: var(--moni-scrollbar-track, transparent);
+		--_scrollbar-thumb: var(
+			--moni-scrollbar-thumb,
+			color-mix(in srgb, var(--on-surface-variant) 38%, transparent)
+		);
+		--_scrollbar-thumb-hover: var(
+			--moni-scrollbar-thumb-hover,
+			color-mix(in srgb, var(--on-surface-variant) 62%, transparent)
+		);
+		--_scrollbar-thumb-active: var(
+			--moni-scrollbar-thumb-active,
+			color-mix(in srgb, var(--primary) 76%, transparent)
+		);
+	}
+
+	/* Firefox uses its native thin geometry and the same Material color roles. */
+	* {
+		scrollbar-width: thin;
+		scrollbar-color: var(--_scrollbar-thumb) var(--_scrollbar-track);
+	}
+
+	/* Chromium, Safari and Edge: 4px pill inside a 10px interaction gutter. */
+	*::-webkit-scrollbar {
+		inline-size: var(--_scrollbar-size);
+		block-size: var(--_scrollbar-size);
+	}
+
+	*::-webkit-scrollbar-track {
+		background: var(--_scrollbar-track);
+		border-radius: 999px;
+	}
+
+	*::-webkit-scrollbar-thumb {
+		min-block-size: 2.5rem;
+		background: var(--_scrollbar-thumb);
+		background-clip: padding-box;
+		border: 0.1875rem solid transparent;
+		border-radius: 999px;
+	}
+
+	*::-webkit-scrollbar-thumb:hover {
+		background: var(--_scrollbar-thumb-hover);
+		background-clip: padding-box;
+		border-width: 0.125rem;
+	}
+
+	*::-webkit-scrollbar-thumb:active {
+		background: var(--_scrollbar-thumb-active);
+		background-clip: padding-box;
+	}
+
+	*::-webkit-scrollbar-corner {
+		background: transparent;
 	}
 
 	/* ─── 4. Utility classes ─────────────────────────────────────────────── */

package/src/components/moni-button-group.test.ts

@@ -122,6 +122,82 @@ describe('moni-button-group', () => {
 		expect(btn2.active).toBe(true);
 	});
 
+	it('expande el botón activo independientemente de su contenido', () => {
+		const cssText = ((group.constructor as typeof HTMLElement & { styles: unknown[] }).styles)
+			.map((style: any) => style?.cssText ?? '')
+			.join(' ');
+		expect(cssText).toContain("[variant='standard'][size='small']) ::slotted(moni-button[active])");
+		expect(cssText).not.toContain("[variant='connected'][size='small']) ::slotted(moni-button[active])");
+		expect(cssText).toContain('--moni-button-padding');
+	});
+
+	it('no permite deseleccionar el último botón cuando la selección es obligatoria', async () => {
+		group.selectionRequired = true;
+		const button = document.createElement('moni-button') as MoniButton;
+		button.active = true;
+		group.append(button);
+		await group.updateComplete;
+		button.click();
+		await button.updateComplete;
+		expect(button.active).toBe(true);
+	});
+
+	it('propaga la forma cuadrada y conserva anchos uniformes en connected', async () => {
+		group.variant = 'connected';
+		group.shape = 'square';
+		const first = document.createElement('moni-button') as MoniButton;
+		const second = document.createElement('moni-button') as MoniButton;
+		group.append(first, second);
+		await group.updateComplete;
+		expect(first.shape).toBe('square');
+		expect(second.shape).toBe('square');
+		const cssText = ((group.constructor as typeof HTMLElement & { styles: unknown[] }).styles)
+			.map((style: any) => style?.cssText ?? '')
+			.join(' ');
+		expect(cssText).toContain("[variant='connected']) ::slotted(moni-button)");
+		expect(cssText).toContain('flex: 1 1 0');
+		expect(cssText).toContain('--moni-button-inline-size: 100%');
+	});
+
+	it('marca temporalmente el botón presionado y sus vecinos en standard', async () => {
+		const buttons = Array.from({ length: 3 }, () => document.createElement('moni-button') as MoniButton);
+		group.append(...buttons);
+		await group.updateComplete;
+		buttons[1].dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true }));
+		expect(buttons[1].hasAttribute('data-group-pressed')).toBe(true);
+		expect(buttons[0].hasAttribute('data-group-adjacent-pressed')).toBe(true);
+		expect(buttons[2].hasAttribute('data-group-adjacent-pressed')).toBe(true);
+		buttons[1].dispatchEvent(new PointerEvent('pointerup', { bubbles: true, composed: true }));
+		expect(buttons.every((button) => !button.hasAttribute('data-group-pressed') && !button.hasAttribute('data-group-adjacent-pressed'))).toBe(true);
+	});
+
+	it('redistribuye el ancho seleccionado hacia sus vecinos sin afectar connected', async () => {
+		const buttons = Array.from({ length: 3 }, () => document.createElement('moni-button') as MoniButton);
+		group.append(...buttons);
+		await group.updateComplete;
+		buttons[1].active = true;
+		await buttons[1].updateComplete;
+		await new Promise((resolve) => setTimeout(resolve, 0));
+		expect(buttons[0].getAttribute('data-group-adjacent-selected')).toBe('shared');
+		expect(buttons[2].getAttribute('data-group-adjacent-selected')).toBe('shared');
+
+		group.variant = 'connected';
+		await group.updateComplete;
+		expect(buttons[0].hasAttribute('data-group-adjacent-selected')).toBe(false);
+		expect(buttons[2].hasAttribute('data-group-adjacent-selected')).toBe(false);
+	});
+
+	it('reparte por igual la reducción cuando se selecciona un botón del extremo', async () => {
+		const buttons = Array.from({ length: 3 }, () => document.createElement('moni-button') as MoniButton);
+		group.append(...buttons);
+		await group.updateComplete;
+		buttons[2].active = true;
+		await buttons[2].updateComplete;
+		await new Promise((resolve) => setTimeout(resolve, 0));
+		expect(buttons[0].getAttribute('data-group-adjacent-selected')).toBe('shared');
+		expect(buttons[1].getAttribute('data-group-adjacent-selected')).toBe('shared');
+	});
+
 	it('renderiza role="group" en el contenedor por defecto (accesibilidad M3)', async () => {
 		await group.updateComplete;
 		const container = group.shadowRoot?.querySelector('[part="container"]');