@3mo/button 0.2.5 → 0.2.6

package/README.md

@@ -1,3 +1,3 @@
-# Button
-
+# Button
+
 A button web-component based on Material Web Components (MWC).

package/dist/Button/Button.d.ts

@@ -1,48 +1,48 @@
-import { Component } from '@a11d/lit';
-import { InstanceofAttributeController } from '@3mo/instanceof-attribute-controller';
-import { MaterialIcon } from '@3mo/icon';
-export declare const enum ButtonType {
-    Normal = "normal",
-    Outlined = "outlined",
-    Raised = "raised",
-    Unelevated = "unelevated"
-}
-/**
- * @attr type
- * @attr disabled
- * @attr leadingIcon
- * @attr trailingIcon
- *
- * @slot - The content of the button.
- * @slot leading - The leading content of the button.
- * @slot trailing - The trailing content of the button.
- *
- * @cssprop --mo-button-accent-color
- * @cssprop --mo-button-horizontal-padding
- * @cssprop --mo-button-disabled-background-color
- * @cssprop --mo-button-disabled-color
- *
- * @csspart button - The composed native button element.
- */
-export declare class Button extends Component {
-    type: ButtonType;
-    disabled: boolean;
-    leadingIcon?: MaterialIcon;
-    trailingIcon?: MaterialIcon;
-    static get styles(): import("@a11d/lit").CSSResult;
-    protected readonly instanceofAttributeController: InstanceofAttributeController;
-    protected get template(): import("lit-html").TemplateResult<1>;
-    protected get isDisabled(): boolean;
-    protected get contentTemplate(): import("lit-html").TemplateResult<1>;
-    protected get leadingSlotTemplate(): import("lit-html").TemplateResult<1>;
-    protected get leadingIconTemplate(): import("lit-html").HTMLTemplateResult;
-    protected get slotTemplate(): import("lit-html").TemplateResult<1>;
-    protected get trailingSlotTemplate(): import("lit-html").TemplateResult<1>;
-    protected get trailingIconTemplate(): import("lit-html").HTMLTemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'mo-button': Button;
-    }
-}
+import { Component } from '@a11d/lit';
+import { InstanceofAttributeController } from '@3mo/instanceof-attribute-controller';
+import { type MaterialIcon } from '@3mo/icon';
+export declare const enum ButtonType {
+    Normal = "normal",
+    Outlined = "outlined",
+    Raised = "raised",
+    Unelevated = "unelevated"
+}
+/**
+ * @attr type
+ * @attr disabled
+ * @attr leadingIcon
+ * @attr trailingIcon
+ *
+ * @slot - The content of the button.
+ * @slot leading - The leading content of the button.
+ * @slot trailing - The trailing content of the button.
+ *
+ * @cssprop --mo-button-accent-color
+ * @cssprop --mo-button-horizontal-padding
+ * @cssprop --mo-button-disabled-background-color
+ * @cssprop --mo-button-disabled-color
+ *
+ * @csspart button - The composed native button element.
+ */
+export declare class Button extends Component {
+    type: ButtonType;
+    disabled: boolean;
+    leadingIcon?: MaterialIcon;
+    trailingIcon?: MaterialIcon;
+    static get styles(): import("@a11d/lit").CSSResult;
+    protected readonly instanceofAttributeController: InstanceofAttributeController;
+    protected get template(): import("lit-html").TemplateResult<1>;
+    protected get isDisabled(): boolean;
+    protected get contentTemplate(): import("lit-html").TemplateResult<1>;
+    protected get leadingSlotTemplate(): import("lit-html").TemplateResult<1>;
+    protected get leadingIconTemplate(): import("lit-html").HTMLTemplateResult;
+    protected get slotTemplate(): import("lit-html").TemplateResult<1>;
+    protected get trailingSlotTemplate(): import("lit-html").TemplateResult<1>;
+    protected get trailingIconTemplate(): import("lit-html").HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mo-button': Button;
+    }
+}
 //# sourceMappingURL=Button.d.ts.map

package/dist/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../Button.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,SAAS,EAAwB,MAAM,WAAW,CAAA;AACrF,OAAO,EAAE,6BAA6B,EAAE,MAAM,sCAAsC,CAAA;AACpF,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAGxC,0BAAkB,UAAU;IAC3B,MAAM,WAAW;IACjB,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,UAAU,eAAe;CACzB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,MAAO,SAAQ,SAAS;IACP,IAAI,aAAoB;IACT,QAAQ,UAAQ;IAEhD,WAAW,CAAC,EAAE,YAAY,CAAA;IAC1B,YAAY,CAAC,EAAE,YAAY,CAAA;IAEvC,WAAoB,MAAM,kCAEzB;IAED,SAAS,CAAC,QAAQ,CAAC,6BAA6B,gCAA0C;IAE1F,cAAuB,QAAQ,yCAE9B;IAED,SAAS,KAAK,UAAU,YAEvB;IAED,SAAS,KAAK,eAAe,yCAE5B;IAED,SAAS,KAAK,mBAAmB,yCAEhC;IAED,SAAS,KAAK,mBAAmB,0CAEhC;IAED,SAAS,KAAK,YAAY,yCAEzB;IAED,SAAS,KAAK,oBAAoB,yCAEjC;IAED,SAAS,KAAK,oBAAoB,0CAEjC;CACD;AAWD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,MAAM,CAAA;KACnB;CACD"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../Button.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,SAAS,EAAwB,MAAM,WAAW,CAAA;AACrF,OAAO,EAAE,6BAA6B,EAAE,MAAM,sCAAsC,CAAA;AACpF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AAI7C,0BAAkB,UAAU;IAC3B,MAAM,WAAW;IACjB,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,UAAU,eAAe;CACzB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,MAAO,SAAQ,SAAS;IACP,IAAI,aAAoB;IACjC,QAAQ,UAAQ;IAExB,WAAW,CAAC,EAAE,YAAY,CAAA;IAC1B,YAAY,CAAC,EAAE,YAAY,CAAA;IAEvC,WAAoB,MAAM,kCAEzB;IAED,SAAS,CAAC,QAAQ,CAAC,6BAA6B,gCAA0C;IAE1F,cAAuB,QAAQ,yCAE9B;IAED,SAAS,KAAK,UAAU,YAEvB;IAED,SAAS,KAAK,eAAe,yCAE5B;IAED,SAAS,KAAK,mBAAmB,yCAEhC;IAED,SAAS,KAAK,mBAAmB,0CAEhC;IAED,SAAS,KAAK,YAAY,yCAEzB;IAED,SAAS,KAAK,oBAAoB,yCAEjC;IAED,SAAS,KAAK,oBAAoB,0CAEjC;CACD;AAWD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,MAAM,CAAA;KACnB;CACD"}

package/dist/Button/index.d.ts

@@ -1,2 +1,2 @@
-export * from './Button.js';
+export * from './Button.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Button.d.ts

@@ -1,48 +1,48 @@
-import { Component } from '@a11d/lit';
-import { InstanceofAttributeController } from '@3mo/instanceof-attribute-controller';
-import { MaterialIcon } from '@3mo/icon';
-export declare const enum ButtonType {
-    Normal = "normal",
-    Outlined = "outlined",
-    Raised = "raised",
-    Unelevated = "unelevated"
-}
-/**
- * @attr type
- * @attr disabled
- * @attr leadingIcon
- * @attr trailingIcon
- *
- * @slot - The content of the button.
- * @slot leading - The leading content of the button.
- * @slot trailing - The trailing content of the button.
- *
- * @cssprop --mo-button-accent-color
- * @cssprop --mo-button-horizontal-padding
- * @cssprop --mo-button-disabled-background-color
- * @cssprop --mo-button-disabled-color
- *
- * @csspart button - The composed native button element.
- */
-export declare class Button extends Component {
-    type: ButtonType;
-    disabled: boolean;
-    leadingIcon?: MaterialIcon;
-    trailingIcon?: MaterialIcon;
-    static get styles(): import("@a11d/lit").CSSResult;
-    protected readonly instanceofAttributeController: InstanceofAttributeController;
-    protected get template(): import("lit-html").TemplateResult<1>;
-    protected get isDisabled(): boolean;
-    protected get contentTemplate(): import("lit-html").TemplateResult<1>;
-    protected get leadingSlotTemplate(): import("lit-html").TemplateResult<1>;
-    protected get leadingIconTemplate(): import("lit-html").HTMLTemplateResult;
-    protected get slotTemplate(): import("lit-html").TemplateResult<1>;
-    protected get trailingSlotTemplate(): import("lit-html").TemplateResult<1>;
-    protected get trailingIconTemplate(): import("lit-html").HTMLTemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'mo-button': Button;
-    }
-}
+import { Component } from '@a11d/lit';
+import { InstanceofAttributeController } from '@3mo/instanceof-attribute-controller';
+import { type MaterialIcon } from '@3mo/icon';
+export declare const enum ButtonType {
+    Normal = "normal",
+    Outlined = "outlined",
+    Raised = "raised",
+    Unelevated = "unelevated"
+}
+/**
+ * @attr type
+ * @attr disabled
+ * @attr leadingIcon
+ * @attr trailingIcon
+ *
+ * @slot - The content of the button.
+ * @slot leading - The leading content of the button.
+ * @slot trailing - The trailing content of the button.
+ *
+ * @cssprop --mo-button-accent-color
+ * @cssprop --mo-button-horizontal-padding
+ * @cssprop --mo-button-disabled-background-color
+ * @cssprop --mo-button-disabled-color
+ *
+ * @csspart button - The composed native button element.
+ */
+export declare class Button extends Component {
+    type: ButtonType;
+    disabled: boolean;
+    leadingIcon?: MaterialIcon;
+    trailingIcon?: MaterialIcon;
+    static get styles(): import("@a11d/lit").CSSResult;
+    protected readonly instanceofAttributeController: InstanceofAttributeController;
+    protected get template(): import("lit-html").TemplateResult<1>;
+    protected get isDisabled(): boolean;
+    protected get contentTemplate(): import("lit-html").TemplateResult<1>;
+    protected get leadingSlotTemplate(): import("lit-html").TemplateResult<1>;
+    protected get leadingIconTemplate(): import("lit-html").HTMLTemplateResult;
+    protected get slotTemplate(): import("lit-html").TemplateResult<1>;
+    protected get trailingSlotTemplate(): import("lit-html").TemplateResult<1>;
+    protected get trailingIconTemplate(): import("lit-html").HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mo-button': Button;
+    }
+}
 //# sourceMappingURL=Button.d.ts.map

package/dist/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../Button.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,SAAS,EAAwB,MAAM,WAAW,CAAA;AACrF,OAAO,EAAE,6BAA6B,EAAE,MAAM,sCAAsC,CAAA;AACpF,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAGxC,0BAAkB,UAAU;IAC3B,MAAM,WAAW;IACjB,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,UAAU,eAAe;CACzB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,MAAO,SAAQ,SAAS;IACP,IAAI,aAAoB;IACT,QAAQ,UAAQ;IAEhD,WAAW,CAAC,EAAE,YAAY,CAAA;IAC1B,YAAY,CAAC,EAAE,YAAY,CAAA;IAEvC,WAAoB,MAAM,kCA4CzB;IAED,SAAS,CAAC,QAAQ,CAAC,6BAA6B,gCAA0C;IAE1F,cAAuB,QAAQ,yCAW9B;IAED,SAAS,KAAK,UAAU,YAEvB;IAED,SAAS,KAAK,eAAe,yCAM5B;IAED,SAAS,KAAK,mBAAmB,yCAMhC;IAED,SAAS,KAAK,mBAAmB,0CAEhC;IAED,SAAS,KAAK,YAAY,yCAEzB;IAED,SAAS,KAAK,oBAAoB,yCAMjC;IAED,SAAS,KAAK,oBAAoB,0CAEjC;CACD;AAkDD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,MAAM,CAAA;KACnB;CACD"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../Button.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,SAAS,EAAwB,MAAM,WAAW,CAAA;AACrF,OAAO,EAAE,6BAA6B,EAAE,MAAM,sCAAsC,CAAA;AACpF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AAI7C,0BAAkB,UAAU;IAC3B,MAAM,WAAW;IACjB,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,UAAU,eAAe;CACzB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,MAAO,SAAQ,SAAS;IACP,IAAI,aAAoB;IACjC,QAAQ,UAAQ;IAExB,WAAW,CAAC,EAAE,YAAY,CAAA;IAC1B,YAAY,CAAC,EAAE,YAAY,CAAA;IAEvC,WAAoB,MAAM,kCAwCzB;IAED,SAAS,CAAC,QAAQ,CAAC,6BAA6B,gCAA0C;IAE1F,cAAuB,QAAQ,yCAW9B;IAED,SAAS,KAAK,UAAU,YAEvB;IAED,SAAS,KAAK,eAAe,yCAM5B;IAED,SAAS,KAAK,mBAAmB,yCAMhC;IAED,SAAS,KAAK,mBAAmB,0CAEhC;IAED,SAAS,KAAK,YAAY,yCAEzB;IAED,SAAS,KAAK,oBAAoB,yCAMjC;IAED,SAAS,KAAK,oBAAoB,0CAEjC;CACD;AAkDD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,MAAM,CAAA;KACnB;CACD"}

package/dist/Button.js

@@ -1,181 +1,178 @@
-import { __decorate } from "tslib";
-import { component, property, css, Component, html, nothing, style } from '@a11d/lit';
-import { InstanceofAttributeController } from '@3mo/instanceof-attribute-controller';
-import { Button as MwcButton } from '@material/mwc-button';
-/**
- * @attr type
- * @attr disabled
- * @attr leadingIcon
- * @attr trailingIcon
- *
- * @slot - The content of the button.
- * @slot leading - The leading content of the button.
- * @slot trailing - The trailing content of the button.
- *
- * @cssprop --mo-button-accent-color
- * @cssprop --mo-button-horizontal-padding
- * @cssprop --mo-button-disabled-background-color
- * @cssprop --mo-button-disabled-color
- *
- * @csspart button - The composed native button element.
- */
-let Button = class Button extends Component {
-    constructor() {
-        super(...arguments);
-        this.type = "normal" /* ButtonType.Normal */;
-        this.disabled = false;
-        this.instanceofAttributeController = new InstanceofAttributeController(this);
-    }
-    static get styles() {
-        return css `
-			:host {
-				display: inline-block;
-				text-transform: uppercase;
-				text-align: center;
-				border-radius: var(--mo-border-radius, 4px);
-				min-height: 36px;
-			}
-
-			:host([disabled]) {
-				pointer-events: none;
-			}
-
-			:host([type=normal]) mwc-button {
-				--mo-button-default-horizontal-padding: 12px;
-			}
-
-			:host(:not([type=normal])) mwc-button {
-				--mo-button-default-horizontal-padding: 16px;
-			}
-
-			slot[name=leading] *, slot[name=leading]::slotted(*) {
-				margin-inline-end: calc(var(--mo-button-horizontal-padding, var(--mo-button-default-horizontal-padding)) * 0.5);
-				margin-inline-start: calc(var(--mo-button-horizontal-padding, var(--mo-button-default-horizontal-padding)) * -0.5);
-			}
-
-			slot[name=trailing] *, slot[name=trailing]::slotted(*) {
-				margin-inline-start: calc(var(--mo-button-horizontal-padding, var(--mo-button-default-horizontal-padding)) * 0.5);
-				margin-inline-end: calc(var(--mo-button-horizontal-padding, var(--mo-button-default-horizontal-padding)) * -0.5);
-			}
-
-			mwc-button {
-				min-height: inherit;
-				text-align: inherit;
-				--mdc-button-horizontal-padding: var(--mo-button-horizontal-padding, var(--mo-button-default-horizontal-padding));
-				--mdc-theme-primary: var(--mo-button-accent-color, var(--mo-color-accent, #0077c8));
-				--mdc-button-outline-color: var(--mo-button-accent-color, var(--mo-color-accent, #0077c8));
-				--mdc-button-disabled-fill-color: var(--mo-button-disabled-background-color);
-				--mdc-button-disabled-ink-color: var(--mo-button-disabled-color, var(--mo-color-gray-transparent));
-				--mdc-button-disabled-outline-color: var(--mo-button-disabled-color, var(--mo-color-gray-transparent));
-				--mdc-shape-small: inherit;
-			}
-		`;
-    }
-    get template() {
-        return html `
-			<mwc-button exportparts='button' expandContent
-				?raised=${this.type === "raised" /* ButtonType.Raised */}
-				?outlined=${this.type === "outlined" /* ButtonType.Outlined */}
-				?unelevated=${this.type === "unelevated" /* ButtonType.Unelevated */}
-				?disabled=${this.isDisabled}
-			>
-				${this.contentTemplate}
-			</mwc-button>
-		`;
-    }
-    get isDisabled() {
-        return this.disabled;
-    }
-    get contentTemplate() {
-        return html `
-			${this.leadingSlotTemplate}
-			${this.slotTemplate}
-			${this.trailingSlotTemplate}
-		`;
-    }
-    get leadingSlotTemplate() {
-        return html `
-			<slot name='leading' slot='icon'>
-				${this.leadingIconTemplate}
-			</slot>
-		`;
-    }
-    get leadingIconTemplate() {
-        return !this.leadingIcon ? nothing : html `<mo-icon icon=${this.leadingIcon}></mo-icon>`;
-    }
-    get slotTemplate() {
-        return html `<slot ${style({ width: '*' })}></slot>`;
-    }
-    get trailingSlotTemplate() {
-        return html `
-			<slot name='trailing' slot='trailingIcon'>
-				${this.trailingIconTemplate}
-			</slot>
-		`;
-    }
-    get trailingIconTemplate() {
-        return !this.trailingIcon ? nothing : html `<mo-icon icon=${this.trailingIcon}></mo-icon>`;
-    }
-};
-__decorate([
-    property({ reflect: true })
-], Button.prototype, "type", void 0);
-__decorate([
-    property({ reflect: true, type: Boolean })
-], Button.prototype, "disabled", void 0);
-__decorate([
-    property()
-], Button.prototype, "leadingIcon", void 0);
-__decorate([
-    property()
-], Button.prototype, "trailingIcon", void 0);
-Button = __decorate([
-    component('mo-button')
-], Button);
-export { Button };
-MwcButton.addInitializer(async (element) => {
-    var _a;
-    const button = element;
-    await button.updateComplete;
-    (_a = button.renderRoot.querySelector('button')) === null || _a === void 0 ? void 0 : _a.setAttribute('part', 'button');
-});
-MwcButton.elementStyles.push(css `
-	:host {
-		display: inline-grid !important;
-		width: 100% !important;
-		height: 100% !important;
-		border-radius: inherit !important;
-	}
-
-	button {
-		width: 100% !important;
-		height: 100% !important;
-		min-width: unset !important;
-		line-height: unset !important;
-		padding-top: 4px !important;
-		padding-bottom: 4px !important;
-		text-transform: unset !important;
-		border-radius: inherit !important;
-		text-align: inherit !important;
-	}
-
-	.mdc-button__label {
-		display: none;
-	}
-
-	.trailing-icon, .leading-icon {
-		display: inline-flex;
-		align-items: center;
-	}
-
-	.trailing-icon ::slotted(*), .leading-icon ::slotted(*) {
-		margin-inline-start: unset;
-		margin-inline-end: unset;
-		display: unset;
-		position: unset;
-		vertical-align: unset;
-		font-size: unset;
-		height: unset;
-		width: unset;
-	}
-`);
+import { __decorate } from "tslib";
+import { component, property, css, Component, html, nothing, style } from '@a11d/lit';
+import { InstanceofAttributeController } from '@3mo/instanceof-attribute-controller';
+import { Button as MwcButton } from '@material/mwc-button';
+import { disabledProperty } from '@3mo/disabled-property';
+/**
+ * @attr type
+ * @attr disabled
+ * @attr leadingIcon
+ * @attr trailingIcon
+ *
+ * @slot - The content of the button.
+ * @slot leading - The leading content of the button.
+ * @slot trailing - The trailing content of the button.
+ *
+ * @cssprop --mo-button-accent-color
+ * @cssprop --mo-button-horizontal-padding
+ * @cssprop --mo-button-disabled-background-color
+ * @cssprop --mo-button-disabled-color
+ *
+ * @csspart button - The composed native button element.
+ */
+let Button = class Button extends Component {
+    constructor() {
+        super(...arguments);
+        this.type = "normal" /* ButtonType.Normal */;
+        this.disabled = false;
+        this.instanceofAttributeController = new InstanceofAttributeController(this);
+    }
+    static get styles() {
+        return css `
+			:host {
+				display: inline-block;
+				text-transform: uppercase;
+				text-align: center;
+				border-radius: var(--mo-border-radius, 4px);
+				min-height: 36px;
+			}
+
+			:host([type=normal]) mwc-button {
+				--mo-button-default-horizontal-padding: 12px;
+			}
+
+			:host(:not([type=normal])) mwc-button {
+				--mo-button-default-horizontal-padding: 16px;
+			}
+
+			slot[name=leading] *, slot[name=leading]::slotted(*) {
+				margin-inline-end: calc(var(--mo-button-horizontal-padding, var(--mo-button-default-horizontal-padding)) * 0.5);
+				margin-inline-start: calc(var(--mo-button-horizontal-padding, var(--mo-button-default-horizontal-padding)) * -0.5);
+			}
+
+			slot[name=trailing] *, slot[name=trailing]::slotted(*) {
+				margin-inline-start: calc(var(--mo-button-horizontal-padding, var(--mo-button-default-horizontal-padding)) * 0.5);
+				margin-inline-end: calc(var(--mo-button-horizontal-padding, var(--mo-button-default-horizontal-padding)) * -0.5);
+			}
+
+			mwc-button {
+				min-height: inherit;
+				text-align: inherit;
+				--mdc-button-horizontal-padding: var(--mo-button-horizontal-padding, var(--mo-button-default-horizontal-padding));
+				--mdc-theme-primary: var(--mo-button-accent-color, var(--mo-color-accent, #0077c8));
+				--mdc-button-outline-color: var(--mo-button-accent-color, var(--mo-color-accent, #0077c8));
+				--mdc-button-disabled-fill-color: var(--mo-button-disabled-background-color);
+				--mdc-button-disabled-ink-color: var(--mo-button-disabled-color, var(--mo-color-gray-transparent));
+				--mdc-button-disabled-outline-color: var(--mo-button-disabled-color, var(--mo-color-gray-transparent));
+				--mdc-shape-small: inherit;
+			}
+		`;
+    }
+    get template() {
+        return html `
+			<mwc-button exportparts='button' expandContent
+				?raised=${this.type === "raised" /* ButtonType.Raised */}
+				?outlined=${this.type === "outlined" /* ButtonType.Outlined */}
+				?unelevated=${this.type === "unelevated" /* ButtonType.Unelevated */}
+				?disabled=${this.isDisabled}
+			>
+				${this.contentTemplate}
+			</mwc-button>
+		`;
+    }
+    get isDisabled() {
+        return this.disabled;
+    }
+    get contentTemplate() {
+        return html `
+			${this.leadingSlotTemplate}
+			${this.slotTemplate}
+			${this.trailingSlotTemplate}
+		`;
+    }
+    get leadingSlotTemplate() {
+        return html `
+			<slot name='leading' slot='icon'>
+				${this.leadingIconTemplate}
+			</slot>
+		`;
+    }
+    get leadingIconTemplate() {
+        return !this.leadingIcon ? nothing : html `<mo-icon icon=${this.leadingIcon}></mo-icon>`;
+    }
+    get slotTemplate() {
+        return html `<slot ${style({ width: '*' })}></slot>`;
+    }
+    get trailingSlotTemplate() {
+        return html `
+			<slot name='trailing' slot='trailingIcon'>
+				${this.trailingIconTemplate}
+			</slot>
+		`;
+    }
+    get trailingIconTemplate() {
+        return !this.trailingIcon ? nothing : html `<mo-icon icon=${this.trailingIcon}></mo-icon>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], Button.prototype, "type", void 0);
+__decorate([
+    disabledProperty()
+], Button.prototype, "disabled", void 0);
+__decorate([
+    property()
+], Button.prototype, "leadingIcon", void 0);
+__decorate([
+    property()
+], Button.prototype, "trailingIcon", void 0);
+Button = __decorate([
+    component('mo-button')
+], Button);
+export { Button };
+MwcButton.addInitializer(async (element) => {
+    var _a;
+    const button = element;
+    await button.updateComplete;
+    (_a = button.renderRoot.querySelector('button')) === null || _a === void 0 ? void 0 : _a.setAttribute('part', 'button');
+});
+MwcButton.elementStyles.push(css `
+	:host {
+		display: inline-grid !important;
+		width: 100% !important;
+		height: 100% !important;
+		border-radius: inherit !important;
+	}
+
+	button {
+		width: 100% !important;
+		height: 100% !important;
+		min-width: unset !important;
+		line-height: unset !important;
+		padding-top: 4px !important;
+		padding-bottom: 4px !important;
+		text-transform: unset !important;
+		border-radius: inherit !important;
+		text-align: inherit !important;
+	}
+
+	.mdc-button__label {
+		display: none;
+	}
+
+	.trailing-icon, .leading-icon {
+		display: inline-flex;
+		align-items: center;
+	}
+
+	.trailing-icon ::slotted(*), .leading-icon ::slotted(*) {
+		margin-inline-start: unset;
+		margin-inline-end: unset;
+		display: unset;
+		position: unset;
+		vertical-align: unset;
+		font-size: unset;
+		height: unset;
+		width: unset;
+	}
+`);

package/dist/Icon/Icon.d.ts

@@ -1,33 +1,33 @@
-import { Component } from '@a11d/lit';
-import { MaterialIcon } from './index.js';
-export declare const enum IconVariant {
-    Filled = "filled",
-    Outlined = "outlined",
-    Sharp = "sharp",
-    Rounded = "rounded"
-}
-/**
- * @attr variant - The variant of the icon tied to a specific font.
- * @attr icon - The icon to display.
- */
-export declare class Icon extends Component {
-    static defaultVariant: IconVariant;
-    static readonly fontsByVariant: Map<IconVariant, {
-        name: string;
-        url: string;
-    }>;
-    private static readonly fontStyleElement;
-    private static readonly fontUrls;
-    private static get;
-    private static ensureAvailable;
-    variant: IconVariant;
-    icon?: MaterialIcon;
-    static get styles(): import("@a11d/lit").CSSResult;
-    protected get template(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'mo-icon': Icon;
-    }
-}
+import { Component } from '@a11d/lit';
+import { type MaterialIcon } from './index.js';
+export declare const enum IconVariant {
+    Filled = "filled",
+    Outlined = "outlined",
+    Sharp = "sharp",
+    Rounded = "rounded"
+}
+/**
+ * @attr variant - The variant of the icon tied to a specific font.
+ * @attr icon - The icon to display.
+ */
+export declare class Icon extends Component {
+    static defaultVariant: IconVariant;
+    static readonly fontsByVariant: Map<IconVariant, {
+        name: string;
+        url: string;
+    }>;
+    private static readonly fontStyleElement;
+    private static readonly fontUrls;
+    private static get;
+    private static ensureAvailable;
+    variant: IconVariant;
+    icon?: MaterialIcon;
+    static get styles(): import("@a11d/lit").CSSResult;
+    protected get template(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mo-icon': Icon;
+    }
+}
 //# sourceMappingURL=Icon.d.ts.map