@lit-material/button 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -0
- package/custom-elements.json +9 -1
- package/dist/button-styles.d.ts.map +1 -1
- package/dist/button-styles.js +13 -2
- package/dist/button-styles.js.map +1 -1
- package/dist/button.d.ts +2 -0
- package/dist/button.d.ts.map +1 -1
- package/dist/button.js +2 -0
- package/dist/button.js.map +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -42,6 +42,17 @@ Slots: default (label), `icon` (leading icon).
|
|
|
42
42
|
`type="submit"` and `type="reset"` participate in an ancestor `<form>` via
|
|
43
43
|
`ElementInternals`; setting `href` renders an `<a>` instead of a `<button>`.
|
|
44
44
|
|
|
45
|
+
## Styling
|
|
46
|
+
|
|
47
|
+
Theme the component through custom properties rather than `::part`:
|
|
48
|
+
|
|
49
|
+
| Property | Default |
|
|
50
|
+
| --- | --- |
|
|
51
|
+
| `--lit-material-button-height` | `40px` |
|
|
52
|
+
| `--lit-material-button-padding-inline` | `24px` (`12px` for `text`: `--lit-material-button-text-padding-inline`) |
|
|
53
|
+
| `--lit-material-button-shape` | `--md-sys-shape-corner-full` |
|
|
54
|
+
| `--lit-material-button-pressed-scale` | `1` (try `0.98`; ignored under reduced motion) |
|
|
55
|
+
|
|
45
56
|
## License
|
|
46
57
|
|
|
47
58
|
MIT
|
package/custom-elements.json
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
{
|
|
10
10
|
"kind": "variable",
|
|
11
11
|
"name": "styles",
|
|
12
|
-
"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; } `"
|
|
12
|
+
"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(--lit-material-button-shape, 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)), transform 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)); } .button:active { transform: scale(var(--lit-material-button-pressed-scale, 1)); } @media (prefers-reduced-motion: reduce) { .button:active { transform: none; } } .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; } `"
|
|
13
13
|
}
|
|
14
14
|
],
|
|
15
15
|
"exports": [
|
|
@@ -43,6 +43,14 @@
|
|
|
43
43
|
{
|
|
44
44
|
"description": "The same for `variant=\"text\"` (default `12px`).",
|
|
45
45
|
"name": "--lit-material-button-text-padding-inline"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"description": "Corner radius (default `--md-sys-shape-corner-full`).",
|
|
49
|
+
"name": "--lit-material-button-shape"
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"description": "Scale while pressed, e.g. `0.98` (default `1`; off under reduced motion).",
|
|
53
|
+
"name": "--lit-material-button-pressed-scale"
|
|
46
54
|
}
|
|
47
55
|
],
|
|
48
56
|
"cssParts": [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-styles.d.ts","sourceRoot":"","sources":["../src/button-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"button-styles.d.ts","sourceRoot":"","sources":["../src/button-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAoJlB,CAAC"}
|
package/dist/button-styles.js
CHANGED
|
@@ -22,7 +22,7 @@ export const styles = css `
|
|
|
22
22
|
min-width: 64px;
|
|
23
23
|
padding: 0 var(--lit-material-button-padding-inline, 24px);
|
|
24
24
|
border: none;
|
|
25
|
-
border-radius: var(--md-sys-shape-corner-full, 9999px);
|
|
25
|
+
border-radius: var(--lit-material-button-shape, var(--md-sys-shape-corner-full, 9999px));
|
|
26
26
|
background-color: transparent;
|
|
27
27
|
cursor: pointer;
|
|
28
28
|
font-family: var(--md-sys-typescale-label-large-font, Roboto, system-ui, sans-serif);
|
|
@@ -35,7 +35,18 @@ export const styles = css `
|
|
|
35
35
|
appearance: none;
|
|
36
36
|
transition:
|
|
37
37
|
box-shadow 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
|
|
38
|
-
background-color 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))
|
|
38
|
+
background-color 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
|
|
39
|
+
transform 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.button:active {
|
|
43
|
+
transform: scale(var(--lit-material-button-pressed-scale, 1));
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@media (prefers-reduced-motion: reduce) {
|
|
47
|
+
.button:active {
|
|
48
|
+
transform: none;
|
|
49
|
+
}
|
|
39
50
|
}
|
|
40
51
|
|
|
41
52
|
.button:disabled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-styles.js","sourceRoot":"","sources":["../src/button-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"button-styles.js","sourceRoot":"","sources":["../src/button-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoJxB,CAAC"}
|
package/dist/button.d.ts
CHANGED
|
@@ -12,6 +12,8 @@ export type ButtonType = "button" | "submit" | "reset";
|
|
|
12
12
|
* @cssprop --lit-material-button-height - Button height (default `40px`).
|
|
13
13
|
* @cssprop --lit-material-button-padding-inline - Left and right padding (default `24px`).
|
|
14
14
|
* @cssprop --lit-material-button-text-padding-inline - The same for `variant="text"` (default `12px`).
|
|
15
|
+
* @cssprop --lit-material-button-shape - Corner radius (default `--md-sys-shape-corner-full`).
|
|
16
|
+
* @cssprop --lit-material-button-pressed-scale - Scale while pressed, e.g. `0.98` (default `1`; off under reduced motion).
|
|
15
17
|
*
|
|
16
18
|
* @csspart button - The native `<button>` or `<a>` element rendered inside the shadow root.
|
|
17
19
|
* @csspart ripple - The state-layer element the hover/press feedback is drawn on.
|
package/dist/button.d.ts.map
CHANGED
|
@@ -1 +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
|
|
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;;;;;;;;;;;;;;;;;GAiBG;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
CHANGED
|
@@ -20,6 +20,8 @@ let instanceCount = 0;
|
|
|
20
20
|
* @cssprop --lit-material-button-height - Button height (default `40px`).
|
|
21
21
|
* @cssprop --lit-material-button-padding-inline - Left and right padding (default `24px`).
|
|
22
22
|
* @cssprop --lit-material-button-text-padding-inline - The same for `variant="text"` (default `12px`).
|
|
23
|
+
* @cssprop --lit-material-button-shape - Corner radius (default `--md-sys-shape-corner-full`).
|
|
24
|
+
* @cssprop --lit-material-button-pressed-scale - Scale while pressed, e.g. `0.98` (default `1`; off under reduced motion).
|
|
23
25
|
*
|
|
24
26
|
* @csspart button - The native `<button>` or `<a>` element rendered inside the shadow root.
|
|
25
27
|
* @csspart ripple - The state-layer element the hover/press feedback is drawn on.
|
package/dist/button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../src/button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAK5C,IAAI,aAAa,GAAG,CAAC,CAAC;AAEtB
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../src/button.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lit-material/button",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Material Design 3 button web component (filled, outlined, text, elevated, tonal).",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": {
|
|
@@ -41,8 +41,8 @@
|
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
43
|
"lit": "^3.2.0",
|
|
44
|
-
"@lit-material/
|
|
45
|
-
"@lit-material/
|
|
44
|
+
"@lit-material/core": "0.0.3",
|
|
45
|
+
"@lit-material/tokens": "0.0.2"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@lit-labs/ssr": "^3.3.1",
|