@moni-labs/moni-ui 0.2.0

package/dist/components/moni-list.js

@@ -0,0 +1,67 @@
+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 List (`m3-docs/components/lists/specs.md`).
+ *
+ * A list is a continuous vertical index of text and images. The
+ * container itself is purely structural (no padding); spacing and
+ * dividers are controlled by `<moni-list-item>` children.
+ *
+ * Two visual variants:
+ *  - **default**: 8dp top/bottom padding between items (handled by items).
+ *  - **border**:  dividers drawn between items.
+ *
+ * Attributes:
+ *  - variant: '' (default) | border
+ *  - rounded: when set, items use a 4dp corner radius.
+ *
+ * Slots:
+ *  - default: <moni-list-item> children.
+ */
+let MoniList = class MoniList extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.variant = '';
+        this.rounded = false;
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				display: block;
+				font-family: var(--font);
+				color: var(--on-surface);
+				padding: 0;
+				margin: 0;
+			}
+			:host([variant='border']) {
+				border-block-end: 0.0625rem solid var(--outline-variant);
+			}
+
+			::slotted(moni-list-item) {
+				display: block;
+			}
+		`
+    ]; }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniList.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniList.prototype, "rounded", void 0);
+MoniList = __decorate([
+    customElement('moni-list')
+], MoniList);
+export { MoniList };
+export default MoniList;

package/dist/components/moni-loading-indicator.d.ts

@@ -0,0 +1,32 @@
+import { MoniElement } from './_base/index.js';
+/**
+ * Shape-shifting indeterminate loading indicator based on Material 3 Expressive spec.
+ *
+ * Attributes:
+ *  - variant: 'uncontained' (default) | 'contained'
+ *
+ * CSS custom properties for customization:
+ *  - --moni-loading-indicator-size: Size of the active indicator (default: 2.375rem)
+ *  - --moni-loading-indicator-active-color: Active indicator color in uncontained mode (default: var(--primary))
+ *  - --moni-loading-indicator-contained-active-color: Active indicator color in contained mode (default: var(--on-primary-container))
+ *  - --moni-loading-indicator-contained-container-color: Background color of container in contained mode (default: var(--secondary-container))
+ *  - --moni-loading-indicator-container-shape: Border radius of container in contained mode (default: 9999px)
+ *  - --moni-loading-indicator-container-size: Container size (default: 3rem)
+ */
+export declare class MoniLoadingIndicator extends MoniElement {
+    variant: 'uncontained' | 'contained';
+    private _container?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    private _toggleAnimation;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-loading-indicator': MoniLoadingIndicator;
+    }
+}
+export default MoniLoadingIndicator;
+//# sourceMappingURL=moni-loading-indicator.d.ts.map

package/dist/components/moni-loading-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"moni-loading-indicator.d.ts","sourceRoot":"","sources":["../../src/components/moni-loading-indicator.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAG7D;;;;;;;;;;;;;GAaG;AACH,qBACa,oBAAqB,SAAQ,WAAW;IAEpD,OAAO,EAAE,aAAa,GAAG,WAAW,CAAiB;IAEhC,OAAO,CAAC,UAAU,CAAC,CAAc;IAE7C,iBAAiB;IAQjB,oBAAoB;cAKV,YAAY;IAI/B,OAAO,CAAC,gBAAgB;IAMxB,OAAgB,MAAM,4BAuHpB;IAEO,MAAM;CASf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,wBAAwB,EAAE,oBAAoB,CAAC;KAC/C;CACD;AAED,eAAe,oBAAoB,CAAC"}

package/dist/components/moni-loading-indicator.js

@@ -0,0 +1,189 @@
+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, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+import { loadingIndicatorPolygons } from './loading-shapes.js';
+/**
+ * Shape-shifting indeterminate loading indicator based on Material 3 Expressive spec.
+ *
+ * Attributes:
+ *  - variant: 'uncontained' (default) | 'contained'
+ *
+ * CSS custom properties for customization:
+ *  - --moni-loading-indicator-size: Size of the active indicator (default: 2.375rem)
+ *  - --moni-loading-indicator-active-color: Active indicator color in uncontained mode (default: var(--primary))
+ *  - --moni-loading-indicator-contained-active-color: Active indicator color in contained mode (default: var(--on-primary-container))
+ *  - --moni-loading-indicator-contained-container-color: Background color of container in contained mode (default: var(--secondary-container))
+ *  - --moni-loading-indicator-container-shape: Border radius of container in contained mode (default: 9999px)
+ *  - --moni-loading-indicator-container-size: Container size (default: 3rem)
+ */
+let MoniLoadingIndicator = class MoniLoadingIndicator extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.variant = 'uncontained';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.ariaValueMin = this.ariaValueMin || '0';
+        this.ariaValueMax = this.ariaValueMax || '100';
+        this.role = this.role || 'progressbar';
+        this._toggleAnimation(true);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._toggleAnimation(false);
+    }
+    firstUpdated() {
+        this._toggleAnimation(true);
+    }
+    _toggleAnimation(enable) {
+        if (this._container) {
+            this._container.classList.toggle('animate', enable);
+        }
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				display: inline-block;
+				aspect-ratio: 1 / 1;
+				contain: strict;
+				vertical-align: middle;
+			}
+
+			:host([variant='uncontained']) {
+				width: var(--moni-loading-indicator-size, 2.375rem);
+			}
+
+			:host([variant='contained']) {
+				width: var(--moni-loading-indicator-container-size, 3rem);
+			}
+
+			:host([variant='uncontained']) .active-indicator {
+				background-color: var(--moni-loading-indicator-active-color, var(--primary));
+			}
+
+			:host([variant='contained']) .active-indicator {
+				background-color: var(--moni-loading-indicator-contained-active-color, var(--on-primary-container));
+			}
+
+			:host([variant='contained']) .container {
+				background-color: var(--moni-loading-indicator-contained-container-color, var(--secondary-container));
+			}
+
+			.container {
+				width: 100%;
+				height: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				border-radius: var(--moni-loading-indicator-container-shape, 9999px);
+				box-sizing: border-box;
+			}
+
+			.active-indicator {
+				margin: auto;
+				aspect-ratio: 1 / 1;
+				width: calc(var(--moni-loading-indicator-size, 2.375rem) * 0.842);
+				transform-origin: center;
+				transition: clip-path 500ms cubic-bezier(0.2, 0, 0, 1);
+				will-change: transform, clip-path;
+				--_polygon-soft-burst: polygon(${unsafeCSS(loadingIndicatorPolygons['soft-burst'])});
+				--_polygon-9-sided-cookie: polygon(${unsafeCSS(loadingIndicatorPolygons['9-sided-cookie'])});
+				--_polygon-pentagon: polygon(${unsafeCSS(loadingIndicatorPolygons['pentagon'])});
+				--_polygon-pill: polygon(${unsafeCSS(loadingIndicatorPolygons['pill'])});
+				--_polygon-sunny: polygon(${unsafeCSS(loadingIndicatorPolygons['sunny'])});
+				--_polygon-4-sided-cookie: polygon(${unsafeCSS(loadingIndicatorPolygons['4-sided-cookie'])});
+				--_polygon-oval: polygon(${unsafeCSS(loadingIndicatorPolygons['oval'])});
+			}
+
+			.container.animate .active-indicator-wrapper {
+				animation: rotate-outer 4666ms linear infinite;
+				transform-origin: center;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				will-change: transform;
+			}
+
+			@keyframes rotate-outer {
+				0% {
+					transform: rotate(0deg);
+				}
+				100% {
+					transform: rotate(360deg);
+				}
+			}
+
+			.container.animate .active-indicator {
+				animation: rotate-inner 4666ms cubic-bezier(0.34, 0.88, 0.34, 1) infinite;
+			}
+
+			@keyframes rotate-inner {
+				0% {
+					clip-path: var(--_polygon-soft-burst);
+					transform: rotate(0deg);
+				}
+				14% {
+					clip-path: var(--_polygon-9-sided-cookie);
+					transform: rotate(154deg) scale(1);
+				}
+				29% {
+					clip-path: var(--_polygon-pentagon);
+					transform: rotate(309deg) scale(1);
+				}
+				43% {
+					clip-path: var(--_polygon-pill);
+					transform: rotate(463deg) scale(1);
+				}
+				57% {
+					clip-path: var(--_polygon-sunny);
+					transform: rotate(617deg) scale(1);
+				}
+				71% {
+					clip-path: var(--_polygon-4-sided-cookie);
+					transform: rotate(771deg) scale(1);
+				}
+				83% {
+					clip-path: var(--_polygon-oval);
+					transform: rotate(926deg) scale(1);
+				}
+				100% {
+					clip-path: var(--_polygon-soft-burst);
+					transform: rotate(1080deg) scale(1);
+				}
+			}
+
+			@media (forced-colors: active) {
+				.active-indicator {
+					background-color: CanvasText !important;
+				}
+			}
+		`
+    ]; }
+    render() {
+        return html `
+			<div class="container animate" aria-hidden="true">
+				<div class="active-indicator-wrapper">
+					<div class="active-indicator"></div>
+				</div>
+			</div>
+		`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniLoadingIndicator.prototype, "variant", void 0);
+__decorate([
+    query('.container')
+], MoniLoadingIndicator.prototype, "_container", void 0);
+MoniLoadingIndicator = __decorate([
+    customElement('moni-loading-indicator')
+], MoniLoadingIndicator);
+export { MoniLoadingIndicator };
+export default MoniLoadingIndicator;

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

@@ -0,0 +1,27 @@
+import { MoniElement } from './_base/index.js';
+import './moni-icon.js';
+/**
+ * Visual-only menu item. Renders an `<li>` styled with the BeerCSS
+ * `menu > li` rule.
+ *
+ * Attributes:
+ *  - active:    present → tertiary-container highlight
+ *  - disabled:  present
+ *  - icon:      Material Symbols name
+ *  - label:     item text
+ */
+export declare class MoniMenuItem extends MoniElement {
+    active: boolean;
+    disabled: boolean;
+    icon: string;
+    label: string;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-menu-item': MoniMenuItem;
+    }
+}
+export default MoniMenuItem;
+//# sourceMappingURL=moni-menu-item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"moni-menu-item.d.ts","sourceRoot":"","sources":["../../src/components/moni-menu-item.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;GASG;AACH,qBACa,YAAa,SAAQ,WAAW;IACA,MAAM,UAAS;IACf,QAAQ,UAAS;IAChC,IAAI,SAAM;IACV,KAAK,SAAM;IAExC,OAAgB,MAAM,4BA4CpB;IAEO,MAAM;CAQf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,YAAY,CAAC;KAC/B;CACD;AAED,eAAe,YAAY,CAAC"}

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

@@ -0,0 +1,99 @@
+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';
+import './moni-icon.js';
+/**
+ * Visual-only menu item. Renders an `<li>` styled with the BeerCSS
+ * `menu > li` rule.
+ *
+ * Attributes:
+ *  - active:    present → tertiary-container highlight
+ *  - disabled:  present
+ *  - icon:      Material Symbols name
+ *  - label:     item text
+ */
+let MoniMenuItem = class MoniMenuItem extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.active = false;
+        this.disabled = false;
+        this.icon = '';
+        this.label = '';
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				display: block;
+				font-family: var(--font);
+			}
+
+			li {
+				all: unset;
+				box-sizing: border-box;
+				position: relative;
+				display: flex;
+				align-items: center;
+				text-align: start;
+				justify-content: flex-start;
+				white-space: nowrap;
+				gap: 1rem;
+				padding: 0.5rem 1rem;
+				min-block-size: 2.75rem;
+				flex: 1;
+				margin: 0 !important;
+				cursor: pointer;
+				border-radius: 0.25rem;
+				color: var(--on-surface);
+				font-size: 0.875rem;
+				transition: border-radius var(--speed2);
+			}
+
+			li:hover {
+				background-color: var(--active);
+			}
+			li.active {
+				background-color: var(--tertiary-container);
+				color: var(--on-tertiary-container);
+			}
+			li:is(.active, :active) {
+				border-radius: 0.75rem;
+			}
+			:host([disabled]) li {
+				opacity: 0.5;
+				pointer-events: none;
+			}
+		`
+    ]; }
+    render() {
+        return html `<li part="item">
+			${this.icon
+            ? html `<moni-icon name="${this.icon}" part="icon"></moni-icon>`
+            : html `<slot name="icon"></slot>`}
+			<span part="label"><slot>${this.label}</slot></span>
+		</li>`;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniMenuItem.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniMenuItem.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniMenuItem.prototype, "icon", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniMenuItem.prototype, "label", void 0);
+MoniMenuItem = __decorate([
+    customElement('moni-menu-item')
+], MoniMenuItem);
+export { MoniMenuItem };
+export default MoniMenuItem;

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

@@ -0,0 +1,55 @@
+import { MoniElement } 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)
+ */
+export declare class MoniMenu extends MoniElement {
+    placement: 'bottom' | 'top' | 'left' | 'right' | 'min' | 'max';
+    noWrap: boolean;
+    active: boolean;
+    space: 'no-space' | 'space' | 'small-space' | 'medium-space' | 'large-space' | 'extra-space';
+    flip: boolean;
+    private _resolvedPlacement;
+    private _menuEl?;
+    updated(changed: Map<string, unknown>): void;
+    private _maybeFlip;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-menu': MoniMenu;
+    }
+}
+export default MoniMenu;
+//# sourceMappingURL=moni-menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"moni-menu.d.ts","sourceRoot":"","sources":["../../src/components/moni-menu.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,qBACa,QAAS,SAAQ,WAAW;IAExC,SAAS,EAAE,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,CAAY;IACR,MAAM,UAAS;IACrC,MAAM,UAAS;IAE3D,KAAK,EACF,UAAU,GACV,OAAO,GACP,aAAa,GACb,cAAc,GACd,aAAa,GACb,aAAa,CAAc;IACc,IAAI,UAAS;IAEhD,OAAO,CAAC,kBAAkB,CAMf;IAEL,OAAO,CAAC,OAAO,CAAC,CAAc;IAEpC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAS9C,OAAO,CAAC,UAAU;IAuBlB,OAAgB,MAAM,4BAkKpB;IAEO,MAAM;CAkBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD;AAED,eAAe,QAAQ,CAAC"}