@moni-labs/moni-ui 0.2.0

package/dist/components/moni-color-field.js

@@ -0,0 +1,170 @@
+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, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { MoniElement, sharedStyles, fieldStyles } from './_base/index.js';
+/**
+ * Visual-only color field. Renders a hidden `<input type="color">` plus a
+ * preview swatch and a read-only text display of the current value.
+ *
+ * Attributes:
+ *  - name, label, value, variant, size, shape, disabled, helper, error,
+ *    error-text, placeholder — see moni-text-field.
+ */
+let MoniColorField = class MoniColorField extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.name = '';
+        this.label = '';
+        this.variant = 'outlined';
+        this.size = 'medium';
+        this.shape = 'no-round';
+        this.disabled = false;
+        this.helper = '';
+        this.errorText = '';
+        this.error = false;
+        this.value = '#6750a4';
+    }
+    updated(changed) {
+        if (changed.has('value')) {
+            if (this._colorInput)
+                this._colorInput.value = this.value;
+            if (this._textInput)
+                this._textInput.value = this.value;
+        }
+        if (changed.has('disabled')) {
+            if (this._colorInput)
+                this._colorInput.disabled = this.disabled;
+            if (this._textInput)
+                this._textInput.disabled = this.disabled;
+        }
+    }
+    static { this.styles = [
+        sharedStyles,
+        fieldStyles,
+        css `
+			.swatch {
+				inline-size: 1.5rem;
+				block-size: 1.5rem;
+				border-radius: 50%;
+				border: 0.0625rem solid var(--outline);
+				background-color: var(--_swatch, currentColor);
+				position: absolute;
+				inset: calc(50% - 0.75rem) auto auto 0.75rem;
+				pointer-events: none;
+				z-index: 1;
+			}
+			input[type='text'] {
+				padding-inline-start: 2.5rem !important;
+			}
+			input[type='color'] {
+				position: absolute;
+				inset: 0;
+				opacity: 0;
+				z-index: 2;
+				cursor: pointer;
+			}
+		`
+    ]; }
+    render() {
+        const isActive = Boolean(this.value);
+        const fieldClasses = {
+            field: true,
+            label: Boolean(this.label),
+            fill: this.variant === 'filled',
+            border: this.variant === 'outlined',
+            small: this.size === 'small',
+            large: this.size === 'large',
+            extra: this.size === 'extra',
+            prefix: true,
+            invalid: this.error,
+            round: this.shape === 'round',
+            square: this.shape === 'no-round'
+        };
+        return html `<div class=${classMap(fieldClasses)} part="field">
+			<span
+				class="swatch"
+				style="--_swatch: ${this.value};"
+				aria-hidden="true"
+			></span>
+			<input
+				type="color"
+				part="color"
+				.value=${this.value}
+				?disabled=${this.disabled}
+				name=${ifDefined(this.name ? `${this.name}-color` : undefined)}
+				tabindex="-1"
+			/>
+			<input
+				type="text"
+				part="text"
+				readonly
+				.value=${this.value}
+				?disabled=${this.disabled}
+				name=${ifDefined(this.name || undefined)}
+				class=${isActive ? 'active' : ''}
+			/>
+			${this.label
+            ? html `<label
+						part="label"
+						class=${classMap({ active: isActive })}
+						>${this.label}</label
+					>`
+            : nothing}
+			${this.error
+            ? html `<output part="helper" class="invalid"
+						>${this.errorText || this.helper}</output
+					>`
+            : this.helper
+                ? html `<output part="helper">${this.helper}</output>`
+                : nothing}
+		</div>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniColorField.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniColorField.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniColorField.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniColorField.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniColorField.prototype, "shape", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniColorField.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniColorField.prototype, "helper", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'error-text' })
+], MoniColorField.prototype, "errorText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniColorField.prototype, "error", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniColorField.prototype, "value", void 0);
+__decorate([
+    query('input[type="color"]')
+], MoniColorField.prototype, "_colorInput", void 0);
+__decorate([
+    query('input[type="text"]')
+], MoniColorField.prototype, "_textInput", void 0);
+MoniColorField = __decorate([
+    customElement('moni-color-field')
+], MoniColorField);
+export { MoniColorField };
+export default MoniColorField;

package/dist/components/moni-context-menu.d.ts

@@ -0,0 +1,55 @@
+import { MoniElement } from './_base/index.js';
+import './moni-menu.js';
+/**
+ * Context menu triggered by right-click on the parent element.
+ *
+ * **Usage** (`m3-docs/components/menus/guidelines.md`): the menu opens at
+ * the cursor's coordinates and flips to the opposite side if there isn't
+ * enough space in the viewport.
+ *
+ * **Wiring example**:
+ *   ```html
+ *   <div style="position: relative;">
+ *     <moni-context-menu flip>
+ *       <moni-menu-item>Cut</moni-menu-item>
+ *       <moni-menu-item>Copy</moni-menu-item>
+ *       <moni-menu-item>Paste</moni-menu-item>
+ *     </moni-context-menu>
+ *     Right-click anywhere in this div
+ *   </div>
+ *   ```
+ *
+ * Attributes:
+ *  - placement: bottom (default) | top | left | right
+ *  - flip:      present → auto-flip to opposite side if menu would overflow
+ *               the viewport (M3 spec)
+ *
+ * Slots:
+ *  - default: menu items
+ */
+export declare class MoniContextMenu extends MoniElement {
+    placement: 'bottom' | 'top' | 'left' | 'right';
+    flip: boolean;
+    private _x;
+    private _y;
+    private _open;
+    private _resolvedPlacement;
+    private _menuEl?;
+    private _target;
+    private _docKeydown;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onContextMenu;
+    private _maybeFlip;
+    private _onDocumentClick;
+    private _onDocKeydown;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-context-menu': MoniContextMenu;
+    }
+}
+export default MoniContextMenu;
+//# sourceMappingURL=moni-context-menu.d.ts.map

package/dist/components/moni-context-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"moni-context-menu.d.ts","sourceRoot":"","sources":["../../src/components/moni-context-menu.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBACa,eAAgB,SAAQ,WAAW;IAE/C,SAAS,EAAE,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAY;IACd,IAAI,UAAS;IAEhD,OAAO,CAAC,EAAE,CAAK;IACf,OAAO,CAAC,EAAE,CAAK;IACf,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,kBAAkB,CAAiD;IAEhE,OAAO,CAAC,OAAO,CAAC,CAAc;IAElD,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,WAAW,CAA+C;IAEzD,iBAAiB;IAejB,oBAAoB;IAS7B,OAAO,CAAC,cAAc,CAcpB;IAEF,OAAO,CAAC,UAAU;IAoBlB,OAAO,CAAC,gBAAgB,CAItB;IAEF,OAAO,CAAC,aAAa,CAInB;IAEF,OAAgB,MAAM,4BAgBpB;IAEO,MAAM;CAmBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD;AAED,eAAe,eAAe,CAAC"}

package/dist/components/moni-context-menu.js

@@ -0,0 +1,184 @@
+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, state, query } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+import './moni-menu.js';
+/**
+ * Context menu triggered by right-click on the parent element.
+ *
+ * **Usage** (`m3-docs/components/menus/guidelines.md`): the menu opens at
+ * the cursor's coordinates and flips to the opposite side if there isn't
+ * enough space in the viewport.
+ *
+ * **Wiring example**:
+ *   ```html
+ *   <div style="position: relative;">
+ *     <moni-context-menu flip>
+ *       <moni-menu-item>Cut</moni-menu-item>
+ *       <moni-menu-item>Copy</moni-menu-item>
+ *       <moni-menu-item>Paste</moni-menu-item>
+ *     </moni-context-menu>
+ *     Right-click anywhere in this div
+ *   </div>
+ *   ```
+ *
+ * Attributes:
+ *  - placement: bottom (default) | top | left | right
+ *  - flip:      present → auto-flip to opposite side if menu would overflow
+ *               the viewport (M3 spec)
+ *
+ * Slots:
+ *  - default: menu items
+ */
+let MoniContextMenu = class MoniContextMenu extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.placement = 'bottom';
+        this.flip = false;
+        this._x = 0;
+        this._y = 0;
+        this._open = false;
+        this._resolvedPlacement = 'bottom';
+        this._target = null;
+        this._docKeydown = (e) => this._onDocKeydown(e);
+        this._onContextMenu = (e) => {
+            e.preventDefault();
+            if (this._target) {
+                const rect = this._target.getBoundingClientRect();
+                this._x = e.clientX - rect.left;
+                this._y = e.clientY - rect.top;
+            }
+            else {
+                this._x = e.clientX;
+                this._y = e.clientY;
+            }
+            this._resolvedPlacement = this.placement;
+            this._open = true;
+            // After Lit renders the menu, check viewport fit and flip if needed.
+            this.updateComplete.then(() => this._maybeFlip());
+        };
+        this._onDocumentClick = () => {
+            if (this._open) {
+                this._open = false;
+            }
+        };
+        this._onDocKeydown = (e) => {
+            if (e.key === 'Escape' && this._open) {
+                this._open = false;
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._target = this.parentElement;
+        if (this._target) {
+            const computed = getComputedStyle(this._target);
+            if (computed.position === 'static') {
+                this._target.style.position = 'relative';
+            }
+            this._target.addEventListener('contextmenu', this._onContextMenu);
+        }
+        // Close on click outside
+        document.addEventListener('click', this._onDocumentClick);
+        document.addEventListener('keydown', this._docKeydown);
+    }
+    disconnectedCallback() {
+        if (this._target) {
+            this._target.removeEventListener('contextmenu', this._onContextMenu);
+        }
+        document.removeEventListener('click', this._onDocumentClick);
+        document.removeEventListener('keydown', this._docKeydown);
+        super.disconnectedCallback();
+    }
+    _maybeFlip() {
+        if (!this.flip)
+            return;
+        const menu = this._menuEl?.shadowRoot?.querySelector('menu');
+        if (!menu)
+            return;
+        const rect = menu.getBoundingClientRect();
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const overflowsBottom = rect.bottom > vh;
+        const overflowsRight = rect.right > vw;
+        if (this.placement === 'bottom' && overflowsBottom) {
+            this._resolvedPlacement = 'top';
+        }
+        else if (this.placement === 'top' && rect.top < 0) {
+            this._resolvedPlacement = 'bottom';
+        }
+        else if (this.placement === 'right' && overflowsRight) {
+            this._resolvedPlacement = 'left';
+        }
+        else if (this.placement === 'left' && rect.left < 0) {
+            this._resolvedPlacement = 'right';
+        }
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				display: contents;
+				font-family: var(--font);
+			}
+
+			.menu-host {
+				/* Absolute from parent which has position:relative */
+				position: absolute;
+				inset-inline-start: var(--_x, 0);
+				inset-block-start: var(--_y, 0);
+				z-index: 200;
+			}
+		`
+    ]; }
+    render() {
+        // When the menu is open, prefer the resolved (possibly flipped)
+        // placement; otherwise just use the host's requested placement so
+        // the inner element reflects the attribute synchronously.
+        const effectivePlacement = this._open
+            ? this._resolvedPlacement
+            : this.placement;
+        return html `<div
+			class="menu-host"
+			style="--_x: ${this._x}px; --_y: ${this._y}px;"
+		>
+			<moni-menu
+				placement=${effectivePlacement}
+				?active=${this._open}
+			>
+				<slot></slot>
+			</moni-menu>
+		</div>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniContextMenu.prototype, "placement", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniContextMenu.prototype, "flip", void 0);
+__decorate([
+    state()
+], MoniContextMenu.prototype, "_x", void 0);
+__decorate([
+    state()
+], MoniContextMenu.prototype, "_y", void 0);
+__decorate([
+    state()
+], MoniContextMenu.prototype, "_open", void 0);
+__decorate([
+    state()
+], MoniContextMenu.prototype, "_resolvedPlacement", void 0);
+__decorate([
+    query('moni-menu')
+], MoniContextMenu.prototype, "_menuEl", void 0);
+MoniContextMenu = __decorate([
+    customElement('moni-context-menu')
+], MoniContextMenu);
+export { MoniContextMenu };
+export default MoniContextMenu;

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

@@ -0,0 +1,37 @@
+import { MoniElement } from './_base/index.js';
+/**
+ * Visual-only dialog. Renders a native `<dialog>` element. The consumer
+ * opens/closes by calling the native `show()` / `showModal()` /
+ * `close()` / `showPopover()` methods on the inner dialog via
+ * `this.querySelector('dialog')` from the light DOM.
+ *
+ * Attributes:
+ *  - open:   present → dialog[open]
+ *  - side:   center (default) | top | right | bottom | left | max
+ *  - size:   small | medium (default) | large
+ *  - modal:  present → adds the `modal` class (used by BeerCSS)
+ *  - title:  header text
+ *
+ * Slots:
+ *  - default: body
+ *  - header:  title
+ *  - footer:  action buttons
+ */
+export declare class MoniDialog extends MoniElement {
+    open: boolean;
+    modal: boolean;
+    side: 'center' | 'top' | 'right' | 'bottom' | 'left' | 'max';
+    size: 'small' | 'medium' | 'large';
+    title: string;
+    private _dialog;
+    updated(changed: Map<string, unknown>): void;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-dialog': MoniDialog;
+    }
+}
+export default MoniDialog;
+//# sourceMappingURL=moni-dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"moni-dialog.d.ts","sourceRoot":"","sources":["../../src/components/moni-dialog.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,UAAW,SAAQ,WAAW;IACE,IAAI,UAAS;IACb,KAAK,UAAS;IAE1D,IAAI,EAAE,QAAQ,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,CAAY;IAExE,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IACjB,KAAK,SAAM;IAEvB,OAAO,CAAC,OAAO,CAAqB;IAE5C,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAoB9C,OAAgB,MAAM,4BAgKpB;IAEO,MAAM;CAef;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD;AAED,eAAe,UAAU,CAAC"}