@moni-labs/moni-ui 0.2.0

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

@@ -0,0 +1,35 @@
+import { MoniElement } from './_base/index.js';
+/**
+ * Material 3 Toolbar (`m3-docs/components/top-app-bar/specs.md`).
+ *
+ * This is the larger/top-level variant. If you need the compact
+ * Navigation Bar at the bottom of the screen, use `<moni-app-bar>`.
+ *
+ * Supported M3 types:
+ *  - **standard** (default): 64dp height, flat surface color, bottom shadow.
+ *  - **floating**: 4dp margin, rounded 8dp corners, elevated.
+ *
+ * Slots:
+ *  - default:       title / center content.
+ *  - leading:       navigation icon/button.
+ *  - trailing:      action icons/buttons.
+ *  - action-button: floating action button (moni-fab) anchored right.
+ *
+ * Attributes:
+ *  - type:   standard (default) | floating
+ *  - scroll: true | false (default). When true, elevation increases on scroll.
+ */
+export declare class MoniToolbar extends MoniElement {
+    type: 'standard' | 'floating';
+    scrolled: boolean;
+    title: string;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-toolbar': MoniToolbar;
+    }
+}
+export default MoniToolbar;
+//# sourceMappingURL=moni-toolbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"moni-toolbar.d.ts","sourceRoot":"","sources":["../../src/components/moni-toolbar.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,WAAY,SAAQ,WAAW;IAE3C,IAAI,EAAE,UAAU,GAAG,UAAU,CAAc;IAE3C,QAAQ,UAAS;IACY,KAAK,SAAM;IAExC,OAAgB,MAAM,4BA8DpB;IAEO,MAAM;CAcf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD;AAED,eAAe,WAAW,CAAC"}

package/dist/components/moni-toolbar.js

@@ -0,0 +1,128 @@
+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 Toolbar (`m3-docs/components/top-app-bar/specs.md`).
+ *
+ * This is the larger/top-level variant. If you need the compact
+ * Navigation Bar at the bottom of the screen, use `<moni-app-bar>`.
+ *
+ * Supported M3 types:
+ *  - **standard** (default): 64dp height, flat surface color, bottom shadow.
+ *  - **floating**: 4dp margin, rounded 8dp corners, elevated.
+ *
+ * Slots:
+ *  - default:       title / center content.
+ *  - leading:       navigation icon/button.
+ *  - trailing:      action icons/buttons.
+ *  - action-button: floating action button (moni-fab) anchored right.
+ *
+ * Attributes:
+ *  - type:   standard (default) | floating
+ *  - scroll: true | false (default). When true, elevation increases on scroll.
+ */
+let MoniToolbar = class MoniToolbar extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.type = 'standard';
+        this.scrolled = false;
+        this.title = '';
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				display: block;
+				position: relative;
+				z-index: var(--z-index-toolbar, 1000);
+			}
+
+			.container {
+				display: flex;
+				align-items: center;
+				gap: 1rem;
+				block-size: 4rem;
+				padding-inline: 0.25rem;
+				padding-block: 0.5rem;
+				background-color: var(--surface-container);
+				color: var(--on-surface);
+				font-family: var(--font);
+				transition: box-shadow var(--speed2), background-color var(--speed2);
+			}
+
+			:host([type='standard']) .container {
+				box-shadow: var(--shadow1);
+			}
+
+			:host([type='floating']) .container {
+				margin: 0.25rem;
+				border-radius: 0.5rem;
+				box-shadow: var(--shadow2);
+			}
+
+			:host([type='standard'][scroll]) .container {
+				box-shadow: var(--shadow3);
+			}
+
+			.leading,
+			.trailing {
+				display: inline-flex;
+				align-items: center;
+				gap: 0.25rem;
+				flex: none;
+			}
+
+			.title {
+				flex: auto;
+				font-size: 1.375rem;
+				line-height: 1.75rem;
+				font-weight: 400;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				padding-inline-start: 0.75rem;
+			}
+
+			::slotted([slot='action-button']) {
+				position: absolute;
+				inset-block-end: -1.75rem;
+				inset-inline-end: 1rem;
+				z-index: 1;
+			}
+		`
+    ]; }
+    render() {
+        return html `
+			<header class="container" part="container">
+				<span class="leading" part="leading"><slot name="leading"></slot></span>
+				<span class="title" part="title">
+					${this.title || html `<slot></slot>`}
+				</span>
+				<span class="trailing" part="trailing">
+					<slot name="trailing"></slot>
+				</span>
+			</header>
+			<slot name="action-button"></slot>
+		`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniToolbar.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'scroll' })
+], MoniToolbar.prototype, "scrolled", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniToolbar.prototype, "title", void 0);
+MoniToolbar = __decorate([
+    customElement('moni-toolbar')
+], MoniToolbar);
+export { MoniToolbar };
+export default MoniToolbar;

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

@@ -0,0 +1,65 @@
+import { MoniElement } from './_base/index.js';
+/**
+ * Tooltip that faithfully ports BeerCSS's `.tooltip` styles and adds M3
+ * Expressive semantics.
+ *
+ * **M3 spec** (`m3-docs/components/tooltips/specs.md`):
+ *  - Two types: **plain** (text only) and **rich** (HTML content).
+ *  - 6 placements: top, top-start, top-end, bottom, bottom-start, bottom-end.
+ *  - Trigger: hover (mouse) or focus (keyboard) on the parent.
+ *  - Auto-dismiss: tooltip hides on `mouseleave` / `focusout` / `Escape`.
+ *
+ * The component delegates trigger detection to the parent element (consistent
+ * with the original BeerCSS port). The tooltip element is `position: absolute`
+ * inside the parent so it follows the trigger naturally.
+ *
+ * **Accessibility**:
+ *  - The tooltip has `role="tooltip"` (M3 spec).
+ *  - When `rich` content is used, the parent should also have
+ *    `aria-describedby="<tooltip-id>"`. The component sets a unique `id` on
+ *    the tooltip element and exposes it via `tooltipId` getter.
+ *  - `Escape` closes the tooltip (WAI-ARIA tooltip pattern).
+ *
+ * Attributes:
+ *  - text:      tooltip text (plain tooltip)
+ *  - position:  top (default) | top-start | top-end | bottom | bottom-start | bottom-end
+ *  - size:      '' (default) | small | medium | large
+ *  - rich:      boolean — when true, the default slot accepts arbitrary HTML
+ *               for rich content (links, icons, etc.). When false (default),
+ *               the slot is rendered as text only.
+ *  - id:        forwarded to the tooltip element (useful for aria-describedby)
+ */
+export declare class MoniTooltip extends MoniElement {
+    text: string;
+    position: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+    size: '' | 'small' | 'medium' | 'large';
+    rich: boolean;
+    private _target;
+    private _tooltipEl;
+    private _docKeydown;
+    /**
+     * CSS `anchor-name` registered on the parent trigger so the tooltip
+     * can use `position-anchor` to bind to it. Generated per-instance via
+     * `crypto.randomUUID()` when CSS anchor positioning is supported.
+     */
+    private _anchorName;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _show;
+    private _hide;
+    private _handleDocKeydown;
+    /**
+     * Public ID of the tooltip element, suitable for `aria-describedby` on
+     * the trigger parent. Auto-generated if the consumer did not set `id`.
+     */
+    get tooltipId(): string;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-tooltip': MoniTooltip;
+    }
+}
+export default MoniTooltip;
+//# sourceMappingURL=moni-tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"moni-tooltip.d.ts","sourceRoot":"","sources":["../../src/components/moni-tooltip.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBACa,WAAY,SAAQ,WAAW;IACd,IAAI,SAAM;IAEvC,QAAQ,EACL,KAAK,GACL,WAAW,GACX,SAAS,GACT,QAAQ,GACR,cAAc,GACd,YAAY,CAAS;IAExB,IAAI,EAAE,EAAE,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAM;IACD,IAAI,UAAS;IAEzD,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,WAAW,CAAmD;IACtE;;;;OAIG;IACH,OAAO,CAAC,WAAW,CAAuB;IAEjC,iBAAiB;IAoCjB,oBAAoB;IAe7B,OAAO,CAAC,KAAK,CAOX;IAEF,OAAO,CAAC,KAAK,CAOX;IAEF,OAAO,CAAC,iBAAiB;IAMzB;;;OAGG;IACH,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,OAAgB,MAAM,4BA2JpB;IAEO,MAAM;CAgBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD;AAED,eAAe,WAAW,CAAC"}

package/dist/components/moni-tooltip.js

@@ -0,0 +1,320 @@
+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';
+/**
+ * Tooltip that faithfully ports BeerCSS's `.tooltip` styles and adds M3
+ * Expressive semantics.
+ *
+ * **M3 spec** (`m3-docs/components/tooltips/specs.md`):
+ *  - Two types: **plain** (text only) and **rich** (HTML content).
+ *  - 6 placements: top, top-start, top-end, bottom, bottom-start, bottom-end.
+ *  - Trigger: hover (mouse) or focus (keyboard) on the parent.
+ *  - Auto-dismiss: tooltip hides on `mouseleave` / `focusout` / `Escape`.
+ *
+ * The component delegates trigger detection to the parent element (consistent
+ * with the original BeerCSS port). The tooltip element is `position: absolute`
+ * inside the parent so it follows the trigger naturally.
+ *
+ * **Accessibility**:
+ *  - The tooltip has `role="tooltip"` (M3 spec).
+ *  - When `rich` content is used, the parent should also have
+ *    `aria-describedby="<tooltip-id>"`. The component sets a unique `id` on
+ *    the tooltip element and exposes it via `tooltipId` getter.
+ *  - `Escape` closes the tooltip (WAI-ARIA tooltip pattern).
+ *
+ * Attributes:
+ *  - text:      tooltip text (plain tooltip)
+ *  - position:  top (default) | top-start | top-end | bottom | bottom-start | bottom-end
+ *  - size:      '' (default) | small | medium | large
+ *  - rich:      boolean — when true, the default slot accepts arbitrary HTML
+ *               for rich content (links, icons, etc.). When false (default),
+ *               the slot is rendered as text only.
+ *  - id:        forwarded to the tooltip element (useful for aria-describedby)
+ */
+let MoniTooltip = class MoniTooltip extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.text = '';
+        this.position = 'top';
+        this.size = '';
+        this.rich = false;
+        this._target = null;
+        this._tooltipEl = null;
+        this._docKeydown = (e) => this._handleDocKeydown(e);
+        /**
+         * CSS `anchor-name` registered on the parent trigger so the tooltip
+         * can use `position-anchor` to bind to it. Generated per-instance via
+         * `crypto.randomUUID()` when CSS anchor positioning is supported.
+         */
+        this._anchorName = null;
+        this._show = () => {
+            if (!this._tooltipEl) {
+                this._tooltipEl = this.shadowRoot?.querySelector('.tooltip');
+            }
+            if (this._tooltipEl) {
+                this._tooltipEl.classList.add('visible');
+            }
+        };
+        this._hide = () => {
+            if (!this._tooltipEl) {
+                this._tooltipEl = this.shadowRoot?.querySelector('.tooltip');
+            }
+            if (this._tooltipEl) {
+                this._tooltipEl.classList.remove('visible');
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._target = this.parentElement;
+        if (this._target) {
+            // Ensure parent has position: relative so absolute tooltip is anchored
+            const style = getComputedStyle(this._target);
+            if (style.position === 'static') {
+                this._target.style.position = 'relative';
+            }
+            this._target.addEventListener('mouseenter', this._show);
+            this._target.addEventListener('focusin', this._show);
+            this._target.addEventListener('mouseleave', this._hide);
+            this._target.addEventListener('focusout', this._hide);
+            // Auto-register a CSS anchor name on the parent trigger when the
+            // browser supports anchor positioning. Consumers can opt out by
+            // setting `data-no-anchor` on the trigger.
+            const cssSupports = globalThis.CSS?.supports;
+            const supportsAnchor = cssSupports
+                ? cssSupports.call(window.CSS, 'anchor-name: --x')
+                : false;
+            if (supportsAnchor && !this._target.hasAttribute('data-no-anchor')) {
+                const cryptoApi = globalThis.crypto;
+                const id = cryptoApi?.randomUUID?.()
+                    ?? `tt-${Math.random().toString(36).slice(2, 10)}`;
+                this._anchorName = `--moni-tooltip-anchor-${id}`;
+                this._target.style.setProperty('anchor-name', this._anchorName);
+            }
+        }
+        document.addEventListener('keydown', this._docKeydown);
+    }
+    disconnectedCallback() {
+        if (this._target) {
+            this._target.removeEventListener('mouseenter', this._show);
+            this._target.removeEventListener('focusin', this._show);
+            this._target.removeEventListener('mouseleave', this._hide);
+            this._target.removeEventListener('focusout', this._hide);
+            if (this._anchorName) {
+                this._target.style.removeProperty('anchor-name');
+                this._anchorName = null;
+            }
+        }
+        document.removeEventListener('keydown', this._docKeydown);
+        super.disconnectedCallback();
+    }
+    _handleDocKeydown(e) {
+        if (e.key !== 'Escape')
+            return;
+        if (!this._tooltipEl?.classList.contains('visible'))
+            return;
+        this._hide();
+    }
+    /**
+     * Public ID of the tooltip element, suitable for `aria-describedby` on
+     * the trigger parent. Auto-generated if the consumer did not set `id`.
+     */
+    get tooltipId() {
+        return this._tooltipEl?.id || '';
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				display: contents;
+				font-family: var(--font);
+			}
+
+			/* M3 CSS anchor positioning (Baseline 2024, Chrome 125+, Edge 125+).
+			   When the parent has a registered anchor-name and this tooltip
+			   uses position-anchor, the browser positions the tooltip relative
+			   to the trigger natively — no JS needed for placement.
+			   Fallbacks to absolute positioning for older browsers. */
+			.tooltip {
+				position-anchor: var(--_anchor-name);
+			}
+			.tooltip.top,
+			.tooltip.top-start,
+			.tooltip.top-end {
+				position-area: block-start;
+			}
+			.tooltip.bottom,
+			.tooltip.bottom-start,
+			.tooltip.bottom-end {
+				position-area: block-end;
+			}
+			.tooltip.left {
+				position-area: inline-start;
+			}
+			.tooltip.right {
+				position-area: inline-end;
+			}
+			.tooltip.top-start,
+			.tooltip.bottom-start {
+				position-try-fallbacks: start;
+			}
+			.tooltip.top-end,
+			.tooltip.bottom-end {
+				position-try-fallbacks: end;
+			}
+
+			/* BeerCSS .tooltip — faithful port */
+			.tooltip {
+				--_space: -0.5rem;
+				visibility: hidden;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				gap: 0.5rem;
+				background-color: var(--inverse-surface);
+				color: var(--inverse-on-surface);
+				font-size: 0.75rem;
+				text-align: center;
+				border-radius: 0.25rem;
+				padding: 0.5rem;
+				position: absolute;
+				z-index: 200;
+				/* BeerCSS default: top center */
+				inset: 0 auto auto 50%;
+				inline-size: auto;
+				white-space: nowrap;
+				font-weight: 500;
+				opacity: 0;
+				transition: all var(--speed2);
+				line-height: normal;
+				transform: translate(-50%, -100%) scale(0.9);
+				margin-block-start: var(--_space);
+				pointer-events: none;
+				max-inline-size: 20rem;
+			}
+
+			/* M3 6 placements — derived from BeerCSS's 4 + start/end variants. */
+			.tooltip.top,
+			.tooltip.top-start,
+			.tooltip.top-end {
+				inset: 0 auto auto 50%;
+				transform: translate(-50%, -100%) scale(0.9);
+				margin-block-start: var(--_space);
+			}
+			.tooltip.top-start {
+				inset-inline-start: 0;
+				transform: translate(0, -100%) scale(0.9);
+			}
+			.tooltip.top-end {
+				inset-inline-start: auto;
+				inset-inline-end: 0;
+				transform: translate(0, -100%) scale(0.9);
+			}
+
+			.tooltip.bottom,
+			.tooltip.bottom-start,
+			.tooltip.bottom-end {
+				inset: auto auto 0 50%;
+				transform: translate(-50%, 100%) scale(0.9);
+				margin-block-end: var(--_space);
+				margin-block-start: 0;
+			}
+			.tooltip.bottom-start {
+				inset-inline-start: 0;
+				transform: translate(0, 100%) scale(0.9);
+			}
+			.tooltip.bottom-end {
+				inset-inline-start: auto;
+				inset-inline-end: 0;
+				transform: translate(0, 100%) scale(0.9);
+			}
+
+			/* Legacy positions (left/right) — preserved for backward compat. */
+			.tooltip.left {
+				inset: 50% auto auto 0;
+				transform: translate(-100%, -50%) scale(0.9);
+				margin-inline: var(--_space);
+				margin-block-start: 0;
+			}
+			.tooltip.right {
+				inset: 50% 0 auto auto;
+				transform: translate(100%, -50%) scale(0.9);
+				margin-inline: var(--_space);
+				margin-block-start: 0;
+			}
+
+			/* Size variants */
+			.tooltip.small  { inline-size: 8rem;  white-space: normal; }
+			.tooltip.medium { inline-size: 12rem; white-space: normal; }
+			.tooltip.large  { inline-size: 16rem; white-space: normal; }
+
+			/* Rich content — allow flex column for stacked content. */
+			:host([rich]) .tooltip {
+				flex-direction: column;
+				align-items: flex-start;
+				white-space: normal;
+				text-align: start;
+				padding: 0.75rem;
+			}
+			:host([rich]) .tooltip ::slotted(*) {
+				display: block;
+			}
+
+			/* Show state (triggered by JS class toggle) */
+			.tooltip.visible {
+				visibility: visible;
+				opacity: 1;
+			}
+			.tooltip.visible.top,
+			.tooltip.visible:not(.left, .right, .bottom, [class*='start'], [class*='end']) {
+				transform: translate(-50%, -100%) scale(1);
+			}
+			.tooltip.visible.top-start { transform: translate(0, -100%) scale(1); }
+			.tooltip.visible.top-end { transform: translate(0, -100%) scale(1); }
+			.tooltip.visible.bottom { transform: translate(-50%, 100%) scale(1); }
+			.tooltip.visible.bottom-start { transform: translate(0, 100%) scale(1); }
+			.tooltip.visible.bottom-end { transform: translate(0, 100%) scale(1); }
+			.tooltip.visible.left { transform: translate(-100%, -50%) scale(1); }
+			.tooltip.visible.right { transform: translate(100%, -50%) scale(1); }
+		`
+    ]; }
+    render() {
+        const classes = [
+            'tooltip',
+            this.position,
+            this.size
+        ].filter(Boolean).join(' ');
+        return html `<div
+			class=${classes}
+			role="tooltip"
+			id=${this.id || ''}
+			part="tooltip"
+			style=${this._anchorName ? `--_anchor-name: ${this._anchorName}` : ''}
+		>
+			<slot>${this.text}</slot>
+		</div>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniTooltip.prototype, "text", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTooltip.prototype, "position", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTooltip.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniTooltip.prototype, "rich", void 0);
+MoniTooltip = __decorate([
+    customElement('moni-tooltip')
+], MoniTooltip);
+export { MoniTooltip };
+export default MoniTooltip;

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

@@ -0,0 +1,42 @@
+import { MoniElement } from './_base/index.js';
+/**
+ * Material 3 Typography (`m3-docs/components/`).
+ *
+ * Renders a single piece of text using the M3 type scale. The component
+ * chooses both the semantic tag and the typography class based on the
+ * `variant` attribute. Consumers can override the tag via `as`.
+ *
+ * M3 type scale (5 categories, 3 sizes each):
+ *  - **display**: largest text, used for marketing or hero content.
+ *  - **headline**: page-level headings (H1 equivalent).
+ *  - **title**:    section headings, dialog titles.
+ *  - **body**:     paragraph text.
+ *  - **label**:    button text, captions.
+ *
+ * Each category has `large`, `medium`, and `small` sizes (per M3 spec).
+ *
+ * Attributes:
+ *  - variant: display | headline | title | body | label (default body)
+ *  - size:    large | medium | small (default medium)
+ *  - as:      override the rendered tag (e.g. "span", "p", "label")
+ *
+ * Slots:
+ *  - default: text content (falls back to `text` attribute if empty)
+ */
+export declare class MoniTypography extends MoniElement {
+    variant: 'display' | 'headline' | 'title' | 'body' | 'label';
+    size: 'large' | 'medium' | 'small';
+    as: string | null;
+    text: string;
+    /** Default semantic tag for each variant per M3 spec. */
+    private static _tagFor;
+    render(): import("lit-html").TemplateResult;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-typography': MoniTypography;
+    }
+}
+export default MoniTypography;
+//# sourceMappingURL=moni-typography.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"moni-typography.d.ts","sourceRoot":"","sources":["../../src/components/moni-typography.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,cAAe,SAAQ,WAAW;IAE9C,OAAO,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAU;IAEtE,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE9C,EAAE,EAAE,MAAM,GAAG,IAAI,CAAQ;IACI,IAAI,SAAM;IAEvC,yDAAyD;IACzD,OAAO,CAAC,MAAM,CAAC,OAAO;IAiBb,MAAM;IAcf,OAAgB,MAAM,4BAkHpB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,cAAc,CAAC;KAClC;CACD;AAED,eAAe,cAAc,CAAC"}