@lit-material/button 0.1.2 → 0.2.0
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 +22 -0
- package/custom-elements.json +145 -1
- package/dist/action-list.d.ts +35 -0
- package/dist/action-list.d.ts.map +1 -0
- package/dist/action-list.js +98 -0
- package/dist/action-list.js.map +1 -0
- package/dist/button-styles.d.ts.map +1 -1
- package/dist/button-styles.js +4 -1
- 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/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -42,6 +42,28 @@ 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
|
+
## Action list
|
|
46
|
+
|
|
47
|
+
`lit-material-action-list` lays out a row of actions with consistent spacing — a form's Cancel and
|
|
48
|
+
Save, a toolbar, a card's links — wrapping when it runs out of room.
|
|
49
|
+
|
|
50
|
+
```html
|
|
51
|
+
<lit-material-action-list align="end" label="Form actions">
|
|
52
|
+
<lit-material-button variant="text">Cancel</lit-material-button>
|
|
53
|
+
<lit-material-button>Save</lit-material-button>
|
|
54
|
+
</lit-material-action-list>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
| Property | Attribute | Type | Default |
|
|
58
|
+
| --------- | --------- | ---- | ------- |
|
|
59
|
+
| `align` | `align` (reflected) | `"start" \| "end" \| "between"` | `"start"` |
|
|
60
|
+
| `compact` | `compact` (reflected) | `boolean` (4px gaps, for icon buttons) | `false` |
|
|
61
|
+
| `label` | `label` | `string` (names the row; it becomes `role="group"`) | `""` |
|
|
62
|
+
|
|
63
|
+
Nest action lists to group actions: groups sit 16px apart, actions in a group 8px. `end` and
|
|
64
|
+
`between` take the full width (or the rest of a flex row) so there is room to align in.
|
|
65
|
+
`--lit-material-action-list-gap` overrides the spacing.
|
|
66
|
+
|
|
45
67
|
## Styling
|
|
46
68
|
|
|
47
69
|
Theme the component through custom properties rather than `::part`:
|
package/custom-elements.json
CHANGED
|
@@ -2,6 +2,126 @@
|
|
|
2
2
|
"schemaVersion": "1.0.0",
|
|
3
3
|
"readme": "",
|
|
4
4
|
"modules": [
|
|
5
|
+
{
|
|
6
|
+
"kind": "javascript-module",
|
|
7
|
+
"path": "src/action-list.ts",
|
|
8
|
+
"declarations": [
|
|
9
|
+
{
|
|
10
|
+
"kind": "class",
|
|
11
|
+
"description": "A row of actions with consistent spacing: a form's Cancel and Save, a\ntoolbar's buttons, a card's links. Items wrap onto a new line when the\nrow runs out of room.\n\nNest lists to group actions: a list holding lists spaces the groups wider\napart than the actions inside them. `label` names the row for assistive\ntechnology (it becomes a `group`).",
|
|
12
|
+
"name": "LitMaterialActionList",
|
|
13
|
+
"cssProperties": [
|
|
14
|
+
{
|
|
15
|
+
"description": "Space between actions (default `8px`, `16px` between groups, `4px` when `compact`).",
|
|
16
|
+
"name": "--lit-material-action-list-gap"
|
|
17
|
+
}
|
|
18
|
+
],
|
|
19
|
+
"slots": [
|
|
20
|
+
{
|
|
21
|
+
"description": "The actions (buttons, icon buttons, links) or nested action lists.",
|
|
22
|
+
"name": ""
|
|
23
|
+
}
|
|
24
|
+
],
|
|
25
|
+
"members": [
|
|
26
|
+
{
|
|
27
|
+
"kind": "field",
|
|
28
|
+
"name": "align",
|
|
29
|
+
"type": {
|
|
30
|
+
"text": "ActionListAlign"
|
|
31
|
+
},
|
|
32
|
+
"default": "\"start\"",
|
|
33
|
+
"description": "Where the actions sit in the row: `start`, `end` (dialogs, forms) or `between` (spread out).",
|
|
34
|
+
"attribute": "align",
|
|
35
|
+
"reflects": true
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"kind": "field",
|
|
39
|
+
"name": "compact",
|
|
40
|
+
"type": {
|
|
41
|
+
"text": "boolean"
|
|
42
|
+
},
|
|
43
|
+
"default": "false",
|
|
44
|
+
"description": "Tighter spacing, for icon buttons.",
|
|
45
|
+
"attribute": "compact",
|
|
46
|
+
"reflects": true
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"kind": "field",
|
|
50
|
+
"name": "label",
|
|
51
|
+
"type": {
|
|
52
|
+
"text": "string"
|
|
53
|
+
},
|
|
54
|
+
"default": "\"\"",
|
|
55
|
+
"description": "Names the row; it then has `role=\"group\"`.",
|
|
56
|
+
"attribute": "label"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"kind": "method",
|
|
60
|
+
"name": "onSlotChange",
|
|
61
|
+
"privacy": "private",
|
|
62
|
+
"return": {
|
|
63
|
+
"type": {
|
|
64
|
+
"text": "void"
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
],
|
|
69
|
+
"attributes": [
|
|
70
|
+
{
|
|
71
|
+
"name": "align",
|
|
72
|
+
"type": {
|
|
73
|
+
"text": "ActionListAlign"
|
|
74
|
+
},
|
|
75
|
+
"default": "\"start\"",
|
|
76
|
+
"description": "Where the actions sit in the row: `start`, `end` (dialogs, forms) or `between` (spread out).",
|
|
77
|
+
"fieldName": "align"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"name": "compact",
|
|
81
|
+
"type": {
|
|
82
|
+
"text": "boolean"
|
|
83
|
+
},
|
|
84
|
+
"default": "false",
|
|
85
|
+
"description": "Tighter spacing, for icon buttons.",
|
|
86
|
+
"fieldName": "compact"
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"name": "label",
|
|
90
|
+
"type": {
|
|
91
|
+
"text": "string"
|
|
92
|
+
},
|
|
93
|
+
"default": "\"\"",
|
|
94
|
+
"description": "Names the row; it then has `role=\"group\"`.",
|
|
95
|
+
"fieldName": "label"
|
|
96
|
+
}
|
|
97
|
+
],
|
|
98
|
+
"superclass": {
|
|
99
|
+
"name": "LitElement",
|
|
100
|
+
"package": "lit"
|
|
101
|
+
},
|
|
102
|
+
"tagName": "lit-material-action-list",
|
|
103
|
+
"customElement": true
|
|
104
|
+
}
|
|
105
|
+
],
|
|
106
|
+
"exports": [
|
|
107
|
+
{
|
|
108
|
+
"kind": "js",
|
|
109
|
+
"name": "LitMaterialActionList",
|
|
110
|
+
"declaration": {
|
|
111
|
+
"name": "LitMaterialActionList",
|
|
112
|
+
"module": "src/action-list.ts"
|
|
113
|
+
}
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"kind": "custom-element-definition",
|
|
117
|
+
"name": "lit-material-action-list",
|
|
118
|
+
"declaration": {
|
|
119
|
+
"name": "LitMaterialActionList",
|
|
120
|
+
"module": "src/action-list.ts"
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
]
|
|
124
|
+
},
|
|
5
125
|
{
|
|
6
126
|
"kind": "javascript-module",
|
|
7
127
|
"path": "src/button-styles.ts",
|
|
@@ -9,7 +129,7 @@
|
|
|
9
129
|
{
|
|
10
130
|
"kind": "variable",
|
|
11
131
|
"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; } `"
|
|
132
|
+
"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-start-start-radius: var(--lit-material-button-shape-start, var(--lit-material-button-shape, var(--md-sys-shape-corner-full, 9999px))); border-end-start-radius: var(--lit-material-button-shape-start, var(--lit-material-button-shape, var(--md-sys-shape-corner-full, 9999px))); border-start-end-radius: var(--lit-material-button-shape-end, var(--lit-material-button-shape, var(--md-sys-shape-corner-full, 9999px))); border-end-end-radius: var(--lit-material-button-shape-end, 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
133
|
}
|
|
14
134
|
],
|
|
15
135
|
"exports": [
|
|
@@ -48,6 +168,14 @@
|
|
|
48
168
|
"description": "Corner radius (default `--md-sys-shape-corner-full`).",
|
|
49
169
|
"name": "--lit-material-button-shape"
|
|
50
170
|
},
|
|
171
|
+
{
|
|
172
|
+
"description": "Start-side corners (default `--lit-material-button-shape`).",
|
|
173
|
+
"name": "--lit-material-button-shape-start"
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
"description": "End-side corners (default `--lit-material-button-shape`).",
|
|
177
|
+
"name": "--lit-material-button-shape-end"
|
|
178
|
+
},
|
|
51
179
|
{
|
|
52
180
|
"description": "Scale while pressed, e.g. `0.98` (default `1`; off under reduced motion).",
|
|
53
181
|
"name": "--lit-material-button-pressed-scale"
|
|
@@ -368,6 +496,22 @@
|
|
|
368
496
|
"name": "ButtonType",
|
|
369
497
|
"module": "./button.js"
|
|
370
498
|
}
|
|
499
|
+
},
|
|
500
|
+
{
|
|
501
|
+
"kind": "js",
|
|
502
|
+
"name": "LitMaterialActionList",
|
|
503
|
+
"declaration": {
|
|
504
|
+
"name": "LitMaterialActionList",
|
|
505
|
+
"module": "./action-list.js"
|
|
506
|
+
}
|
|
507
|
+
},
|
|
508
|
+
{
|
|
509
|
+
"kind": "js",
|
|
510
|
+
"name": "ActionListAlign",
|
|
511
|
+
"declaration": {
|
|
512
|
+
"name": "ActionListAlign",
|
|
513
|
+
"module": "./action-list.js"
|
|
514
|
+
}
|
|
371
515
|
}
|
|
372
516
|
]
|
|
373
517
|
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
export type ActionListAlign = "start" | "end" | "between";
|
|
3
|
+
/**
|
|
4
|
+
* A row of actions with consistent spacing: a form's Cancel and Save, a
|
|
5
|
+
* toolbar's buttons, a card's links. Items wrap onto a new line when the
|
|
6
|
+
* row runs out of room.
|
|
7
|
+
*
|
|
8
|
+
* Nest lists to group actions: a list holding lists spaces the groups wider
|
|
9
|
+
* apart than the actions inside them. `label` names the row for assistive
|
|
10
|
+
* technology (it becomes a `group`).
|
|
11
|
+
*
|
|
12
|
+
* @element lit-material-action-list
|
|
13
|
+
*
|
|
14
|
+
* @slot - The actions (buttons, icon buttons, links) or nested action lists.
|
|
15
|
+
*
|
|
16
|
+
* @cssprop --lit-material-action-list-gap - Space between actions (default `8px`, `16px` between groups, `4px` when `compact`).
|
|
17
|
+
*/
|
|
18
|
+
export declare class LitMaterialActionList extends LitElement {
|
|
19
|
+
static styles: import("lit").CSSResult;
|
|
20
|
+
/** Where the actions sit in the row: `start`, `end` (dialogs, forms) or `between` (spread out). */
|
|
21
|
+
align: ActionListAlign;
|
|
22
|
+
/** Tighter spacing, for icon buttons. */
|
|
23
|
+
compact: boolean;
|
|
24
|
+
/** Names the row; it then has `role="group"`. */
|
|
25
|
+
label: string;
|
|
26
|
+
protected updated(changed: Map<string, unknown>): void;
|
|
27
|
+
private onSlotChange;
|
|
28
|
+
render(): import("lit").TemplateResult<1>;
|
|
29
|
+
}
|
|
30
|
+
declare global {
|
|
31
|
+
interface HTMLElementTagNameMap {
|
|
32
|
+
"lit-material-action-list": LitMaterialActionList;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
//# sourceMappingURL=action-list.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"action-list.d.ts","sourceRoot":"","sources":["../src/action-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;AAE1D;;;;;;;;;;;;;;GAcG;AACH,qBACa,qBAAsB,SAAQ,UAAU;IACnD,OAAgB,MAAM,0BA6BpB;IAEF,mGAAmG;IACtE,KAAK,EAAE,eAAe,CAAW;IAE9D,yCAAyC;IACG,OAAO,UAAS;IAE5D,iDAAiD;IACrC,KAAK,SAAM;cAEJ,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAW/D,OAAO,CAAC,YAAY;IAIX,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,0BAA0B,EAAE,qBAAqB,CAAC;KACnD;CACF"}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
var LitMaterialActionList_1;
|
|
8
|
+
import { css, html, LitElement } from "lit";
|
|
9
|
+
import { customElement, property } from "lit/decorators.js";
|
|
10
|
+
/**
|
|
11
|
+
* A row of actions with consistent spacing: a form's Cancel and Save, a
|
|
12
|
+
* toolbar's buttons, a card's links. Items wrap onto a new line when the
|
|
13
|
+
* row runs out of room.
|
|
14
|
+
*
|
|
15
|
+
* Nest lists to group actions: a list holding lists spaces the groups wider
|
|
16
|
+
* apart than the actions inside them. `label` names the row for assistive
|
|
17
|
+
* technology (it becomes a `group`).
|
|
18
|
+
*
|
|
19
|
+
* @element lit-material-action-list
|
|
20
|
+
*
|
|
21
|
+
* @slot - The actions (buttons, icon buttons, links) or nested action lists.
|
|
22
|
+
*
|
|
23
|
+
* @cssprop --lit-material-action-list-gap - Space between actions (default `8px`, `16px` between groups, `4px` when `compact`).
|
|
24
|
+
*/
|
|
25
|
+
let LitMaterialActionList = class LitMaterialActionList extends LitElement {
|
|
26
|
+
constructor() {
|
|
27
|
+
super(...arguments);
|
|
28
|
+
/** Where the actions sit in the row: `start`, `end` (dialogs, forms) or `between` (spread out). */
|
|
29
|
+
this.align = "start";
|
|
30
|
+
/** Tighter spacing, for icon buttons. */
|
|
31
|
+
this.compact = false;
|
|
32
|
+
/** Names the row; it then has `role="group"`. */
|
|
33
|
+
this.label = "";
|
|
34
|
+
}
|
|
35
|
+
static { LitMaterialActionList_1 = this; }
|
|
36
|
+
static { this.styles = css `
|
|
37
|
+
:host {
|
|
38
|
+
display: flex;
|
|
39
|
+
flex-wrap: wrap;
|
|
40
|
+
align-items: center;
|
|
41
|
+
gap: var(--lit-material-action-list-gap, 8px);
|
|
42
|
+
}
|
|
43
|
+
:host([hidden]) {
|
|
44
|
+
display: none;
|
|
45
|
+
}
|
|
46
|
+
:host([grouped]) {
|
|
47
|
+
gap: var(--lit-material-action-list-gap, 16px);
|
|
48
|
+
}
|
|
49
|
+
:host([compact]) {
|
|
50
|
+
gap: var(--lit-material-action-list-gap, 4px);
|
|
51
|
+
}
|
|
52
|
+
/* Aligning needs the room to align in: the full width, also as an item
|
|
53
|
+
of a column flexbox, or the rest of a row flexbox's line. */
|
|
54
|
+
:host([align="end"]),
|
|
55
|
+
:host([align="between"]) {
|
|
56
|
+
flex-grow: 1;
|
|
57
|
+
align-self: stretch;
|
|
58
|
+
}
|
|
59
|
+
:host([align="end"]) {
|
|
60
|
+
justify-content: flex-end;
|
|
61
|
+
}
|
|
62
|
+
:host([align="between"]) {
|
|
63
|
+
justify-content: space-between;
|
|
64
|
+
}
|
|
65
|
+
`; }
|
|
66
|
+
updated(changed) {
|
|
67
|
+
if (!changed.has("label"))
|
|
68
|
+
return;
|
|
69
|
+
if (this.label) {
|
|
70
|
+
this.setAttribute("role", "group");
|
|
71
|
+
this.setAttribute("aria-label", this.label);
|
|
72
|
+
}
|
|
73
|
+
else {
|
|
74
|
+
this.removeAttribute("role");
|
|
75
|
+
this.removeAttribute("aria-label");
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
onSlotChange() {
|
|
79
|
+
this.toggleAttribute("grouped", Array.from(this.children).some((el) => el instanceof LitMaterialActionList_1));
|
|
80
|
+
}
|
|
81
|
+
render() {
|
|
82
|
+
return html `<slot @slotchange=${this.onSlotChange}></slot>`;
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
__decorate([
|
|
86
|
+
property({ reflect: true })
|
|
87
|
+
], LitMaterialActionList.prototype, "align", void 0);
|
|
88
|
+
__decorate([
|
|
89
|
+
property({ type: Boolean, reflect: true })
|
|
90
|
+
], LitMaterialActionList.prototype, "compact", void 0);
|
|
91
|
+
__decorate([
|
|
92
|
+
property()
|
|
93
|
+
], LitMaterialActionList.prototype, "label", void 0);
|
|
94
|
+
LitMaterialActionList = LitMaterialActionList_1 = __decorate([
|
|
95
|
+
customElement("lit-material-action-list")
|
|
96
|
+
], LitMaterialActionList);
|
|
97
|
+
export { LitMaterialActionList };
|
|
98
|
+
//# sourceMappingURL=action-list.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"action-list.js","sourceRoot":"","sources":["../src/action-list.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAI5D;;;;;;;;;;;;;;GAcG;AAEI,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;QAgCL,mGAAmG;QACtE,UAAK,GAAoB,OAAO,CAAC;QAE9D,yCAAyC;QACG,YAAO,GAAG,KAAK,CAAC;QAE5D,iDAAiD;QACrC,UAAK,GAAG,EAAE,CAAC;IAoBzB,CAAC;;aA1DiB,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6B3B,AA7BqB,CA6BpB;IAWiB,OAAO,CAAC,OAA6B;QACtD,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;YAAE,OAAO;QAClC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YACnC,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;YAC7B,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,YAAY,uBAAqB,CAAC,CAAC,CAAC;IAC/G,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA,qBAAqB,IAAI,CAAC,YAAY,UAAU,CAAC;IAC9D,CAAC;;AAzB4B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAAkC;AAGlB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDAAiB;AAGhD;IAAX,QAAQ,EAAE;oDAAY;AAvCZ,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CA2DjC"}
|
|
@@ -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,yBAuJlB,CAAC"}
|
package/dist/button-styles.js
CHANGED
|
@@ -22,7 +22,10 @@ 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(--lit-material-button-shape, var(--md-sys-shape-corner-full, 9999px));
|
|
25
|
+
border-start-start-radius: var(--lit-material-button-shape-start, var(--lit-material-button-shape, var(--md-sys-shape-corner-full, 9999px)));
|
|
26
|
+
border-end-start-radius: var(--lit-material-button-shape-start, var(--lit-material-button-shape, var(--md-sys-shape-corner-full, 9999px)));
|
|
27
|
+
border-start-end-radius: var(--lit-material-button-shape-end, var(--lit-material-button-shape, var(--md-sys-shape-corner-full, 9999px)));
|
|
28
|
+
border-end-end-radius: var(--lit-material-button-shape-end, var(--lit-material-button-shape, var(--md-sys-shape-corner-full, 9999px)));
|
|
26
29
|
background-color: transparent;
|
|
27
30
|
cursor: pointer;
|
|
28
31
|
font-family: var(--md-sys-typescale-label-large-font, Roboto, system-ui, sans-serif);
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuJxB,CAAC"}
|
package/dist/button.d.ts
CHANGED
|
@@ -13,6 +13,8 @@ export type ButtonType = "button" | "submit" | "reset";
|
|
|
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
15
|
* @cssprop --lit-material-button-shape - Corner radius (default `--md-sys-shape-corner-full`).
|
|
16
|
+
* @cssprop --lit-material-button-shape-start - Start-side corners (default `--lit-material-button-shape`).
|
|
17
|
+
* @cssprop --lit-material-button-shape-end - End-side corners (default `--lit-material-button-shape`).
|
|
16
18
|
* @cssprop --lit-material-button-pressed-scale - Scale while pressed, e.g. `0.98` (default `1`; off under reduced motion).
|
|
17
19
|
*
|
|
18
20
|
* @csspart button - The native `<button>` or `<a>` element rendered inside the shadow root.
|
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;;;;;;;;;;;;;;;;;;;GAmBG;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
|
@@ -21,6 +21,8 @@ let instanceCount = 0;
|
|
|
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
23
|
* @cssprop --lit-material-button-shape - Corner radius (default `--md-sys-shape-corner-full`).
|
|
24
|
+
* @cssprop --lit-material-button-shape-start - Start-side corners (default `--lit-material-button-shape`).
|
|
25
|
+
* @cssprop --lit-material-button-shape-end - End-side corners (default `--lit-material-button-shape`).
|
|
24
26
|
* @cssprop --lit-material-button-pressed-scale - Scale while pressed, e.g. `0.98` (default `1`; off under reduced motion).
|
|
25
27
|
*
|
|
26
28
|
* @csspart button - The native `<button>` or `<a>` element rendered inside the shadow root.
|
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/dist/index.d.ts
CHANGED
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,KAAK,aAAa,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,KAAK,aAAa,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AACrF,OAAO,EAAE,qBAAqB,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC"}
|
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAuC,MAAM,aAAa,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAuC,MAAM,aAAa,CAAC;AACrF,OAAO,EAAE,qBAAqB,EAAwB,MAAM,kBAAkB,CAAC"}
|