@moni-labs/moni-ui 0.2.0

package/dist/components/moni-side-sheet.js

@@ -0,0 +1,576 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, css } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+import './moni-icon.js';
+import './moni-button.js';
+/**
+ * Material Design 3 Side Sheet Component.
+ * Can act as a standard (non-modal) side sheet or a modal side sheet.
+ *
+ * Attributes:
+ *  - open:            boolean (reflect: true)
+ *  - modal:           boolean (reflect: true)
+ *  - side:            'right' | 'left' (default: 'right')
+ *  - title:           Header text (default: '')
+ *  - detached:        boolean (adds 16px/16dp margins/rounded corners all around)
+ *  - showClose:       boolean (shows standard close button)
+ *  - showBack:        boolean (shows standard back button)
+ *  - noBorder:        boolean (removes borders, default: false)
+ *  - withHandle:      boolean (shows grab handle and enables dragging to close/resize, default: false)
+ *  - expanded-width:  string (width when expanded, default: '600px')
+ *  - max-width:       string (maximum width restriction, default: '100%')
+ *
+ * Events:
+ *  - close:       Fired when the sheet is closed/dismissed
+ */
+let MoniSideSheet = class MoniSideSheet extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.modal = false;
+        this.side = 'right';
+        this.title = '';
+        this.detached = false;
+        this.showBack = false;
+        this.noBorder = false;
+        this.withHandle = false;
+        this.hideClose = false;
+        this.expandedWidth = '600px';
+        this.maxWidth = '';
+        this._isDragging = false;
+        this._startX = 0;
+        this._currentTranslationX = 0;
+        this._sheetWidth = 0;
+        this._defaultWidth = 0;
+        this._justDragged = false;
+    }
+    _getMaxWidthPx() {
+        const val = this.expandedWidth || '600px';
+        if (val.endsWith('%')) {
+            return window.innerWidth * (parseFloat(val) / 100);
+        }
+        if (val.endsWith('vw')) {
+            return window.innerWidth * (parseFloat(val) / 100);
+        }
+        if (val.endsWith('px')) {
+            return parseFloat(val);
+        }
+        return 600;
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('expandedWidth')) {
+            this.style.setProperty('--moni-side-sheet-expanded-width', this.expandedWidth);
+        }
+        if (changedProperties.has('maxWidth')) {
+            this.style.setProperty('--moni-side-sheet-max-width', this.maxWidth || '400px');
+        }
+        if (changedProperties.has('open') && this._dialog) {
+            if (this.open) {
+                if (this.modal) {
+                    if (!this._dialog.open) {
+                        if (typeof this._dialog.showModal === 'function') {
+                            this._dialog.showModal();
+                        }
+                        else {
+                            this._dialog.open = true;
+                        }
+                    }
+                }
+                else {
+                    if (!this._dialog.open) {
+                        if (typeof this._dialog.show === 'function') {
+                            this._dialog.show();
+                        }
+                        else {
+                            this._dialog.open = true;
+                        }
+                    }
+                }
+                // Force layout reflow before adding class
+                this._dialog.getBoundingClientRect();
+                this._dialog.classList.add('opened');
+            }
+            else {
+                if (this._dialog.open) {
+                    this._dialog.classList.remove('opened');
+                    const onTransitionEnd = (e) => {
+                        if (e.target === this._dialog && (e.propertyName === 'transform' || e.propertyName === 'opacity')) {
+                            this._dialog.removeEventListener('transitionend', onTransitionEnd);
+                            if (!this.open && this._dialog.open) {
+                                this._dialog.classList.remove('expanded');
+                                this._dialog.close();
+                            }
+                        }
+                    };
+                    this._dialog.addEventListener('transitionend', onTransitionEnd);
+                    // Fallback safety
+                    setTimeout(() => {
+                        if (!this.open && this._dialog.open) {
+                            this._dialog.classList.remove('expanded');
+                            this._dialog.close();
+                        }
+                    }, 350);
+                }
+            }
+        }
+    }
+    _onPointerDown(e) {
+        if (!this.withHandle)
+            return;
+        const target = e.target;
+        if (!target.closest('.handle') && !target.closest('header'))
+            return;
+        this._isDragging = true;
+        this._startX = e.clientX;
+        this._sheetWidth = this._dialog.getBoundingClientRect().width;
+        this._currentTranslationX = 0;
+        const isExpanded = this._dialog.classList.contains('expanded');
+        if (!isExpanded) {
+            this._defaultWidth = this._sheetWidth;
+        }
+        target.setPointerCapture(e.pointerId);
+        this._dialog.classList.add('dragging');
+    }
+    _onPointerMove(e) {
+        if (!this._isDragging)
+            return;
+        const deltaX = e.clientX - this._startX;
+        const isExpanded = this._dialog.classList.contains('expanded');
+        const maxWidthPx = this._getMaxWidthPx();
+        const shrinkDelta = this.side === 'right' ? deltaX : -deltaX;
+        if (isExpanded) {
+            if (shrinkDelta > 0) {
+                // Dragging to shrink width
+                const newWidth = this._sheetWidth - shrinkDelta;
+                this._dialog.style.transform = '';
+                this._dialog.style.width = `${Math.max(0, newWidth)}px`;
+            }
+            else {
+                // Pulling to expand beyond limit (resistance)
+                const newWidth = this._sheetWidth - shrinkDelta * 0.2;
+                this._dialog.style.width = `${Math.min(maxWidthPx, newWidth)}px`;
+            }
+        }
+        else {
+            if (shrinkDelta > 0) {
+                // Dragging to close: translate
+                this._currentTranslationX = shrinkDelta;
+                this._dialog.style.transform = `translateX(${this.side === 'right' ? shrinkDelta : -shrinkDelta}px)`;
+                this._dialog.style.width = '';
+            }
+            else {
+                // Dragging to grow width
+                const newWidth = this._sheetWidth - shrinkDelta;
+                this._dialog.style.transform = '';
+                this._dialog.style.width = `${Math.min(maxWidthPx, newWidth)}px`;
+            }
+        }
+    }
+    _onPointerUp(e) {
+        if (!this._isDragging)
+            return;
+        const target = e.target;
+        target.releasePointerCapture(e.pointerId);
+        this._isDragging = false;
+        this._dialog.classList.remove('dragging');
+        const deltaX = e.clientX - this._startX;
+        if (Math.abs(deltaX) > 5) {
+            this._justDragged = true;
+            setTimeout(() => {
+                this._justDragged = false;
+            }, 50);
+        }
+        const isExpanded = this._dialog.classList.contains('expanded');
+        const maxWidthPx = this._getMaxWidthPx();
+        const shrinkDelta = this.side === 'right' ? deltaX : -deltaX;
+        if (isExpanded) {
+            const finalWidth = this._sheetWidth - shrinkDelta;
+            if (finalWidth < this._defaultWidth - 80) {
+                this._dialog.classList.remove('expanded');
+                this._dialog.classList.remove('opened');
+                this._dialog.style.transform = this.side === 'right' ? 'translateX(100%)' : 'translateX(-100%)';
+                this._dialog.style.width = '';
+                const onTransitionEnd = () => {
+                    this._dialog.removeEventListener('transitionend', onTransitionEnd);
+                    this._dialog.style.transform = '';
+                    this._dialog.style.width = '';
+                    this.open = false;
+                    this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));
+                };
+                this._dialog.addEventListener('transitionend', onTransitionEnd);
+                setTimeout(() => { if (this.open)
+                    onTransitionEnd(); }, 300);
+            }
+            else if (finalWidth < (maxWidthPx + this._defaultWidth) / 2) {
+                this._dialog.classList.remove('expanded');
+                this._dialog.style.transform = '';
+                this._dialog.style.width = '';
+            }
+            else {
+                this._dialog.style.transform = '';
+                this._dialog.style.width = '';
+            }
+        }
+        else {
+            if (shrinkDelta < 0) {
+                const finalWidth = this._sheetWidth - shrinkDelta;
+                const threshold = (maxWidthPx + this._sheetWidth) / 2;
+                if (finalWidth > threshold || -shrinkDelta > 80) {
+                    this._dialog.classList.add('expanded');
+                    this._dialog.style.transform = '';
+                    this._dialog.style.width = '';
+                }
+                else {
+                    this._dialog.style.transform = '';
+                    this._dialog.style.width = '';
+                }
+            }
+            else {
+                const threshold = Math.min(150, this._sheetWidth * 0.4);
+                if (Math.abs(this._currentTranslationX) > threshold) {
+                    this._dialog.classList.remove('opened');
+                    this._dialog.style.transform = this.side === 'right' ? 'translateX(100%)' : 'translateX(-100%)';
+                    this._dialog.style.width = '';
+                    const onTransitionEnd = () => {
+                        this._dialog.removeEventListener('transitionend', onTransitionEnd);
+                        this._dialog.style.transform = '';
+                        this._dialog.style.width = '';
+                        this.open = false;
+                        this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));
+                    };
+                    this._dialog.addEventListener('transitionend', onTransitionEnd);
+                    setTimeout(() => { if (this.open)
+                        onTransitionEnd(); }, 300);
+                }
+                else {
+                    this._dialog.style.transform = '';
+                    this._dialog.style.width = '';
+                }
+            }
+        }
+    }
+    _onPointerCancel(e) {
+        if (!this._isDragging)
+            return;
+        const target = e.target;
+        target.releasePointerCapture(e.pointerId);
+        this._isDragging = false;
+        this._dialog.classList.remove('dragging');
+        this._dialog.style.transform = '';
+        this._dialog.style.width = '';
+    }
+    _onCloseClick() {
+        this.open = false;
+        this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));
+    }
+    _onBackClick() {
+        this.dispatchEvent(new CustomEvent('back', { bubbles: true, composed: true }));
+    }
+    _onDialogClick(e) {
+        if (this._justDragged) {
+            this._justDragged = false;
+            return;
+        }
+        if (this.modal && e.target === this._dialog) {
+            this._onCloseClick();
+        }
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				display: contents;
+			}
+
+			dialog {
+				display: flex;
+				flex-direction: column;
+				border: none;
+				position: fixed;
+				top: 0;
+				bottom: 0;
+				block-size: 100vh;
+				inline-size: 100%;
+				max-inline-size: var(--moni-side-sheet-max-width, 400px);
+				background-color: var(--surface);
+				color: var(--on-surface);
+				box-sizing: border-box;
+				padding: 0;
+				margin: 0;
+				z-index: 90;
+				outline: none;
+				overflow: hidden;
+				transition:
+					transform var(--speed3) cubic-bezier(0.2, 0, 0, 1),
+					width var(--speed3) cubic-bezier(0.2, 0, 0, 1),
+					max-width var(--speed3) cubic-bezier(0.2, 0, 0, 1),
+					opacity var(--speed3),
+					visibility var(--speed3);
+				opacity: 0;
+				visibility: hidden;
+			}
+
+			dialog.dragging {
+				transition: none !important;
+			}
+
+			dialog.expanded {
+				max-inline-size: var(--moni-side-sheet-expanded-width, 600px) !important;
+			}
+
+			/* Alignments */
+			dialog.right {
+				right: 0;
+				left: auto;
+				transform: translateX(100%);
+				border-left: 1px solid var(--outline-variant);
+				border-radius: 1.75rem 0 0 1.75rem;
+			}
+
+			dialog.left {
+				left: 0;
+				right: auto;
+				transform: translateX(-100%);
+				border-right: 1px solid var(--outline-variant);
+				border-radius: 0 1.75rem 1.75rem 0;
+			}
+
+			/* Detached alignment */
+			dialog.detached {
+				top: 16px;
+				bottom: 16px;
+				block-size: calc(100vh - 32px);
+				border-radius: 1.75rem !important;
+				border: 1px solid var(--outline-variant);
+				box-shadow: var(--elevate1);
+			}
+
+			dialog.detached.right {
+				right: 16px;
+			}
+
+			dialog.detached.left {
+				left: 16px;
+			}
+
+			/* Borders overrides */
+			dialog.no-border {
+				border: none !important;
+			}
+
+			/* Modal Styles */
+			dialog.modal {
+				background-color: var(--surface-container-low);
+				box-shadow: var(--elevate3);
+				z-index: 100;
+			}
+
+			/* Backdrop for Modal */
+			dialog::backdrop {
+				background-color: rgba(0, 0, 0, 0.4);
+				opacity: 0;
+				transition: opacity var(--speed3);
+			}
+
+			/* Opened State */
+			dialog.opened {
+				opacity: 1;
+				visibility: visible;
+				transform: translateX(0);
+			}
+
+			dialog.opened::backdrop {
+				opacity: 1;
+			}
+
+			/* Drag handle */
+			.handle {
+				position: absolute;
+				top: 50%;
+				width: 4px;
+				height: 48px;
+				background: var(--outline-variant);
+				border-radius: 999px;
+				cursor: grab;
+				transform: translateY(-50%);
+				touch-action: none;
+				z-index: 10;
+				opacity: 0.8;
+				transition: background-color var(--speed1);
+			}
+			.handle:hover {
+				background: var(--on-surface-variant);
+			}
+			.handle:active {
+				background: var(--on-surface-variant);
+				cursor: grabbing;
+			}
+
+			dialog.right .handle {
+				left: 6px;
+			}
+
+			dialog.left .handle {
+				right: 6px;
+			}
+
+			/* Header & Spacing */
+			header {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				padding: 1.25rem 1.5rem 0.75rem;
+				gap: 0.5rem;
+				cursor: grab;
+				touch-action: none;
+				user-select: none;
+			}
+			header:active {
+				cursor: grabbing;
+			}
+
+			.header-start {
+				display: flex;
+				align-items: center;
+				gap: 0.75rem;
+				flex: 1;
+			}
+
+			.headline {
+				font-size: 1.5rem;
+				font-weight: 400;
+				margin: 0;
+				color: var(--on-surface);
+			}
+
+			.content {
+				flex: 1;
+				overflow-y: auto;
+				padding: 0 1.5rem 1.5rem;
+			}
+
+			footer {
+				display: flex;
+				align-items: center;
+				justify-content: flex-start;
+				padding: 1rem 1.5rem 1.5rem;
+				gap: 0.5rem;
+				border-top: 1px solid var(--outline-variant);
+			}
+
+			footer.no-border {
+				border-top: none !important;
+			}
+
+			/* If no footer slot is passed, hide it */
+			footer:not(:has(slot[name="footer"])) {
+				display: none;
+			}
+		`
+    ]; }
+    render() {
+        const classes = [
+            this.side,
+            this.modal ? 'modal' : 'standard',
+            this.detached ? 'detached' : '',
+            this.noBorder ? 'no-border' : ''
+        ].filter(Boolean).join(' ');
+        return html `
+			<dialog
+				part="dialog"
+				?open=${this.open}
+				class=${classes}
+				@click=${this._onDialogClick}
+				@pointerdown=${this._onPointerDown}
+				@pointermove=${this._onPointerMove}
+				@pointerup=${this._onPointerUp}
+				@pointercancel=${this._onPointerCancel}
+			>
+				${this.withHandle ? html `<div class="handle" aria-hidden="true"></div>` : ''}
+				<header part="header">
+					<div class="header-start">
+						${this.showBack
+            ? html `
+									<moni-button
+										variant="icon"
+										@click=${this._onBackClick}
+										aria-label="Volver"
+									>
+										<moni-icon>arrow_back</moni-icon>
+									</moni-button>
+							  `
+            : ''}
+						<slot name="header">
+							<h2 class="headline">${this.title}</h2>
+						</slot>
+					</div>
+					${!this.hideClose
+            ? html `
+								<moni-button
+									variant="icon"
+									@click=${this._onCloseClick}
+									aria-label="Cerrar"
+								>
+									<moni-icon>close</moni-icon>
+								</moni-button>
+						  `
+            : ''}
+				</header>
+				<div class="content" part="content">
+					<slot></slot>
+				</div>
+				<footer class=${this.noBorder ? 'no-border' : ''} part="footer">
+					<slot name="footer"></slot>
+				</footer>
+			</dialog>
+		`;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniSideSheet.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniSideSheet.prototype, "modal", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniSideSheet.prototype, "side", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniSideSheet.prototype, "title", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniSideSheet.prototype, "detached", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'show-back' })
+], MoniSideSheet.prototype, "showBack", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'no-border' })
+], MoniSideSheet.prototype, "noBorder", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'with-handle' })
+], MoniSideSheet.prototype, "withHandle", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'hide-close' })
+], MoniSideSheet.prototype, "hideClose", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'expanded-width' })
+], MoniSideSheet.prototype, "expandedWidth", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'max-width' })
+], MoniSideSheet.prototype, "maxWidth", void 0);
+__decorate([
+    query('dialog')
+], MoniSideSheet.prototype, "_dialog", void 0);
+MoniSideSheet = __decorate([
+    customElement('moni-side-sheet')
+], MoniSideSheet);
+export { MoniSideSheet };
+export default MoniSideSheet;

package/dist/components/moni-slider.d.ts

@@ -0,0 +1,73 @@
+import { MoniElement } from './_base/index.js';
+import './moni-icon.js';
+/**
+ * Slider that faithfully ports BeerCSS's `.slider` styles.
+ *
+ * Fixes:
+ *  - Uses @state() for internal reactive values so CSS vars update on every input
+ *  - Track visual (span) and tooltip positions update immediately on drag
+ *
+ * M3 spec (`m3-docs/components/sliders/specs.md`):
+ *  - Continuous slider: smooth drag between min/max.
+ *  - Discrete slider: snap to `step` intervals; tick marks visible.
+ *  - Tick marks: in Chrome/Edge, native `<datalist>` ticks render at every
+ *    option value. In Firefox, the datalist ticks are not rendered for
+ *    range inputs; consumers can use `tick-interval` to manually generate
+ *    a visual fallback if needed (P3.4 — outside the scope of this release).
+ *  - State layer: hover/focus state uses CSS `::before` overlay at 0.08/0.12
+ *    opacity per M3 (handled by `interaction-styles.ts`).
+ *
+ * Attributes:
+ *  - name, min, max, step, value, disabled
+ *  - size:       tiny | small | medium (default) | large | extra
+ *  - vertical:   present → rotated
+ *  - range:      present → two thumbs
+ *  - ticks:      present → datalist with min/max marks
+ *  - tick-interval: number — when set, generates datalist options every
+ *                    N units between min and max. Overrides `ticks`.
+ *  - indicator:  present → show value tooltip on focus
+ *  - indicator-placement: top (default) | bottom
+ *  - inset-icon: Material Symbols name inside the colored track
+ */
+export declare class MoniSlider extends MoniElement {
+    name: string;
+    min: string;
+    max: string;
+    step: string;
+    tickInterval: number | null;
+    insetIcon: string;
+    indicatorPlacement: 'top' | 'bottom';
+    size: 'tiny' | 'small' | 'medium' | 'large' | 'extra';
+    range: boolean;
+    disabled: boolean;
+    ticks: boolean;
+    indicator: boolean;
+    isVertical: boolean;
+    /** Internal reactive state — triggers CSS var updates on every input event */
+    private _value;
+    private _valueEnd;
+    get value(): string;
+    set value(v: string);
+    get valueEnd(): string;
+    set valueEnd(v: string);
+    private _pct;
+    private _onInput;
+    private _onChange;
+    /**
+     * Render a `<datalist>` element with tick options. When `tick-interval`
+     * is set, generates options at every N units between min and max.
+     * Otherwise, if `ticks` is set, just min and max.
+     * Browsers that support datalist ticks for range (Chrome, Edge) will
+     * render visual marks; Firefox ignores them.
+     */
+    private _renderDatalist;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-slider': MoniSlider;
+    }
+}
+export default MoniSlider;
+//# sourceMappingURL=moni-slider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"moni-slider.d.ts","sourceRoot":"","sources":["../../src/components/moni-slider.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBACa,UAAW,SAAQ,WAAW;IACb,IAAI,SAAM;IACV,GAAG,SAAO;IACV,GAAG,SAAS;IACZ,IAAI,SAAM;IAEvC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAQ;IACmB,SAAS,SAAM;IAErE,kBAAkB,EAAE,KAAK,GAAG,QAAQ,CAAS;IAE7C,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAY;IAGrB,KAAK,UAAS;IACd,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,SAAS,UAAS;IACK,UAAU,UAAS;IAEtF,8EAA8E;IACrE,OAAO,CAAC,MAAM,CAAQ;IACtB,OAAO,CAAC,SAAS,CAAQ;IAElC,IACI,KAAK,IACI,MAAM,CADgB;IACnC,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAAsB;IAEzC,IACI,QAAQ,IACI,MAAM,CADmB;IACzC,IAAI,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAyB;IAE/C,OAAO,CAAC,IAAI;IAOZ,OAAO,CAAC,QAAQ;IAUhB,OAAO,CAAC,SAAS;IAUjB;;;;;;OAMG;IACH,OAAO,CAAC,eAAe;IAsBvB,OAAgB,MAAM,4BA0MpB;IAEO,MAAM;CAkDf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD;AAED,eAAe,UAAU,CAAC"}