@m3e/chips 1.0.0-rc.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.
- package/LICENSE +22 -0
- package/README.md +539 -0
- package/cem.config.mjs +16 -0
- package/demo/index.html +183 -0
- package/dist/css-custom-data.json +777 -0
- package/dist/custom-elements.json +3307 -0
- package/dist/html-custom-data.json +277 -0
- package/dist/index.js +1516 -0
- package/dist/index.js.map +1 -0
- package/dist/index.min.js +480 -0
- package/dist/index.min.js.map +1 -0
- package/dist/src/AssistChipElement.d.ts +82 -0
- package/dist/src/AssistChipElement.d.ts.map +1 -0
- package/dist/src/ChipElement.d.ts +86 -0
- package/dist/src/ChipElement.d.ts.map +1 -0
- package/dist/src/ChipSetElement.d.ts +43 -0
- package/dist/src/ChipSetElement.d.ts.map +1 -0
- package/dist/src/ChipVariant.d.ts +3 -0
- package/dist/src/ChipVariant.d.ts.map +1 -0
- package/dist/src/FilterChipElement.d.ts +93 -0
- package/dist/src/FilterChipElement.d.ts.map +1 -0
- package/dist/src/FilterChipSetElement.d.ts +78 -0
- package/dist/src/FilterChipSetElement.d.ts.map +1 -0
- package/dist/src/InputChipElement.d.ts +104 -0
- package/dist/src/InputChipElement.d.ts.map +1 -0
- package/dist/src/InputChipSetElement.d.ts +75 -0
- package/dist/src/InputChipSetElement.d.ts.map +1 -0
- package/dist/src/SuggestionChipElement.d.ts +83 -0
- package/dist/src/SuggestionChipElement.d.ts.map +1 -0
- package/dist/src/index.d.ts +10 -0
- package/dist/src/index.d.ts.map +1 -0
- package/eslint.config.mjs +13 -0
- package/package.json +55 -0
- package/rollup.config.js +32 -0
- package/src/AssistChipElement.ts +103 -0
- package/src/ChipElement.ts +336 -0
- package/src/ChipSetElement.ts +60 -0
- package/src/ChipVariant.ts +2 -0
- package/src/FilterChipElement.ts +254 -0
- package/src/FilterChipSetElement.ts +161 -0
- package/src/InputChipElement.ts +287 -0
- package/src/InputChipSetElement.ts +360 -0
- package/src/SuggestionChipElement.ts +104 -0
- package/src/index.ts +9 -0
- package/tsconfig.json +9 -0
package/demo/index.html
ADDED
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en" style="overflow-y: auto">
|
|
3
|
+
<head>
|
|
4
|
+
<title>Chips for M3E</title>
|
|
5
|
+
<meta charset="utf-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
+
<meta name="description" content="Chips for M3E" />
|
|
8
|
+
<base href="./" />
|
|
9
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
10
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
11
|
+
<link
|
|
12
|
+
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
|
|
13
|
+
rel="stylesheet"
|
|
14
|
+
/>
|
|
15
|
+
<link
|
|
16
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0..1,0"
|
|
17
|
+
rel="stylesheet"
|
|
18
|
+
/>
|
|
19
|
+
<script type="importmap">
|
|
20
|
+
{
|
|
21
|
+
"imports": {
|
|
22
|
+
"lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
|
|
23
|
+
"@m3e/core": "../../core/dist/index.min.js",
|
|
24
|
+
"@m3e/core/a11y": "../../core/dist/a11y.min.js"
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
</script>
|
|
28
|
+
<script type="module" src="../../icon/dist/index.min.js"></script>
|
|
29
|
+
<script type="module" src="../../icon-button/dist/index.min.js"></script>
|
|
30
|
+
<script type="module" src="../../form-field/dist/index.min.js"></script>
|
|
31
|
+
<script type="module" src="../../theme/dist/index.min.js"></script>
|
|
32
|
+
<script type="module" src="../dist/index.min.js"></script>
|
|
33
|
+
<style>
|
|
34
|
+
body {
|
|
35
|
+
font-family: "Roboto";
|
|
36
|
+
}
|
|
37
|
+
*:not(:defined) {
|
|
38
|
+
display: none;
|
|
39
|
+
}
|
|
40
|
+
</style>
|
|
41
|
+
</head>
|
|
42
|
+
<body>
|
|
43
|
+
<m3e-theme strong-focus>
|
|
44
|
+
<m3e-chip-set>
|
|
45
|
+
<m3e-chip><m3e-icon slot="icon" name="palette"></m3e-icon>Design</m3e-chip>
|
|
46
|
+
<m3e-chip><m3e-icon slot="icon" name="accessibility_new"></m3e-icon>Accessibility</m3e-chip>
|
|
47
|
+
<m3e-chip><m3e-icon slot="icon" name="motion_photos_on"></m3e-icon>Motion</m3e-chip>
|
|
48
|
+
<m3e-chip><m3e-icon slot="icon" name="description"></m3e-icon>Documentation</m3e-chip>
|
|
49
|
+
</m3e-chip-set>
|
|
50
|
+
<br /><br />
|
|
51
|
+
<m3e-chip>Static chip</m3e-chip>
|
|
52
|
+
<m3e-chip><m3e-icon slot="icon" name="face"></m3e-icon>Static chip w/ leading icon</m3e-chip>
|
|
53
|
+
<m3e-chip>Static chip w/ trailing icon<m3e-icon slot="trailing-icon" name="face"></m3e-icon></m3e-chip>
|
|
54
|
+
<m3e-chip>
|
|
55
|
+
<m3e-icon slot="icon" name="face"></m3e-icon>
|
|
56
|
+
Static chip w/ leading and trailing icons
|
|
57
|
+
<m3e-icon slot="trailing-icon" name="face"></m3e-icon>
|
|
58
|
+
</m3e-chip>
|
|
59
|
+
<br /><br />
|
|
60
|
+
<m3e-chip-set role="group" aria-label="Quick actions">
|
|
61
|
+
<m3e-assist-chip><m3e-icon slot="icon" name="edit"></m3e-icon>Edit</m3e-assist-chip>
|
|
62
|
+
<m3e-assist-chip><m3e-icon slot="icon" name="delete"></m3e-icon>Delete</m3e-assist-chip>
|
|
63
|
+
<m3e-assist-chip><m3e-icon slot="icon" name="content_copy"></m3e-icon>Copy</m3e-assist-chip>
|
|
64
|
+
<m3e-assist-chip><m3e-icon slot="icon" name="share"></m3e-icon>Share</m3e-assist-chip>
|
|
65
|
+
</m3e-chip-set>
|
|
66
|
+
|
|
67
|
+
<br /><br />
|
|
68
|
+
<m3e-assist-chip>Assist chip</m3e-assist-chip>
|
|
69
|
+
<m3e-assist-chip>
|
|
70
|
+
<m3e-icon slot="icon" name="directions_car"></m3e-icon>
|
|
71
|
+
Assist chip w/ leading icon
|
|
72
|
+
</m3e-assist-chip>
|
|
73
|
+
<m3e-assist-chip disabled>
|
|
74
|
+
<m3e-icon slot="icon" name="directions_car"></m3e-icon>
|
|
75
|
+
Disabled assist Chip w/ leading icon
|
|
76
|
+
</m3e-assist-chip>
|
|
77
|
+
<m3e-assist-chip disabled-interactive>
|
|
78
|
+
<m3e-icon slot="icon" name="directions_car"></m3e-icon>
|
|
79
|
+
Disabled interactive assist Chip w/ leading icon
|
|
80
|
+
</m3e-assist-chip>
|
|
81
|
+
|
|
82
|
+
<br /><br />
|
|
83
|
+
<m3e-assist-chip variant="elevated">Elevated assist chip</m3e-assist-chip>
|
|
84
|
+
<m3e-assist-chip variant="elevated" disabled>Disabled elevated assist chip</m3e-assist-chip>
|
|
85
|
+
<m3e-assist-chip variant="elevated" disabled-interactive>
|
|
86
|
+
Disabled interactive elevated assist chip
|
|
87
|
+
</m3e-assist-chip>
|
|
88
|
+
<br /><br />
|
|
89
|
+
<m3e-chip-set role="group" aria-label="Suggested replies">
|
|
90
|
+
<m3e-suggestion-chip>Sounds good!</m3e-suggestion-chip>
|
|
91
|
+
<m3e-suggestion-chip>Can you clarify?</m3e-suggestion-chip>
|
|
92
|
+
<m3e-suggestion-chip>Let's do it.</m3e-suggestion-chip>
|
|
93
|
+
<m3e-suggestion-chip>Maybe later.</m3e-suggestion-chip>
|
|
94
|
+
</m3e-chip-set>
|
|
95
|
+
<br /><br />
|
|
96
|
+
<m3e-suggestion-chip>Suggestion chip</m3e-suggestion-chip>
|
|
97
|
+
<m3e-suggestion-chip>
|
|
98
|
+
<m3e-icon slot="icon" name="face"></m3e-icon>
|
|
99
|
+
Suggestion chip w/ leading icon
|
|
100
|
+
</m3e-suggestion-chip>
|
|
101
|
+
<m3e-suggestion-chip disabled>
|
|
102
|
+
<m3e-icon slot="icon" name="face"></m3e-icon>
|
|
103
|
+
Disabled suggestion Chip w/ leading icon
|
|
104
|
+
</m3e-suggestion-chip>
|
|
105
|
+
<m3e-suggestion-chip disabled-interactive>
|
|
106
|
+
<m3e-icon slot="icon" name="face"></m3e-icon>
|
|
107
|
+
Disabled interactive suggestion Chip w/ leading icon
|
|
108
|
+
</m3e-suggestion-chip>
|
|
109
|
+
|
|
110
|
+
<br /><br />
|
|
111
|
+
<m3e-suggestion-chip variant="elevated">Elevated suggestion chip</m3e-suggestion-chip>
|
|
112
|
+
<m3e-suggestion-chip variant="elevated" disabled>Disabled elevated suggestion chip</m3e-suggestion-chip>
|
|
113
|
+
<m3e-suggestion-chip variant="elevated" disabled-interactive>
|
|
114
|
+
Disabled interactive elevated suggestion chip
|
|
115
|
+
</m3e-suggestion-chip>
|
|
116
|
+
<br /><br />
|
|
117
|
+
<m3e-filter-chip-set aria-label="Filter by topic">
|
|
118
|
+
<m3e-filter-chip><m3e-icon slot="icon" name="palette"></m3e-icon>Design</m3e-filter-chip>
|
|
119
|
+
<m3e-filter-chip><m3e-icon slot="icon" name="accessibility_new"></m3e-icon>Accessibility</m3e-filter-chip>
|
|
120
|
+
<m3e-filter-chip><m3e-icon slot="icon" name="motion_photos_on"></m3e-icon>Motion</m3e-filter-chip>
|
|
121
|
+
<m3e-filter-chip><m3e-icon slot="icon" name="description"></m3e-icon>Documentation</m3e-filter-chip>
|
|
122
|
+
</m3e-filter-chip-set>
|
|
123
|
+
<br /><br />
|
|
124
|
+
<m3e-filter-chip-set multi>
|
|
125
|
+
<m3e-filter-chip>Apples</m3e-filter-chip>
|
|
126
|
+
<m3e-filter-chip>Oranges</m3e-filter-chip>
|
|
127
|
+
<m3e-filter-chip>Bananas</m3e-filter-chip>
|
|
128
|
+
</m3e-filter-chip-set>
|
|
129
|
+
<br /><br />
|
|
130
|
+
<m3e-filter-chip-set disabled>
|
|
131
|
+
<m3e-filter-chip>Apples</m3e-filter-chip>
|
|
132
|
+
<m3e-filter-chip>Oranges</m3e-filter-chip>
|
|
133
|
+
<m3e-filter-chip>Bananas</m3e-filter-chip>
|
|
134
|
+
</m3e-filter-chip-set>
|
|
135
|
+
<br /><br />
|
|
136
|
+
<m3e-filter-chip-set>
|
|
137
|
+
<m3e-filter-chip disabled>Apples</m3e-filter-chip>
|
|
138
|
+
<m3e-filter-chip>Oranges</m3e-filter-chip>
|
|
139
|
+
<m3e-filter-chip>Bananas</m3e-filter-chip>
|
|
140
|
+
</m3e-filter-chip-set>
|
|
141
|
+
<br /><br />
|
|
142
|
+
<m3e-filter-chip-set>
|
|
143
|
+
<m3e-filter-chip disabled-interactive>Apples</m3e-filter-chip>
|
|
144
|
+
<m3e-filter-chip>Oranges</m3e-filter-chip>
|
|
145
|
+
<m3e-filter-chip>Bananas</m3e-filter-chip>
|
|
146
|
+
</m3e-filter-chip-set>
|
|
147
|
+
<br /><br />
|
|
148
|
+
<m3e-input-chip-set aria-label="Fruits">
|
|
149
|
+
<m3e-input-chip removable>Lemon</m3e-input-chip>
|
|
150
|
+
<m3e-input-chip disabled removable>Orange</m3e-input-chip>
|
|
151
|
+
<m3e-input-chip removable>Grape</m3e-input-chip>
|
|
152
|
+
</m3e-input-chip-set>
|
|
153
|
+
<br /><br />
|
|
154
|
+
<m3e-input-chip-set>
|
|
155
|
+
<m3e-input-chip><m3e-icon slot="avatar" name="face"></m3e-icon>Input chip w/ avatar</m3e-input-chip>
|
|
156
|
+
<m3e-input-chip disabled>
|
|
157
|
+
<m3e-icon slot="avatar" name="face"></m3e-icon>
|
|
158
|
+
Disabled input chip w/ avatar
|
|
159
|
+
</m3e-input-chip>
|
|
160
|
+
<m3e-input-chip disabled-interactive>
|
|
161
|
+
<m3e-icon slot="avatar" name="face"></m3e-icon>
|
|
162
|
+
Disabled interactive input chip w/ avatar
|
|
163
|
+
</m3e-input-chip>
|
|
164
|
+
</m3e-input-chip-set>
|
|
165
|
+
|
|
166
|
+
<br /><br />
|
|
167
|
+
<m3e-form-field>
|
|
168
|
+
<label slot="label" for="keywords">Keywords</label>
|
|
169
|
+
<m3e-input-chip-set aria-label="Enter keywords">
|
|
170
|
+
<input id="keywords" slot="input" placeholder="New keyword..." />
|
|
171
|
+
</m3e-input-chip-set>
|
|
172
|
+
</m3e-form-field>
|
|
173
|
+
<br /><br />
|
|
174
|
+
<m3e-form-field>
|
|
175
|
+
<label slot="label" for="keywords2">Keywords</label>
|
|
176
|
+
<m3e-input-chip-set disabled>
|
|
177
|
+
<m3e-input-chip>Chip</m3e-input-chip>
|
|
178
|
+
<input id="keywords2" slot="input" placeholder="New keyword..." />
|
|
179
|
+
</m3e-input-chip-set>
|
|
180
|
+
</m3e-form-field>
|
|
181
|
+
</m3e-theme>
|
|
182
|
+
</body>
|
|
183
|
+
</html>
|