@moni-labs/moni-ui 0.2.0

package/dist/components/moni-split-button.js

@@ -0,0 +1,122 @@
+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, queryAssignedElements } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } 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
+ */
+let MoniSplitButton = class MoniSplitButton extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.variant = 'filled';
+        this.size = 'medium';
+        this.gap = '';
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				display: inline-flex;
+				align-items: center;
+				vertical-align: middle;
+			}
+
+			.wrapper {
+				display: inline-flex;
+				align-items: center;
+				gap: 0;
+				width: 100%;
+			}
+
+			::slotted(*:not(:first-child)) {
+				margin-inline-start: var(--moni-button-group-connected-gap, -0.0625rem);
+			}
+		`
+    ]; }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('variant') || changedProperties.has('size') || changedProperties.has('gap')) {
+            this.updateChildren();
+        }
+    }
+    handleSlotChange() {
+        this.updateChildren();
+    }
+    getGapValue(gap) {
+        if (!gap)
+            return '';
+        const preset = gap.toLowerCase();
+        if (preset === 'xs' || preset === 'xsmall')
+            return '1.125rem';
+        if (preset === 's' || preset === 'small')
+            return '0.75rem';
+        if (preset === 'm' || preset === 'medium')
+            return '0.5rem';
+        if (preset === 'l' || preset === 'large')
+            return '0.5rem';
+        if (preset === 'xl' || preset === 'xlarge')
+            return '0.5rem';
+        return gap;
+    }
+    updateChildren() {
+        const leading = this.leadingElements.find((el) => el.tagName.toLowerCase() === 'moni-button' || el.tagName.toLowerCase() === 'moni-icon-button');
+        const trailing = this.trailingElements.find((el) => el.tagName.toLowerCase() === 'moni-button' || el.tagName.toLowerCase() === 'moni-icon-button');
+        const hasGap = !!this.gap;
+        if (leading) {
+            leading.setAttribute('shape', hasGap ? 'left-round' : 'left-round-flat');
+            leading.setAttribute('size', this.size);
+            leading.setAttribute('variant', this.variant);
+        }
+        if (trailing) {
+            trailing.setAttribute('shape', hasGap ? 'right-round' : 'right-round-flat');
+            trailing.setAttribute('size', this.size);
+            trailing.setAttribute('variant', this.variant);
+        }
+    }
+    render() {
+        const resolvedGap = this.getGapValue(this.gap);
+        const inlineStyles = resolvedGap
+            ? `gap: ${resolvedGap}; --moni-button-group-connected-gap: 0px;`
+            : '';
+        return html `
+			<div class="wrapper" style=${inlineStyles} part="wrapper">
+				<slot name="leading-button" @slotchange=${this.handleSlotChange}></slot>
+				<slot name="trailing-button" @slotchange=${this.handleSlotChange}></slot>
+			</div>
+		`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniSplitButton.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniSplitButton.prototype, "size", void 0);
+__decorate([
+    property()
+], MoniSplitButton.prototype, "gap", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'leading-button', flatten: true })
+], MoniSplitButton.prototype, "leadingElements", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'trailing-button', flatten: true })
+], MoniSplitButton.prototype, "trailingElements", void 0);
+MoniSplitButton = __decorate([
+    customElement('moni-split-button')
+], MoniSplitButton);
+export { MoniSplitButton };
+export default MoniSplitButton;

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

@@ -0,0 +1,30 @@
+import { MoniElement } from './_base/index.js';
+import './moni-icon.js';
+/**
+ * Visual-only step. Renders an icon/number, a title, and a description.
+ *
+ * Attributes:
+ *  - title:       step heading
+ *  - description: step secondary text
+ *  - active:      present → primary color highlight
+ *  - completed:   present → filled circle with check
+ *  - icon:        Material Symbols name (overrides the number)
+ *  - index:       numeric label (auto-set by parent stepper, optional)
+ */
+export declare class MoniStep extends MoniElement {
+    title: string;
+    description: string;
+    active: boolean;
+    completed: boolean;
+    icon: string;
+    index: number;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-step': MoniStep;
+    }
+}
+export default MoniStep;
+//# sourceMappingURL=moni-step.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"moni-step.d.ts","sourceRoot":"","sources":["../../src/components/moni-step.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;GAUG;AACH,qBACa,QAAS,SAAQ,WAAW;IACX,KAAK,SAAM;IACX,WAAW,SAAM;IACF,MAAM,UAAS;IACf,SAAS,UAAS;IACjC,IAAI,SAAM;IACI,KAAK,SAAK;IAErD,OAAgB,MAAM,4BAqGpB;IAEO,MAAM;CAkBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD;AAED,eAAe,QAAQ,CAAC"}

package/dist/components/moni-step.js

@@ -0,0 +1,175 @@
+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 step. Renders an icon/number, a title, and a description.
+ *
+ * Attributes:
+ *  - title:       step heading
+ *  - description: step secondary text
+ *  - active:      present → primary color highlight
+ *  - completed:   present → filled circle with check
+ *  - icon:        Material Symbols name (overrides the number)
+ *  - index:       numeric label (auto-set by parent stepper, optional)
+ */
+let MoniStep = class MoniStep extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.title = '';
+        this.description = '';
+        this.active = false;
+        this.completed = false;
+        this.icon = '';
+        this.index = 0;
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				text-align: center;
+				gap: 0.5rem;
+				font-family: var(--font);
+				color: var(--on-surface-variant);
+				position: relative;
+				flex: 1;
+			}
+
+			:host(:not(:last-child))::after {
+				content: '';
+				position: absolute;
+				inset-inline-start: calc(50% + 1.25rem);
+				inset-inline-end: calc(-50% + 1.25rem);
+				inset-block-start: 1rem;
+				block-size: 0.0625rem;
+				background-color: var(--outline-variant);
+				z-index: 0;
+			}
+
+			:host-context(moni-stepper[orientation='vertical']) {
+				flex-direction: row;
+				align-items: flex-start;
+				text-align: start;
+				gap: 1rem;
+				min-block-size: 4rem;
+			}
+
+			/* Vertical connector. Geometry: the dot occupies y=0 to y=2rem at
+			   the top of the step (host is column flex with min-block-size 4rem).
+			   The connector runs from the BOTTOM of the current dot (y=2rem) to
+			   the BOTTOM of the current step (y=100%). This formula stays
+			   calibrated regardless of step height. */
+			:host-context(moni-stepper[orientation='vertical']):host(:not(:last-child))::after {
+				position: absolute;
+				inset-inline-start: calc(1rem - 0.03125rem);
+				inset-block-start: 2rem;
+				inset-inline-end: auto;
+				inline-size: 0.0625rem;
+				block-size: calc(100% - 2rem);
+				z-index: 0;
+				margin: 0;
+				background-color: var(--outline-variant);
+			}
+
+			.dot {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				inline-size: 2rem;
+				block-size: 2rem;
+				border-radius: 50%;
+				background-color: var(--surface-container);
+				color: var(--on-surface-variant);
+				font-size: 0.875rem;
+				font-weight: 500;
+				flex: none;
+				z-index: 1;
+			}
+
+			:host([active]) .dot {
+				background-color: var(--primary);
+				color: var(--on-primary);
+			}
+
+			:host([completed]) .dot {
+				background-color: var(--primary);
+				color: var(--on-primary);
+			}
+
+			:host([active]) .text {
+				color: var(--on-surface);
+			}
+
+			.text {
+				display: flex;
+				flex-direction: column;
+				min-inline-size: 0;
+				z-index: 1;
+			}
+			.title {
+				font-size: 0.875rem;
+				font-weight: 500;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+			.description {
+				font-size: 0.75rem;
+				opacity: 0.7;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+		`
+    ]; }
+    render() {
+        const dot = this.completed
+            ? html `<moni-icon name="check"></moni-icon>`
+            : this.icon
+                ? html `<moni-icon name="${this.icon}"></moni-icon>`
+                : html `${this.index + 1}`;
+        return html `
+			<span class="dot" part="dot">${dot}</span>
+			<div class="text" part="text">
+				<span class="title" part="title"
+					><slot>${this.title}</slot></span
+				>
+				<span class="description" part="description"
+					>${this.description}</span
+				>
+			</div>
+		`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniStep.prototype, "title", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniStep.prototype, "description", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniStep.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniStep.prototype, "completed", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniStep.prototype, "icon", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], MoniStep.prototype, "index", void 0);
+MoniStep = __decorate([
+    customElement('moni-step')
+], MoniStep);
+export { MoniStep };
+export default MoniStep;

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

@@ -0,0 +1,35 @@
+import { MoniElement } from './_base/index.js';
+/**
+ * Visual-only stepper. Wraps a list of <moni-step> children, propagates the
+ * `current` index to each child, and styles the connectors between them.
+ *
+ * Attributes:
+ *  - orientation: horizontal (default) | vertical
+ *  - current:     zero-based index of the active step
+ */
+export declare class MoniStepper extends MoniElement {
+    orientation: 'horizontal' | 'vertical';
+    current: number;
+    private _steps;
+    updated(changed: Map<string, unknown>): void;
+    /**
+     * Propagate the `current` index to each child <moni-step>:
+     *  - sets `index` from the child's position
+     *  - sets `completed` on every step before `current`
+     *  - sets `active` on the step at `current`
+     *
+     * Deferred to a microtask so that slotted children are guaranteed
+     * to have finished their first update cycle before we write to them.
+     */
+    private _syncSteps;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+    private _onSlotChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-stepper': MoniStepper;
+    }
+}
+export default MoniStepper;
+//# sourceMappingURL=moni-stepper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"moni-stepper.d.ts","sourceRoot":"","sources":["../../src/components/moni-stepper.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAG7D;;;;;;;GAOG;AACH,qBACa,WAAY,SAAQ,WAAW;IAE3C,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IACX,OAAO,SAAK;IAGvD,OAAO,CAAC,MAAM,CAAc;IAEnB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAU9C;;;;;;;;OAQG;IACH,OAAO,CAAC,UAAU;IAclB,OAAgB,MAAM,4BAwBpB;IAEO,MAAM;IAMf,OAAO,CAAC,aAAa,CAGnB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD;AAED,eAAe,WAAW,CAAC"}

package/dist/components/moni-stepper.js

@@ -0,0 +1,101 @@
+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, queryAssignedElements } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+/**
+ * Visual-only stepper. Wraps a list of <moni-step> children, propagates the
+ * `current` index to each child, and styles the connectors between them.
+ *
+ * Attributes:
+ *  - orientation: horizontal (default) | vertical
+ *  - current:     zero-based index of the active step
+ */
+let MoniStepper = class MoniStepper extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.orientation = 'horizontal';
+        this.current = 0;
+        this._onSlotChange = () => {
+            // Steps may have been added/removed; re-sync.
+            this._syncSteps();
+        };
+    }
+    updated(changed) {
+        if (changed.has('current') ||
+            changed.has('orientation') ||
+            changed.size === 0) {
+            this._syncSteps();
+        }
+    }
+    /**
+     * Propagate the `current` index to each child <moni-step>:
+     *  - sets `index` from the child's position
+     *  - sets `completed` on every step before `current`
+     *  - sets `active` on the step at `current`
+     *
+     * Deferred to a microtask so that slotted children are guaranteed
+     * to have finished their first update cycle before we write to them.
+     */
+    _syncSteps() {
+        Promise.resolve().then(() => {
+            let steps = this._steps || [];
+            if (steps.length === 0) {
+                steps = Array.from(this.querySelectorAll('moni-step'));
+            }
+            steps.forEach((step, i) => {
+                step.index = i;
+                step.completed = i < this.current;
+                step.active = i === this.current;
+            });
+        });
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				display: block;
+				font-family: var(--font);
+			}
+
+			.list {
+				display: flex;
+				gap: 0.5rem;
+				padding: 0;
+				margin: 0;
+				list-style: none;
+			}
+			:host([orientation='vertical']) .list {
+				flex-direction: column;
+			}
+
+			::slotted(*) {
+				flex: 1;
+				min-inline-size: 0;
+			}
+		`
+    ]; }
+    render() {
+        return html `<ol class="list" part="stepper">
+			<slot @slotchange=${this._onSlotChange}></slot>
+		</ol>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniStepper.prototype, "orientation", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], MoniStepper.prototype, "current", void 0);
+__decorate([
+    queryAssignedElements({ selector: 'moni-step' })
+], MoniStepper.prototype, "_steps", void 0);
+MoniStepper = __decorate([
+    customElement('moni-stepper')
+], MoniStepper);
+export { MoniStepper };
+export default MoniStepper;

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

@@ -0,0 +1,39 @@
+import { MoniElement } from './_base/index.js';
+import './moni-icon.js';
+/**
+ * Switch styled per Material Design 3 specs.
+ *
+ * M3 measurements (`m3-docs/components/switch/specs.md`):
+ *  - Track: 52dp × 32dp, 2dp outline, full corner radius
+ *  - Handle (thumb): 16dp unselected, 24dp selected, 28dp pressed
+ *  - State layer: 40dp circular ripple on hover/focus/pressed
+ *  - Icon (optional): 16dp on selected and/or unselected handle
+ *
+ * Attributes:
+ *  - label:    text label (displayed to the right of the switch)
+ *  - checked:  present
+ *  - disabled: present
+ *  - icon:     present → renders check/close icons inside the thumb
+ *  - name:     forwarded to input.name
+ *  - value:    forwarded to input.value
+ */
+export declare class MoniSwitch extends MoniElement {
+    label: string;
+    checked: boolean;
+    disabled: boolean;
+    icon: boolean;
+    name: string;
+    value: string;
+    private _input;
+    updated(changed: Map<string, unknown>): void;
+    private _onChange;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-switch': MoniSwitch;
+    }
+}
+export default MoniSwitch;
+//# sourceMappingURL=moni-switch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"moni-switch.d.ts","sourceRoot":"","sources":["../../src/components/moni-switch.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,UAAW,SAAQ,WAAW;IACb,KAAK,SAAM;IACI,OAAO,UAAS;IAChB,QAAQ,UAAS;IACjB,IAAI,UAAS;IAC5B,IAAI,SAAM;IACV,KAAK,SAAM;IAExB,OAAO,CAAC,MAAM,CAAoB;IAEzC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAO9C,OAAO,CAAC,SAAS;IAKjB,OAAgB,MAAM,4BAiKpB;IAEO,MAAM;CAmBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD;AAED,eAAe,UAAU,CAAC"}