@moni-labs/moni-ui 0.2.0

package/src/components/moni-button-group.ts

@@ -0,0 +1,277 @@
+import { html, css, nothing } from 'lit';
+import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+
+/**
+ * Visual-only button group. Organizes `moni-button` or `moni-icon-button`
+ * components in a row.
+ *
+ * **`variant="connected"`** is the Material Design 3 Expressive replacement
+ * for the deprecated `moni-segmented-button` (see
+ * `m3-docs/components/segmented-buttons/overview.md` § M3 Expressive update).
+ * In connected mode, segments share borders via propagated `shape` values
+ * (`left-round-flat`, `no-round`, `right-round-flat` for a gap-less row), and
+ * the group manages single/multi-select toggle state. This is the
+ * **only Moni component that intentionally uses `@click` listeners** —
+ * toggle behavior is essential to the M3 connected button group semantics.
+ *
+ * Accessibility:
+ *  - The host renders `role="group"` (configurable via `role` attribute).
+ *  - `aria-label` / `aria-labelledby` should be set by the consumer to
+ *    identify the group to assistive technology.
+ *
+ * Attributes:
+ *  - variant:    standard (default) | connected
+ *  - size:       small | medium (default) | large | extra
+ *  - multi:      boolean (default false) — multiple toggles allowed
+ *  - gap:        custom gap space (e.g. "8px" or "1rem"); in `connected`
+ *                variant the default is 0.125rem (2dp) per M3 spec
+ *  - role:       ARIA role override (default "group")
+ *  - label:      aria-label for the group
+ *  - labelled-by: aria-labelledby reference
+ */
+@customElement('moni-button-group')
+export class MoniButtonGroup extends MoniElement {
+	@property({ reflect: true })
+	variant: 'standard' | 'connected' = 'standard';
+
+	@property({ reflect: true })
+	size: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'extra' = 'medium';
+
+	@property({ type: Boolean, reflect: true })
+	multi = false;
+
+	@property()
+	gap = '';
+
+	@property({ reflect: true })
+	role: 'group' | 'toolbar' | 'radiogroup' = 'group';
+
+	@property({ reflect: true })
+	label = '';
+
+	@property({ reflect: true, attribute: 'labelled-by' })
+	labelledBy = '';
+
+	@queryAssignedElements({ flatten: true })
+	private slottedButtons!: HTMLElement[];
+
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				display: inline-flex;
+				align-items: center;
+				vertical-align: middle;
+			}
+
+			.group-container {
+				display: inline-flex;
+				align-items: center;
+				width: 100%;
+			}
+
+			:host([variant='standard']) .group-container {
+				gap: 0.5rem;
+			}
+			:host([variant='standard'][size='xsmall']) .group-container {
+				gap: 1.125rem; /* 18dp */
+			}
+			:host([variant='standard'][size='small']) .group-container {
+				gap: 0.75rem; /* 12dp */
+			}
+			:host([variant='standard'][size='medium']) .group-container {
+				gap: 0.5rem; /* 8dp */
+			}
+			:host([variant='standard'][size='large']) .group-container {
+				gap: 0.5rem; /* 8dp */
+			}
+			:host([variant='standard'][size='xlarge']) .group-container,
+			:host([variant='standard'][size='extra']) .group-container {
+				gap: 0.5rem; /* 8dp */
+			}
+
+			:host([variant='connected']) .group-container {
+				gap: 0.125rem; /* 2dp */
+			}
+		`
+	];
+
+	protected override updated(changedProperties: Map<string | number | symbol, unknown>) {
+		super.updated(changedProperties);
+		if (changedProperties.has('variant') || changedProperties.has('size') || changedProperties.has('gap')) {
+			this.updateChildren();
+		}
+	}
+
+	private handleSlotChange() {
+		this.updateChildren();
+	}
+
+	private getGapValue(gap: string): string {
+		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;
+	}
+
+	private updateChildren() {
+		const buttons = this.slottedButtons.filter(
+			(el) => el.tagName.toLowerCase() === 'moni-button' || el.tagName.toLowerCase() === 'moni-icon-button'
+		);
+
+		buttons.forEach((btn, index) => {
+			// Propagate size
+			btn.setAttribute('size', this.size);
+
+			// Propagate shape for connected variant
+			if (this.variant === 'connected') {
+				if (this.gap) {
+					if (buttons.length === 1) {
+						btn.setAttribute('shape', 'round');
+					} else if (index === 0) {
+						btn.setAttribute('shape', 'left-round');
+					} else if (index === buttons.length - 1) {
+						btn.setAttribute('shape', 'right-round');
+					} else {
+						btn.setAttribute('shape', 'inner-round');
+					}
+				} else {
+					if (buttons.length === 1) {
+						btn.setAttribute('shape', 'round');
+					} else if (index === 0) {
+						btn.setAttribute('shape', 'left-round-flat');
+					} else if (index === buttons.length - 1) {
+						btn.setAttribute('shape', 'right-round-flat');
+					} else {
+						btn.setAttribute('shape', 'no-round');
+					}
+				}
+			} else {
+				// Standard variant: buttons retain their own shapes or default round
+				const currentShape = btn.getAttribute('shape');
+				if (!currentShape || ['left-round-flat', 'right-round-flat', 'no-round', 'left-round', 'right-round', 'inner-round'].includes(currentShape)) {
+					btn.setAttribute('shape', 'round');
+				}
+			}
+		});
+	}
+
+	private handlePointerDown(e: PointerEvent) {
+		if (this.variant !== 'standard') return;
+		const target = e.target as HTMLElement;
+		const button = target.closest('moni-button, moni-icon-button') as HTMLElement;
+		if (!button || button.hasAttribute('disabled')) return;
+
+		const buttons = this.slottedButtons.filter(
+			(el) => el.tagName.toLowerCase() === 'moni-button' || el.tagName.toLowerCase() === 'moni-icon-button'
+		);
+		const index = buttons.indexOf(button);
+		if (index === -1) return;
+
+		const prev = buttons[index - 1];
+		const next = buttons[index + 1];
+
+		if (prev) {
+			prev.style.transition = 'transform 200ms cubic-bezier(0.2, 0, 0, 1)';
+			prev.style.transform = 'translateX(-6px) scaleX(0.92)';
+			prev.style.transformOrigin = 'right center';
+		}
+		if (next) {
+			next.style.transition = 'transform 200ms cubic-bezier(0.2, 0, 0, 1)';
+			next.style.transform = 'translateX(6px) scaleX(0.92)';
+			next.style.transformOrigin = 'left center';
+		}
+	}
+
+	private handlePointerUp() {
+		const buttons = this.slottedButtons.filter(
+			(el) => el.tagName.toLowerCase() === 'moni-button' || el.tagName.toLowerCase() === 'moni-icon-button'
+		);
+		buttons.forEach((btn) => {
+			btn.style.transform = '';
+			btn.style.transformOrigin = '';
+		});
+	}
+
+	private handleClick(e: Event) {
+		const target = e.target as HTMLElement;
+		const clickedButton = target.closest('moni-button, moni-icon-button');
+
+		if (!clickedButton || clickedButton.hasAttribute('disabled')) {
+			return;
+		}
+
+		const buttons = this.slottedButtons.filter(
+			(el) => el.tagName.toLowerCase() === 'moni-button' || el.tagName.toLowerCase() === 'moni-icon-button'
+		);
+
+		if (!this.multi) {
+			buttons.forEach((btn) => {
+				if (btn !== clickedButton) {
+					btn.removeAttribute('active');
+					(btn as any).active = false;
+				}
+			});
+		}
+
+		// Toggle clicked button active state
+		const wasActive = clickedButton.hasAttribute('active');
+		if (wasActive) {
+			clickedButton.removeAttribute('active');
+			(clickedButton as any).active = false;
+		} else {
+			clickedButton.setAttribute('active', '');
+			(clickedButton as any).active = true;
+		}
+
+		this.dispatchEvent(
+			new CustomEvent('change', {
+				bubbles: true,
+				composed: true,
+				detail: {
+					button: clickedButton,
+					active: !wasActive
+				}
+			})
+		);
+	}
+
+	override render() {
+		const resolvedGap = this.getGapValue(this.gap);
+		const inlineStyles = resolvedGap
+			? `gap: ${resolvedGap}; --moni-button-group-connected-gap: 0px;`
+			: '';
+		// M3 connected button group a11y: role="group" by default. Consumers
+		// can override via the `role` attribute (e.g. "toolbar" for app
+		// actions) and provide an aria-label or aria-labelledby.
+		return html`
+			<div
+				class="group-container"
+				style=${inlineStyles}
+				part="container"
+				role=${this.role}
+				aria-label=${this.label || nothing}
+				aria-labelledby=${this.labelledBy || nothing}
+				@pointerdown=${this.handlePointerDown}
+				@pointerup=${this.handlePointerUp}
+				@pointercancel=${this.handlePointerUp}
+				@pointerleave=${this.handlePointerUp}
+			>
+				<slot @slotchange=${this.handleSlotChange} @click=${this.handleClick}></slot>
+			</div>
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-button-group': MoniButtonGroup;
+	}
+}
+
+export default MoniButtonGroup;

package/src/components/moni-button-segment.ts

@@ -0,0 +1,291 @@
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+import './moni-icon.js';
+
+/**
+ * A selectable segment button designed to be grouped inside a `moni-segmented-button`.
+ *
+ * Attributes:
+ *  - value:      The value of the segment (default "on")
+ *  - checked:    Whether the segment is checked/selected
+ *  - disabled:   Whether the segment is disabled
+ *  - position:   Automatically set by the parent (first | middle | last | solo)
+ *  - hide-check: Hides the checkmark when selected
+ */
+@customElement('moni-button-segment')
+export class MoniButtonSegment extends MoniElement {
+	@property({ reflect: true })
+	value = 'on';
+
+	@property({ type: Boolean, reflect: true })
+	checked = false;
+
+	@property({ reflect: true })
+	size: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'extra' = 'medium';
+
+	@property({ type: Boolean, reflect: true })
+	disabled = false;
+
+	@property({ reflect: true })
+	position: 'first' | 'middle' | 'last' | 'solo' = 'solo';
+
+	@property({ type: Boolean, reflect: true, attribute: 'hide-check' })
+	hideCheck = false;
+
+	static override styles = [
+		sharedStyles,
+		css`
+			.label {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				font-family: inherit;
+				font-size: inherit;
+				font-weight: inherit;
+				color: inherit;
+				text-align: center;
+			}
+			:host {
+				display: inline-flex;
+				vertical-align: middle;
+				position: relative;
+				z-index: 1;
+			}
+
+			/* Collapsing margins on host */
+			:host(:not([position='first'])) {
+				margin-inline-start: var(--moni-button-segment-gap, -0.0625rem);
+			}
+
+			:host([disabled]) {
+				pointer-events: none;
+			}
+
+			.button {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				box-sizing: border-box;
+				height: 2.5rem;
+				width: 100%;
+				padding: 0 1rem;
+				font-size: 0.875rem;
+				font-weight: 500;
+				font-family: inherit;
+				color: var(--on-surface);
+				background-color: transparent;
+				border: 0.0625rem solid var(--outline-variant, var(--outline, #79747e));
+				cursor: pointer;
+				user-select: none;
+				transition:
+					background-color var(--speed2),
+					color var(--speed2),
+					border-radius var(--speed2),
+					transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
+					box-shadow 250ms ease;
+				position: relative;
+				gap: 0.5rem;
+			}
+
+			.button::after {
+				content: '';
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				min-width: 100%;
+				min-height: 3rem; /* 48px minimum touch target */
+				transform: translate(-50%, -50%);
+			}
+
+			/* Sizes */
+			.button.xsmall {
+				height: 1.75rem;
+				min-width: 3rem; /* 48px */
+				font-size: 0.75rem;
+				padding: 0 0.5rem;
+			}
+			.button.small {
+				height: 2rem;
+				min-width: 3rem; /* 48px */
+				padding: 0 0.75rem;
+			}
+			.button.large {
+				height: 3rem;
+				padding: 0 1.25rem;
+			}
+			.button.xlarge,
+			.button.extra {
+				height: 3.5rem;
+				font-size: 1rem;
+				padding: 0 1.5rem;
+			}
+
+			:host([disabled]) .button {
+				opacity: 0.38;
+				cursor: not-allowed;
+			}
+
+			/* Border Radius positioning */
+			:host([position='first']) .button {
+				border-radius: var(--moni-button-segment-radius-left, 1.25rem 0.5rem 0.5rem 1.25rem);
+			}
+			:host([position='first']) .button.xsmall {
+				border-radius: var(--moni-button-segment-radius-left, 0.875rem 0.25rem 0.25rem 0.875rem);
+			}
+			:host([position='first']) .button.small {
+				border-radius: var(--moni-button-segment-radius-left, 1rem 0.5rem 0.5rem 1rem);
+			}
+			:host([position='first']) .button.large {
+				border-radius: var(--moni-button-segment-radius-left, 1.5rem 1rem 1rem 1.5rem);
+			}
+			:host([position='first']) .button.xlarge,
+			:host([position='first']) .button.extra {
+				border-radius: var(--moni-button-segment-radius-left, 1.75rem 1.25rem 1.25rem 1.75rem);
+			}
+
+			:host([position='last']) .button {
+				border-radius: var(--moni-button-segment-radius-right, 0.5rem 1.25rem 1.25rem 0.5rem);
+			}
+			:host([position='last']) .button.xsmall {
+				border-radius: var(--moni-button-segment-radius-right, 0.25rem 0.875rem 0.875rem 0.25rem);
+			}
+			:host([position='last']) .button.small {
+				border-radius: var(--moni-button-segment-radius-right, 0.5rem 1rem 1rem 0.5rem);
+			}
+			:host([position='last']) .button.large {
+				border-radius: var(--moni-button-segment-radius-right, 1rem 1.5rem 1.5rem 1rem);
+			}
+			:host([position='last']) .button.xlarge,
+			:host([position='last']) .button.extra {
+				border-radius: var(--moni-button-segment-radius-right, 1.25rem 1.75rem 1.75rem 1.25rem);
+			}
+
+			:host([position='middle']) .button {
+				border-radius: var(--moni-button-segment-radius-middle, 0.5rem);
+			}
+			:host([position='middle']) .button.xsmall {
+				border-radius: var(--moni-button-segment-radius-middle, 0.25rem);
+			}
+			:host([position='middle']) .button.small {
+				border-radius: var(--moni-button-segment-radius-middle, 0.5rem);
+			}
+			:host([position='middle']) .button.large {
+				border-radius: var(--moni-button-segment-radius-middle, 1rem);
+			}
+			:host([position='middle']) .button.xlarge,
+			:host([position='middle']) .button.extra {
+				border-radius: var(--moni-button-segment-radius-middle, 1.25rem);
+			}
+
+			:host([position='solo']) .button {
+				border-radius: 1.25rem;
+			}
+			:host([position='solo']) .button.xsmall {
+				border-radius: 0.875rem;
+			}
+			:host([position='solo']) .button.small {
+				border-radius: 1rem;
+			}
+			:host([position='solo']) .button.large {
+				border-radius: 1.5rem;
+			}
+			:host([position='solo']) .button.xlarge,
+			:host([position='solo']) .button.extra {
+				border-radius: 1.75rem;
+			}
+
+			/* Hover and Active states */
+			:host(:hover:not([disabled])) {
+				z-index: 2;
+			}
+			:host(:hover:not([disabled])) .button {
+				transform: translateY(-0.0625rem);
+			}
+			:host(:hover:not([disabled]):not([checked])) .button {
+				background-color: var(--surface-container-high, rgba(0, 0, 0, 0.04));
+			}
+
+			:host(:active:not([disabled])) .button {
+				transform: translateY(0.0625rem) scale(0.97);
+			}
+
+			/* Checked state */
+			:host([checked]) {
+				z-index: 3;
+			}
+			:host([checked]) .button {
+				background-color: var(--secondary-container);
+				color: var(--on-secondary-container);
+			}
+
+			:host([checked]:hover:not([disabled])) {
+				z-index: 3;
+			}
+			:host([checked]:hover:not([disabled])) .button {
+				background-color: var(--secondary-container);
+				opacity: 0.92;
+			}
+
+			/* Checkmark Animation */
+			.checkmark {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				font-size: 1.125rem;
+				inline-size: 0;
+				block-size: 1.125rem;
+				opacity: 0;
+				transform: scale(0);
+				margin-inline-end: -0.5rem; /* Cancels host gap when collapsed */
+				transition:
+					inline-size var(--speed2) var(--ease-standard),
+					margin-inline-end var(--speed2) var(--ease-standard),
+					opacity var(--speed2) var(--ease-standard),
+					transform var(--speed2) var(--ease-standard);
+				overflow: hidden;
+				color: inherit;
+				flex: none;
+			}
+
+			:host([checked]:not([hide-check])) .checkmark {
+				inline-size: 1.125rem;
+				margin-inline-end: 0;
+				opacity: 1;
+				transform: scale(1);
+			}
+
+			/* Icon slot */
+			::slotted([slot='icon']) {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				font-size: 1.125rem;
+				inline-size: 1.125rem;
+				block-size: 1.125rem;
+				color: inherit;
+				flex: none;
+			}
+		`
+	];
+
+	override render() {
+		return html`
+			<button class="button ${this.size}" type="button" ?disabled=${this.disabled}>
+				<span class="checkmark" part="checkmark">
+					<moni-icon name="check"></moni-icon>
+				</span>
+				<slot name="icon"></slot>
+				<span class="label" part="label"><slot></slot></span>
+			</button>
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-button-segment': MoniButtonSegment;
+	}
+}
+
+export default MoniButtonSegment;