@moni-labs/moni-ui 0.2.0

package/dist/components/moni-slider.js

@@ -0,0 +1,422 @@
+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, nothing } 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';
+/**
+ * Slider that faithfully ports BeerCSS's `.slider` styles.
+ *
+ * Fixes:
+ *  - Uses @state() for internal reactive values so CSS vars update on every input
+ *  - Track visual (span) and tooltip positions update immediately on drag
+ *
+ * M3 spec (`m3-docs/components/sliders/specs.md`):
+ *  - Continuous slider: smooth drag between min/max.
+ *  - Discrete slider: snap to `step` intervals; tick marks visible.
+ *  - Tick marks: in Chrome/Edge, native `<datalist>` ticks render at every
+ *    option value. In Firefox, the datalist ticks are not rendered for
+ *    range inputs; consumers can use `tick-interval` to manually generate
+ *    a visual fallback if needed (P3.4 — outside the scope of this release).
+ *  - State layer: hover/focus state uses CSS `::before` overlay at 0.08/0.12
+ *    opacity per M3 (handled by `interaction-styles.ts`).
+ *
+ * Attributes:
+ *  - name, min, max, step, value, disabled
+ *  - size:       tiny | small | medium (default) | large | extra
+ *  - vertical:   present → rotated
+ *  - range:      present → two thumbs
+ *  - ticks:      present → datalist with min/max marks
+ *  - tick-interval: number — when set, generates datalist options every
+ *                    N units between min and max. Overrides `ticks`.
+ *  - indicator:  present → show value tooltip on focus
+ *  - indicator-placement: top (default) | bottom
+ *  - inset-icon: Material Symbols name inside the colored track
+ */
+let MoniSlider = class MoniSlider extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.name = '';
+        this.min = '0';
+        this.max = '100';
+        this.step = '';
+        this.tickInterval = null;
+        this.insetIcon = '';
+        this.indicatorPlacement = 'top';
+        this.size = 'medium';
+        // Boolean attributes
+        this.range = false;
+        this.disabled = false;
+        this.ticks = false;
+        this.indicator = false;
+        this.isVertical = false;
+        /** Internal reactive state — triggers CSS var updates on every input event */
+        this._value = '50';
+        this._valueEnd = '75';
+    }
+    get value() { return this._value; }
+    set value(v) { this._value = v; }
+    get valueEnd() { return this._valueEnd; }
+    set valueEnd(v) { this._valueEnd = v; }
+    _pct(v) {
+        const min = parseFloat(this.min) || 0;
+        const max = parseFloat(this.max) || 100;
+        const val = parseFloat(v) || 0;
+        return Math.max(0, Math.min(100, ((val - min) / (max - min)) * 100));
+    }
+    _onInput(e, index) {
+        const target = e.target;
+        if (index === 0) {
+            this._value = target.value;
+        }
+        else {
+            this._valueEnd = target.value;
+        }
+        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+    }
+    _onChange(e, index) {
+        const target = e.target;
+        if (index === 0) {
+            this._value = target.value;
+        }
+        else {
+            this._valueEnd = target.value;
+        }
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+    }
+    /**
+     * Render a `<datalist>` element with tick options. When `tick-interval`
+     * is set, generates options at every N units between min and max.
+     * Otherwise, if `ticks` is set, just min and max.
+     * Browsers that support datalist ticks for range (Chrome, Edge) will
+     * render visual marks; Firefox ignores them.
+     */
+    _renderDatalist() {
+        if (this.tickInterval != null && this.tickInterval > 0) {
+            const min = parseFloat(this.min) || 0;
+            const max = parseFloat(this.max) || 100;
+            const step = this.tickInterval;
+            const options = [];
+            for (let v = min; v <= max; v += step) {
+                options.push(Math.round(v * 1000) / 1000);
+            }
+            return html `<datalist id="ticks">
+				${options.map((v) => html `<option value=${v}></option>`)}
+			</datalist>`;
+        }
+        if (this.ticks) {
+            return html `<datalist id="ticks">
+				<option value=${this.min}></option>
+				<option value=${this.max}></option>
+			</datalist>`;
+        }
+        return nothing;
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				display: block;
+				font-family: var(--font);
+			}
+
+			/* BeerCSS .slider.vertical */
+			:host([vertical]) {
+				display: inline-block;
+				inline-size: var(--_thumb, 2.5rem);
+				block-size: var(--moni-slider-height, 150px);
+				vertical-align: middle;
+				position: relative;
+			}
+
+			:host([vertical]) .slider {
+				margin: 0.5rem auto !important;
+				padding: 50% 0;
+				transform: rotate(-90deg);
+				inline-size: 100%;
+			}
+
+			/* BeerCSS .slider */
+			.slider {
+				--_start: 0%;
+				--_end: 0%;
+				--_track: 1rem;
+				--_thumb: max(2.5rem, calc(var(--_track, 0) + 0.5rem));
+				display: flex;
+				align-items: center !important;
+				inline-size: auto;
+				block-size: var(--_thumb);
+				flex: none;
+				direction: ltr;
+				margin: 0 1.25rem;
+				color: var(--primary);
+				position: relative;
+			}
+
+			.slider.tiny  { --_track: 1rem; }
+			.slider.small { --_track: 1.5rem; }
+			.slider.medium { --_track: 2.5rem; }
+			.slider.large { --_track: 3.5rem; }
+			.slider.extra { --_track: 6rem; }
+
+			/* BeerCSS: track background via ::before */
+			.slider::before {
+				content: "";
+				position: absolute;
+				inline-size: 100%;
+				block-size: var(--_track);
+				border-radius: 1rem;
+				background: var(--active);
+				clip-path: polygon(
+					calc(var(--_start, 0) - 0.5rem) 0, 0 0, 0 100%,
+					calc(var(--_start, 0) - 0.5rem) 100%, calc(var(--_start, 0) - 0.5rem) 0,
+					calc(100% - var(--_end, 0) + 0.5rem) 0, 100% 0, 100% 100%,
+					calc(100% - var(--_end, 0) + 0.5rem) 100%, calc(100% - var(--_end, 0) + 0.5rem) 0
+				);
+			}
+
+			/* BeerCSS: colored fill span */
+			.slider > span:not([class]) {
+				position: absolute;
+				block-size: var(--_track);
+				border-radius: 1rem 0 0 1rem;
+				background: currentColor;
+				color: currentColor;
+				z-index: 0;
+				inset: calc(50% - (var(--_track, 0) / 2))
+					calc(var(--_end) + 0.5rem) auto var(--_start);
+			}
+
+			.slider > input[type='range'] + input[type='range'] ~ span:not([class]) {
+				border-radius: 0;
+				inset: calc(50% - (var(--_track, 0) / 2))
+					calc(var(--_end) + 0.5rem) auto
+					calc(var(--_start) + 0.5rem);
+			}
+
+			/* BeerCSS slider inputs */
+			.slider > input {
+				appearance: none;
+				box-shadow: none;
+				border: none;
+				outline: none;
+				pointer-events: none;
+				inline-size: 100%;
+				block-size: var(--_track);
+				background: none;
+				z-index: 1;
+				padding: 0;
+				margin: 0;
+				touch-action: none;
+			}
+
+			.slider > input:only-of-type {
+				pointer-events: all;
+			}
+
+			.slider > input ~ input {
+				position: absolute;
+			}
+
+			/* BeerCSS thumb styles */
+			.slider > input::-webkit-slider-thumb {
+				appearance: none;
+				box-shadow: none;
+				border: none;
+				outline: none;
+				pointer-events: all;
+				block-size: var(--_thumb);
+				inline-size: 0.25rem;
+				border-radius: 0.25rem;
+				background: currentColor;
+				cursor: grab;
+				margin: 0;
+				z-index: 1;
+			}
+			.slider > input::-webkit-slider-thumb:active { cursor: grabbing; }
+
+			.slider > input::-moz-range-thumb {
+				appearance: none;
+				box-shadow: none;
+				border: none;
+				outline: none;
+				pointer-events: all;
+				block-size: 2.75rem;
+				inline-size: 0.25rem;
+				border-radius: 0.25rem;
+				background: var(--primary);
+				cursor: grab;
+				margin: 0;
+			}
+
+			.slider > input:not(:disabled):is(:focus)::-webkit-slider-thumb {
+				transform: scaleX(0.6);
+			}
+
+			.slider > input:disabled { cursor: not-allowed; }
+			.slider > input:disabled::-webkit-slider-thumb { background: var(--outline); cursor: not-allowed; }
+			.slider > input:disabled::-moz-range-thumb { background: var(--outline); cursor: not-allowed; }
+			.slider > input:disabled ~ span:not([class]) { background: var(--outline); }
+
+			.slider:has(> [disabled]) { opacity: 0.62; }
+
+			/* Focus visible outline */
+			.slider > input:focus-visible::-webkit-slider-thumb {
+				outline: 0.1875rem solid var(--primary);
+				outline-offset: 0.25rem;
+			}
+			.slider > input:focus-visible::-moz-range-thumb {
+				outline: 0.1875rem solid var(--primary);
+				outline-offset: 0.25rem;
+			}
+
+			/* Inset icon */
+			.slider > span > i {
+				position: absolute;
+				block-size: auto;
+				inset: 0 auto 0 0.5rem;
+				color: var(--inverse-primary);
+				z-index: 1;
+			}
+			.slider:not(.medium, .large, .extra) > span > i { display: none; }
+
+			/* Value indicator tooltip */
+			.slider > .tooltip {
+				visibility: hidden;
+				opacity: 0;
+				border-radius: 2rem;
+				transition: top var(--speed2) ease, opacity var(--speed2) ease;
+				transform: translate(-50%, -25%);
+				padding: 0.75rem 1rem;
+				position: absolute;
+				background-color: var(--inverse-surface);
+				color: var(--inverse-on-surface);
+				font-size: 0.75rem;
+				font-weight: 500;
+				z-index: 2;
+				white-space: nowrap;
+			}
+
+			.slider > .tooltip.bottom {
+				transform: translate(-50%, 25%);
+			}
+
+			/* BeerCSS: tooltip shows on :focus of the input */
+			.slider > input:first-of-type:focus ~ .tooltip-1,
+			.slider > input:nth-of-type(2):focus ~ .tooltip-2 {
+				inset-block: -1rem auto;
+				opacity: 1;
+				visibility: visible;
+			}
+
+			.slider > input:first-of-type:focus ~ .tooltip-1.bottom,
+			.slider > input:nth-of-type(2):focus ~ .tooltip-2.bottom {
+				inset-block: auto -1rem;
+			}
+		`
+    ]; }
+    render() {
+        const pct = this._pct(this._value);
+        const pctEnd = this._pct(this._valueEnd);
+        const start = this.range ? pct : 0;
+        const end = this.range ? 100 - pctEnd : 100 - pct;
+        const rangeInput = (i, val) => html `
+			<input
+				part="control"
+				type="range"
+				min=${this.min}
+				max=${this.max}
+				step=${ifDefined(this.step || undefined)}
+				list=${ifDefined(this.ticks ? 'ticks' : undefined)}
+				?disabled=${this.disabled}
+				.value=${val}
+				name=${i === 0 ? ifDefined(this.name || undefined) : nothing}
+				@input=${(e) => this._onInput(e, i)}
+				@change=${(e) => this._onChange(e, i)}
+			/>
+		`;
+        const inset = this.insetIcon && ['medium', 'large', 'extra'].includes(this.size)
+            ? html `<i><moni-icon name="${this.insetIcon}"></moni-icon></i>`
+            : '';
+        const tooltip1 = this.indicator
+            ? html `<div class="tooltip tooltip-1 ${this.indicatorPlacement}" style="inset-inline-start: ${pct}%;">${this._value}</div>`
+            : nothing;
+        const tooltip2 = this.indicator && this.range
+            ? html `<div class="tooltip tooltip-2 ${this.indicatorPlacement}" style="inset-inline-start: ${pctEnd}%;">${this._valueEnd}</div>`
+            : nothing;
+        return html `<div
+			class="slider ${this.size}${this.isVertical ? ' vertical' : ''}"
+			part="root"
+			style="--_start: ${start}%; --_end: ${end}%;"
+		>
+			${this._renderDatalist()}
+			${this.range
+            ? html `${rangeInput(0, this._value)}${rangeInput(1, this._valueEnd)}`
+            : rangeInput(0, this._value)}
+			<span>${inset}</span>
+			${tooltip1}
+			${tooltip2}
+		</div>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniSlider.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniSlider.prototype, "min", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniSlider.prototype, "max", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniSlider.prototype, "step", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'tick-interval' })
+], MoniSlider.prototype, "tickInterval", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'inset-icon' })
+], MoniSlider.prototype, "insetIcon", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'indicator-placement' })
+], MoniSlider.prototype, "indicatorPlacement", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniSlider.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniSlider.prototype, "range", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniSlider.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniSlider.prototype, "ticks", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniSlider.prototype, "indicator", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'vertical' })
+], MoniSlider.prototype, "isVertical", void 0);
+__decorate([
+    state()
+], MoniSlider.prototype, "_value", void 0);
+__decorate([
+    state()
+], MoniSlider.prototype, "_valueEnd", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniSlider.prototype, "value", null);
+__decorate([
+    property({ reflect: true, attribute: 'value-end' })
+], MoniSlider.prototype, "valueEnd", null);
+MoniSlider = __decorate([
+    customElement('moni-slider')
+], MoniSlider);
+export { MoniSlider };
+export default MoniSlider;

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

@@ -0,0 +1,40 @@
+import { MoniElement } from './_base/index.js';
+import './moni-icon.js';
+/**
+ * Snackbar that faithfully ports BeerCSS's `.snackbar` styles.
+ *
+ * BeerCSS uses `.snackbar` with `position: fixed; inset: auto auto 6rem 50%;`
+ * and `.snackbar.active` / `.snackbar:popover-open` to show it.
+ *
+ * We use :host([active]) .snackbar with visibility/opacity/transform — same as BeerCSS.
+ * The host is display:block so the fixed snackbar inside is part of the stacking context
+ * of the document body (not clipped by any shadow root overflow).
+ *
+ * Material 3 spec (`m3-docs/components/snackbar/specs.md`): the message text
+ * must truncate at **2 lines** with ellipsis when too long. The container
+ * width adapts to the screen size (full width on compact, 40% on expanded).
+ *
+ * Attributes:
+ *  - text:      message
+ *  - action:    action label (visual only)
+ *  - placement: bottom (default) | top
+ *  - active:    present → visible
+ *  - max-lines: 2 (default) | number — clamp text to N lines with ellipsis
+ */
+export declare class MoniSnackbar extends MoniElement {
+    text: string;
+    action: string;
+    placement: 'bottom' | 'top';
+    active: boolean;
+    /** M3 spec: clamp the message text to N lines (default 2). */
+    maxLines: number;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-snackbar': MoniSnackbar;
+    }
+}
+export default MoniSnackbar;
+//# sourceMappingURL=moni-snackbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"moni-snackbar.d.ts","sourceRoot":"","sources":["../../src/components/moni-snackbar.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,YAAa,SAAQ,WAAW;IACf,IAAI,SAAM;IACV,MAAM,SAAM;IAEzC,SAAS,EAAE,QAAQ,GAAG,KAAK,CAAY;IACK,MAAM,UAAS;IAC3D,8DAA8D;IAE9D,QAAQ,SAAK;IAEb,OAAgB,MAAM,4BAmFpB;IAEO,MAAM;CAef;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD;AAED,eAAe,YAAY,CAAC"}

package/dist/components/moni-snackbar.js

@@ -0,0 +1,161 @@
+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';
+/**
+ * Snackbar that faithfully ports BeerCSS's `.snackbar` styles.
+ *
+ * BeerCSS uses `.snackbar` with `position: fixed; inset: auto auto 6rem 50%;`
+ * and `.snackbar.active` / `.snackbar:popover-open` to show it.
+ *
+ * We use :host([active]) .snackbar with visibility/opacity/transform — same as BeerCSS.
+ * The host is display:block so the fixed snackbar inside is part of the stacking context
+ * of the document body (not clipped by any shadow root overflow).
+ *
+ * Material 3 spec (`m3-docs/components/snackbar/specs.md`): the message text
+ * must truncate at **2 lines** with ellipsis when too long. The container
+ * width adapts to the screen size (full width on compact, 40% on expanded).
+ *
+ * Attributes:
+ *  - text:      message
+ *  - action:    action label (visual only)
+ *  - placement: bottom (default) | top
+ *  - active:    present → visible
+ *  - max-lines: 2 (default) | number — clamp text to N lines with ellipsis
+ */
+let MoniSnackbar = class MoniSnackbar extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.text = '';
+        this.action = '';
+        this.placement = 'bottom';
+        this.active = false;
+        /** M3 spec: clamp the message text to N lines (default 2). */
+        this.maxLines = 2;
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				/* Use block instead of contents so position:fixed inside
+				   works relative to the viewport (its containing block). */
+				display: block;
+				font-family: var(--font);
+				/* Host itself takes no space */
+				position: fixed;
+				inset: 0;
+				pointer-events: none;
+				z-index: 200;
+			}
+
+			/* BeerCSS .snackbar */
+			.snackbar {
+				position: fixed;
+				/* BeerCSS: inset: auto auto 6rem 50% for bottom placement */
+				inset-block-end: 6rem;
+				inset-block-start: auto;
+				inset-inline: 50% auto;
+				inline-size: 80%;
+				block-size: auto;
+				z-index: 200;
+				visibility: hidden;
+				display: flex;
+				box-shadow: var(--elevate2);
+				color: var(--inverse-on-surface);
+				background-color: var(--inverse-surface);
+				padding: 1rem;
+				cursor: pointer;
+				text-align: start;
+				align-items: center;
+				border-radius: 0.25rem;
+				gap: 0.5rem;
+				transition: all var(--speed2);
+				transform: translate(-50%, 1rem);
+				opacity: 0;
+				pointer-events: auto;
+			}
+
+			/* BeerCSS .snackbar.top */
+			.snackbar.top {
+				inset-block-start: 6rem;
+				inset-block-end: auto;
+				transform: translate(-50%, -1rem);
+			}
+
+			/* BeerCSS .snackbar.active */
+			:host([active]) .snackbar {
+				visibility: visible;
+				transform: translate(-50%, 0);
+				opacity: 1;
+			}
+
+			.snackbar > .max {
+				flex: auto;
+				/* M3 spec § Message: clamp at 2 lines (configurable via
+				   max-lines attribute). */
+				display: -webkit-box;
+				-webkit-box-orient: vertical;
+				-webkit-line-clamp: var(--_max-lines, 2);
+				line-clamp: var(--_max-lines, 2);
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+
+			.action {
+				font-weight: 500;
+				text-transform: uppercase;
+				font-size: 0.875rem;
+				letter-spacing: 0.05em;
+				color: var(--inverse-primary);
+				white-space: nowrap;
+			}
+
+			@media only screen and (min-width: 993px) {
+				.snackbar {
+					inline-size: 40%;
+				}
+			}
+		`
+    ]; }
+    render() {
+        return html `<div
+			class="snackbar ${this.placement}"
+			part="snackbar"
+			role="status"
+			aria-live="polite"
+			style="--_max-lines: ${this.maxLines}"
+		>
+			<slot name="icon"></slot>
+			<span class="max" part="text"><slot>${this.text}</slot></span>
+			${this.action
+            ? html `<span class="action" part="action">${this.action}</span>`
+            : ''}
+		</div>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniSnackbar.prototype, "text", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniSnackbar.prototype, "action", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniSnackbar.prototype, "placement", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniSnackbar.prototype, "active", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'max-lines' })
+], MoniSnackbar.prototype, "maxLines", void 0);
+MoniSnackbar = __decorate([
+    customElement('moni-snackbar')
+], MoniSnackbar);
+export { MoniSnackbar };
+export default MoniSnackbar;

package/dist/components/moni-split-button.d.ts

@@ -0,0 +1,33 @@
+import { MoniElement } from './_base/index.js';
+/**
+ * Visual-only split button. Combines a primary action button and a dropdown menu trigger.
+ *
+ * Attributes:
+ *  - variant: filled (default) | tonal | outlined | elevated
+ *  - size:    small | medium (default) | large | extra
+ *  - gap:     custom gap space (e.g. "8px" or "1rem")
+ *
+ * Slots:
+ *  - leading-button:  The main action button
+ *  - trailing-button: The menu dropdown button
+ */
+export declare class MoniSplitButton extends MoniElement {
+    variant: 'filled' | 'tonal' | 'outlined' | 'elevated';
+    size: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'extra';
+    gap: string;
+    private leadingElements;
+    private trailingElements;
+    static styles: import("lit").CSSResult[];
+    protected updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private handleSlotChange;
+    private getGapValue;
+    private updateChildren;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-split-button': MoniSplitButton;
+    }
+}
+export default MoniSplitButton;
+//# sourceMappingURL=moni-split-button.d.ts.map

package/dist/components/moni-split-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"moni-split-button.d.ts","sourceRoot":"","sources":["../../src/components/moni-split-button.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;GAWG;AACH,qBACa,eAAgB,SAAQ,WAAW;IAE/C,OAAO,EAAE,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,CAAY;IAGjE,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAG9E,GAAG,SAAM;IAGT,OAAO,CAAC,eAAe,CAAiB;IAGxC,OAAO,CAAC,gBAAgB,CAAiB;IAEzC,OAAgB,MAAM,4BAoBpB;cAEiB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAOpF,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,cAAc;IAuBb,MAAM;CAYf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD;AAED,eAAe,eAAe,CAAC"}