@moni-labs/moni-ui 0.2.0

package/dist/components/moni-button.js

@@ -0,0 +1,727 @@
+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;
+};
+var MoniButton_1;
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+import './moni-icon.js';
+import './moni-progress.js';
+/**
+ * Visual-only button. Renders a native `<button>` styled per Material 3 Expressive.
+ *
+ * **Shape morph on press** (`m3-docs/components/buttons/specs.md` § Shape morph):
+ * round and square buttons both morph to the same pressed shape, with per-size
+ * corner radii: XS 8dp, S 8dp, M 12dp, L 16dp, XL 16dp. The per-size rules
+ * `.button.{xsmall,small,large,xlarge,extra}:active` override the default
+ * `:active` rule by specificity (0,4,0 vs 0,3,0).
+ *
+ * **Shape morph on selected** (toggle): when `active` is true, the resting
+ * shape flips (round ↔ square). See `render()`.
+ *
+ * Attributes:
+ *  - variant:   filled (default) | tonal | elevated | outlined | text | fill
+ *  - size:      xsmall | small | medium (default) | large | xlarge
+ *               (legacy `extra` alias for `xlarge`, deprecated in v0.3.0)
+ *  - shape:     round (default) | square | circle | no-round
+ *               | left-round | right-round | top-round | bottom-round
+ *               | left-round-flat | right-round-flat | top-round-flat
+ *               | bottom-round-flat | inner-round
+ *               (the `-flat` and `inner-round` shapes are Moni brand
+ *                extensions; not part of M3 — see WEB_COMPONENT_GUIDELINES.md)
+ *  - disabled:  present → native disabled
+ *  - loading:   present → shows an indeterminate circular progress
+ *  - active:    present → toggle (selection) state; applies shape morph
+ *               (round↔square) and variant-specific color swap
+ *  - icon:      Material Symbols name to prepend
+ *  - icon-trailing: Material Symbols name to append
+ *  - type:      button (default) | submit | reset
+ *  - href:      present → renders as `<a>` instead of `<button>`
+ *  - target:    for `<a>` rendering
+ *
+ * Slots:
+ *  - default:   button label
+ *  - icon:      optional override for the leading icon
+ *  - icon-trailing: optional override for the trailing icon
+ */
+let MoniButton = class MoniButton extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.variant = 'filled';
+        /**
+         * M3 Expressive sizes: xsmall, small, medium, large, xlarge.
+         * `extra` is a Moni legacy alias for `xlarge`, deprecated in v0.3.1; will
+         * be removed in v1.0. See `m3-docs/components/buttons/overview.md` § Sizes.
+         */
+        this.size = 'medium';
+        this.shape = 'round';
+        this.disabled = false;
+        this.loading = false;
+        this.active = false;
+        this.icon = '';
+        this.iconTrailing = '';
+        this.type = 'button';
+        this.href = '';
+        this.target = '';
+    }
+    static { MoniButton_1 = this; }
+    static { this._deprecationWarned = false; }
+    connectedCallback() {
+        super.connectedCallback();
+        if (MoniButton_1._deprecationWarned)
+            return;
+        if (this.size === 'extra') {
+            MoniButton_1._deprecationWarned = true;
+            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.');
+        }
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				display: inline-flex;
+				vertical-align: middle;
+				font-family: var(--font);
+				position: relative;
+				user-select: none;
+			}
+
+			.button {
+				box-sizing: content-box;
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				block-size: 2.5rem;
+				font-size: 0.875rem;
+				font-weight: 500;
+				color: var(--on-primary);
+				padding: 0 1rem;
+				background-color: var(--primary);
+				border: 0.0625rem solid transparent;
+				border-radius: 1.25rem;
+				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: 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 {
+				block-size: 1.75rem;
+				min-inline-size: 3rem; /* 48px */
+				font-size: 0.75rem;
+				padding: 0 0.75rem; /* 12dp; keeps 48dp touch target */
+			}
+			.button.small {
+				block-size: 2rem;
+				min-inline-size: 3rem; /* 48px */
+				padding: 0 1rem; /* 16dp per M3 Expressive */
+			}
+			.button.large {
+				block-size: 3rem;
+				padding: 0 1.25rem;
+			}
+			.button.xlarge,
+			.button.extra {
+				block-size: 3.5rem;
+				font-size: 1rem;
+				padding: 0 1.5rem;
+			}
+
+			/* Shapes */
+			/* Square keeps horizontal padding (like a normal button) but
+			   drops border-radius. Only the circle removes all padding. */
+			.button.circle {
+				padding: 0;
+				border-radius: 50%;
+				inline-size: 2.5rem;
+				aspect-ratio: 1;
+			}
+			.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.circle.small {
+				inline-size: 2rem;
+			}
+			.button.circle.large {
+				inline-size: 3rem;
+			}
+			.button.circle.extra {
+				inline-size: 3.5rem;
+			}
+			.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;
+				padding: 0 0.75rem;
+			}
+			.button.elevated {
+				background-color: var(--surface-container-low, var(--surface));
+				color: var(--primary);
+				box-shadow: var(--elevate1);
+			}
+
+			/* 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);
+				padding-inline: 1.5rem;
+			}
+			.button.xsmall.active:not(:disabled) {
+				padding-inline: 0.875rem;
+			}
+			.button.small.active:not(:disabled) {
+				padding-inline: 1.125rem;
+			}
+			.button.large.active:not(:disabled) {
+				padding-inline: 1.75rem;
+			}
+			.button.xlarge.active:not(:disabled),
+			.button.extra.active:not(:disabled) {
+				padding-inline: 2rem;
+			}
+			.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: 1.125rem;
+				inline-size: 1.125rem;
+				block-size: 1.125rem;
+				flex: none;
+				color: inherit;
+			}
+
+			/* Loading spinner */
+			.loading-spinner {
+				inline-size: 1.125rem;
+				block-size: 1.125rem;
+				color: currentColor;
+			}
+			.loading-spinner::part(progress) {
+				border-width: 0.1875rem;
+			}
+		`
+    ]; }
+    handleLinkClick(e) {
+        if (this.disabled) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }
+    render() {
+        let variantClass = '';
+        if (this.variant === 'outlined')
+            variantClass = 'border';
+        else if (this.variant === 'tonal' || this.variant === 'fill')
+            variantClass = 'fill';
+        else if (this.variant === 'text')
+            variantClass = 'transparent';
+        else if (this.variant === 'elevated')
+            variantClass = 'elevated';
+        let activeShape = this.shape;
+        if (this.active) {
+            if (this.shape === 'round')
+                activeShape = 'square';
+            else if (this.shape === 'square')
+                activeShape = 'round';
+            else if (this.shape === 'left-round')
+                activeShape = 'left-square';
+            else if (this.shape === 'right-round')
+                activeShape = 'right-square';
+            else if (this.shape === 'top-round')
+                activeShape = 'top-square';
+            else if (this.shape === 'bottom-round')
+                activeShape = 'bottom-square';
+            else if (this.shape === 'left-round-flat')
+                activeShape = 'left-square-flat';
+            else if (this.shape === 'right-round-flat')
+                activeShape = 'right-square-flat';
+            else if (this.shape === 'top-round-flat')
+                activeShape = 'top-square-flat';
+            else if (this.shape === 'bottom-round-flat')
+                activeShape = 'bottom-square-flat';
+            else if (this.shape === 'inner-round')
+                activeShape = 'inner-round'; // remains inner-round or standard shape morphing
+        }
+        const classes = [
+            'button',
+            variantClass,
+            this.size,
+            activeShape,
+            this.active ? 'active' : ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const iconEl = this.loading
+            ? html `<moni-progress
+					class="loading-spinner"
+					part="loading"
+					variant="circular"
+					indeterminate
+					size="small"
+				></moni-progress>`
+            : this.icon
+                ? html `<span class="icon" part="icon"
+						><moni-icon name="${this.icon}"></moni-icon
+					></span>`
+                : html `<slot name="icon" part="icon"></slot>`;
+        const trailingIconEl = this.iconTrailing
+            ? html `<span class="icon" part="icon-trailing"
+					><moni-icon name="${this.iconTrailing}"></moni-icon
+				></span>`
+            : html `<slot name="icon-trailing" part="icon-trailing"></slot>`;
+        const content = html `${iconEl}
+			<span part="label" style=${this.loading ? 'opacity: 0.5;' : ''}><slot></slot></span>
+			${trailingIconEl}`;
+        if (this.href) {
+            return html `<a
+				class=${classes}
+				part="button"
+				href=${this.disabled ? undefined : this.href}
+				target=${ifDefined(this.target || undefined)}
+				aria-disabled=${this.disabled ? 'true' : 'false'}
+				aria-busy=${this.loading ? 'true' : 'false'}
+				@click=${this.handleLinkClick}
+			>
+				${content}
+			</a>`;
+        }
+        return html `<button
+			class=${classes}
+			part="button"
+			type=${this.type}
+			?disabled=${this.disabled}
+			aria-disabled=${this.disabled}
+			aria-busy=${this.loading ? 'true' : 'false'}
+		>
+			${content}
+		</button>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniButton.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniButton.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniButton.prototype, "shape", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniButton.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniButton.prototype, "active", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniButton.prototype, "icon", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'icon-trailing' })
+], MoniButton.prototype, "iconTrailing", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniButton.prototype, "type", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniButton.prototype, "href", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniButton.prototype, "target", void 0);
+MoniButton = MoniButton_1 = __decorate([
+    customElement('moni-button')
+], MoniButton);
+export { MoniButton };
+export default MoniButton;