@moni-labs/moni-ui 0.2.0

package/dist/components/moni-badge.js

@@ -0,0 +1,153 @@
+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 } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+/**
+ * Badge that faithfully ports BeerCSS's `.badge` styles.
+ *
+ * BeerCSS `.badge` uses:
+ *  - `position: absolute; inset: 50% auto auto 50%; transform: translate(var(--_x), var(--_y))`
+ *  - Default: --_x: 0, --_y: -100% → top-right corner
+ *
+ * The parent element MUST have `position: relative` for the badge to anchor correctly.
+ * We ensure this in connectedCallback.
+ *
+ * Attributes:
+ *  - value:    text content (also accepts slotted content)
+ *  - position: '' (top-right default) | top | bottom | left | right | none
+ *  - shape:    '' (round) | circle | square | min
+ *  - color:    error (default) | primary | secondary | tertiary
+ *  - border:   present → outlined badge (BeerCSS .badge.border)
+ *  - inline:   present → badge becomes inline (BeerCSS .badge.none)
+ */
+let MoniBadge = class MoniBadge extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.value = '';
+        this.position = '';
+        this.shape = '';
+        this.color = 'error';
+        this.inline = false;
+        this.border = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // BeerCSS requirement: parent must be position:relative for badge to anchor
+        const parent = this.parentElement;
+        if (parent) {
+            const computed = getComputedStyle(parent);
+            if (computed.position === 'static') {
+                parent.style.position = 'relative';
+            }
+        }
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				display: contents;
+				font-family: var(--font);
+			}
+
+			/* BeerCSS .badge */
+			.badge {
+				--_x: 0;
+				--_y: -100%;
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				position: absolute;
+				font-size: 0.6875rem;
+				z-index: 2;
+				padding: 0 0.25rem;
+				min-block-size: 1rem;
+				min-inline-size: 1rem;
+				background-color: var(--error);
+				color: var(--on-error);
+				line-height: normal;
+				border-radius: 1rem;
+				/* BeerCSS: inset:50% auto auto 50% + translate */
+				inset: 50% auto auto 50%;
+				transform: translate(var(--_x, 0), var(--_y, -100%));
+				font-family: var(--font);
+				box-sizing: border-box;
+			}
+
+			/* Position variants — BeerCSS */
+			.badge.top    { --_y: -100%; }
+			.badge.bottom { --_y: 0; }
+			.badge.left   { --_x: -100%; }
+			.badge.right  { --_x: 0; }
+
+			/* BeerCSS .badge.none = inline positioning */
+			.badge.none {
+				inset: auto !important;
+				transform: none;
+				position: relative;
+				margin: 0 0.125rem;
+			}
+
+			/* Color variants */
+			:host([color='primary'])   .badge { background-color: var(--primary);   color: var(--on-primary); }
+			:host([color='secondary']) .badge { background-color: var(--secondary); color: var(--on-secondary); }
+			:host([color='tertiary'])  .badge { background-color: var(--tertiary);  color: var(--on-tertiary); }
+			:host([color='error'])     .badge { background-color: var(--error);     color: var(--on-error); }
+
+			/* BeerCSS .badge.border */
+			:host([border]) .badge {
+				border-color: var(--error);
+				color: var(--error);
+				background-color: var(--surface);
+			}
+			:host([border][color='primary'])   .badge { border-color: var(--primary);   color: var(--primary); }
+			:host([border][color='secondary']) .badge { border-color: var(--secondary); color: var(--secondary); }
+			:host([border][color='tertiary'])  .badge { border-color: var(--tertiary);  color: var(--tertiary); }
+
+			/* Shape variants */
+			.badge.square { border-radius: 0; }
+
+			/* BeerCSS .badge.min — dot only, content hidden */
+			.badge.min > * { display: none; }
+			.badge.min { clip-path: circle(18.75% at 50% 50%); }
+		`
+    ]; }
+    render() {
+        const classes = [
+            'badge',
+            this.position || '',
+            this.shape || '',
+            this.inline ? 'none' : ''
+        ].filter(Boolean).join(' ');
+        return html `<span class=${classes} part="badge">
+			<slot>${this.value}</slot>
+		</span>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniBadge.prototype, "value", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniBadge.prototype, "position", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniBadge.prototype, "shape", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniBadge.prototype, "color", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniBadge.prototype, "inline", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniBadge.prototype, "border", void 0);
+MoniBadge = __decorate([
+    customElement('moni-badge')
+], MoniBadge);
+export { MoniBadge };
+export default MoniBadge;

package/dist/components/moni-bottom-sheet.d.ts

@@ -0,0 +1,52 @@
+import { MoniElement } from './_base/index.js';
+/**
+ * Visual-only bottom sheet. Renders a `<dialog>` that the consumer opens
+ * by calling `dialog.showModal()` from the light DOM. The `open` attribute
+ * mirrors that state.
+ *
+ * Attributes:
+ *  - open:  present → visibility on
+ *  - size:  small | medium (default) | large | auto
+ *  - modal: present → backdrop rendered
+ *  - title: heading text
+ *
+ * Slots:
+ *  - handle:  grab handle
+ *  - default: body
+ *  - footer:  action buttons
+ */
+export declare class MoniBottomSheet extends MoniElement {
+    open: boolean;
+    size: 'small' | 'medium' | 'large' | 'auto';
+    modal: boolean;
+    title: string;
+    positioning: 'body' | 'fixed' | 'absolute' | 'static';
+    expandedHeight: string;
+    maxWidth: string;
+    private _originalParent;
+    private _originalSibling;
+    private _dialog;
+    private _isDragging;
+    private _startY;
+    private _currentTranslationY;
+    private _sheetHeight;
+    private _defaultHeight;
+    private _justDragged;
+    private _getMaxHeightPx;
+    private _onPointerDown;
+    private _onPointerMove;
+    private _onPointerUp;
+    private _onPointerCancel;
+    private _onDialogClick;
+    updated(changed: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-bottom-sheet': MoniBottomSheet;
+    }
+}
+export default MoniBottomSheet;
+//# sourceMappingURL=moni-bottom-sheet.d.ts.map

package/dist/components/moni-bottom-sheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"moni-bottom-sheet.d.ts","sourceRoot":"","sources":["../../src/components/moni-bottom-sheet.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;GAeG;AACH,qBACa,eAAgB,SAAQ,WAAW;IACH,IAAI,UAAS;IAEzD,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAY;IACX,KAAK,UAAQ;IAC5B,KAAK,SAAM;IAExC,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAW;IAEhE,cAAc,SAAS;IAEvB,QAAQ,SAAM;IAEd,OAAO,CAAC,eAAe,CAAqB;IAC5C,OAAO,CAAC,gBAAgB,CAAqB;IAE5B,OAAO,CAAC,OAAO,CAAqB;IAErD,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,oBAAoB,CAAK;IACjC,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,eAAe;IAcvB,OAAO,CAAC,cAAc;IAkBtB,OAAO,CAAC,cAAc;IAkCtB,OAAO,CAAC,YAAY;IAwFpB,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,cAAc;IAyBb,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IA4BrC,oBAAoB;IAO7B,OAAgB,MAAM,4BAyHpB;IAEO,MAAM;CAsBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD;AAED,eAAe,eAAe,CAAC"}

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

@@ -0,0 +1,440 @@
+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';
+/**
+ * Visual-only bottom sheet. Renders a `<dialog>` that the consumer opens
+ * by calling `dialog.showModal()` from the light DOM. The `open` attribute
+ * mirrors that state.
+ *
+ * Attributes:
+ *  - open:  present → visibility on
+ *  - size:  small | medium (default) | large | auto
+ *  - modal: present → backdrop rendered
+ *  - title: heading text
+ *
+ * Slots:
+ *  - handle:  grab handle
+ *  - default: body
+ *  - footer:  action buttons
+ */
+let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.size = 'medium';
+        this.modal = true;
+        this.title = '';
+        this.positioning = 'fixed';
+        this.expandedHeight = '85%';
+        this.maxWidth = '';
+        this._originalParent = null;
+        this._originalSibling = null;
+        this._isDragging = false;
+        this._startY = 0;
+        this._currentTranslationY = 0;
+        this._sheetHeight = 0;
+        this._defaultHeight = 0;
+        this._justDragged = false;
+    }
+    _getMaxHeightPx() {
+        const val = this.expandedHeight || '85%';
+        if (val.endsWith('%')) {
+            return window.innerHeight * (parseFloat(val) / 100);
+        }
+        if (val.endsWith('vh')) {
+            return window.innerHeight * (parseFloat(val) / 100);
+        }
+        if (val.endsWith('px')) {
+            return parseFloat(val);
+        }
+        return window.innerHeight * 0.85;
+    }
+    _onPointerDown(e) {
+        const target = e.target;
+        if (!target.closest('.handle') && !target.closest('header'))
+            return;
+        this._isDragging = true;
+        this._startY = e.clientY;
+        this._sheetHeight = this._dialog.getBoundingClientRect().height;
+        this._currentTranslationY = 0;
+        const isExpanded = this._dialog.classList.contains('expanded');
+        if (!isExpanded) {
+            this._defaultHeight = this._sheetHeight;
+        }
+        target.setPointerCapture(e.pointerId);
+        this._dialog.classList.add('dragging');
+    }
+    _onPointerMove(e) {
+        if (!this._isDragging)
+            return;
+        const deltaY = e.clientY - this._startY;
+        const isExpanded = this._dialog.classList.contains('expanded');
+        const maxHeight = this._getMaxHeightPx();
+        if (isExpanded) {
+            if (deltaY > 0) {
+                // Dragging down from expanded: shrink height
+                const newHeight = this._sheetHeight - deltaY;
+                this._dialog.style.transform = '';
+                this._dialog.style.height = `${Math.max(0, newHeight)}px`;
+            }
+            else {
+                // Pulling up from expanded: resistance
+                const newHeight = this._sheetHeight - deltaY * 0.2;
+                this._dialog.style.transform = '';
+                this._dialog.style.height = `${Math.min(maxHeight, newHeight)}px`;
+            }
+        }
+        else {
+            if (deltaY > 0) {
+                // Dragging down from normal: translate down
+                this._currentTranslationY = deltaY;
+                this._dialog.style.transform = `translateY(${deltaY}px)`;
+                this._dialog.style.height = '';
+            }
+            else {
+                // Dragging up from normal: grow height
+                const newHeight = this._sheetHeight - deltaY;
+                this._dialog.style.transform = '';
+                this._dialog.style.height = `${Math.min(maxHeight, newHeight)}px`;
+            }
+        }
+    }
+    _onPointerUp(e) {
+        if (!this._isDragging)
+            return;
+        const target = e.target;
+        target.releasePointerCapture(e.pointerId);
+        this._isDragging = false;
+        this._dialog.classList.remove('dragging');
+        const deltaY = e.clientY - this._startY;
+        if (Math.abs(deltaY) > 5) {
+            this._justDragged = true;
+            setTimeout(() => {
+                this._justDragged = false;
+            }, 50);
+        }
+        const isExpanded = this._dialog.classList.contains('expanded');
+        const maxHeight = this._getMaxHeightPx();
+        if (isExpanded) {
+            const finalHeight = this._sheetHeight - deltaY;
+            if (finalHeight < this._defaultHeight - 80) {
+                // Close completely
+                this._dialog.classList.remove('expanded');
+                this._dialog.style.transform = 'translateY(100%)';
+                this._dialog.style.height = '';
+                const onTransitionEnd = () => {
+                    this._dialog.removeEventListener('transitionend', onTransitionEnd);
+                    this._dialog.style.transform = '';
+                    this._dialog.style.height = '';
+                    this.open = false;
+                    this.dispatchEvent(new CustomEvent('close'));
+                };
+                this._dialog.addEventListener('transitionend', onTransitionEnd);
+                setTimeout(() => {
+                    if (this.open)
+                        onTransitionEnd();
+                }, 300);
+            }
+            else if (finalHeight < (maxHeight + this._defaultHeight) / 2) {
+                // Collapse back to normal height
+                this._dialog.classList.remove('expanded');
+                this._dialog.style.transform = '';
+                this._dialog.style.height = '';
+            }
+            else {
+                // Snap back to expanded
+                this._dialog.style.transform = '';
+                this._dialog.style.height = '';
+            }
+        }
+        else {
+            if (deltaY < 0) {
+                // Dragged up
+                const finalHeight = this._sheetHeight - deltaY;
+                const threshold = (maxHeight + this._sheetHeight) / 2;
+                if (finalHeight > threshold || -deltaY > 80) {
+                    // Snap to expanded
+                    this._dialog.classList.add('expanded');
+                    this._dialog.style.transform = '';
+                    this._dialog.style.height = '';
+                }
+                else {
+                    // Revert to normal
+                    this._dialog.style.transform = '';
+                    this._dialog.style.height = '';
+                }
+            }
+            else {
+                // Dragged down
+                const threshold = Math.min(150, this._sheetHeight * 0.4);
+                if (this._currentTranslationY > threshold) {
+                    this._dialog.style.transform = 'translateY(100%)';
+                    this._dialog.style.height = '';
+                    const onTransitionEnd = () => {
+                        this._dialog.removeEventListener('transitionend', onTransitionEnd);
+                        this._dialog.style.transform = '';
+                        this._dialog.style.height = '';
+                        this.open = false;
+                        this.dispatchEvent(new CustomEvent('close'));
+                    };
+                    this._dialog.addEventListener('transitionend', onTransitionEnd);
+                    setTimeout(() => {
+                        if (this.open)
+                            onTransitionEnd();
+                    }, 300);
+                }
+                else {
+                    this._dialog.style.transform = '';
+                    this._dialog.style.height = '';
+                }
+            }
+        }
+    }
+    _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.height = '';
+    }
+    _onDialogClick(e) {
+        if (this._justDragged) {
+            this._justDragged = false;
+            return;
+        }
+        if (!this.modal)
+            return;
+        // Click on backdrop targets the dialog element itself. Clicks on children target the children.
+        if (e.target !== this._dialog)
+            return;
+        this._dialog.style.transform = 'translateY(100%)';
+        this._dialog.style.height = '';
+        const onTransitionEnd = () => {
+            this._dialog.removeEventListener('transitionend', onTransitionEnd);
+            this._dialog.style.transform = '';
+            this._dialog.style.height = '';
+            this.open = false;
+            this.dispatchEvent(new CustomEvent('close'));
+        };
+        this._dialog.addEventListener('transitionend', onTransitionEnd);
+        setTimeout(() => {
+            if (this.open)
+                onTransitionEnd();
+        }, 300);
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('expandedHeight')) {
+            this.style.setProperty('--moni-bottom-sheet-expanded-height', this.expandedHeight);
+        }
+        if (changed.has('maxWidth')) {
+            this.style.setProperty('--moni-bottom-sheet-max-width', this.maxWidth || '100%');
+        }
+        if (changed.has('open')) {
+            if (this.open) {
+                if (this.positioning === 'body' && this.parentNode !== document.body) {
+                    this._originalParent = this.parentNode;
+                    this._originalSibling = this.nextSibling;
+                    document.body.appendChild(this);
+                }
+            }
+            else {
+                if (this._dialog) {
+                    this._dialog.classList.remove('expanded');
+                }
+                if (this.positioning === 'body' && this._originalParent && this.parentNode === document.body) {
+                    this._originalParent.insertBefore(this, this._originalSibling);
+                    this._originalParent = null;
+                    this._originalSibling = null;
+                }
+            }
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.parentNode === document.body && this.positioning === 'body' && this._originalParent) {
+            this._originalParent.insertBefore(this, this._originalSibling);
+        }
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				display: contents;
+			}
+
+			dialog {
+				--_padding: 1rem;
+				display: block;
+				visibility: hidden;
+				border: none;
+				opacity: 0;
+				box-shadow: var(--elevate3);
+				color: var(--on-surface);
+				background-color: var(--surface);
+				padding: var(--_padding);
+				z-index: 100;
+				inline-size: 100%;
+				max-inline-size: var(--moni-bottom-sheet-max-width, 100%);
+				margin-inline: auto;
+				block-size: auto;
+				max-block-size: var(--moni-bottom-sheet-expanded-height, 85%);
+				min-inline-size: auto;
+				border-radius: 1.75rem 1.75rem 0 0;
+				overflow-y: auto;
+				transition:
+					transform var(--speed3),
+					height var(--speed3),
+					opacity var(--speed3);
+				transform: translateY(100%);
+				outline: none;
+			}
+
+			dialog[open] {
+				visibility: visible;
+				opacity: 1;
+				transform: translateY(0);
+			}
+
+			dialog.fixed {
+				position: fixed;
+				inset: auto 0 0 0;
+			}
+
+			dialog.absolute {
+				position: absolute;
+				inset: auto 0 0 0;
+			}
+
+			dialog.static {
+				position: relative;
+				inset: auto;
+				transform: none !important;
+				opacity: 1 !important;
+				visibility: visible !important;
+				display: none;
+			}
+			dialog.static[open] {
+				display: block;
+			}
+
+			dialog.dragging {
+				transition: none !important;
+			}
+
+			dialog.small {
+				block-size: 16rem;
+			}
+			dialog.medium {
+				block-size: 24rem;
+			}
+			dialog.large {
+				block-size: 32rem;
+			}
+			dialog.auto {
+				block-size: auto;
+			}
+
+			dialog.expanded {
+				block-size: var(--moni-bottom-sheet-expanded-height, 85%) !important;
+			}
+
+			header,
+			footer {
+				display: grid;
+				align-content: center;
+				border-radius: 0;
+				padding: 0;
+			}
+			header {
+				min-block-size: 3rem;
+				padding-block-start: 0.5rem;
+				cursor: grab;
+				touch-action: none;
+				user-select: none;
+			}
+			header:active {
+				cursor: grabbing;
+			}
+			footer {
+				min-block-size: 3.5rem;
+			}
+
+			/* M3 spec: the drag handle is a 4dp tall x 32dp wide pill at
+			   the top center of the sheet. Color is on-surface-variant with
+			   40% opacity for reduced emphasis. */
+			.handle {
+				inline-size: 2rem;
+				block-size: 0.25rem;
+				background: var(--on-surface-variant);
+				opacity: 0.4;
+				border-radius: 999px;
+				margin: 0.5rem auto 1rem;
+				cursor: grab;
+				touch-action: none;
+			}
+			.handle:active {
+				cursor: grabbing;
+			}
+		`
+    ]; }
+    render() {
+        const posClass = this.positioning === 'body' ? 'fixed' : this.positioning;
+        const dialogClasses = `${this.size} ${posClass}`;
+        return html `<dialog
+			part="dialog"
+			?open=${this.open}
+			class=${dialogClasses}
+			@click=${this._onDialogClick}
+			@pointerdown=${this._onPointerDown}
+			@pointermove=${this._onPointerMove}
+			@pointerup=${this._onPointerUp}
+			@pointercancel=${this._onPointerCancel}
+		>
+			<div class="handle" aria-hidden="true"></div>
+			<header part="header">
+				<slot name="handle">${this.title}</slot>
+			</header>
+			<div part="content"><slot></slot></div>
+			<footer part="footer"><slot name="footer"></slot></footer>
+		</dialog>`;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniBottomSheet.prototype, "open", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniBottomSheet.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniBottomSheet.prototype, "modal", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniBottomSheet.prototype, "title", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniBottomSheet.prototype, "positioning", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'expanded-height' })
+], MoniBottomSheet.prototype, "expandedHeight", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'max-width' })
+], MoniBottomSheet.prototype, "maxWidth", void 0);
+__decorate([
+    query('dialog')
+], MoniBottomSheet.prototype, "_dialog", void 0);
+MoniBottomSheet = __decorate([
+    customElement('moni-bottom-sheet')
+], MoniBottomSheet);
+export { MoniBottomSheet };
+export default MoniBottomSheet;