@moni-labs/moni-ui 0.2.0

package/dist/components/moni-menu.js

@@ -0,0 +1,295 @@
+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, state } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+/**
+ * Menu that faithfully ports BeerCSS's `menu` styles.
+ *
+ * BeerCSS uses a plain `<menu>` with class `.active` toggled by JS —
+ * NO Popover API. The menu positions itself as `position: absolute`
+ * relative to the nearest positioned ancestor.
+ *
+ * Shadow DOM note: we keep :host as `display: contents` so the inner
+ * `<menu>` can position relative to the consumer's layout context.
+ * The consumer must have `position: relative` on the trigger's wrapper.
+ *
+ * **M3 spec** (`m3-docs/components/menus/guidelines.md`): menus should
+ * auto-flip to the opposite side when there isn't enough viewport space
+ * in the requested placement.
+ *
+ * **Flip implementation** (P4.3):
+ *  - Modern browsers (Chrome 125+, Edge 125+, Safari 18+): uses CSS
+ *    `@position-try-fallback` (Baseline 2024) when `flip` is set.
+ *  - Older browsers (Firefox, Safari < 18): JS polyfill. After the menu
+ *    becomes active, we measure the inner `<menu>` rect; if it overflows
+ *    the viewport on the requested side, we set `_resolvedPlacement`
+ *    to the opposite side and the CSS picks up the change.
+ *
+ * Attributes:
+ *  - placement:  bottom (default) | top | left | right | min | max
+ *  - no-wrap:    present
+ *  - space:      no-space | space | small-space | medium-space | large-space | extra-space
+ *  - active:     present → menu is visible
+ *  - flip:       present → enable auto-flip when there is no viewport space
+ *                (works on all browsers; CSS-native when supported)
+ *
+ * Slots:
+ *  - default: menu items (moni-menu-item or li elements)
+ */
+let MoniMenu = class MoniMenu extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.placement = 'bottom';
+        this.noWrap = false;
+        this.active = false;
+        this.space = 'no-space';
+        this.flip = false;
+        this._resolvedPlacement = 'bottom';
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('active') && this.active && this.flip) {
+            // JS polyfill for browsers without @position-try-fallback.
+            // Wait one frame so the menu is laid out, then measure.
+            this.updateComplete.then(() => this._maybeFlip());
+        }
+    }
+    _maybeFlip() {
+        const menu = this._menuEl;
+        if (!menu || !this.flip)
+            return;
+        const rect = menu.getBoundingClientRect();
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const overflowsBottom = rect.bottom > vh;
+        const overflowsTop = rect.top < 0;
+        const overflowsRight = rect.right > vw;
+        const overflowsLeft = rect.left < 0;
+        if (this.placement === 'bottom' && overflowsBottom) {
+            this._resolvedPlacement = 'top';
+        }
+        else if (this.placement === 'top' && overflowsTop) {
+            this._resolvedPlacement = 'bottom';
+        }
+        else if (this.placement === 'right' && overflowsRight) {
+            this._resolvedPlacement = 'left';
+        }
+        else if (this.placement === 'left' && overflowsLeft) {
+            this._resolvedPlacement = 'right';
+        }
+        else {
+            this._resolvedPlacement = this.placement;
+        }
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				display: contents;
+				font-family: var(--font);
+			}
+
+			/* BeerCSS menu — faithful port */
+			menu {
+				opacity: 0;
+				visibility: hidden;
+				position: absolute;
+				box-shadow: var(--elevate2);
+				background-color: var(--surface-container);
+				z-index: 13;
+				inset: auto auto 0 0;
+				inline-size: 100%;
+				max-block-size: 50vh;
+				max-inline-size: none !important;
+				overflow-x: hidden;
+				overflow-y: auto;
+				font-size: 0.875rem;
+				font-weight: normal;
+				text-transform: none;
+				color: var(--on-surface);
+				line-height: normal;
+				text-align: start;
+				border-radius: 1rem;
+				transform: scale(0.8) translateY(120%);
+				transition: all var(--speed2) var(--speed2), opacity var(--speed2);
+				justify-content: flex-start;
+				padding: 0.25rem;
+				display: flex;
+				flex-direction: column;
+				gap: 0.125rem;
+				margin: 0;
+				list-style: none;
+			}
+
+			/* BeerCSS: active class shows the menu */
+			menu.active {
+				opacity: 1;
+				visibility: visible;
+				transform: scale(1) translateY(100%);
+				transition: all var(--speed2), background-color 0s;
+			}
+
+			/* Placement: top */
+			menu.top {
+				transform: scale(0.8) translateY(-120%);
+			}
+			menu.top.active {
+				transform: scale(1) translateY(-100%);
+			}
+
+			/* Placement: left / right */
+			menu.right {
+				inset: auto auto 0 0;
+			}
+			menu.left {
+				inset: auto 0 0 auto;
+			}
+
+			/* Placement: min (fixed-size dropdown) */
+			menu.min {
+				inset: 0 0 auto 0;
+				transform: scale(0.8);
+			}
+			menu.min.active {
+				transform: scale(1);
+			}
+
+			/* Placement: max (full screen overlay) */
+			menu.max {
+				position: fixed;
+				inset: 0;
+				block-size: 100%;
+				max-block-size: none;
+				min-block-size: auto;
+				z-index: 100;
+				transform: scale(0.8);
+				border-radius: 0;
+			}
+			menu.max.active {
+				transform: scale(1);
+			}
+
+			menu.no-wrap {
+				inline-size: max-content !important;
+				white-space: nowrap !important;
+			}
+
+			/* Space variants */
+			menu.no-space   { gap: 0; }
+			menu.space      { gap: 0.25rem; }
+			menu.small-space { gap: 0.25rem; }
+			menu.medium-space { gap: 0.375rem; }
+			menu.large-space  { gap: 0.5rem; }
+			menu.extra-space  { gap: 0.625rem; }
+
+			/* Slotted items */
+			::slotted(li),
+			::slotted(moni-menu-item) {
+				list-style: none;
+				display: flex;
+				align-items: center;
+				align-self: normal;
+				text-align: start;
+				gap: 1rem;
+				padding: 0.5rem 1rem;
+				min-block-size: 2.75rem;
+				cursor: pointer;
+				border-radius: 0.25rem;
+				transition: border-radius var(--speed2);
+			}
+
+			/* M3 spec: auto-flip when there is no space in the requested
+			   placement. Uses CSS anchor positioning + position-try-fallback
+			   (Baseline 2024, Chrome 125+, Edge 125+, Safari TP).
+
+			   The consumer must:
+			     1. Set anchor-name="--moni-menu-anchor" on the trigger.
+			     2. Ensure the menu can be reached via position-anchor.
+
+			   When the menu's default placement would overflow, the
+			   browser uses the first matching @position-try fallback. */
+			@supports (anchor-name: --moni-menu-anchor) {
+				:host([flip]) menu {
+					position-anchor: --moni-menu-anchor;
+					position-area: block-end;
+					inset: auto;
+					inline-size: max-content;
+					max-inline-size: 20rem;
+					position-try-fallbacks:
+						flip-block,
+						flip-inline,
+						flip-block flip-inline;
+				}
+				:host([flip][placement='top']) menu {
+					position-area: block-start;
+					position-try-fallbacks:
+						flip-block,
+						flip-inline,
+						flip-block flip-inline;
+				}
+				:host([flip][placement='right']) menu {
+					position-area: inline-end;
+					position-try-fallbacks:
+						flip-inline,
+						flip-block,
+						flip-inline flip-block;
+				}
+				:host([flip][placement='left']) menu {
+					position-area: inline-start;
+					position-try-fallbacks:
+						flip-inline,
+						flip-block,
+						flip-inline flip-block;
+				}
+			}
+		`
+    ]; }
+    render() {
+        const effectivePlacement = this.active && this.flip
+            ? this._resolvedPlacement
+            : this.placement;
+        const classes = [
+            effectivePlacement,
+            this.space,
+            this.noWrap ? 'no-wrap' : '',
+            this.active ? 'active' : ''
+        ].filter(Boolean).join(' ');
+        return html `<menu
+			class=${classes}
+			part="menu"
+		>
+			<slot></slot>
+		</menu>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniMenu.prototype, "placement", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'no-wrap' })
+], MoniMenu.prototype, "noWrap", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniMenu.prototype, "active", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniMenu.prototype, "space", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniMenu.prototype, "flip", void 0);
+__decorate([
+    state()
+], MoniMenu.prototype, "_resolvedPlacement", void 0);
+__decorate([
+    query('menu')
+], MoniMenu.prototype, "_menuEl", void 0);
+MoniMenu = __decorate([
+    customElement('moni-menu')
+], MoniMenu);
+export { MoniMenu };
+export default MoniMenu;

package/dist/components/moni-morph-modal.d.ts

@@ -0,0 +1,78 @@
+import { MoniElement } from './_base/index.js';
+import './moni-icon.js';
+type Placement = 'center' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' | 'viewport-center' | 'viewport-top' | 'viewport-bottom' | 'viewport-left' | 'viewport-right' | 'viewport-top-left' | 'viewport-top-right' | 'viewport-bottom-left' | 'viewport-bottom-right';
+export declare class MoniMorphModal extends MoniElement {
+    target: string;
+    open: boolean;
+    modal: boolean;
+    placement: Placement;
+    expandedWidth: string;
+    expandedHeight: string;
+    closeOnClickOutside: boolean;
+    closeOnEsc: boolean;
+    showCloseButton: boolean;
+    morphLabel: boolean;
+    morphLabelSelector: string;
+    hasBackdrop: boolean;
+    hideTarget: boolean;
+    coverTarget: boolean;
+    private _panel;
+    private _inner;
+    private _backdrop;
+    private _header;
+    private _hasHeader;
+    private _hasFooter;
+    private _hasTriggerLabel;
+    private _targetEl;
+    private _isAnimating;
+    private _visible;
+    private _handlingOpenChange;
+    private _zIndex;
+    private _morphEls;
+    private static _openStack;
+    private _targetStylesCache;
+    private _onTargetClick;
+    private _onDocKeydown;
+    private _onDocClick;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _resolveTarget;
+    show(): void;
+    private _ensureSolidPanelBackground;
+    hide(): void;
+    toggle(): void;
+    private _handleDocKeydown;
+    private _hideTargetContent;
+    private _restoreTargetContent;
+    private _onHeaderSlotChange;
+    private _onFooterSlotChange;
+    private _onTriggerLabelSlotChange;
+    private _getTriggerLabelNodes;
+    private _shouldMorphLabel;
+    private _cleanupMorphElements;
+    private _animateLabelOpen;
+    private _animateLabelClose;
+    private _createMorphText;
+    private _createMorphIcon;
+    private _positionElement;
+    private _getMoniButtonParts;
+    private _resolveMorphSource;
+    private _measureHeaderTextRect;
+    private _measureHeaderIconRect;
+    private _findSolidBackground;
+    private _getTargetState;
+    private _isColorTransparent;
+    private _applyRect;
+    private _computeFinalRect;
+    private _parseSize;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-morph-modal': MoniMorphModal;
+    }
+}
+export default MoniMorphModal;
+//# sourceMappingURL=moni-morph-modal.d.ts.map

package/dist/components/moni-morph-modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"moni-morph-modal.d.ts","sourceRoot":"","sources":["../../src/components/moni-morph-modal.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAI7D,OAAO,gBAAgB,CAAC;AAQxB,KAAK,SAAS,GACX,QAAQ,GACR,KAAK,GACL,WAAW,GACX,SAAS,GACT,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,GACV,OAAO,GACP,aAAa,GACb,WAAW,GACX,iBAAiB,GACjB,cAAc,GACd,iBAAiB,GACjB,eAAe,GACf,gBAAgB,GAChB,mBAAmB,GACnB,oBAAoB,GACpB,sBAAsB,GACtB,uBAAuB,CAAC;AAgD3B,qBACa,cAAe,SAAQ,WAAW;IACjB,MAAM,SAAM;IACuB,IAAI,UAAS;IACb,KAAK,UAAQ;IAChD,SAAS,EAAE,SAAS,CAAY;IACH,aAAa,SAC9D;IACkD,cAAc,SAChE;IAET,mBAAmB,UAAQ;IAE3B,UAAU,UAAQ;IAElB,eAAe,UAAS;IAExB,UAAU,UAAS;IAEnB,kBAAkB,SAAM;IAExB,WAAW,UAAQ;IAEnB,UAAU,UAAS;IAEnB,WAAW,UAAS;IAEH,OAAO,CAAC,MAAM,CAAkB;IAC1B,OAAO,CAAC,MAAM,CAAkB;IACnC,OAAO,CAAC,SAAS,CAAkB;IACtC,OAAO,CAAC,OAAO,CAAe;IAEtC,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,gBAAgB,CAAS;IAE1C,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,mBAAmB,CAAS;IACpC,OAAO,CAAC,OAAO,CAAO;IACtB,OAAO,CAAC,SAAS,CAA6C;IAC9D,OAAO,CAAC,MAAM,CAAC,UAAU,CAAwB;IACjD,OAAO,CAAC,kBAAkB,CAA8D;IAExF,OAAO,CAAC,cAAc,CAAqB;IAC3C,OAAO,CAAC,aAAa,CAAmD;IACxE,OAAO,CAAC,WAAW,CAKjB;IAEO,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAiB5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAW9C,OAAO,CAAC,cAAc;IAgBtB,IAAI,IAAI,IAAI;IAkKZ,OAAO,CAAC,2BAA2B;IAgBnC,IAAI,IAAI,IAAI;IA0JZ,MAAM,IAAI,IAAI;IAKd,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,kBAAkB;IA4B1B,OAAO,CAAC,qBAAqB;IA6B7B,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,yBAAyB;IAKjC,OAAO,CAAC,qBAAqB;IAO7B,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,qBAAqB;IAW7B,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,gBAAgB;IA2BxB,OAAO,CAAC,gBAAgB;IAqDxB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,mBAAmB;IAoF3B,OAAO,CAAC,sBAAsB;IA2C9B,OAAO,CAAC,sBAAsB;IAmC9B,OAAO,CAAC,oBAAoB;IAqB5B,OAAO,CAAC,eAAe;IAiDvB,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,iBAAiB;IAuIzB,OAAO,CAAC,UAAU;IAYlB,OAAgB,MAAM,4BAqHpB;IAEO,MAAM;CA4Cf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,cAAc,CAAC;KACnC;CACD;AAED,eAAe,cAAc,CAAC"}