@3mo/button - npm Package Compare versions

Comparing version 0.5.0 to 1.0.0

dist/Button.d.ts

@@ -7,6 +7,6 @@ import { Component } from '@a11d/lit';
 export declare enum ButtonType {
-    Normal = "normal",
+    Text = "text",
     Outlined = "outlined",
-    Raised = "raised",
-    Unelevated = "unelevated"
+    Elevated = "elevated",
+    Filled = "filled"
 }
@@ -20,8 +20,8 @@ /**
  * @attr disabled
- * @attr leadingIcon
- * @attr trailingIcon
+ * @attr startIcon
+ * @attr endIcon
  *
  * @slot - The content of the button.
- * @slot leading - The leading content of the button.
- * @slot trailing - The trailing content of the button.
+ * @slot start - The starting content of the button.
+ * @slot end - The end content of the button.
  *
@@ -43,4 +43,4 @@ * @cssprop --mo-button-accent-color
     disabled: boolean;
-    leadingIcon?: MaterialIcon;
-    trailingIcon?: MaterialIcon;
+    startIcon?: MaterialIcon;
+    endIcon?: MaterialIcon;
     static get styles(): import("@a11d/lit").CSSResult;
@@ -51,7 +51,7 @@ protected readonly instanceofAttributeController: InstanceofAttributeController;
     protected get contentTemplate(): import("lit-html").HTMLTemplateResult;
-    protected get leadingSlotTemplate(): import("lit-html").HTMLTemplateResult;
-    protected get leadingIconTemplate(): import("lit-html").HTMLTemplateResult;
+    protected get startSlotTemplate(): import("lit-html").HTMLTemplateResult;
+    protected get startIconTemplate(): import("lit-html").HTMLTemplateResult;
     protected get slotTemplate(): import("lit-html").HTMLTemplateResult;
-    protected get trailingSlotTemplate(): import("lit-html").HTMLTemplateResult;
-    protected get trailingIconTemplate(): import("lit-html").HTMLTemplateResult;
+    protected get endSlotTemplate(): import("lit-html").HTMLTemplateResult;
+    protected get endIconTemplate(): import("lit-html").HTMLTemplateResult;
 }
@@ -58,0 +58,0 @@ declare global {

dist/Button.js

 var Button_1;
 import { __decorate } from "tslib";
-import { component, property, css, Component, html, literal, staticHtml } from '@a11d/lit';
+import { component, property, css, Component, html, literal, staticHtml, unsafeCSS } from '@a11d/lit';
 import { InstanceofAttributeController } from '@3mo/instanceof-attribute-controller';
@@ -14,6 +14,6 @@ import { MdTextButton } from '@material/web/button/text-button.js';
 (function (ButtonType) {
-    ButtonType["Normal"] = "normal";
+    ButtonType["Text"] = "text";
     ButtonType["Outlined"] = "outlined";
-    ButtonType["Raised"] = "raised";
-    ButtonType["Unelevated"] = "unelevated";
+    ButtonType["Elevated"] = "elevated";
+    ButtonType["Filled"] = "filled";
 })(ButtonType || (ButtonType = {}));
@@ -27,8 +27,8 @@ /**
  * @attr disabled
- * @attr leadingIcon
- * @attr trailingIcon
+ * @attr startIcon
+ * @attr endIcon
  *
  * @slot - The content of the button.
- * @slot leading - The leading content of the button.
- * @slot trailing - The trailing content of the button.
+ * @slot start - The starting content of the button.
+ * @slot end - The end content of the button.
  *
@@ -48,3 +48,3 @@ * @cssprop --mo-button-accent-color
         super(...arguments);
-        this.type = ButtonType.Normal;
+        this.type = ButtonType.Text;
         this.disabled = false;
@@ -66,7 +66,7 @@ this.instanceofAttributeController = new InstanceofAttributeController(this);
 
-			:host([type=normal]) [md-button] {
+			:host([type=${unsafeCSS(ButtonType.Text)}]) [md-button] {
 				--mo-button-default-horizontal-padding: 12px;
 			}
 
-			:host(:not([type=normal])) [md-button] {
+			:host(:not([type=${unsafeCSS(ButtonType.Text)}])) [md-button] {
 				--mo-button-default-horizontal-padding: 16px;
@@ -84,7 +84,7 @@ }
 
-			slot[name=leading] {
+			slot[name=start] {
 				place-self: center start;
 			}
 
-			slot[name=leading] *, slot[name=leading]::slotted(*) {
+			slot[name=start] *, slot[name=start]::slotted(*) {
 				margin-inline-end: calc(var(--mo-button-horizontal-padding, var(--mo-button-default-horizontal-padding)) * 0.5);
@@ -94,7 +94,7 @@ margin-inline-start: calc(var(--mo-button-horizontal-padding, var(--mo-button-default-horizontal-padding)) * -0.5);
 
-			slot[name=trailing] {
+			slot[name=end] {
 				place-self: center end;
 			}
 
-			slot[name=trailing] *, slot[name=trailing]::slotted(*) {
+			slot[name=end] *, slot[name=end]::slotted(*) {
 				margin-inline-start: calc(var(--mo-button-horizontal-padding, var(--mo-button-default-horizontal-padding)) * 0.5);
@@ -229,17 +229,17 @@ margin-inline-end: calc(var(--mo-button-horizontal-padding, var(--mo-button-default-horizontal-padding)) * -0.5);
 			<mo-flex direction='horizontal' alignItems='center'>
-				${this.leadingSlotTemplate}
+				${this.startSlotTemplate}
 				${this.slotTemplate}
-				${this.trailingSlotTemplate}
+				${this.endSlotTemplate}
 			</mo-flex>
 		`;
     }
-    get leadingSlotTemplate() {
+    get startSlotTemplate() {
         return html `
-			<slot name='leading'>
-				${this.leadingIconTemplate}
+			<slot name='start'>
+				${this.startIconTemplate}
 			</slot>
 		`;
     }
-    get leadingIconTemplate() {
-        return !this.leadingIcon ? html.nothing : html `<mo-icon icon=${this.leadingIcon}></mo-icon>`;
+    get startIconTemplate() {
+        return !this.startIcon ? html.nothing : html `<mo-icon icon=${this.startIcon}></mo-icon>`;
     }
@@ -249,11 +249,11 @@ get slotTemplate() {
     }
-    get trailingSlotTemplate() {
+    get endSlotTemplate() {
         return html `
-			<slot name='trailing'>
-				${this.trailingIconTemplate}
+			<slot name='end'>
+				${this.endIconTemplate}
 			</slot>
 		`;
     }
-    get trailingIconTemplate() {
-        return !this.trailingIcon ? html.nothing : html `<mo-icon icon=${this.trailingIcon}></mo-icon>`;
+    get endIconTemplate() {
+        return !this.endIcon ? html.nothing : html `<mo-icon icon=${this.endIcon}></mo-icon>`;
     }
@@ -263,6 +263,6 @@ };
 Button.tagByType = new Map([
-    [ButtonType.Normal, literal `md-text-button`],
+    [ButtonType.Text, literal `md-text-button`],
     [ButtonType.Outlined, literal `md-outlined-button`],
-    [ButtonType.Raised, literal `md-elevated-button`],
-    [ButtonType.Unelevated, literal `md-filled-button`],
+    [ButtonType.Elevated, literal `md-elevated-button`],
+    [ButtonType.Filled, literal `md-filled-button`],
 ]);
@@ -277,6 +277,6 @@ __decorate([
     property()
-], Button.prototype, "leadingIcon", void 0);
+], Button.prototype, "startIcon", void 0);
 __decorate([
     property()
-], Button.prototype, "trailingIcon", void 0);
+], Button.prototype, "endIcon", void 0);
 Button = Button_1 = __decorate([
@@ -283,0 +283,0 @@ component('mo-button')

dist/custom-elements.json

@@ -11,3 +11,3 @@ {
 					"type": "ButtonType",
-					"default": "\"normal\""
+					"default": "\"text\""
 				},
@@ -20,7 +20,7 @@ {
 				{
-					"name": "leadingIcon",
+					"name": "startIcon",
 					"type": "MaterialIcon | undefined"
 				},
 				{
-					"name": "trailingIcon",
+					"name": "endIcon",
 					"type": "MaterialIcon | undefined"
@@ -39,3 +39,3 @@ }
 					"type": "ButtonType",
-					"default": "\"normal\""
+					"default": "\"text\""
 				},
@@ -49,9 +49,9 @@ {
 				{
-					"name": "leadingIcon",
-					"attribute": "leadingIcon",
+					"name": "startIcon",
+					"attribute": "startIcon",
 					"type": "MaterialIcon | undefined"
 				},
 				{
-					"name": "trailingIcon",
-					"attribute": "trailingIcon",
+					"name": "endIcon",
+					"attribute": "endIcon",
 					"type": "MaterialIcon | undefined"
@@ -66,8 +66,8 @@ }
 				{
-					"name": "leading",
-					"description": "The leading content of the button."
+					"name": "start",
+					"description": "The starting content of the button."
 				},
 				{
-					"name": "trailing",
-					"description": "The trailing content of the button."
+					"name": "end",
+					"description": "The end content of the button."
 				}
@@ -120,7 +120,7 @@ ],
 				{
-					"name": "leadingIcon",
+					"name": "startIcon",
 					"type": "MaterialIcon | undefined"
 				},
 				{
-					"name": "trailingIcon",
+					"name": "endIcon",
 					"type": "MaterialIcon | undefined"
@@ -145,9 +145,9 @@ }
 				{
-					"name": "leadingIcon",
-					"attribute": "leadingIcon",
+					"name": "startIcon",
+					"attribute": "startIcon",
 					"type": "MaterialIcon | undefined"
 				},
 				{
-					"name": "trailingIcon",
-					"attribute": "trailingIcon",
+					"name": "endIcon",
+					"attribute": "endIcon",
 					"type": "MaterialIcon | undefined"
@@ -162,8 +162,8 @@ }
 				{
-					"name": "leading",
-					"description": "The leading content of the button."
+					"name": "start",
+					"description": "The starting content of the button."
 				},
 				{
-					"name": "trailing",
-					"description": "The trailing content of the button."
+					"name": "end",
+					"description": "The end content of the button."
 				}
@@ -216,4 +216,4 @@ ],
 					"description": "The type of the buttons which will be passed down to all buttons.",
-					"type": "ButtonType",
-					"default": "\"normal\""
+					"type": "ButtonType.Text | ButtonType.Outlined | ButtonType.Filled",
+					"default": "\"text\""
 				}
@@ -233,4 +233,4 @@ ],
 					"description": "The type of the buttons which will be passed down to all buttons.",
-					"type": "ButtonType",
-					"default": "\"normal\""
+					"type": "ButtonType.Text | ButtonType.Outlined | ButtonType.Filled",
+					"default": "\"text\""
 				}
@@ -237,0 +237,0 @@ ],

package.json

 {
 	"name": "@3mo/button",
-	"version": "0.5.0",
+	"version": "1.0.0",
 	"description": "Buttons let people take action and make choices with one tap.",
@@ -5,0 +5,0 @@ "repository": {

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

88638

decreased by-0.1%

No dependency changes