@moni-labs/moni-ui 0.4.1 → 0.4.2

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

@@ -0,0 +1,602 @@
+import{a as e,d as t,i as n,m as r,o as i,r as a,s as o,t as s}from"../chunks/decorate-DxX3e27g.js";import"./moni-icon.js";import{t as c}from"../chunks/if-defined-CuEAJKpp.js";import"./moni-progress.js";var l,u=class extends n{static{l=this}constructor(...e){super(...e),this._hasLabel=!1,this.variant=`filled`,this.size=`small`,this.shape=`round`,this.disabled=!1,this.loading=!1,this.active=!1,this.icon=``,this.iconTrailing=``,this.type=`button`,this.href=``,this.target=``}static{this._deprecationWarned=!1}connectedCallback(){super.connectedCallback(),this._hasLabel=this._hasDefaultSlotContent(this.childNodes),!l._deprecationWarned&&this.size===`extra`&&(l._deprecationWarned=!0,console.warn(`[moni-ui] <moni-button size="extra"> is deprecated since v0.3.1. Material Design 3 Expressive uses "xlarge". See m3-docs/components/buttons/overview.md § Sizes.`))}_hasDefaultSlotContent(e){return Array.from(e).some(e=>e.nodeType===Node.TEXT_NODE?!!e.textContent?.trim():e instanceof Element&&!e.hasAttribute(`slot`))}_handleLabelSlotChange(e){let t=e.currentTarget;this._hasLabel=this._hasDefaultSlotContent(t.assignedNodes({flatten:!0}))}static{this.styles=[a,r`
+			:host {
+				display: inline-flex;
+				vertical-align: middle;
+				font-family: var(--font);
+				position: relative;
+				user-select: none;
+			}
+
+			.button {
+				box-sizing: var(--moni-button-box-sizing, border-box);
+				display: inline-flex;
+				--_button-visual-height: 3.5rem;
+				align-items: center;
+				justify-content: center;
+				--_button-icon-size: var(--moni-button-icon-size, 1.5rem);
+				block-size: var(--moni-button-height, 3.5rem);
+				font-size: var(--moni-button-font-size, 1rem);
+				font-weight: 500;
+				color: var(--on-primary);
+				padding: var(--moni-button-padding, 0 1.5rem);
+				background-color: var(--primary);
+				border: 0.0625rem solid transparent;
+				border-radius: 999px;
+				transition:
+					transform 250ms cubic-bezier(0.2, 0, 0, 1),
+					border-radius 200ms cubic-bezier(0.2, 0, 0, 1),
+					padding 250ms cubic-bezier(0.2, 0, 0, 1),
+					background-color 200ms cubic-bezier(0.2, 0, 0, 1),
+					box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);
+				user-select: none;
+				gap: var(--moni-button-gap, 0.5rem);
+				line-height: normal;
+				font-family: inherit;
+				cursor: pointer;
+				text-decoration: none;
+				box-shadow: none;
+				position: relative;
+			}
+
+			.button::after {
+				content: '';
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				min-width: 3rem; /* 48px minimum touch target */
+				min-height: 3rem; /* 48px minimum touch target */
+				width: 100%;
+				height: 100%;
+				transform: translate(-50%, -50%);
+			}
+
+			/* Sizes */
+			.button.xsmall {
+				--_button-visual-height: 2rem;
+				--_button-icon-size: var(--moni-button-icon-size, 1.25rem);
+				block-size: var(--moni-button-height, 2rem);
+				min-inline-size: var(--moni-button-min-inline-size, 0);
+				font-size: var(--moni-button-font-size, 0.875rem);
+				padding: var(--moni-button-padding, 0 0.75rem); /* 12dp; keeps 48dp touch target */
+				gap: var(--moni-button-gap, 0.25rem);
+			}
+			.button.small {
+				--_button-visual-height: 2.5rem;
+				--_button-icon-size: var(--moni-button-icon-size, 1.25rem);
+				block-size: var(--moni-button-height, 2.5rem);
+				min-inline-size: var(--moni-button-min-inline-size, 0);
+				padding: var(--moni-button-padding, 0 1rem);
+				gap: var(--moni-button-gap, 0.5rem);
+			}
+			.button.large {
+				--_button-visual-height: 6rem;
+				--_button-icon-size: var(--moni-button-icon-size, 2rem);
+				block-size: var(--moni-button-height, 6rem);
+				font-size: var(--moni-button-font-size, 1.5rem);
+				padding: var(--moni-button-padding, 0 3rem);
+				gap: var(--moni-button-gap, 0.75rem);
+			}
+			.button.xlarge,
+			.button.extra {
+				--_button-visual-height: 8.5rem;
+				--_button-icon-size: var(--moni-button-icon-size, 2.5rem);
+				block-size: var(--moni-button-height, 8.5rem);
+				font-size: var(--moni-button-font-size, 2rem);
+				padding: var(--moni-button-padding, 0 4rem);
+				gap: var(--moni-button-gap, 1rem);
+			}
+
+			/* Shapes */
+			/* Square keeps horizontal padding (like a normal button) but
+			   drops border-radius. Only the circle removes all padding. */
+			.button.circle {
+				padding: 0 !important;
+				border-radius: 50%;
+				inline-size: var(--moni-button-height, 3.5rem);
+				min-inline-size: var(--moni-button-height, 3.5rem);
+				aspect-ratio: 1;
+			}
+			.button.round.icon-only {
+				inline-size: var(--moni-button-height, var(--_button-visual-height));
+				min-inline-size: var(--moni-button-height, var(--_button-visual-height));
+				padding-inline: 0;
+			}
+			.button.no-round {
+				border-radius: 0;
+			}
+			.button.square {
+				border-radius: 1rem;
+			}
+			.button.square.xsmall,
+			.button.square.small {
+				border-radius: 0.75rem;
+			}
+			.button.square.large,
+			.button.square.xlarge,
+			.button.square.extra {
+				border-radius: 1.75rem;
+			}
+			.button.left-round {
+				border-radius: 1.25rem 0.5rem 0.5rem 1.25rem;
+			}
+			.button.left-round.xsmall {
+				border-radius: 0.875rem 0.25rem 0.25rem 0.875rem;
+			}
+			.button.left-round.small {
+				border-radius: 1rem 0.5rem 0.5rem 1rem;
+			}
+			.button.left-round.large {
+				border-radius: 1.5rem 1rem 1rem 1.5rem;
+			}
+			.button.left-round.xlarge,
+			.button.left-round.extra {
+				border-radius: 1.75rem 1.25rem 1.25rem 1.75rem;
+			}
+
+			.button.right-round {
+				border-radius: 0.5rem 1.25rem 1.25rem 0.5rem;
+			}
+			.button.right-round.xsmall {
+				border-radius: 0.25rem 0.875rem 0.875rem 0.25rem;
+			}
+			.button.right-round.small {
+				border-radius: 0.5rem 1rem 1rem 0.5rem;
+			}
+			.button.right-round.large {
+				border-radius: 1rem 1.5rem 1.5rem 1rem;
+			}
+			.button.right-round.xlarge,
+			.button.right-round.extra {
+				border-radius: 1.25rem 1.75rem 1.75rem 1.25rem;
+			}
+
+			.button.top-round {
+				border-radius: 1.25rem 1.25rem 0.5rem 0.5rem;
+			}
+			.button.top-round.xsmall {
+				border-radius: 0.875rem 0.875rem 0.25rem 0.25rem;
+			}
+			.button.top-round.small {
+				border-radius: 1rem 1rem 0.5rem 0.5rem;
+			}
+			.button.top-round.large {
+				border-radius: 1.5rem 1.5rem 1rem 1rem;
+			}
+			.button.top-round.xlarge,
+			.button.top-round.extra {
+				border-radius: 1.75rem 1.75rem 1.25rem 1.25rem;
+			}
+
+			.button.bottom-round {
+				border-radius: 0.5rem 0.5rem 1.25rem 1.25rem;
+			}
+			.button.bottom-round.xsmall {
+				border-radius: 0.25rem 0.25rem 0.875rem 0.875rem;
+			}
+			.button.bottom-round.small {
+				border-radius: 0.5rem 0.5rem 1rem 1rem;
+			}
+			.button.bottom-round.large {
+				border-radius: 1rem 1rem 1.5rem 1.5rem;
+			}
+			.button.bottom-round.xlarge,
+			.button.bottom-round.extra {
+				border-radius: 1.25rem 1.25rem 1.75rem 1.75rem;
+			}
+
+			/* Morph active states (square-ish equivalents) */
+			.button.left-square {
+				border-radius: 0.75rem 0.5rem 0.5rem 0.75rem;
+			}
+			.button.left-square.xsmall {
+				border-radius: 0.5rem 0.25rem 0.25rem 0.5rem;
+			}
+			.button.left-square.small {
+				border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
+			}
+			.button.left-square.large {
+				border-radius: 1rem 1rem 1rem 1rem;
+			}
+			.button.left-square.xlarge,
+			.button.left-square.extra {
+				border-radius: 1rem 1.25rem 1.25rem 1rem;
+			}
+
+			.button.right-square {
+				border-radius: 0.5rem 0.75rem 0.75rem 0.5rem;
+			}
+			.button.right-square.xsmall {
+				border-radius: 0.25rem 0.5rem 0.5rem 0.25rem;
+			}
+			.button.right-square.small {
+				border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
+			}
+			.button.right-square.large {
+				border-radius: 1rem 1rem 1rem 1rem;
+			}
+			.button.right-square.xlarge,
+			.button.right-square.extra {
+				border-radius: 1.25rem 1rem 1rem 1.25rem;
+			}
+
+			.button.top-square {
+				border-radius: 0.75rem 0.75rem 0.5rem 0.5rem;
+			}
+			.button.top-square.xsmall {
+				border-radius: 0.5rem 0.5rem 0.25rem 0.25rem;
+			}
+			.button.top-square.small {
+				border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
+			}
+			.button.top-square.large {
+				border-radius: 1rem 1rem 1rem 1rem;
+			}
+			.button.top-square.xlarge,
+			.button.top-square.extra {
+				border-radius: 1rem 1rem 1.25rem 1.25rem;
+			}
+
+			.button.bottom-square {
+				border-radius: 0.5rem 0.5rem 0.75rem 0.75rem;
+			}
+			.button.bottom-square.xsmall {
+				border-radius: 0.25rem 0.25rem 0.5rem 0.5rem;
+			}
+			.button.bottom-square.small {
+				border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
+			}
+			.button.bottom-square.large {
+				border-radius: 1rem 1rem 1rem 1rem;
+			}
+			.button.bottom-square.xlarge,
+			.button.bottom-square.extra {
+				border-radius: 1.25rem 1.25rem 1rem 1rem;
+			}
+
+			.button.inner-round {
+				border-radius: 0.5rem;
+			}
+			.button.inner-round.xsmall {
+				border-radius: 0.25rem;
+			}
+			.button.inner-round.small {
+				border-radius: 0.5rem;
+			}
+			.button.inner-round.large {
+				border-radius: 1rem;
+			}
+			.button.inner-round.xlarge,
+			.button.inner-round.extra {
+				border-radius: 1.25rem;
+			}
+
+			/* Flat variants (completely 0px on flat sides) */
+			.button.left-round-flat {
+				border-radius: 1.25rem 0 0 1.25rem;
+			}
+			.button.left-round-flat.xsmall {
+				border-radius: 0.875rem 0 0 0.875rem;
+			}
+			.button.left-round-flat.small {
+				border-radius: 1rem 0 0 1rem;
+			}
+			.button.left-round-flat.large {
+				border-radius: 1.5rem 0 0 1.5rem;
+			}
+			.button.left-round-flat.xlarge,
+			.button.left-round-flat.extra {
+				border-radius: 1.75rem 0 0 1.75rem;
+			}
+
+			.button.right-round-flat {
+				border-radius: 0 1.25rem 1.25rem 0;
+			}
+			.button.right-round-flat.xsmall {
+				border-radius: 0 0.875rem 0.875rem 0;
+			}
+			.button.right-round-flat.small {
+				border-radius: 0 1rem 1rem 0;
+			}
+			.button.right-round-flat.large {
+				border-radius: 0 1.5rem 1.5rem 0;
+			}
+			.button.right-round-flat.xlarge,
+			.button.right-round-flat.extra {
+				border-radius: 0 1.75rem 1.75rem 0;
+			}
+
+			.button.top-round-flat {
+				border-radius: 1.25rem 1.25rem 0 0;
+			}
+			.button.top-round-flat.xsmall {
+				border-radius: 0.875rem 0.875rem 0 0;
+			}
+			.button.top-round-flat.small {
+				border-radius: 1rem 1rem 0 0;
+			}
+			.button.top-round-flat.large {
+				border-radius: 1.5rem 1.5rem 0 0;
+			}
+			.button.top-round-flat.xlarge,
+			.button.top-round-flat.extra {
+				border-radius: 1.75rem 1.75rem 0 0;
+			}
+
+			.button.bottom-round-flat {
+				border-radius: 0 0 1.25rem 1.25rem;
+			}
+			.button.bottom-round-flat.xsmall {
+				border-radius: 0 0 0.875rem 0.875rem;
+			}
+			.button.bottom-round-flat.small {
+				border-radius: 0 0 1rem 1rem;
+			}
+			.button.bottom-round-flat.large {
+				border-radius: 0 0 1.5rem 1.5rem;
+			}
+			.button.bottom-round-flat.xlarge,
+			.button.bottom-round-flat.extra {
+				border-radius: 0 0 1.75rem 1.75rem;
+			}
+
+			/* Morph active states for flat variants */
+			.button.left-square-flat {
+				border-radius: 0.75rem 0 0 0.75rem;
+			}
+			.button.left-square-flat.xsmall,
+			.button.left-square-flat.small {
+				border-radius: 0.5rem 0 0 0.5rem;
+			}
+			.button.left-square-flat.large,
+			.button.left-square-flat.xlarge,
+			.button.left-square-flat.extra {
+				border-radius: 1rem 0 0 1rem;
+			}
+
+			.button.right-square-flat {
+				border-radius: 0 0.75rem 0.75rem 0;
+			}
+			.button.right-square-flat.xsmall,
+			.button.right-square-flat.small {
+				border-radius: 0 0.5rem 0.5rem 0;
+			}
+			.button.right-square-flat.large,
+			.button.right-square-flat.xlarge,
+			.button.right-square-flat.extra {
+				border-radius: 0 1rem 1rem 0;
+			}
+
+			.button.top-square-flat {
+				border-radius: 0.75rem 0.75rem 0 0;
+			}
+			.button.top-square-flat.xsmall,
+			.button.top-square-flat.small {
+				border-radius: 0.5rem 0.5rem 0 0;
+			}
+			.button.top-square-flat.large,
+			.button.top-square-flat.xlarge,
+			.button.top-square-flat.extra {
+				border-radius: 1rem 1rem 0 0;
+			}
+
+			.button.bottom-square-flat {
+				border-radius: 0 0 0.75rem 0.75rem;
+			}
+			.button.bottom-square-flat.xsmall,
+			.button.bottom-square-flat.small {
+				border-radius: 0 0 0.5rem 0.5rem;
+			}
+			.button.bottom-square-flat.large,
+			.button.bottom-square-flat.xlarge,
+			.button.bottom-square-flat.extra {
+				border-radius: 0 0 1rem 1rem;
+			}
+
+			/* Circle hides the label visually (slot still present for a11y
+			   and SSR fallback). */
+			:host([shape='circle']) [part='label'] {
+				display: none;
+			}
+
+			/* Variants */
+			.button.border {
+				border: 0.0625rem solid var(--outline-variant);
+				color: var(--primary);
+				background-color: transparent;
+			}
+			.button.fill {
+				background-color: var(--secondary-container);
+				color: var(--on-secondary-container);
+			}
+			.button.transparent {
+				color: var(--primary);
+				background-color: transparent;
+			}
+			.button.elevated {
+				background-color: var(--surface-container-low, var(--surface));
+				color: var(--primary);
+				box-shadow: var(--elevate1);
+			}
+			.button.error {
+				background-color: var(--error);
+				color: var(--on-error);
+			}
+			.button.error:hover:not(:disabled) {
+				background-image: linear-gradient(color-mix(in srgb, currentColor 8%, transparent), color-mix(in srgb, currentColor 8%, transparent));
+			}
+			.button.error:focus-visible {
+				outline-color: var(--error);
+			}
+
+			/* Disabled / active */
+			.button:disabled,
+			.button[aria-disabled='true'] {
+				opacity: 0.5;
+				cursor: not-allowed;
+				pointer-events: none;
+			}
+			.button:hover:not(:disabled) {
+				transform: translateY(-0.0625rem);
+				background-image: linear-gradient(color-mix(in srgb, currentColor 8%, transparent), color-mix(in srgb, currentColor 8%, transparent));
+			}
+			.button.elevated:hover:not(:disabled) {
+				box-shadow: var(--elevate2);
+			}
+			.button:active:not(:disabled) {
+				border-radius: 0.75rem;
+				transform: translateY(0.0625rem) scale(0.97);
+				background-image: linear-gradient(color-mix(in srgb, currentColor 12%, transparent), color-mix(in srgb, currentColor 12%, transparent));
+			}
+			.button.elevated:active:not(:disabled) {
+				box-shadow: none;
+			}
+			.button.xsmall:active:not(:disabled) {
+				border-radius: 0.5rem;
+			}
+			.button.small:active:not(:disabled) {
+				border-radius: 0.5rem;
+			}
+			.button.large:active:not(:disabled) {
+				border-radius: 1rem;
+			}
+			.button.xlarge:active:not(:disabled),
+			.button.extra:active:not(:disabled) {
+				border-radius: 1rem;
+			}
+
+			.button.active:not(:disabled) {
+				background-color: var(--primary-container);
+				color: var(--on-primary-container);
+			}
+			.button.fill.active:not(:disabled) {
+				background-color: var(--secondary);
+				color: var(--on-secondary);
+			}
+			.button.border.active:not(:disabled) {
+				background-color: var(--inverse-surface);
+				color: var(--inverse-on-surface);
+				border-color: var(--inverse-surface);
+			}
+			.button.elevated.active:not(:disabled) {
+				background-color: var(--primary-container);
+				color: var(--on-primary-container);
+				box-shadow: var(--elevate2);
+			}
+
+			.button:focus-visible {
+				outline: 0.125rem solid var(--primary);
+				outline-offset: 0.125rem;
+			}
+
+			/* Icon helper */
+			.icon,
+			::slotted([slot='icon']),
+			::slotted([slot='icon-trailing']) {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				font-size: var(--_button-icon-size);
+				inline-size: var(--_button-icon-size);
+				block-size: var(--_button-icon-size);
+				flex: none;
+				color: inherit;
+			}
+
+			.icon {
+				--moni-icon-size: var(--_button-icon-size);
+				font-size: var(--_button-icon-size);
+				inline-size: var(--_button-icon-size);
+				block-size: var(--_button-icon-size);
+				transform: translateX(var(--moni-button-icon-offset, 0));
+			}
+
+			.button.left-round {
+				border-radius: 999px var(--_button-square-radius, 1rem) var(--_button-square-radius, 1rem) 999px;
+			}
+			.button.right-round {
+				border-radius: var(--_button-square-radius, 1rem) 999px 999px var(--_button-square-radius, 1rem);
+			}
+			.button.top-round {
+				border-radius: 999px 999px var(--_button-square-radius, 1rem) var(--_button-square-radius, 1rem);
+			}
+			.button.bottom-round {
+				border-radius: var(--_button-square-radius, 1rem) var(--_button-square-radius, 1rem) 999px 999px;
+			}
+			.button.left-round-flat {
+				border-radius: 999px 0 0 999px;
+			}
+			.button.right-round-flat {
+				border-radius: 0 999px 999px 0;
+			}
+			.button.top-round-flat {
+				border-radius: 999px 999px 0 0;
+			}
+			.button.bottom-round-flat {
+				border-radius: 0 0 999px 999px;
+			}
+
+			.button.xsmall,
+			.button.small {
+				--_button-square-radius: 0.75rem;
+			}
+			.button.large,
+			.button.xlarge,
+			.button.extra {
+				--_button-square-radius: 1.75rem;
+			}
+
+			:host([split-position]) .button {
+				inline-size: var(--moni-button-inline-size);
+				min-inline-size: var(--moni-button-min-inline-size);
+				border-radius: var(--moni-button-border-radius);
+			}
+
+			slot {
+				display: contents;
+			}
+
+			[part='label'][hidden] {
+				display: none;
+			}
+
+			/* Loading spinner */
+			.loading-spinner {
+				inline-size: 1.125rem;
+				block-size: 1.125rem;
+				color: currentColor;
+			}
+			.loading-spinner::part(progress) {
+				border-width: 0.1875rem;
+			}
+		`]}handleLinkClick(e){this.disabled&&(e.preventDefault(),e.stopPropagation())}render(){let e=``;this.variant===`outlined`?e=`border`:this.variant===`tonal`||this.variant===`fill`?e=`fill`:this.variant===`text`?e=`transparent`:this.variant===`elevated`?e=`elevated`:this.variant===`error`&&(e=`error`);let n=this.shape;this.active&&(this.shape===`round`?n=`square`:this.shape===`square`?n=`round`:this.shape===`left-round`?n=`left-square`:this.shape===`right-round`?n=`right-square`:this.shape===`top-round`?n=`top-square`:this.shape===`bottom-round`?n=`bottom-square`:this.shape===`left-round-flat`?n=`left-square-flat`:this.shape===`right-round-flat`?n=`right-square-flat`:this.shape===`top-round-flat`?n=`top-square-flat`:this.shape===`bottom-round-flat`?n=`bottom-square-flat`:this.shape===`inner-round`&&(n=`inner-round`));let r=[`button`,e,this.size,n,this.active?`active`:``,!this._hasLabel&&(this.icon||this.iconTrailing||this.loading)?`icon-only`:``].filter(Boolean).join(` `),i=this.loading?t`<moni-progress
+					class="loading-spinner"
+					part="loading"
+					variant="circular"
+					indeterminate
+					size="small"
+				></moni-progress>`:this.icon?t`<span class="icon" part="icon"
+						><moni-icon name="${this.icon}"></moni-icon
+					></span>`:t`<slot name="icon" part="icon"></slot>`,a=this.iconTrailing?t`<span class="icon" part="icon-trailing"
+					><moni-icon name="${this.iconTrailing}"></moni-icon
+				></span>`:t`<slot name="icon-trailing" part="icon-trailing"></slot>`,o=t`${i}
+			<span part="label" ?hidden=${!this._hasLabel} style=${this.loading?`opacity: 0.5;`:``}><slot @slotchange=${this._handleLabelSlotChange}></slot></span>
+			${a}`;return this.href?t`<a
+				class=${r}
+				part="button"
+				href=${this.disabled?void 0:this.href}
+				target=${c(this.target||void 0)}
+				aria-disabled=${this.disabled?`true`:`false`}
+				aria-busy=${this.loading?`true`:`false`}
+				@click=${this.handleLinkClick}
+			>
+				${o}
+			</a>`:t`<button
+			class=${r}
+			part="button"
+			type=${this.type}
+			?disabled=${this.disabled}
+			aria-disabled=${this.disabled}
+			aria-busy=${this.loading?`true`:`false`}
+		>
+			${o}
+		</button>`}};s([e()],u.prototype,`_hasLabel`,void 0),s([i({reflect:!0})],u.prototype,`variant`,void 0),s([i({reflect:!0})],u.prototype,`size`,void 0),s([i({reflect:!0})],u.prototype,`shape`,void 0),s([i({type:Boolean,reflect:!0})],u.prototype,`disabled`,void 0),s([i({type:Boolean,reflect:!0})],u.prototype,`loading`,void 0),s([i({type:Boolean,reflect:!0})],u.prototype,`active`,void 0),s([i({reflect:!0})],u.prototype,`icon`,void 0),s([i({reflect:!0,attribute:`icon-trailing`})],u.prototype,`iconTrailing`,void 0),s([i({reflect:!0})],u.prototype,`type`,void 0),s([i({reflect:!0})],u.prototype,`href`,void 0),s([i({reflect:!0})],u.prototype,`target`,void 0),u=l=s([o(`moni-button`)],u);