@moni-labs/moni-ui 0.2.0

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

@@ -0,0 +1,55 @@
+import { MoniElement } 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
+ */
+export declare class MoniButtonGroup extends MoniElement {
+    variant: 'standard' | 'connected';
+    size: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'extra';
+    multi: boolean;
+    gap: string;
+    role: 'group' | 'toolbar' | 'radiogroup';
+    label: string;
+    labelledBy: string;
+    private slottedButtons;
+    static styles: import("lit").CSSResult[];
+    protected updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private handleSlotChange;
+    private getGapValue;
+    private updateChildren;
+    private handlePointerDown;
+    private handlePointerUp;
+    private handleClick;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-button-group': MoniButtonGroup;
+    }
+}
+export default MoniButtonGroup;
+//# sourceMappingURL=moni-button-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"moni-button-group.d.ts","sourceRoot":"","sources":["../../src/components/moni-button-group.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBACa,eAAgB,SAAQ,WAAW;IAE/C,OAAO,EAAE,UAAU,GAAG,WAAW,CAAc;IAG/C,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAG9E,KAAK,UAAS;IAGd,GAAG,SAAM;IAGT,IAAI,EAAE,OAAO,GAAG,SAAS,GAAG,YAAY,CAAW;IAGnD,KAAK,SAAM;IAGX,UAAU,SAAM;IAGhB,OAAO,CAAC,cAAc,CAAiB;IAEvC,OAAgB,MAAM,4BAuCpB;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;IA0CtB,OAAO,CAAC,iBAAiB;IA2BzB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,WAAW;IA2CV,MAAM;CAyBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD;AAED,eAAe,eAAe,CAAC"}

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

@@ -0,0 +1,278 @@
+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, 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
+ */
+let MoniButtonGroup = class MoniButtonGroup extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.variant = 'standard';
+        this.size = 'medium';
+        this.multi = false;
+        this.gap = '';
+        this.role = 'group';
+        this.label = '';
+        this.labelledBy = '';
+    }
+    static { this.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 */
+			}
+		`
+    ]; }
+    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 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');
+                }
+            }
+        });
+    }
+    handlePointerDown(e) {
+        if (this.variant !== 'standard')
+            return;
+        const target = e.target;
+        const button = target.closest('moni-button, moni-icon-button');
+        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';
+        }
+    }
+    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 = '';
+        });
+    }
+    handleClick(e) {
+        const target = e.target;
+        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.active = false;
+                }
+            });
+        }
+        // Toggle clicked button active state
+        const wasActive = clickedButton.hasAttribute('active');
+        if (wasActive) {
+            clickedButton.removeAttribute('active');
+            clickedButton.active = false;
+        }
+        else {
+            clickedButton.setAttribute('active', '');
+            clickedButton.active = true;
+        }
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                button: clickedButton,
+                active: !wasActive
+            }
+        }));
+    }
+    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>
+		`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniButtonGroup.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniButtonGroup.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniButtonGroup.prototype, "multi", void 0);
+__decorate([
+    property()
+], MoniButtonGroup.prototype, "gap", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniButtonGroup.prototype, "role", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniButtonGroup.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'labelled-by' })
+], MoniButtonGroup.prototype, "labelledBy", void 0);
+__decorate([
+    queryAssignedElements({ flatten: true })
+], MoniButtonGroup.prototype, "slottedButtons", void 0);
+MoniButtonGroup = __decorate([
+    customElement('moni-button-group')
+], MoniButtonGroup);
+export { MoniButtonGroup };
+export default MoniButtonGroup;

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

@@ -0,0 +1,29 @@
+import { MoniElement } 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
+ */
+export declare class MoniButtonSegment extends MoniElement {
+    value: string;
+    checked: boolean;
+    size: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'extra';
+    disabled: boolean;
+    position: 'first' | 'middle' | 'last' | 'solo';
+    hideCheck: boolean;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-button-segment': MoniButtonSegment;
+    }
+}
+export default MoniButtonSegment;
+//# sourceMappingURL=moni-button-segment.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"moni-button-segment.d.ts","sourceRoot":"","sources":["../../src/components/moni-button-segment.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;GASG;AACH,qBACa,iBAAkB,SAAQ,WAAW;IAEjD,KAAK,SAAQ;IAGb,OAAO,UAAS;IAGhB,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAG9E,QAAQ,UAAS;IAGjB,QAAQ,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAU;IAGxD,SAAS,UAAS;IAElB,OAAgB,MAAM,4BA0OpB;IAEO,MAAM;CAWf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,iBAAiB,CAAC;KACzC;CACD;AAED,eAAe,iBAAiB,CAAC"}

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

@@ -0,0 +1,300 @@
+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';
+/**
+ * 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
+ */
+let MoniButtonSegment = class MoniButtonSegment extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.value = 'on';
+        this.checked = false;
+        this.size = 'medium';
+        this.disabled = false;
+        this.position = 'solo';
+        this.hideCheck = false;
+    }
+    static { this.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;
+			}
+		`
+    ]; }
+    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>
+		`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniButtonSegment.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniButtonSegment.prototype, "checked", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniButtonSegment.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniButtonSegment.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniButtonSegment.prototype, "position", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'hide-check' })
+], MoniButtonSegment.prototype, "hideCheck", void 0);
+MoniButtonSegment = __decorate([
+    customElement('moni-button-segment')
+], MoniButtonSegment);
+export { MoniButtonSegment };
+export default MoniButtonSegment;