@lit-material/button 0.0.2 → 0.1.1

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.
Files changed (10) hide show
  1. package/README.md +11 -0
  2. package/custom-elements.json +375 -0
  3. package/dist/button-styles.d.ts.map +1 -1
  4. package/dist/button-styles.js +17 -6
  5. package/dist/button-styles.js.map +1 -1
  6. package/dist/button.d.ts +6 -0
  7. package/dist/button.d.ts.map +1 -1
  8. package/dist/button.js +6 -0
  9. package/dist/button.js.map +1 -1
  10. package/package.json +6 -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 ADDED
@@ -0,0 +1,375 @@
1
+ {
2
+ "schemaVersion": "1.0.0",
3
+ "readme": "",
4
+ "modules": [
5
+ {
6
+ "kind": "javascript-module",
7
+ "path": "src/button-styles.ts",
8
+ "declarations": [
9
+ {
10
+ "kind": "variable",
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(--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
+ }
14
+ ],
15
+ "exports": [
16
+ {
17
+ "kind": "js",
18
+ "name": "styles",
19
+ "declaration": {
20
+ "name": "styles",
21
+ "module": "src/button-styles.ts"
22
+ }
23
+ }
24
+ ]
25
+ },
26
+ {
27
+ "kind": "javascript-module",
28
+ "path": "src/button.ts",
29
+ "declarations": [
30
+ {
31
+ "kind": "class",
32
+ "description": "Material Design 3 button.",
33
+ "name": "LitMaterialButton",
34
+ "cssProperties": [
35
+ {
36
+ "description": "Button height (default `40px`).",
37
+ "name": "--lit-material-button-height"
38
+ },
39
+ {
40
+ "description": "Left and right padding (default `24px`).",
41
+ "name": "--lit-material-button-padding-inline"
42
+ },
43
+ {
44
+ "description": "The same for `variant=\"text\"` (default `12px`).",
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"
54
+ }
55
+ ],
56
+ "cssParts": [
57
+ {
58
+ "description": "The native `<button>` or `<a>` element rendered inside the shadow root.",
59
+ "name": "button"
60
+ },
61
+ {
62
+ "description": "The state-layer element the hover/press feedback is drawn on.",
63
+ "name": "ripple"
64
+ },
65
+ {
66
+ "description": "The focus indicator element.",
67
+ "name": "focus-ring"
68
+ }
69
+ ],
70
+ "slots": [
71
+ {
72
+ "description": "The button's label.",
73
+ "name": ""
74
+ },
75
+ {
76
+ "description": "An optional leading icon.",
77
+ "name": "icon"
78
+ }
79
+ ],
80
+ "members": [
81
+ {
82
+ "kind": "field",
83
+ "name": "shadowRootOptions",
84
+ "type": {
85
+ "text": "ShadowRootInit"
86
+ },
87
+ "static": true,
88
+ "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
89
+ },
90
+ {
91
+ "kind": "field",
92
+ "name": "formAssociated",
93
+ "type": {
94
+ "text": "boolean"
95
+ },
96
+ "static": true,
97
+ "default": "true",
98
+ "description": "Form-associated custom element: lets this button participate in an ancestor `<form>`."
99
+ },
100
+ {
101
+ "kind": "field",
102
+ "name": "variant",
103
+ "type": {
104
+ "text": "ButtonVariant"
105
+ },
106
+ "default": "\"filled\"",
107
+ "attribute": "variant"
108
+ },
109
+ {
110
+ "kind": "field",
111
+ "name": "type",
112
+ "type": {
113
+ "text": "ButtonType"
114
+ },
115
+ "default": "\"button\"",
116
+ "attribute": "type"
117
+ },
118
+ {
119
+ "kind": "field",
120
+ "name": "disabled",
121
+ "type": {
122
+ "text": "boolean"
123
+ },
124
+ "default": "false",
125
+ "attribute": "disabled",
126
+ "reflects": true
127
+ },
128
+ {
129
+ "kind": "field",
130
+ "name": "name",
131
+ "type": {
132
+ "text": "string"
133
+ },
134
+ "default": "\"\"",
135
+ "attribute": "name"
136
+ },
137
+ {
138
+ "kind": "field",
139
+ "name": "value",
140
+ "type": {
141
+ "text": "string"
142
+ },
143
+ "default": "\"\"",
144
+ "attribute": "value"
145
+ },
146
+ {
147
+ "kind": "field",
148
+ "name": "form",
149
+ "type": {
150
+ "text": "string | undefined"
151
+ },
152
+ "attribute": "form",
153
+ "reflects": true
154
+ },
155
+ {
156
+ "kind": "field",
157
+ "name": "href",
158
+ "type": {
159
+ "text": "string"
160
+ },
161
+ "default": "\"\"",
162
+ "description": "If set, renders the button as a link (`<a>`) instead of a `<button>`.",
163
+ "attribute": "href"
164
+ },
165
+ {
166
+ "kind": "field",
167
+ "name": "target",
168
+ "type": {
169
+ "text": "string"
170
+ },
171
+ "default": "\"\"",
172
+ "attribute": "target"
173
+ },
174
+ {
175
+ "kind": "field",
176
+ "name": "stateLayerElement",
177
+ "type": {
178
+ "text": "HTMLElement | undefined"
179
+ },
180
+ "privacy": "private",
181
+ "readonly": true
182
+ },
183
+ {
184
+ "kind": "field",
185
+ "name": "internals",
186
+ "type": {
187
+ "text": "ElementInternals"
188
+ },
189
+ "privacy": "private",
190
+ "readonly": true
191
+ },
192
+ {
193
+ "kind": "field",
194
+ "name": "ripple",
195
+ "privacy": "private",
196
+ "readonly": true,
197
+ "default": "new RippleController(this)"
198
+ },
199
+ {
200
+ "kind": "field",
201
+ "name": "focusRing",
202
+ "privacy": "private",
203
+ "readonly": true,
204
+ "default": "new FocusRingController(this)"
205
+ },
206
+ {
207
+ "kind": "field",
208
+ "name": "labelId",
209
+ "privacy": "private",
210
+ "readonly": true,
211
+ "default": "`lit-material-button-label-${++instanceCount}`"
212
+ },
213
+ {
214
+ "kind": "method",
215
+ "name": "handleClick",
216
+ "privacy": "private",
217
+ "return": {
218
+ "type": {
219
+ "text": "void"
220
+ }
221
+ },
222
+ "parameters": [
223
+ {
224
+ "name": "event",
225
+ "type": {
226
+ "text": "MouseEvent"
227
+ }
228
+ }
229
+ ]
230
+ },
231
+ {
232
+ "kind": "method",
233
+ "name": "handleLinkClick",
234
+ "privacy": "private",
235
+ "return": {
236
+ "type": {
237
+ "text": "void"
238
+ }
239
+ },
240
+ "parameters": [
241
+ {
242
+ "name": "event",
243
+ "type": {
244
+ "text": "MouseEvent"
245
+ }
246
+ }
247
+ ]
248
+ }
249
+ ],
250
+ "attributes": [
251
+ {
252
+ "name": "variant",
253
+ "type": {
254
+ "text": "ButtonVariant"
255
+ },
256
+ "default": "\"filled\"",
257
+ "fieldName": "variant"
258
+ },
259
+ {
260
+ "name": "type",
261
+ "type": {
262
+ "text": "ButtonType"
263
+ },
264
+ "default": "\"button\"",
265
+ "fieldName": "type"
266
+ },
267
+ {
268
+ "name": "disabled",
269
+ "type": {
270
+ "text": "boolean"
271
+ },
272
+ "default": "false",
273
+ "fieldName": "disabled"
274
+ },
275
+ {
276
+ "name": "name",
277
+ "type": {
278
+ "text": "string"
279
+ },
280
+ "default": "\"\"",
281
+ "fieldName": "name"
282
+ },
283
+ {
284
+ "name": "value",
285
+ "type": {
286
+ "text": "string"
287
+ },
288
+ "default": "\"\"",
289
+ "fieldName": "value"
290
+ },
291
+ {
292
+ "name": "form",
293
+ "type": {
294
+ "text": "string | undefined"
295
+ },
296
+ "fieldName": "form"
297
+ },
298
+ {
299
+ "name": "href",
300
+ "type": {
301
+ "text": "string"
302
+ },
303
+ "default": "\"\"",
304
+ "description": "If set, renders the button as a link (`<a>`) instead of a `<button>`.",
305
+ "fieldName": "href"
306
+ },
307
+ {
308
+ "name": "target",
309
+ "type": {
310
+ "text": "string"
311
+ },
312
+ "default": "\"\"",
313
+ "fieldName": "target"
314
+ }
315
+ ],
316
+ "superclass": {
317
+ "name": "LitElement",
318
+ "package": "lit"
319
+ },
320
+ "tagName": "lit-material-button",
321
+ "customElement": true
322
+ }
323
+ ],
324
+ "exports": [
325
+ {
326
+ "kind": "js",
327
+ "name": "LitMaterialButton",
328
+ "declaration": {
329
+ "name": "LitMaterialButton",
330
+ "module": "src/button.ts"
331
+ }
332
+ },
333
+ {
334
+ "kind": "custom-element-definition",
335
+ "name": "lit-material-button",
336
+ "declaration": {
337
+ "name": "LitMaterialButton",
338
+ "module": "src/button.ts"
339
+ }
340
+ }
341
+ ]
342
+ },
343
+ {
344
+ "kind": "javascript-module",
345
+ "path": "src/index.ts",
346
+ "declarations": [],
347
+ "exports": [
348
+ {
349
+ "kind": "js",
350
+ "name": "LitMaterialButton",
351
+ "declaration": {
352
+ "name": "LitMaterialButton",
353
+ "module": "./button.js"
354
+ }
355
+ },
356
+ {
357
+ "kind": "js",
358
+ "name": "ButtonVariant",
359
+ "declaration": {
360
+ "name": "ButtonVariant",
361
+ "module": "./button.js"
362
+ }
363
+ },
364
+ {
365
+ "kind": "js",
366
+ "name": "ButtonType",
367
+ "declaration": {
368
+ "name": "ButtonType",
369
+ "module": "./button.js"
370
+ }
371
+ }
372
+ ]
373
+ }
374
+ ]
375
+ }
package/dist/button-styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button-styles.d.ts","sourceRoot":"","sources":["../src/button-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAyIlB,CAAC"}
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
@@ -18,11 +18,11 @@ export const styles = css `
18
18
  justify-content: center;
19
19
  gap: 8px;
20
20
  box-sizing: border-box;
21
- height: 40px;
21
+ height: var(--lit-material-button-height, 40px);
22
22
  min-width: 64px;
23
- padding: 0 24px;
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,
@@ -74,7 +85,7 @@ export const styles = css `
74
85
  display: none;
75
86
  }
76
87
 
77
- .icon ::slotted(*) {
88
+ slot.icon::slotted(*) {
78
89
  width: 18px;
79
90
  height: 18px;
80
91
  }
@@ -122,7 +133,7 @@ export const styles = css `
122
133
  :host([variant="text"]) .button {
123
134
  background-color: transparent;
124
135
  color: var(--md-sys-color-primary, #6750a4);
125
- padding: 0 12px;
136
+ padding: 0 var(--lit-material-button-text-padding-inline, 12px);
126
137
  }
127
138
 
128
139
  /* Disabled treatment is identical across variants: on-surface at fixed opacities. */
package/dist/button-styles.js.map CHANGED
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyIxB,CAAC"}
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
@@ -9,6 +9,12 @@ export type ButtonType = "button" | "submit" | "reset";
9
9
  * @slot - The button's label.
10
10
  * @slot icon - An optional leading icon.
11
11
  *
12
+ * @cssprop --lit-material-button-height - Button height (default `40px`).
13
+ * @cssprop --lit-material-button-padding-inline - Left and right padding (default `24px`).
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).
17
+ *
12
18
  * @csspart button - The native `<button>` or `<a>` element rendered inside the shadow root.
13
19
  * @csspart ripple - The state-layer element the hover/press feedback is drawn on.
14
20
  * @csspart focus-ring - The focus indicator element.
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;;;;;;;;;;;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"}
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
@@ -17,6 +17,12 @@ let instanceCount = 0;
17
17
  * @slot - The button's label.
18
18
  * @slot icon - An optional leading icon.
19
19
  *
20
+ * @cssprop --lit-material-button-height - Button height (default `40px`).
21
+ * @cssprop --lit-material-button-padding-inline - Left and right padding (default `24px`).
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).
25
+ *
20
26
  * @csspart button - The native `<button>` or `<a>` element rendered inside the shadow root.
21
27
  * @csspart ripple - The state-layer element the hover/press feedback is drawn on.
22
28
  * @csspart focus-ring - The focus indicator element.
package/dist/button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button.js","sourceRoot":"","sources":["../src/button.ts"],"names":[],"mappings":"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"}
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.0.2",
3
+ "version": "0.1.1",
4
4
  "description": "Material Design 3 button web component (filled, outlined, text, elevated, tonal).",
5
5
  "license": "MIT",
6
6
  "author": {
@@ -33,7 +33,8 @@
33
33
  }
34
34
  },
35
35
  "files": [
36
- "dist"
36
+ "dist",
37
+ "custom-elements.json"
37
38
  ],
38
39
  "publishConfig": {
39
40
  "access": "public"
@@ -53,9 +54,11 @@
53
54
  "tsx": "^4.19.0",
54
55
  "typescript": "^5.7.0"
55
56
  },
57
+ "customElements": "custom-elements.json",
56
58
  "scripts": {
57
59
  "build": "tsc -p tsconfig.json",
58
60
  "typecheck": "tsc -p tsconfig.json --noEmit",
59
- "test": "web-test-runner && node --import tsx --test src/button.ssr.test.ts"
61
+ "test": "web-test-runner && node --import tsx --test src/button.ssr.test.ts",
62
+ "analyze": "custom-elements-manifest analyze --litelement --globs \"src/**/*.ts\" --exclude \"src/**/*.test.ts\" --exclude \"src/**/*.ssr.test.ts\""
60
63
  }
61
64
  }