@moni-labs/moni-ui 0.2.0

package/dist/components/moni-dialog.js

@@ -0,0 +1,257 @@
+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 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
+ */
+let MoniDialog = class MoniDialog extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.modal = false;
+        this.side = 'center';
+        this.size = 'medium';
+        this.title = '';
+    }
+    updated(changed) {
+        if (changed.has('open') && this._dialog) {
+            if (this.open) {
+                if (this.modal) {
+                    if (!this._dialog.open) {
+                        this._dialog.showModal();
+                    }
+                }
+                else {
+                    if (!this._dialog.open) {
+                        this._dialog.show();
+                    }
+                }
+            }
+            else {
+                if (this._dialog.open) {
+                    this._dialog.close();
+                }
+            }
+        }
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				display: contents;
+			}
+
+			dialog {
+				--_padding: 1.5rem;
+				--_top: calc(var(--_padding) + env(safe-area-inset-top, 0));
+				--_bottom: calc(var(--_padding) + env(safe-area-inset-bottom, 0));
+				display: block;
+				visibility: hidden;
+				border: none;
+				opacity: 0;
+				position: fixed;
+				box-shadow: var(--elevate2);
+				color: var(--on-surface);
+				background-color: var(--surface-container-high);
+				padding: var(--_padding);
+				z-index: 100;
+				inset: 10% auto auto 50%;
+				min-inline-size: 20rem;
+				max-inline-size: 100%;
+				max-block-size: 80%;
+				overflow-x: hidden;
+				overflow-y: auto;
+				transition: all var(--speed3), 0s background-color;
+				border-radius: 1.75rem;
+				transform: translate(-50%, -4rem);
+				outline: none;
+			}
+
+			dialog[open] {
+				visibility: visible;
+				opacity: 1;
+				transform: translate(-50%, 0);
+			}
+
+			dialog::backdrop {
+				display: block !important;
+				opacity: 0;
+				visibility: hidden;
+				position: fixed;
+				inset: 0;
+				color: var(--on-surface);
+				background-color: rgb(0 0 0 / 0.5);
+				z-index: 100;
+				transition: all var(--speed3), 0s background-color;
+				border-radius: 0;
+			}
+
+			dialog[open]::backdrop {
+				opacity: 1;
+				visibility: visible;
+			}
+
+			dialog:is(.top, .right, .bottom, .left, .max) {
+				--_padding: 1rem;
+			}
+
+			dialog.top,
+			dialog.bottom {
+				opacity: 1;
+				block-size: auto;
+				inline-size: 100%;
+				min-inline-size: auto;
+				max-block-size: 100%;
+			}
+			dialog.top {
+				inset: 0 auto auto 0;
+				transform: translateY(-100%);
+				border-radius: 0 0 1rem 1rem;
+				padding-block-start: var(--_top);
+			}
+			dialog.bottom {
+				inset: auto auto 0 0;
+				transform: translateY(100%);
+				border-radius: 1rem 1rem 0 0;
+				padding-block-end: var(--_bottom);
+			}
+
+			dialog:is(.left, .right) {
+				opacity: 1;
+				inset: 0 auto auto 0;
+				inline-size: auto;
+				block-size: 100%;
+				max-block-size: 100%;
+				background-color: var(--surface);
+				padding-block: var(--_top) var(--_bottom);
+			}
+			dialog.left {
+				inset: 0 auto auto 0;
+				border-radius: 0 1rem 1rem 0;
+				transform: translateX(-100%);
+			}
+			dialog.right {
+				inset: 0 0 auto auto;
+				border-radius: 1rem 0 0 1rem;
+				transform: translateX(100%);
+			}
+
+			dialog.max {
+				inset: 0 auto auto 0;
+				inline-size: 100%;
+				block-size: 100%;
+				max-inline-size: 100%;
+				max-block-size: 100%;
+				transform: translateY(4rem);
+				background-color: var(--surface);
+				border-radius: 0;
+				padding-block: var(--_top) var(--_bottom);
+			}
+
+			dialog[open]:is(.left, .right, .top, .bottom, .max) {
+				transform: translate(0, 0);
+			}
+
+			dialog.small {
+				inline-size: 25%;
+			}
+			dialog.medium {
+				inline-size: 50%;
+			}
+			dialog.large {
+				inline-size: 75%;
+			}
+			dialog.small:is(.left, .right) {
+				inline-size: 20rem;
+			}
+			dialog.medium:is(.left, .right) {
+				inline-size: 32rem;
+			}
+			dialog.large:is(.left, .right) {
+				inline-size: 44rem;
+			}
+			dialog.small:is(.top, .bottom) {
+				block-size: 16rem;
+			}
+			dialog.medium:is(.top, .bottom) {
+				block-size: 24rem;
+			}
+			dialog.large:is(.top, .bottom) {
+				block-size: 32rem;
+			}
+
+			header,
+			footer {
+				display: grid;
+				align-content: center;
+				border-radius: 0;
+				padding: 0;
+			}
+			header {
+				min-block-size: 3rem;
+			}
+			footer {
+				min-block-size: 3.5rem;
+			}
+		`
+    ]; }
+    render() {
+        const classes = [this.side, this.size, this.modal ? 'modal' : '']
+            .filter(Boolean)
+            .join(' ');
+        return html `<dialog
+			part="dialog"
+			class=${classes}
+		>
+			<header part="header">
+				<slot name="header">${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 })
+], MoniDialog.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniDialog.prototype, "modal", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniDialog.prototype, "side", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniDialog.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniDialog.prototype, "title", void 0);
+__decorate([
+    query('dialog')
+], MoniDialog.prototype, "_dialog", void 0);
+MoniDialog = __decorate([
+    customElement('moni-dialog')
+], MoniDialog);
+export { MoniDialog };
+export default MoniDialog;

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

@@ -0,0 +1,33 @@
+import { MoniElement } from './_base/index.js';
+/**
+ * Material 3 Divider (`m3-docs/components/divider/specs.md`).
+ *
+ * A thin line used to group content in lists, layouts, or cards. M3 spec
+ * defines three inset variants:
+ *  - **full** (default): spans the full width of the parent.
+ *  - **inset**: indented from the leading edge (16dp) so it lines up
+ *    with text content below an icon.
+ *  - **middle**: indented from both edges (16dp each).
+ *
+ * M3 measurements:
+ *  - Thickness: 1dp (`0.0625rem`).
+ *  - Color: `outline-variant` (subtle on a light background).
+ *
+ * Attributes:
+ *  - inset:  leading (default) | middle | none
+ *
+ * Slots:
+ *  - default: optional content rendered inline with the divider line.
+ */
+export declare class MoniDivider extends MoniElement {
+    inset: 'leading' | 'middle' | 'none';
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-divider': MoniDivider;
+    }
+}
+export default MoniDivider;
+//# sourceMappingURL=moni-divider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"moni-divider.d.ts","sourceRoot":"","sources":["../../src/components/moni-divider.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,WAAY,SAAQ,WAAW;IAE3C,KAAK,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAa;IAEjD,OAAgB,MAAM,4BAkCpB;IAEO,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD;AAED,eAAe,WAAW,CAAC"}

package/dist/components/moni-divider.js

@@ -0,0 +1,81 @@
+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';
+/**
+ * Material 3 Divider (`m3-docs/components/divider/specs.md`).
+ *
+ * A thin line used to group content in lists, layouts, or cards. M3 spec
+ * defines three inset variants:
+ *  - **full** (default): spans the full width of the parent.
+ *  - **inset**: indented from the leading edge (16dp) so it lines up
+ *    with text content below an icon.
+ *  - **middle**: indented from both edges (16dp each).
+ *
+ * M3 measurements:
+ *  - Thickness: 1dp (`0.0625rem`).
+ *  - Color: `outline-variant` (subtle on a light background).
+ *
+ * Attributes:
+ *  - inset:  leading (default) | middle | none
+ *
+ * Slots:
+ *  - default: optional content rendered inline with the divider line.
+ */
+let MoniDivider = class MoniDivider extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.inset = 'leading';
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				display: block;
+				font-family: var(--font);
+				/* M3 spec: 1dp thick, on-surface-variant for subtle separation. */
+				block-size: 0.0625rem;
+				min-inline-size: 0;
+				background-color: var(--outline-variant);
+				border: 0;
+				margin: 0;
+			}
+
+			/* Inset variants. M3 spec: 16dp from the leading edge. */
+			:host([inset='leading']) {
+				margin-inline-start: 1rem;
+				margin-inline-end: 0;
+			}
+			:host([inset='middle']) {
+				margin-inline: 1rem;
+			}
+			:host([inset='none']) {
+				margin-inline: 0;
+			}
+
+			/* Vertical divider (M3 spec also defines vertical usage). */
+			:host([vertical]) {
+				inline-size: 0.0625rem;
+				block-size: auto;
+				min-block-size: 100%;
+				align-self: stretch;
+			}
+		`
+    ]; }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniDivider.prototype, "inset", void 0);
+MoniDivider = __decorate([
+    customElement('moni-divider')
+], MoniDivider);
+export { MoniDivider };
+export default MoniDivider;

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

@@ -0,0 +1,25 @@
+import { MoniElement } from './_base/index.js';
+/**
+ * Visual-only expansion panel. Renders a `<details>` element.
+ *
+ * Attributes:
+ *  - open: present → panel expanded
+ *  - title: heading text for the summary
+ *
+ * Slots:
+ *  - default:  panel body
+ *  - summary:  custom summary content (overrides title)
+ */
+export declare class MoniExpansion extends MoniElement {
+    open: boolean;
+    title: string;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-expansion': MoniExpansion;
+    }
+}
+export default MoniExpansion;
+//# sourceMappingURL=moni-expansion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"moni-expansion.d.ts","sourceRoot":"","sources":["../../src/components/moni-expansion.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;GAUG;AACH,qBACa,aAAc,SAAQ,WAAW;IACD,IAAI,UAAS;IAC5B,KAAK,SAAM;IAExC,OAAgB,MAAM,4BA6CpB;IAEO,MAAM;CAUf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,aAAa,CAAC;KAChC;CACD;AAED,eAAe,aAAa,CAAC"}

package/dist/components/moni-expansion.js

@@ -0,0 +1,94 @@
+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';
+/**
+ * Visual-only expansion panel. Renders a `<details>` element.
+ *
+ * Attributes:
+ *  - open: present → panel expanded
+ *  - title: heading text for the summary
+ *
+ * Slots:
+ *  - default:  panel body
+ *  - summary:  custom summary content (overrides title)
+ */
+let MoniExpansion = class MoniExpansion extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.title = '';
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				display: block;
+				font-family: var(--font);
+			}
+
+			details {
+				border-radius: 0.5rem;
+				overflow: hidden;
+			}
+
+			summary {
+				list-style-type: none;
+				cursor: pointer;
+				padding: 0.75rem 1rem;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				gap: 0.5rem;
+				font-weight: 500;
+				color: var(--on-surface);
+				background-color: var(--surface-container);
+			}
+			summary::-webkit-details-marker {
+				display: none;
+			}
+			summary::after {
+				content: 'expand_more';
+				font-family: var(--font-icon);
+				font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+				font-size: 1.25rem;
+				transition: transform var(--speed2);
+			}
+			details[open] > summary::after {
+				transform: rotate(180deg);
+			}
+
+			.body {
+				padding: 1rem;
+				background-color: var(--surface-container-low);
+				color: var(--on-surface);
+			}
+		`
+    ]; }
+    render() {
+        return html `<details ?open=${this.open} part="expansion">
+			<summary part="summary">
+				<slot name="summary">${this.title}</slot>
+			</summary>
+			<div class="body" part="body">
+				<slot></slot>
+			</div>
+		</details>`;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniExpansion.prototype, "open", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniExpansion.prototype, "title", void 0);
+MoniExpansion = __decorate([
+    customElement('moni-expansion')
+], MoniExpansion);
+export { MoniExpansion };
+export default MoniExpansion;

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

@@ -0,0 +1,58 @@
+import { MoniElement } from './_base/index.js';
+import './moni-fab.js';
+import './moni-icon.js';
+/**
+ * Visual-only FAB menu. Combines a main `<moni-fab>` trigger with a `<menu>`
+ * of secondary FABs (slotted via default slot).
+ *
+ * The component wires the trigger's `click` to toggle the `open` attribute.
+ * Consumers can also set/unset the attribute externally for programmatic
+ * control. The menu scales and fades via CSS transitions.
+ *
+ * **Focus management** (M3 spec § FAB menu):
+ *  - When `open` becomes true, focus moves to the first focusable item in
+ *    the menu (or stays on the trigger if the menu is empty).
+ *  - When `open` becomes false, focus returns to the trigger.
+ *  - `Tab` cycles within the menu while open; `Escape` closes the menu.
+ *  - Click outside the menu closes it.
+ *
+ * Attributes:
+ *  - open:      present → menu is shown
+ *  - icon:      Material Symbols name for the trigger
+ *  - size:      small | medium (default) | large
+ *  - color:     primary (default) | secondary | tertiary | surface
+ *  - shape:     rounded (default) | circle
+ *  - direction: up (default) | down | left | right
+ *  - position:  same as moni-fab
+ */
+export declare class MoniFabMenu extends MoniElement {
+    open: boolean;
+    icon: string;
+    size: 'small' | 'medium' | 'large';
+    color: 'primary' | 'secondary' | 'tertiary' | 'surface';
+    shape: 'rounded' | 'circle';
+    direction: 'up' | 'down' | 'left' | 'right';
+    position: 'bottom-trailing' | 'bottom-leading' | 'top-trailing' | 'top-leading';
+    private _trigger;
+    private _menu;
+    private _previouslyFocused;
+    private _onDocClick;
+    private _onDocKeydown;
+    firstUpdated(): Promise<void>;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _onTriggerClick;
+    private _syncOpenState;
+    private _handleDocClick;
+    private _handleDocKeydown;
+    private _firstFocusableMenuItem;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-fab-menu': MoniFabMenu;
+    }
+}
+export default MoniFabMenu;
+//# sourceMappingURL=moni-fab-menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"moni-fab-menu.d.ts","sourceRoot":"","sources":["../../src/components/moni-fab-menu.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;AAGxB;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,WAAY,SAAQ,WAAW;IACC,IAAI,UAAS;IAC5B,IAAI,SAAS;IAE1C,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE9C,KAAK,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAa;IAEpE,KAAK,EAAE,SAAS,GAAG,QAAQ,CAAa;IAExC,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAQ;IAEnD,QAAQ,EACL,iBAAiB,GACjB,gBAAgB,GAChB,cAAc,GACd,aAAa,CAAqB;IAElB,OAAO,CAAC,QAAQ,CAAW;IAC1B,OAAO,CAAC,KAAK,CAAe;IAEhD,OAAO,CAAC,kBAAkB,CAA4B;IACtD,OAAO,CAAC,WAAW,CAA8C;IACjE,OAAO,CAAC,aAAa,CAAmD;IAEzD,YAAY;IAQlB,oBAAoB;IAOpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAOrD,OAAO,CAAC,eAAe,CAErB;IAEF,OAAO,CAAC,cAAc;IA0BtB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,uBAAuB;IAQ/B,OAAgB,MAAM,4BA8EpB;IAEO,MAAM;CAef;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,WAAW,CAAC;KAC7B;CACD;AAED,eAAe,WAAW,CAAC"}