@moni-labs/moni-ui 0.2.0

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

@@ -0,0 +1,38 @@
+import { MoniElement } from './_base/index.js';
+import './moni-icon.js';
+/**
+ * Visual-only navigation item. Renders an `<a>` styled with the BeerCSS
+ * nav link helper.
+ *
+ * Attributes:
+ *  - href:     link target
+ *  - target:   link target
+ *  - icon:     Material Symbols name
+ *  - label:    link text
+ *  - active:   present → active style
+ */
+export declare class MoniNavItem extends MoniElement {
+    href: string;
+    target: string;
+    icon: string;
+    label: string;
+    active: boolean;
+    placement: string;
+    variant: string;
+    layout: string;
+    private _isMediumScreen;
+    private _query;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleQueryChange;
+    get computedLayout(): 'vertical' | 'horizontal';
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-nav-item': MoniNavItem;
+    }
+}
+export default MoniNavItem;
+//# sourceMappingURL=moni-nav-item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"moni-nav-item.d.ts","sourceRoot":"","sources":["../../src/components/moni-nav-item.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;GAUG;AACH,qBACa,WAAY,SAAQ,WAAW;IACd,IAAI,SAAO;IACX,MAAM,SAAM;IACZ,IAAI,SAAM;IACV,KAAK,SAAM;IACI,MAAM,UAAS;IAC9B,SAAS,SAAS;IAClB,OAAO,SAAU;IACjB,MAAM,SAAU;IAG7C,OAAO,CAAC,eAAe,CAAS;IAEhC,OAAO,CAAC,MAAM,CAEN;IAEC,iBAAiB;IAQjB,oBAAoB;IAO7B,OAAO,CAAC,kBAAkB,CAExB;IAEF,IAAI,cAAc,IAAI,UAAU,GAAG,YAAY,CAQ9C;IAED,OAAgB,MAAM,4BAmIpB;IAEO,MAAM;CAqCf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,WAAW,CAAC;KAC7B;CACD;AAED,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,262 @@
+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 } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+import './moni-icon.js';
+/**
+ * Visual-only navigation item. Renders an `<a>` styled with the BeerCSS
+ * nav link helper.
+ *
+ * Attributes:
+ *  - href:     link target
+ *  - target:   link target
+ *  - icon:     Material Symbols name
+ *  - label:    link text
+ *  - active:   present → active style
+ */
+let MoniNavItem = class MoniNavItem extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.href = '#';
+        this.target = '';
+        this.icon = '';
+        this.label = '';
+        this.active = false;
+        this.placement = 'top';
+        this.variant = 'rail';
+        this.layout = 'auto';
+        this._isMediumScreen = false;
+        this._query = typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+            ? window.matchMedia('(min-width: 601px)')
+            : null;
+        this._handleQueryChange = (e) => {
+            this._isMediumScreen = e.matches;
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this._query) {
+            this._query.addEventListener('change', this._handleQueryChange);
+            this._isMediumScreen = this._query.matches;
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._query) {
+            this._query.removeEventListener('change', this._handleQueryChange);
+        }
+    }
+    get computedLayout() {
+        if (this.placement === 'left' || this.placement === 'right') {
+            return this.variant === 'drawer' ? 'horizontal' : 'vertical';
+        }
+        if (this.layout === 'auto') {
+            return this._isMediumScreen ? 'horizontal' : 'vertical';
+        }
+        return this.layout;
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				display: inline-flex;
+				font-family: var(--font);
+				inline-size: 100%;
+				justify-content: center;
+				box-sizing: border-box;
+			}
+
+			a {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				text-decoration: none;
+				color: var(--on-surface-variant);
+				cursor: pointer;
+				inline-size: 100%;
+				transition: background-color var(--speed2), color var(--speed2);
+				outline: none;
+				position: relative;
+				box-sizing: border-box;
+			}
+
+			/* ─── State Layers (Hover/Focus/Active) ─── */
+			a:hover:not(.active) .active-indicator {
+				background-color: var(--surface-container-high, rgba(0, 0, 0, 0.08));
+			}
+
+			/* ─── Vertical Layout Styles ─── */
+			a[data-layout='vertical'] {
+				flex-direction: column;
+				gap: 0.25rem; /* 4dp space between icon and label */
+				padding: 0.5rem 0;
+				min-block-size: 4rem; /* 64dp height */
+			}
+
+			a[data-layout='vertical'] .active-indicator {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				min-inline-size: 3.5rem; /* 56px */
+				block-size: 2rem; /* 32px */
+				border-radius: 1rem; /* fully rounded */
+				transition: background-color var(--speed2), color var(--speed2);
+			}
+
+			a[data-layout='vertical'].active .active-indicator {
+				background-color: var(--secondary-container);
+				color: var(--on-secondary-container);
+			}
+
+			a[data-layout='vertical'] .label {
+				font-size: 0.75rem; /* 12dp label size */
+				font-weight: 500;
+				transition: color var(--speed2);
+				color: var(--on-surface-variant);
+				text-align: center;
+			}
+
+			a[data-layout='vertical'].active .label {
+				color: var(--secondary);
+				font-weight: 600;
+			}
+
+			/* ─── Horizontal Layout Styles ─── */
+			a[data-layout='horizontal'] {
+				flex-direction: row;
+				padding: 0.5rem 0.75rem;
+				min-block-size: 4rem; /* 64dp height */
+			}
+
+			a[data-layout='horizontal'] .active-indicator {
+				display: inline-flex;
+				align-items: center;
+				gap: 0.5rem; /* 8dp gap between icon and label */
+				padding: 0.375rem 1rem;
+				border-radius: 1.25rem; /* fully rounded */
+				transition: background-color var(--speed2), color var(--speed2);
+				min-block-size: 2rem;
+				box-sizing: border-box;
+			}
+
+			a[data-layout='horizontal'].active .active-indicator {
+				background-color: var(--secondary-container);
+				color: var(--on-secondary-container);
+			}
+
+			a[data-layout='horizontal'] .label {
+				font-size: 0.875rem; /* 14dp label size */
+				font-weight: 500;
+				color: var(--on-surface-variant);
+				transition: color var(--speed2);
+			}
+
+			a[data-layout='horizontal'].active .label {
+				color: var(--on-secondary-container);
+				font-weight: 600;
+			}
+
+			/* Drawer variant specific tweaks */
+			:host([variant='drawer']) a[data-layout='horizontal'] {
+				justify-content: flex-start;
+				padding: 0.5rem 1rem;
+			}
+			:host([variant='drawer']) a[data-layout='horizontal'] .active-indicator {
+				width: 100%;
+				background-color: transparent;
+			}
+			:host([variant='drawer']) a[data-layout='horizontal'].active .active-indicator {
+				background-color: var(--secondary-container);
+			}
+
+			/* Icon Sizes and Helpers */
+			.icon-container {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				inline-size: 1.5rem;
+				block-size: 1.5rem;
+			}
+
+			.icon-container moni-icon,
+			.icon-container ::slotted(moni-icon),
+			.icon-container i {
+				font-size: 1.5rem; /* 24dp */
+				inline-size: 1.5rem;
+				block-size: 1.5rem;
+			}
+		`
+    ]; }
+    render() {
+        const isHorizontal = this.computedLayout === 'horizontal';
+        const iconEl = html `
+			<div class="icon-container" part="icon">
+				${this.icon
+            ? html `<moni-icon name="${this.icon}"></moni-icon>`
+            : html `<slot name="icon"></slot>`}
+			</div>
+		`;
+        const labelEl = html `
+			<span class="label" part="label"><slot>${this.label}</slot></span>
+		`;
+        return html `<a
+			href=${this.href || '#'}
+			target=${ifDefined(this.target || undefined)}
+			class=${this.active ? 'active' : ''}
+			data-layout=${this.computedLayout}
+			part="item"
+		>
+			${isHorizontal
+            ? html `
+					<div class="active-indicator" part="indicator">
+						${iconEl}
+						${labelEl}
+					</div>
+				`
+            : html `
+					<div class="active-indicator" part="indicator">
+						${iconEl}
+					</div>
+					${labelEl}
+				`}
+		</a>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniNavItem.prototype, "href", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniNavItem.prototype, "target", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniNavItem.prototype, "icon", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniNavItem.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniNavItem.prototype, "active", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniNavItem.prototype, "placement", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniNavItem.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniNavItem.prototype, "layout", void 0);
+__decorate([
+    state()
+], MoniNavItem.prototype, "_isMediumScreen", void 0);
+MoniNavItem = __decorate([
+    customElement('moni-nav-item')
+], MoniNavItem);
+export { MoniNavItem };
+export default MoniNavItem;

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

@@ -0,0 +1,46 @@
+import { MoniElement } from './_base/index.js';
+/**
+ * Visual-only navigation. Renders a `<nav>` styled with BeerCSS helpers.
+ *
+ * M3 navigation patterns (`m3-docs/components/navigation-*`):
+ *  - Navigation bar: placement="bottom"
+ *  - Navigation rail: placement="left|right" variant="rail"
+ *  - Navigation drawer: placement="left|right" variant="drawer"
+ *    * Standard drawer: always visible, no scrim (default)
+ *    * Modal drawer: `modal` toggles open/closed, renders a scrim and
+ *      traps focus while open. See `m3-docs/components/navigation-drawer/specs.md`.
+ *
+ * Attributes:
+ *  - placement: top (default) | bottom | left | right
+ *  - variant:   rail | drawer
+ *  - modal:     present → drawer is modal (requires variant="drawer")
+ *  - open:      present → modal drawer is open (default true)
+ *  - layout:    vertical | horizontal | auto (default)
+ *
+ * Slots:
+ *  - default: <moni-nav-item> children
+ *  - header:  content above nav items (drawer only)
+ *  - footer:  content below nav items (drawer only)
+ */
+export declare class MoniNav extends MoniElement {
+    placement: 'top' | 'bottom' | 'left' | 'right';
+    variant: 'rail' | 'drawer';
+    modal: boolean;
+    open: boolean;
+    layout: 'vertical' | 'horizontal' | 'auto';
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onKeydown;
+    private _closeModal;
+    updated(changed: Map<string, unknown>): void;
+    private _propagateToItems;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-nav': MoniNav;
+    }
+}
+export default MoniNav;
+//# sourceMappingURL=moni-nav.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"moni-nav.d.ts","sourceRoot":"","sources":["../../src/components/moni-nav.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,OAAQ,SAAQ,WAAW;IAEvC,SAAS,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAS;IAEvD,OAAO,EAAE,MAAM,GAAG,QAAQ,CAAU;IACQ,KAAK,UAAS;IACd,IAAI,UAAQ;IAExD,MAAM,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAU;IAE3C,iBAAiB;IAMjB,oBAAoB;IAK7B,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,WAAW;IAMV,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAY9C,OAAO,CAAC,iBAAiB,CAOvB;IAEF,OAAgB,MAAM,4BAoJpB;IAEO,MAAM;CAyBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD;AAED,eAAe,OAAO,CAAC"}

package/dist/components/moni-nav.js

@@ -0,0 +1,272 @@
+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 navigation. Renders a `<nav>` styled with BeerCSS helpers.
+ *
+ * M3 navigation patterns (`m3-docs/components/navigation-*`):
+ *  - Navigation bar: placement="bottom"
+ *  - Navigation rail: placement="left|right" variant="rail"
+ *  - Navigation drawer: placement="left|right" variant="drawer"
+ *    * Standard drawer: always visible, no scrim (default)
+ *    * Modal drawer: `modal` toggles open/closed, renders a scrim and
+ *      traps focus while open. See `m3-docs/components/navigation-drawer/specs.md`.
+ *
+ * Attributes:
+ *  - placement: top (default) | bottom | left | right
+ *  - variant:   rail | drawer
+ *  - modal:     present → drawer is modal (requires variant="drawer")
+ *  - open:      present → modal drawer is open (default true)
+ *  - layout:    vertical | horizontal | auto (default)
+ *
+ * Slots:
+ *  - default: <moni-nav-item> children
+ *  - header:  content above nav items (drawer only)
+ *  - footer:  content below nav items (drawer only)
+ */
+let MoniNav = class MoniNav extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.placement = 'top';
+        this.variant = 'rail';
+        this.modal = false;
+        this.open = true;
+        this.layout = 'auto';
+        this._propagateToItems = () => {
+            const items = this.querySelectorAll('moni-nav-item');
+            items.forEach(item => {
+                item.setAttribute('placement', this.placement);
+                item.setAttribute('variant', this.variant);
+                item.setAttribute('layout', this.layout);
+            });
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._onKeydown = this._onKeydown.bind(this);
+        document.addEventListener('keydown', this._onKeydown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('keydown', this._onKeydown);
+    }
+    _onKeydown(e) {
+        if (e.key === 'Escape' && this.modal && this.open) {
+            this.open = false;
+        }
+    }
+    _closeModal() {
+        if (this.modal) {
+            this.open = false;
+        }
+    }
+    updated(changed) {
+        if (changed.has('placement') ||
+            changed.has('variant') ||
+            changed.has('layout') ||
+            changed.has('modal') ||
+            changed.has('open')) {
+            this._propagateToItems();
+        }
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				/* Block so the host establishes a layout context for fixed
+				   descendants. The inner <nav> still handles all positioning. */
+				display: block;
+				font-family: var(--font);
+				inline-size: 100%;
+			}
+
+			nav {
+				display: flex;
+				gap: 0.5rem;
+				padding: 0 1rem;
+				background-color: var(--surface-container);
+				color: var(--on-surface);
+				align-items: center;
+				box-sizing: border-box;
+			}
+
+			:host([placement='top']) nav,
+			:host([placement='bottom']) nav {
+				flex-direction: row;
+				justify-content: space-around;
+				inline-size: 100%;
+			}
+
+			:host([placement='bottom']) nav {
+				position: fixed;
+				inset-block-end: 0;
+				inset-inline: 0;
+				z-index: 100;
+				background-color: var(--surface-container);
+				min-block-size: 4rem; /* 64dp flexible nav bar */
+				padding-block-end: env(safe-area-inset-bottom, 0px);
+			}
+
+			:host([placement='top']) nav {
+				position: sticky;
+				inset-block-start: 0;
+				z-index: 100;
+				background-color: var(--surface-container);
+				min-block-size: 4rem; /* 64dp flexible nav bar */
+			}
+
+			:host([placement='left']) nav,
+			:host([placement='right']) nav {
+				flex-direction: column;
+				block-size: 100dvh;
+				padding-block: 1rem;
+			}
+
+			:host([placement='left'][variant='rail']) nav,
+			:host([placement='right'][variant='rail']) nav {
+				min-inline-size: 6rem;
+			}
+
+			:host([placement='left'][variant='drawer']) nav,
+			:host([placement='right'][variant='drawer']) nav {
+				min-inline-size: 16rem;
+			}
+
+			:host([placement='left']) nav {
+				position: fixed;
+				inset-inline-start: 0;
+				inset-block: 0;
+				z-index: 100;
+			}
+
+			:host([placement='right']) nav {
+				position: fixed;
+				inset-inline-end: 0;
+				inset-block: 0;
+				z-index: 100;
+			}
+
+			/* Modal drawer scrim/backdrop */
+			.scrim {
+				display: none;
+				position: fixed;
+				inset: 0;
+				z-index: 99;
+				background-color: var(--scrim);
+				opacity: 0;
+				transition: opacity var(--speed2);
+			}
+
+			:host([variant='drawer'][modal]) .scrim {
+				display: block;
+			}
+
+			:host([variant='drawer'][modal][open]) .scrim {
+				opacity: 1;
+			}
+
+			/* Modal drawer closed state slides off-screen */
+			:host([placement='left'][variant='drawer'][modal]:not([open])) nav {
+				transform: translateX(-100%);
+			}
+			:host([placement='right'][variant='drawer'][modal]:not([open])) nav {
+				transform: translateX(100%);
+			}
+
+			:host([variant='drawer'][modal]) nav {
+				transition: transform var(--speed3) cubic-bezier(0.2, 0, 0, 1);
+			}
+
+			/* Nav items inside horizontal placements stretch to fill. */
+			:host([placement='top']) ::slotted(moni-nav-item),
+			:host([placement='bottom']) ::slotted(moni-nav-item) {
+				flex: 1;
+				min-inline-size: 0;
+			}
+
+			/* Slots header/footer in vertical nav */
+			:host([placement='left']) ::slotted([slot='header']),
+			:host([placement='right']) ::slotted([slot='header']) {
+				padding-block: 1rem;
+				inline-size: 100%;
+			}
+			:host([placement='left']) ::slotted([slot='footer']),
+			:host([placement='right']) ::slotted([slot='footer']) {
+				margin-block-start: auto;
+				padding-block: 1rem;
+				inline-size: 100%;
+			}
+
+			@media only screen and (max-width: 600px) {
+				nav {
+					position: fixed !important;
+					inset-block-end: 0 !important;
+					inset-inline: 0 !important;
+					z-index: 100 !important;
+					background-color: var(--surface-container) !important;
+					min-block-size: 4rem !important;
+					padding-block-end: env(safe-area-inset-bottom, 0px) !important;
+					flex-direction: row !important;
+					justify-content: space-around !important;
+					block-size: auto !important;
+					inline-size: 100% !important;
+				}
+				::slotted(moni-nav-item) {
+					flex: 1 !important;
+					min-inline-size: 0 !important;
+				}
+			}
+		`,
+    ]; }
+    render() {
+        const isModalDrawer = this.variant === 'drawer' && this.modal;
+        const classes = [this.placement, this.variant === 'drawer' ? 'max' : '']
+            .filter(Boolean)
+            .join(' ');
+        const scrim = isModalDrawer
+            ? html `<div
+					class="scrim"
+					part="scrim"
+					@click=${this._closeModal}
+					aria-hidden="true"
+				></div>`
+            : '';
+        return html `${scrim}<nav
+				class=${classes}
+				part="nav"
+				role=${isModalDrawer ? 'dialog' : undefined}
+				aria-modal=${isModalDrawer ? 'true' : undefined}
+				aria-expanded=${isModalDrawer ? (this.open ? 'true' : 'false') : undefined}
+			>
+				<slot name="header"></slot>
+				<slot @slotchange=${this._propagateToItems}></slot>
+				<slot name="footer"></slot>
+			</nav>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniNav.prototype, "placement", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniNav.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniNav.prototype, "modal", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniNav.prototype, "open", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniNav.prototype, "layout", void 0);
+MoniNav = __decorate([
+    customElement('moni-nav')
+], MoniNav);
+export { MoniNav };
+export default MoniNav;

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

@@ -0,0 +1,45 @@
+import { MoniElement } from './_base/index.js';
+/**
+ * Progress indicator that faithfully ports BeerCSS's progress styles.
+ *
+ * BeerCSS uses the native <progress> element with `::after`, `::before` and
+ * `mask-image` pseudo-elements. Those don't work inside Shadow DOM because:
+ *  - `<progress>` native pseudo-elements (::webkit-progress-value, ::after)
+ *    are blocked by the UA shadow root in Chrome/Firefox within a custom shadow.
+ *  - `mask-image` on those pseudo-elements doesn't apply at all in shadows.
+ *
+ * Solution: use a plain <div> wrapper that replicates BeerCSS's visual rules
+ * exactly, and an SVG for the circular variant (matching BeerCSS's conic-gradient
+ * approach but with SVG stroke for better cross-browser support).
+ *
+ * Attributes:
+ *  - value:         0..max (omit for indeterminate)
+ *  - max:           upper bound (default 100)
+ *  - variant:       linear (default) | circular | wavy | circular-wavy
+ *  - size:          small | medium (default) | large
+ *  - indeterminate: present → infinite animation
+ */
+export declare class MoniProgress extends MoniElement {
+    value: number;
+    max: number;
+    variant: 'linear' | 'circular' | 'wavy' | 'circular-wavy';
+    size: 'small' | 'medium' | 'large';
+    indeterminate: boolean;
+    /** Computed fill percentage (0-100) used in styles/SVG */
+    private _pct;
+    willUpdate(changed: Map<string, unknown>): void;
+    static styles: import("lit").CSSResult[];
+    private _renderLinear;
+    private _renderWavy;
+    private _renderCircular;
+    /** Unique ID per instance for SVG clipPath IDs */
+    private readonly _instanceId;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-progress': MoniProgress;
+    }
+}
+export default MoniProgress;
+//# sourceMappingURL=moni-progress.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"moni-progress.d.ts","sourceRoot":"","sources":["../../src/components/moni-progress.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,YAAa,SAAQ,WAAW;IACD,KAAK,SAAK;IACV,GAAG,SAAO;IAErD,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,eAAe,CAAY;IAErE,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IACF,aAAa,UAAS;IAElE,0DAA0D;IACjD,OAAO,CAAC,IAAI,CAAK;IAEjB,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAQjD,OAAgB,MAAM,4BA6HpB;IAEF,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,WAAW;IAyDnB,OAAO,CAAC,eAAe;IAoDvB,kDAAkD;IAClD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA0C;IAE7D,MAAM;CAYf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD;AAED,eAAe,YAAY,CAAC"}