@lit-material/button 0.0.2 → 0.1.0

package/custom-elements.json

@@ -0,0 +1,367 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/button-styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css` :host { display: inline-flex; outline: none; vertical-align: top; -webkit-tap-highlight-color: transparent; } :host([disabled]) { pointer-events: none; } .button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; height: var(--lit-material-button-height, 40px); min-width: 64px; padding: 0 var(--lit-material-button-padding-inline, 24px); border: none; border-radius: var(--md-sys-shape-corner-full, 9999px); background-color: transparent; cursor: pointer; font-family: var(--md-sys-typescale-label-large-font, Roboto, system-ui, sans-serif); font-size: var(--md-sys-typescale-label-large-size, 0.875rem); font-weight: var(--md-sys-typescale-label-large-weight, 500); line-height: var(--md-sys-typescale-label-large-line-height, 1.25rem); letter-spacing: var(--md-sys-typescale-label-large-tracking, 0.00625rem); text-decoration: none; -webkit-appearance: none; appearance: none; transition: box-shadow 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)), background-color 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)); } .button:disabled, .button[aria-disabled=\"true\"] { cursor: default; } .state-layer { position: absolute; inset: 0; border-radius: inherit; background-color: currentColor; opacity: 0; pointer-events: none; transition: opacity 100ms linear; } .button:hover .state-layer { opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08); } .state-layer[data-pressed] { opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.1); } .focus-ring { position: absolute; inset: -2px; border-radius: inherit; outline: 3px solid var(--md-sys-color-secondary, #625b71); outline-offset: 2px; pointer-events: none; } .focus-ring[hidden] { display: none; } slot.icon::slotted(*) { width: 18px; height: 18px; } .label { position: relative; } /* Filled (default): solid primary container. */ :host([variant=\"filled\"]) .button, :host(:not([variant])) .button { background-color: var(--md-sys-color-primary, #6750a4); color: var(--md-sys-color-on-primary, #ffffff); } /* Tonal: solid secondary container, lower emphasis than filled. */ :host([variant=\"tonal\"]) .button { background-color: var(--md-sys-color-secondary-container, #e8def8); color: var(--md-sys-color-on-secondary-container, #1d192b); } /* Elevated: surface-colored container that floats above the page via shadow. */ :host([variant=\"elevated\"]) .button { background-color: var(--md-sys-color-surface-container-low, #f7f2fa); color: var(--md-sys-color-primary, #6750a4); box-shadow: var(--md-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, 0.3)); } :host([variant=\"elevated\"]) .button:hover { box-shadow: var(--md-sys-elevation-level2, 0 1px 3px rgba(0, 0, 0, 0.3)); } /* Outlined: transparent container with a visible border, for medium emphasis. */ :host([variant=\"outlined\"]) .button { background-color: transparent; color: var(--md-sys-color-primary, #6750a4); border: 1px solid var(--md-sys-color-outline, #79747e); } :host([variant=\"outlined\"][disabled]) .button { border-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) 12%, transparent); } /* Text: no container at all, lowest emphasis. */ :host([variant=\"text\"]) .button { background-color: transparent; color: var(--md-sys-color-primary, #6750a4); padding: 0 var(--lit-material-button-text-padding-inline, 12px); } /* Disabled treatment is identical across variants: on-surface at fixed opacities. */ :host([disabled]) .button { background-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) 12%, transparent); color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) 38%, transparent); box-shadow: none; } :host([variant=\"outlined\"][disabled]) .button, :host([variant=\"text\"][disabled]) .button { background-color: transparent; } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/button-styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/button.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Material Design 3 button.",
+          "name": "LitMaterialButton",
+          "cssProperties": [
+            {
+              "description": "Button height (default `40px`).",
+              "name": "--lit-material-button-height"
+            },
+            {
+              "description": "Left and right padding (default `24px`).",
+              "name": "--lit-material-button-padding-inline"
+            },
+            {
+              "description": "The same for `variant=\"text\"` (default `12px`).",
+              "name": "--lit-material-button-text-padding-inline"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The native `<button>` or `<a>` element rendered inside the shadow root.",
+              "name": "button"
+            },
+            {
+              "description": "The state-layer element the hover/press feedback is drawn on.",
+              "name": "ripple"
+            },
+            {
+              "description": "The focus indicator element.",
+              "name": "focus-ring"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The button's label.",
+              "name": ""
+            },
+            {
+              "description": "An optional leading icon.",
+              "name": "icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "ShadowRootInit"
+              },
+              "static": true,
+              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
+            },
+            {
+              "kind": "field",
+              "name": "formAssociated",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Form-associated custom element: lets this button participate in an ancestor `<form>`."
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "ButtonVariant"
+              },
+              "default": "\"filled\"",
+              "attribute": "variant"
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "ButtonType"
+              },
+              "default": "\"button\"",
+              "attribute": "type"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "form",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "form",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "If set, renders the button as a link (`<a>`) instead of a `<button>`.",
+              "attribute": "href"
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "attribute": "target"
+            },
+            {
+              "kind": "field",
+              "name": "stateLayerElement",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "internals",
+              "type": {
+                "text": "ElementInternals"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "ripple",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new RippleController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "focusRing",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new FocusRingController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "labelId",
+              "privacy": "private",
+              "readonly": true,
+              "default": "`lit-material-button-label-${++instanceCount}`"
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleLinkClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "ButtonVariant"
+              },
+              "default": "\"filled\"",
+              "fieldName": "variant"
+            },
+            {
+              "name": "type",
+              "type": {
+                "text": "ButtonType"
+              },
+              "default": "\"button\"",
+              "fieldName": "type"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "fieldName": "name"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "fieldName": "value"
+            },
+            {
+              "name": "form",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "form"
+            },
+            {
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "If set, renders the button as a link (`<a>`) instead of a `<button>`.",
+              "fieldName": "href"
+            },
+            {
+              "name": "target",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "fieldName": "target"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "lit-material-button",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LitMaterialButton",
+          "declaration": {
+            "name": "LitMaterialButton",
+            "module": "src/button.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "lit-material-button",
+          "declaration": {
+            "name": "LitMaterialButton",
+            "module": "src/button.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LitMaterialButton",
+          "declaration": {
+            "name": "LitMaterialButton",
+            "module": "./button.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ButtonVariant",
+          "declaration": {
+            "name": "ButtonVariant",
+            "module": "./button.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ButtonType",
+          "declaration": {
+            "name": "ButtonType",
+            "module": "./button.js"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/button-styles.js

@@ -18,9 +18,9 @@ export const styles = css `
     justify-content: center;
     gap: 8px;
     box-sizing: border-box;
-    height: 40px;
+    height: var(--lit-material-button-height, 40px);
     min-width: 64px;
-    padding: 0 24px;
+    padding: 0 var(--lit-material-button-padding-inline, 24px);
     border: none;
     border-radius: var(--md-sys-shape-corner-full, 9999px);
     background-color: transparent;
@@ -74,7 +74,7 @@ export const styles = css `
     display: none;
   }
 
-  .icon ::slotted(*) {
+  slot.icon::slotted(*) {
     width: 18px;
     height: 18px;
   }
@@ -122,7 +122,7 @@ export const styles = css `
   :host([variant="text"]) .button {
     background-color: transparent;
     color: var(--md-sys-color-primary, #6750a4);
-    padding: 0 12px;
+    padding: 0 var(--lit-material-button-text-padding-inline, 12px);
   }
 
   /* Disabled treatment is identical across variants: on-surface at fixed opacities. */

package/dist/button.d.ts

@@ -9,6 +9,10 @@ export type ButtonType = "button" | "submit" | "reset";
  * @slot - The button's label.
  * @slot icon - An optional leading icon.
  *
+ * @cssprop --lit-material-button-height - Button height (default `40px`).
+ * @cssprop --lit-material-button-padding-inline - Left and right padding (default `24px`).
+ * @cssprop --lit-material-button-text-padding-inline - The same for `variant="text"` (default `12px`).
+ *
  * @csspart button - The native `<button>` or `<a>` element rendered inside the shadow root.
  * @csspart ripple - The state-layer element the hover/press feedback is drawn on.
  * @csspart focus-ring - The focus indicator element.

package/dist/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../src/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAKhD,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,CAAC;AAClF,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAIvD;;;;;;;;;;;GAWG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAU;IAEhC,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAEF,4FAA4F;IAC5F,MAAM,CAAC,cAAc,UAAQ;IAEjB,OAAO,EAAE,aAAa,CAAY;IAClC,IAAI,EAAE,UAAU,CAAY;IACI,QAAQ,UAAS;IACjD,IAAI,SAAM;IACV,KAAK,SAAM;IACM,IAAI,CAAC,EAAE,MAAM,CAAC;IAE3C,4EAA4E;IAChE,IAAI,SAAM;IACV,MAAM,SAAM;IAED,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAc;IAExE,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAmB;IAC7C,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA8B;IACrD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAiC;IAC3D,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAkD;;cAOvD,YAAY,IAAI,IAAI;IAM9B,MAAM;IA0Cf,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,eAAe;CAMxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../src/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAKhD,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,CAAC;AAClF,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAIvD;;;;;;;;;;;;;;;GAeG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAU;IAEhC,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAEF,4FAA4F;IAC5F,MAAM,CAAC,cAAc,UAAQ;IAEjB,OAAO,EAAE,aAAa,CAAY;IAClC,IAAI,EAAE,UAAU,CAAY;IACI,QAAQ,UAAS;IACjD,IAAI,SAAM;IACV,KAAK,SAAM;IACM,IAAI,CAAC,EAAE,MAAM,CAAC;IAE3C,4EAA4E;IAChE,IAAI,SAAM;IACV,MAAM,SAAM;IAED,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAc;IAExE,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAmB;IAC7C,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA8B;IACrD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAiC;IAC3D,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAkD;;cAOvD,YAAY,IAAI,IAAI;IAM9B,MAAM;IA0Cf,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,eAAe;CAMxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

package/dist/button.js

@@ -17,6 +17,10 @@ let instanceCount = 0;
  * @slot - The button's label.
  * @slot icon - An optional leading icon.
  *
+ * @cssprop --lit-material-button-height - Button height (default `40px`).
+ * @cssprop --lit-material-button-padding-inline - Left and right padding (default `24px`).
+ * @cssprop --lit-material-button-text-padding-inline - The same for `variant="text"` (default `12px`).
+ *
  * @csspart button - The native `<button>` or `<a>` element rendered inside the shadow root.
  * @csspart ripple - The state-layer element the hover/press feedback is drawn on.
  * @csspart focus-ring - The focus indicator element.

package/dist/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../src/button.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../src/button.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lit-material/button",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "Material Design 3 button web component (filled, outlined, text, elevated, tonal).",
   "license": "MIT",
   "author": {
@@ -33,15 +33,16 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "custom-elements.json"
   ],
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "lit": "^3.2.0",
-    "@lit-material/core": "0.0.2",
-    "@lit-material/tokens": "0.0.1"
+    "@lit-material/tokens": "0.0.1",
+    "@lit-material/core": "0.0.2"
   },
   "devDependencies": {
     "@lit-labs/ssr": "^3.3.1",
@@ -53,9 +54,11 @@
     "tsx": "^4.19.0",
     "typescript": "^5.7.0"
   },
+  "customElements": "custom-elements.json",
   "scripts": {
     "build": "tsc -p tsconfig.json",
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "test": "web-test-runner && node --import tsx --test src/button.ssr.test.ts"
+    "test": "web-test-runner && node --import tsx --test src/button.ssr.test.ts",
+    "analyze": "custom-elements-manifest analyze --litelement --globs \"src/**/*.ts\" --exclude \"src/**/*.test.ts\" --exclude \"src/**/*.ssr.test.ts\""
   }
 }