@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/LICENSE
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 matraic
|
|
4
|
+
Contact: matraic@yahoo.com
|
|
5
|
+
|
|
6
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
7
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
8
|
+
in the Software without restriction, including without limitation the rights
|
|
9
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
10
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
11
|
+
furnished to do so, subject to the following conditions:
|
|
12
|
+
|
|
13
|
+
The above copyright notice and this permission notice shall be included in all
|
|
14
|
+
copies or substantial portions of the Software.
|
|
15
|
+
|
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
17
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
18
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
19
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
20
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
21
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,539 @@
|
|
|
1
|
+
# @m3e/chips
|
|
2
|
+
|
|
3
|
+
The `@m3e/chips` package provides expressive, accessible chip components for actions, input, filtering, and suggestions, each supporting two appearance variantsβ`outlined` and `elevated`. Use `outlined` for lightweight, unobtrusive chips such as tags or filters, and `elevated` for chips that require stronger visual affordance, like assist actions or selected states. These variants help convey interaction weight, visual hierarchy, and contextual emphasis across static and interactive use cases.
|
|
4
|
+
|
|
5
|
+
> **Part of the [M3E](../../README.md) monorepo**
|
|
6
|
+
> This package is maintained within the unified M3E repository, which provides a suite of Material 3 web components.
|
|
7
|
+
|
|
8
|
+
## π¦ Installation
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install @m3e/chips
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## π» Editor Integration
|
|
15
|
+
|
|
16
|
+
This package includes a [Custom Elements Manifest](https://github.com/webcomponents/custom-elements-manifest) to support enhanced editor tooling and developer experience.
|
|
17
|
+
|
|
18
|
+
### Visual Studio Code
|
|
19
|
+
|
|
20
|
+
To enable autocomplete and hover documentation for `@m3e/chips`, install the [Custom Elements Manifest Language Server](https://marketplace.visualstudio.com/items?itemName=pwrs.cem-language-server-vscode) extension. It will automatically detect the manifest bundled with this package and surface tag names, attributes, slots, and events in supported files.
|
|
21
|
+
|
|
22
|
+
Alternately, you can explicitly reference the `html-custom-data.json` and `css-custom-data.json` in your workspace settings:
|
|
23
|
+
|
|
24
|
+
```json
|
|
25
|
+
{
|
|
26
|
+
"html.customData": ["./node_modules/@m3e/chips/dist/html-custom-data.json"],
|
|
27
|
+
"css.customData": ["./node_modules/@m3e/chips/dist/css-custom-data.json"]
|
|
28
|
+
}
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## π Browser Usage
|
|
32
|
+
|
|
33
|
+
This package uses [JavaScript Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#module_specifiers). To use it directly in a browser without a bundler, use a module script similar to the following.
|
|
34
|
+
|
|
35
|
+
```html
|
|
36
|
+
<script type="module" src="/node_modules/@m3e/chips/dist/index.js"></script>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
You also need a module script for `@m3e/icon-button` and `m3e/form-field` due to being a dependency.
|
|
40
|
+
|
|
41
|
+
```html
|
|
42
|
+
<script type="module" src="/node_modules/@m3e/icon-button/dist/index.js"></script>
|
|
43
|
+
<script type="module" src="/node_modules/@m3e/form-field/dist/index.js"></script>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
In addition, you must use an [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/importmap) to include additional dependencies.
|
|
47
|
+
|
|
48
|
+
```html
|
|
49
|
+
<script type="importmap">
|
|
50
|
+
{
|
|
51
|
+
"imports": {
|
|
52
|
+
"lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
|
|
53
|
+
"@m3e/core": "/node_modules/@m3e/core/dist/index.js",
|
|
54
|
+
"@m3e/core/a11y": "/node_modules/@m3e/core/dist/a11y.js"
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
</script>
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
> For production, use index.min.js and a11y.min.js for faster load times.
|
|
61
|
+
|
|
62
|
+
## ποΈ Elements
|
|
63
|
+
|
|
64
|
+
- `m3e-chip` β A non-interactive chip used to convey small pieces of information.
|
|
65
|
+
- `m3e-chip-set` β A container used to organize chips into a cohesive unit.
|
|
66
|
+
- `m3e-assist-chip` β A chip users interact with to perform a smart or automated action that can span multiple applications.
|
|
67
|
+
- `m3e-input-chip` β A chip which represents a discrete piece of information entered by a user.
|
|
68
|
+
- `m3e-input-chip-set` β A container that transforms user input into a cohesive set of interactive chips, supporting entry, editing, and removal of discrete values.
|
|
69
|
+
- `m3e-filter-chip` β A chip users interact with to select/deselect options.
|
|
70
|
+
- `m3e-filter-chip-set` β A container that organizes filter chips into a cohesive group, enabling selection and deselection of values used to refine content or trigger contextual behavior.
|
|
71
|
+
- `m3e-suggestion-chip` β A chip used to help narrow a user's intent by presenting dynamically generated suggestions, such as suggested responses or search filters.
|
|
72
|
+
|
|
73
|
+
## π§ͺ Examples
|
|
74
|
+
|
|
75
|
+
### ποΈ Chip
|
|
76
|
+
|
|
77
|
+
The following example illustrates use of the `m3e-chip` and `m3e-chip-set` components to present non-interactive chips.
|
|
78
|
+
|
|
79
|
+
```html
|
|
80
|
+
<m3e-chip-set>
|
|
81
|
+
<m3e-chip><m3e-icon slot="icon" name="palette"></m3e-icon>Design</m3e-chip>
|
|
82
|
+
<m3e-chip><m3e-icon slot="icon" name="accessibility_new"></m3e-icon>Accessibility</m3e-chip>
|
|
83
|
+
<m3e-chip><m3e-icon slot="icon" name="motion_photos_on"></m3e-icon>Motion</m3e-chip>
|
|
84
|
+
<m3e-chip><m3e-icon slot="icon" name="description"></m3e-icon>Documentation</m3e-chip>
|
|
85
|
+
</m3e-chip-set>
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### ποΈ Assist Chip
|
|
89
|
+
|
|
90
|
+
The following example illustrates use of the `m3e-assist-chip`. In this example, multiple chips are nested inside a `m3e-chip-set` container to create a cohesive set of chips. The container is given the ARIA `role="group"` to convey to assistive technologies that the chips are part of a related set of element.
|
|
91
|
+
|
|
92
|
+
```html
|
|
93
|
+
<m3e-chip-set role="group" aria-label="Quick actions">
|
|
94
|
+
<m3e-assist-chip><m3e-icon slot="icon" name="edit"></m3e-icon>Edit</m3e-assist-chip>
|
|
95
|
+
<m3e-assist-chip><m3e-icon slot="icon" name="delete"></m3e-icon>Delete</m3e-assist-chip>
|
|
96
|
+
<m3e-assist-chip><m3e-icon slot="icon" name="content_copy"></m3e-icon>Copy</m3e-assist-chip>
|
|
97
|
+
<m3e-assist-chip><m3e-icon slot="icon" name="share"></m3e-icon>Share</m3e-assist-chip>
|
|
98
|
+
</m3e-chip-set>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
### ποΈ Input Chip
|
|
102
|
+
|
|
103
|
+
The following example illustrates the use of the `m3e-input-chip-set` inside a `m3e-form-field`. In this example, the `input` slot specifies the `input` element used to add input chips and the field label's `for` attribute targets the `input` element to provide an accessible label.
|
|
104
|
+
|
|
105
|
+
```html
|
|
106
|
+
<m3e-form-field>
|
|
107
|
+
<label slot="label" for="keywords">Keywords</label>
|
|
108
|
+
<m3e-input-chip-set aria-label="Enter keywords">
|
|
109
|
+
<input id="keywords" slot="input" placeholder="New keyword..." />
|
|
110
|
+
</m3e-input-chip-set>
|
|
111
|
+
</m3e-form-field>
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
### ποΈ Filter Chip
|
|
115
|
+
|
|
116
|
+
- The following example illustrates a single-select `m3e-filter-chip-set` containing multiple `m3e-filter-chip` components that allow a user to choose an option. You can use the `multi` attribute to enable multiselect.
|
|
117
|
+
|
|
118
|
+
```html
|
|
119
|
+
<m3e-filter-chip-set aria-label="Filter by topic">
|
|
120
|
+
<m3e-filter-chip><m3e-icon slot="icon" name="palette"></m3e-icon>Design</m3e-filter-chip>
|
|
121
|
+
<m3e-filter-chip><m3e-icon slot="icon" name="accessibility_new"></m3e-icon>Accessibility</m3e-filter-chip>
|
|
122
|
+
<m3e-filter-chip><m3e-icon slot="icon" name="motion_photos_on"></m3e-icon>Motion</m3e-filter-chip>
|
|
123
|
+
<m3e-filter-chip><m3e-icon slot="icon" name="description"></m3e-icon>Documentation</m3e-filter-chip>
|
|
124
|
+
</m3e-filter-chip-set>
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
### ποΈ Suggestion Chip
|
|
128
|
+
|
|
129
|
+
The following example illustrates use of the `m3e-suggestion-chip`. In this example, multiple chips are nested inside a `m3e-chip-set` container to create a cohesive set of chips. The container is given the ARIA `role="group"` to convey to assistive technologies that the chips are part of a related set of element.
|
|
130
|
+
|
|
131
|
+
```html
|
|
132
|
+
<m3e-chip-set role="group" aria-label="Suggested replies">
|
|
133
|
+
<m3e-suggestion-chip>Sounds good!</m3e-suggestion-chip>
|
|
134
|
+
<m3e-suggestion-chip>Can you clarify?</m3e-suggestion-chip>
|
|
135
|
+
<m3e-suggestion-chip>Let's do it.</m3e-suggestion-chip>
|
|
136
|
+
<m3e-suggestion-chip>Maybe later.</m3e-suggestion-chip>
|
|
137
|
+
</m3e-chip-set>
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
## π API Reference
|
|
141
|
+
|
|
142
|
+
### ποΈ Chip
|
|
143
|
+
|
|
144
|
+
This section details the attributes, slots, and CSS custom properties available for the `m3e-chip` component.
|
|
145
|
+
|
|
146
|
+
#### βοΈ Attributes
|
|
147
|
+
|
|
148
|
+
| Attribute | Type | Default | Description |
|
|
149
|
+
| --------- | ---------------------------- | ------------ | ----------------------- |
|
|
150
|
+
| `value` | `string` | | The value of the chip. |
|
|
151
|
+
| `variant` | `"outlined"` \| `"elevated"` | `"outlined"` | The appearance variant. |
|
|
152
|
+
|
|
153
|
+
#### 𧩠Slots
|
|
154
|
+
|
|
155
|
+
| Slot | Description |
|
|
156
|
+
| --------------- | ---------------------------------------- |
|
|
157
|
+
| _(default)_ | Renders the label of the chip. |
|
|
158
|
+
| `icon` | Renders an icon before the chip's label. |
|
|
159
|
+
| `trailing-icon` | Renders an icon after the chip's label. |
|
|
160
|
+
|
|
161
|
+
#### ποΈ CSS Custom Properties
|
|
162
|
+
|
|
163
|
+
| Property | Description |
|
|
164
|
+
| --------------------------------------- | ----------------------------------------------------------- |
|
|
165
|
+
| `--m3e-chip-container-shape` | Border radius of the chip container |
|
|
166
|
+
| `--m3e-chip-container-height` | Base height of the chip container before density adjustment |
|
|
167
|
+
| `--m3e-chip-label-text-font-size` | Font size of the chip label text |
|
|
168
|
+
| `--m3e-chip-label-text-font-weight` | Font weight of the chip label text |
|
|
169
|
+
| `--m3e-chip-label-text-line-height` | Line height of the chip label text |
|
|
170
|
+
| `--m3e-chip-label-text-tracking` | Letter spacing of the chip label text |
|
|
171
|
+
| `--m3e-chip-label-text-color` | Label text color in default state |
|
|
172
|
+
| `--m3e-chip-icon-color` | Icon color in default state |
|
|
173
|
+
| `--m3e-chip-icon-size` | Font size of leading/trailing icons |
|
|
174
|
+
| `--m3e-chip-spacing` | Horizontal gap between chip content elements |
|
|
175
|
+
| `--m3e-chip-padding-start` | Default start padding when no icon is present |
|
|
176
|
+
| `--m3e-chip-padding-end` | Default end padding when no trailing icon is present |
|
|
177
|
+
| `--m3e-chip-with-icon-padding-start` | Start padding when leading icon is present |
|
|
178
|
+
| `--m3e-chip-with-icon-padding-end` | End padding when trailing icon is present |
|
|
179
|
+
| `--m3e-elevated-chip-container-color` | Background color for elevated variant |
|
|
180
|
+
| `--m3e-elevated-chip-elevation` | Elevation level for elevated variant |
|
|
181
|
+
| `--m3e-elevated-chip-hover-elevation` | Elevation level on hover |
|
|
182
|
+
| `--m3e-outlined-chip-outline-thickness` | Outline thickness for outlined variant |
|
|
183
|
+
| `--m3e-outlined-chip-outline-color` | Outline color for outlined variant |
|
|
184
|
+
|
|
185
|
+
### ποΈ Chip Set
|
|
186
|
+
|
|
187
|
+
This section details the attributes, slots, and CSS custom properties available for the `m3e-chip-set` component.
|
|
188
|
+
|
|
189
|
+
#### βοΈ Attributes
|
|
190
|
+
|
|
191
|
+
| Attribute | Type | Default | Description |
|
|
192
|
+
| ---------- | --------- | ------- | ------------------------------------- |
|
|
193
|
+
| `vertical` | `boolean` | `false` | Whether chips are stacked vertically. |
|
|
194
|
+
|
|
195
|
+
#### 𧩠Slots
|
|
196
|
+
|
|
197
|
+
| Slot | Description |
|
|
198
|
+
| ----------- | ----------------------------- |
|
|
199
|
+
| _(default)_ | Renders the chips of the set. |
|
|
200
|
+
|
|
201
|
+
#### ποΈ CSS Custom Properties
|
|
202
|
+
|
|
203
|
+
| Property | Description |
|
|
204
|
+
| ------------------------ | -------------------------------- |
|
|
205
|
+
| `--m3e-chip-set-spacing` | The spacing (gap) between chips. |
|
|
206
|
+
|
|
207
|
+
### ποΈ Assist Chip
|
|
208
|
+
|
|
209
|
+
This section details the attributes, slots, and CSS custom properties available for the `m3e-assist-chip` component.
|
|
210
|
+
|
|
211
|
+
#### βοΈ Attributes
|
|
212
|
+
|
|
213
|
+
| Attribute | Type | Default | Description |
|
|
214
|
+
| ---------------------- | ---------------------------- | ------------ | --------------------------------------------- |
|
|
215
|
+
| `disabled` | `boolean` | `false` | Whether the chip is disabled. |
|
|
216
|
+
| `disabled-interactive` | `boolean` | `false` | Whether the chip is disabled and interactive. |
|
|
217
|
+
| `download` | `string` | | Download attribute for link button. |
|
|
218
|
+
| `href` | `string` | | URL for the link button. |
|
|
219
|
+
| `name` | `string` | | Name for form submission. |
|
|
220
|
+
| `rel` | `string` | | Relationship for the link button. |
|
|
221
|
+
| `target` | `string` | | Target for the link button. |
|
|
222
|
+
| `type` | `string` | | Type of the element. |
|
|
223
|
+
| `value` | `string` | | The value of the chip. |
|
|
224
|
+
| `variant` | `"outlined"` \| `"elevated"` | `"outlined"` | The appearance variant. |
|
|
225
|
+
|
|
226
|
+
#### 𧩠Slots
|
|
227
|
+
|
|
228
|
+
| Slot | Description |
|
|
229
|
+
| ----------- | ---------------------------------------- |
|
|
230
|
+
| _(default)_ | Renders the label of the chip. |
|
|
231
|
+
| `icon` | Renders an icon before the chip's label. |
|
|
232
|
+
|
|
233
|
+
#### ποΈ CSS Custom Properties
|
|
234
|
+
|
|
235
|
+
| Property | Description |
|
|
236
|
+
| ------------------------------------------------ | ----------------------------------------------------------- |
|
|
237
|
+
| `--m3e-chip-container-shape` | Border radius of the chip container |
|
|
238
|
+
| `--m3e-chip-container-height` | Base height of the chip container before density adjustment |
|
|
239
|
+
| `--m3e-chip-label-text-font-size` | Font size of the chip label text |
|
|
240
|
+
| `--m3e-chip-label-text-font-weight` | Font weight of the chip label text |
|
|
241
|
+
| `--m3e-chip-label-text-line-height` | Line height of the chip label text |
|
|
242
|
+
| `--m3e-chip-label-text-tracking` | Letter spacing of the chip label text |
|
|
243
|
+
| `--m3e-chip-label-text-color` | Label text color in default state |
|
|
244
|
+
| `--m3e-chip-icon-color` | Icon color in default state |
|
|
245
|
+
| `--m3e-chip-icon-size` | Font size of leading/trailing icons |
|
|
246
|
+
| `--m3e-chip-spacing` | Horizontal gap between chip content elements |
|
|
247
|
+
| `--m3e-chip-padding-start` | Default start padding when no icon is present |
|
|
248
|
+
| `--m3e-chip-padding-end` | Default end padding when no trailing icon is present |
|
|
249
|
+
| `--m3e-chip-with-icon-padding-start` | Start padding when leading icon is present |
|
|
250
|
+
| `--m3e-chip-with-icon-padding-end` | End padding when trailing icon is present |
|
|
251
|
+
| `--m3e-chip-disabled-label-text-color` | Base color for disabled label text |
|
|
252
|
+
| `--m3e-chip-disabled-label-text-opacity` | Opacity applied to disabled label text |
|
|
253
|
+
| `--m3e-chip-disabled-icon-color` | Base color for disabled icons |
|
|
254
|
+
| `--m3e-chip-disabled-icon-opacity` | Opacity applied to disabled icons |
|
|
255
|
+
| `--m3e-elevated-chip-container-color` | Background color for elevated variant |
|
|
256
|
+
| `--m3e-elevated-chip-elevation` | Elevation level for elevated variant |
|
|
257
|
+
| `--m3e-elevated-chip-hover-elevation` | Elevation level on hover |
|
|
258
|
+
| `--m3e-elevated-chip-disabled-container-color` | Background color for disabled elevated variant |
|
|
259
|
+
| `--m3e-elevated-chip-disabled-container-opacity` | Opacity applied to disabled elevated background |
|
|
260
|
+
| `--m3e-elevated-chip-disabled-elevation` | Elevation level for disabled elevated variant |
|
|
261
|
+
| `--m3e-outlined-chip-outline-thickness` | Outline thickness for outlined variant |
|
|
262
|
+
| `--m3e-outlined-chip-outline-color` | Outline color for outlined variant |
|
|
263
|
+
| `--m3e-outlined-chip-disabled-outline-color` | Outline color for disabled outlined variant |
|
|
264
|
+
| `--m3e-outlined-chip-disabled-outline-opacity` | Opacity applied to disabled outline |
|
|
265
|
+
|
|
266
|
+
### ποΈ Input Chip
|
|
267
|
+
|
|
268
|
+
This section details the attributes, events, slots, and CSS custom properties available for the `m3e-input-chip` component.
|
|
269
|
+
|
|
270
|
+
#### βοΈ Attributes
|
|
271
|
+
|
|
272
|
+
| Attribute | Type | Default | Description |
|
|
273
|
+
| ---------------------- | ---------------------------- | ------------ | --------------------------------------------- |
|
|
274
|
+
| `disabled` | `boolean` | `false` | Whether the chip is disabled. |
|
|
275
|
+
| `disabled-interactive` | `boolean` | `false` | Whether the chip is disabled and interactive. |
|
|
276
|
+
| `removable` | `boolean` | `false` | Whether the chip is removable. |
|
|
277
|
+
| `remove-label` | `string` | `"Remove"` | Accessible label for the remove button. |
|
|
278
|
+
| `value` | `string` | | The value of the chip. |
|
|
279
|
+
| `variant` | `"outlined"` \| `"elevated"` | `"outlined"` | The appearance variant. |
|
|
280
|
+
|
|
281
|
+
#### 𧩠Slots
|
|
282
|
+
|
|
283
|
+
| Slot | Description |
|
|
284
|
+
| ------------- | ------------------------------------------ |
|
|
285
|
+
| _(default)_ | Renders the label of the chip. |
|
|
286
|
+
| `avatar` | Renders an avatar before the chip's label. |
|
|
287
|
+
| `icon` | Renders an icon before the chip's label. |
|
|
288
|
+
| `remove-icon` | Renders the icon for the remove button. |
|
|
289
|
+
|
|
290
|
+
#### π Events
|
|
291
|
+
|
|
292
|
+
| Event | Description |
|
|
293
|
+
| -------- | ---------------------------------------------------------------------------- |
|
|
294
|
+
| `remove` | Emitted when the remove button is clicked or DELETE or BACKSPACE is pressed. |
|
|
295
|
+
|
|
296
|
+
#### ποΈ CSS Custom Properties
|
|
297
|
+
|
|
298
|
+
| Property | Description |
|
|
299
|
+
| ------------------------------------------------ | ----------------------------------------------------------- |
|
|
300
|
+
| `--m3e-chip-container-shape` | Border radius of the chip container |
|
|
301
|
+
| `--m3e-chip-container-height` | Base height of the chip container before density adjustment |
|
|
302
|
+
| `--m3e-chip-label-text-font-size` | Font size of the chip label text |
|
|
303
|
+
| `--m3e-chip-label-text-font-weight` | Font weight of the chip label text |
|
|
304
|
+
| `--m3e-chip-label-text-line-height` | Line height of the chip label text |
|
|
305
|
+
| `--m3e-chip-label-text-tracking` | Letter spacing of the chip label text |
|
|
306
|
+
| `--m3e-chip-label-text-color` | Label text color in default state |
|
|
307
|
+
| `--m3e-chip-icon-color` | Icon color in default state |
|
|
308
|
+
| `--m3e-chip-icon-size` | Font size of leading/trailing icons |
|
|
309
|
+
| `--m3e-chip-spacing` | Horizontal gap between chip content elements |
|
|
310
|
+
| `--m3e-chip-padding-start` | Default start padding when no icon is present |
|
|
311
|
+
| `--m3e-chip-padding-end` | Default end padding when no trailing icon is present |
|
|
312
|
+
| `--m3e-chip-with-icon-padding-start` | Start padding when leading icon is present |
|
|
313
|
+
| `--m3e-chip-with-icon-padding-end` | End padding when trailing icon is present |
|
|
314
|
+
| `--m3e-chip-disabled-label-text-color` | Base color for disabled label text |
|
|
315
|
+
| `--m3e-chip-disabled-label-text-opacity` | Opacity applied to disabled label text |
|
|
316
|
+
| `--m3e-chip-disabled-icon-color` | Base color for disabled icons |
|
|
317
|
+
| `--m3e-chip-disabled-icon-opacity` | Opacity applied to disabled icons |
|
|
318
|
+
| `--m3e-elevated-chip-container-color` | Background color for elevated variant |
|
|
319
|
+
| `--m3e-elevated-chip-elevation` | Elevation level for elevated variant |
|
|
320
|
+
| `--m3e-elevated-chip-hover-elevation` | Elevation level on hover |
|
|
321
|
+
| `--m3e-elevated-chip-disabled-container-color` | Background color for disabled elevated variant |
|
|
322
|
+
| `--m3e-elevated-chip-disabled-container-opacity` | Opacity applied to disabled elevated background |
|
|
323
|
+
| `--m3e-elevated-chip-disabled-elevation` | Elevation level for disabled elevated variant |
|
|
324
|
+
| `--m3e-outlined-chip-outline-thickness` | Outline thickness for outlined variant |
|
|
325
|
+
| `--m3e-outlined-chip-outline-color` | Outline color for outlined variant |
|
|
326
|
+
| `--m3e-outlined-chip-disabled-outline-color` | Outline color for disabled outlined variant |
|
|
327
|
+
| `--m3e-outlined-chip-disabled-outline-opacity` | Opacity applied to disabled outline |
|
|
328
|
+
| `--m3e-chip-avatar-size` | Font size of the avatar slot content |
|
|
329
|
+
| `--m3e-chip-disabled-avatar-opacity` | Opacity applied to the avatar when disabled |
|
|
330
|
+
| `--m3e-chip-with-avatar-padding-start` | Start padding when an avatar is present |
|
|
331
|
+
|
|
332
|
+
### ποΈ Input Chip Set
|
|
333
|
+
|
|
334
|
+
This section details the attributes, events, slots, and CSS custom properties available for the `m3e-input-chip-set` component.
|
|
335
|
+
|
|
336
|
+
#### βοΈ Attributes
|
|
337
|
+
|
|
338
|
+
| Attribute | Type | Default | Description |
|
|
339
|
+
| ---------- | --------- | ------- | ------------------------------------------------------------------------- |
|
|
340
|
+
| `disabled` | `boolean` | `false` | Whether the element is disabled. |
|
|
341
|
+
| `name` | `string` | | The name that identifies the element when submitting the associated form. |
|
|
342
|
+
| `required` | `boolean` | `false` | Whether a value is required for the element. |
|
|
343
|
+
| `vertical` | `boolean` | `false` | Whether chips are stacked vertically. |
|
|
344
|
+
|
|
345
|
+
#### π Events
|
|
346
|
+
|
|
347
|
+
| Event | Description |
|
|
348
|
+
| -------- | ---------------------------------------------------------- |
|
|
349
|
+
| `change` | Emitted when a chip is added to, or removed from, the set. |
|
|
350
|
+
|
|
351
|
+
#### 𧩠Slots
|
|
352
|
+
|
|
353
|
+
| Slot | Description |
|
|
354
|
+
| ----------- | ----------------------------------------------------------- |
|
|
355
|
+
| _(default)_ | Renders the chips of the set. |
|
|
356
|
+
| `input` | Renders the input element used to add new chips to the set. |
|
|
357
|
+
|
|
358
|
+
#### ποΈ CSS Custom Properties
|
|
359
|
+
|
|
360
|
+
| Property | Description |
|
|
361
|
+
| ------------------------ | -------------------------------- |
|
|
362
|
+
| `--m3e-chip-set-spacing` | The spacing (gap) between chips. |
|
|
363
|
+
|
|
364
|
+
### ποΈ Filter Chip
|
|
365
|
+
|
|
366
|
+
This section details the attributes, events, slots, and CSS custom properties available for the `m3e-filter-chip` component.
|
|
367
|
+
|
|
368
|
+
#### βοΈ Attributes
|
|
369
|
+
|
|
370
|
+
| Attribute | Type | Default | Description |
|
|
371
|
+
| ---------------------- | ---------------------------- | ------------ | --------------------------------------------- |
|
|
372
|
+
| `disabled` | `boolean` | `false` | Whether the chip is disabled. |
|
|
373
|
+
| `disabled-interactive` | `boolean` | `false` | Whether the chip is disabled and interactive. |
|
|
374
|
+
| `selected` | `boolean` | `false` | Whether the chip is selected. |
|
|
375
|
+
| `value` | `string` | | The value of the chip. |
|
|
376
|
+
| `variant` | `"outlined"` \| `"elevated"` | `"outlined"` | The appearance variant. |
|
|
377
|
+
|
|
378
|
+
#### 𧩠Slots
|
|
379
|
+
|
|
380
|
+
| Slot | Description |
|
|
381
|
+
| --------------- | ---------------------------------------- |
|
|
382
|
+
| _(default)_ | Renders the label of the chip. |
|
|
383
|
+
| `icon` | Renders an icon before the chip's label. |
|
|
384
|
+
| `trailing-icon` | Renders an icon after the chip's label. |
|
|
385
|
+
|
|
386
|
+
#### π Events
|
|
387
|
+
|
|
388
|
+
| Event | Description |
|
|
389
|
+
| -------- | ---------------------------------------- |
|
|
390
|
+
| `input` | Emitted when the selected state changes. |
|
|
391
|
+
| `change` | Emitted when the selected state changes. |
|
|
392
|
+
|
|
393
|
+
#### ποΈ CSS Custom Properties
|
|
394
|
+
|
|
395
|
+
| Property | Description |
|
|
396
|
+
| ------------------------------------------------ | ----------------------------------------------------------- |
|
|
397
|
+
| `--m3e-chip-container-shape` | Border radius of the chip container |
|
|
398
|
+
| `--m3e-chip-container-height` | Base height of the chip container before density adjustment |
|
|
399
|
+
| `--m3e-chip-label-text-font-size` | Font size of the chip label text |
|
|
400
|
+
| `--m3e-chip-label-text-font-weight` | Font weight of the chip label text |
|
|
401
|
+
| `--m3e-chip-label-text-line-height` | Line height of the chip label text |
|
|
402
|
+
| `--m3e-chip-label-text-tracking` | Letter spacing of the chip label text |
|
|
403
|
+
| `--m3e-chip-icon-size` | Font size of leading/trailing icons |
|
|
404
|
+
| `--m3e-chip-spacing` | Horizontal gap between chip content elements |
|
|
405
|
+
| `--m3e-chip-padding-start` | Default start padding when no icon is present |
|
|
406
|
+
| `--m3e-chip-padding-end` | Default end padding when no trailing icon is present |
|
|
407
|
+
| `--m3e-chip-with-icon-padding-start` | Start padding when leading icon is present |
|
|
408
|
+
| `--m3e-chip-with-icon-padding-end` | End padding when trailing icon is present |
|
|
409
|
+
| `--m3e-chip-disabled-label-text-color` | Base color for disabled label text |
|
|
410
|
+
| `--m3e-chip-disabled-label-text-opacity` | Opacity applied to disabled label text |
|
|
411
|
+
| `--m3e-chip-disabled-icon-color` | Base color for disabled icons |
|
|
412
|
+
| `--m3e-chip-disabled-icon-opacity` | Opacity applied to disabled icons |
|
|
413
|
+
| `--m3e-elevated-chip-container-color` | Background color for elevated variant |
|
|
414
|
+
| `--m3e-elevated-chip-elevation` | Elevation level for elevated variant |
|
|
415
|
+
| `--m3e-elevated-chip-hover-elevation` | Elevation level on hover |
|
|
416
|
+
| `--m3e-elevated-chip-disabled-container-color` | Background color for disabled elevated variant |
|
|
417
|
+
| `--m3e-elevated-chip-disabled-container-opacity` | Opacity applied to disabled elevated background |
|
|
418
|
+
| `--m3e-elevated-chip-disabled-elevation` | Elevation level for disabled elevated variant |
|
|
419
|
+
| `--m3e-outlined-chip-outline-thickness` | Outline thickness for outlined variant |
|
|
420
|
+
| `--m3e-outlined-chip-outline-color` | Outline color for outlined variant |
|
|
421
|
+
| `--m3e-outlined-chip-disabled-outline-color` | Outline color for disabled outlined variant |
|
|
422
|
+
| `--m3e-outlined-chip-disabled-outline-opacity` | Opacity applied to disabled outline |
|
|
423
|
+
| `--m3e-chip-selected-outline-thickness` | Outline thickness for selected state |
|
|
424
|
+
| `--m3e-chip-selected-label-text-color` | Text color in selected state |
|
|
425
|
+
| `--m3e-chip-selected-container-color` | Background color in selected state |
|
|
426
|
+
| `--m3e-chip-selected-container-hover-color` | Hover state layer color in selected state |
|
|
427
|
+
| `--m3e-chip-selected-container-focus-color` | Focus state layer color in selected state |
|
|
428
|
+
| `--m3e-chip-selected-hover-elevation` | Elevation on hover in selected state |
|
|
429
|
+
| `--m3e-chip-selected-ripple-color` | Ripple color in selected state |
|
|
430
|
+
| `--m3e-chip-selected-state-layer-focus-color` | Focus state layer color in selected state |
|
|
431
|
+
| `--m3e-chip-selected-state-layer-hover-color` | Hover state layer color in selected state |
|
|
432
|
+
| `--m3e-chip-selected-leading-icon-color` | Leading icon color in selected state |
|
|
433
|
+
| `--m3e-chip-selected-trailing-icon-color` | Trailing icon color in selected state |
|
|
434
|
+
| `--m3e-chip-unselected-label-text-color` | Text color in unselected state |
|
|
435
|
+
| `--m3e-chip-unselected-ripple-color` | Ripple color in unselected state |
|
|
436
|
+
| `--m3e-chip-unselected-state-layer-focus-color` | Focus state layer color in unselected state |
|
|
437
|
+
| `--m3e-chip-unselected-state-layer-hover-color` | Hover state layer color in unselected state |
|
|
438
|
+
| `--m3e-chip-unselected-leading-icon-color` | Leading icon color in unselected state |
|
|
439
|
+
| `--m3e-chip-unselected-trailing-icon-color` | Trailing icon color in unselected state |
|
|
440
|
+
|
|
441
|
+
### ποΈ Filter Chip Set
|
|
442
|
+
|
|
443
|
+
This section details the attributes, events, slots, and CSS custom properties available for the `m3e-filter-chip-set` component.
|
|
444
|
+
|
|
445
|
+
#### βοΈ Attributes
|
|
446
|
+
|
|
447
|
+
| Attribute | Type | Default | Description |
|
|
448
|
+
| -------------------------- | --------- | ------- | ------------------------------------------------------------------------- |
|
|
449
|
+
| `disabled` | `boolean` | `false` | Whether the element is disabled. |
|
|
450
|
+
| `hide-selection-indicator` | `boolean` | `false` | Whether to hide the selection indicator. |
|
|
451
|
+
| `multi` | `boolean` | `false` | Whether multiple chips can be selected. |
|
|
452
|
+
| `name` | `string` | | The name that identifies the element when submitting the associated form. |
|
|
453
|
+
| `vertical` | `boolean` | `false` | Whether chips are stacked vertically. |
|
|
454
|
+
|
|
455
|
+
#### π Events
|
|
456
|
+
|
|
457
|
+
| Event | Description |
|
|
458
|
+
| -------- | -------------------------------------------------- |
|
|
459
|
+
| `input` | Emitted when the selected state of a chip changes. |
|
|
460
|
+
| `change` | Emitted when the selected state of a chip changes. |
|
|
461
|
+
|
|
462
|
+
#### 𧩠Slots
|
|
463
|
+
|
|
464
|
+
| Slot | Description |
|
|
465
|
+
| ----------- | ----------------------------- |
|
|
466
|
+
| _(default)_ | Renders the chips of the set. |
|
|
467
|
+
|
|
468
|
+
#### ποΈ CSS Custom Properties
|
|
469
|
+
|
|
470
|
+
| Property | Description |
|
|
471
|
+
| ------------------------ | -------------------------------- |
|
|
472
|
+
| `--m3e-chip-set-spacing` | The spacing (gap) between chips. |
|
|
473
|
+
|
|
474
|
+
### ποΈ Suggestion Chip
|
|
475
|
+
|
|
476
|
+
This section details the attributes, slots, and CSS custom properties available for the `m3e-suggestion-chip` component.
|
|
477
|
+
|
|
478
|
+
#### βοΈ Attributes
|
|
479
|
+
|
|
480
|
+
| Attribute | Type | Default | Description |
|
|
481
|
+
| ---------------------- | ---------------------------- | ------------ | --------------------------------------------- |
|
|
482
|
+
| `disabled` | `boolean` | `false` | Whether the chip is disabled. |
|
|
483
|
+
| `disabled-interactive` | `boolean` | `false` | Whether the chip is disabled and interactive. |
|
|
484
|
+
| `download` | `string` | | Download attribute for link button. |
|
|
485
|
+
| `href` | `string` | | URL for the link button. |
|
|
486
|
+
| `name` | `string` | | Name for form submission. |
|
|
487
|
+
| `rel` | `string` | | Relationship for the link button. |
|
|
488
|
+
| `target` | `string` | | Target for the link button. |
|
|
489
|
+
| `type` | `string` | | Type of the element. |
|
|
490
|
+
| `value` | `string` | | The value of the chip. |
|
|
491
|
+
| `variant` | `"outlined"` \| `"elevated"` | `"outlined"` | The appearance variant. |
|
|
492
|
+
|
|
493
|
+
#### 𧩠Slots
|
|
494
|
+
|
|
495
|
+
| Slot | Description |
|
|
496
|
+
| ----------- | ---------------------------------------- |
|
|
497
|
+
| _(default)_ | Renders the label of the chip. |
|
|
498
|
+
| `icon` | Renders an icon before the chip's label. |
|
|
499
|
+
|
|
500
|
+
#### ποΈ CSS Custom Properties
|
|
501
|
+
|
|
502
|
+
| Property | Description |
|
|
503
|
+
| ------------------------------------------------ | ----------------------------------------------------------- |
|
|
504
|
+
| `--m3e-chip-container-shape` | Border radius of the chip container |
|
|
505
|
+
| `--m3e-chip-container-height` | Base height of the chip container before density adjustment |
|
|
506
|
+
| `--m3e-chip-label-text-font-size` | Font size of the chip label text |
|
|
507
|
+
| `--m3e-chip-label-text-font-weight` | Font weight of the chip label text |
|
|
508
|
+
| `--m3e-chip-label-text-line-height` | Line height of the chip label text |
|
|
509
|
+
| `--m3e-chip-label-text-tracking` | Letter spacing of the chip label text |
|
|
510
|
+
| `--m3e-chip-label-text-color` | Label text color in default state |
|
|
511
|
+
| `--m3e-chip-icon-color` | Icon color in default state |
|
|
512
|
+
| `--m3e-chip-icon-size` | Font size of leading/trailing icons |
|
|
513
|
+
| `--m3e-chip-spacing` | Horizontal gap between chip content elements |
|
|
514
|
+
| `--m3e-chip-padding-start` | Default start padding when no icon is present |
|
|
515
|
+
| `--m3e-chip-padding-end` | Default end padding when no trailing icon is present |
|
|
516
|
+
| `--m3e-chip-with-icon-padding-start` | Start padding when leading icon is present |
|
|
517
|
+
| `--m3e-chip-with-icon-padding-end` | End padding when trailing icon is present |
|
|
518
|
+
| `--m3e-chip-disabled-label-text-color` | Base color for disabled label text |
|
|
519
|
+
| `--m3e-chip-disabled-label-text-opacity` | Opacity applied to disabled label text |
|
|
520
|
+
| `--m3e-chip-disabled-icon-color` | Base color for disabled icons |
|
|
521
|
+
| `--m3e-chip-disabled-icon-opacity` | Opacity applied to disabled icons |
|
|
522
|
+
| `--m3e-elevated-chip-container-color` | Background color for elevated variant |
|
|
523
|
+
| `--m3e-elevated-chip-elevation` | Elevation level for elevated variant |
|
|
524
|
+
| `--m3e-elevated-chip-hover-elevation` | Elevation level on hover |
|
|
525
|
+
| `--m3e-elevated-chip-disabled-container-color` | Background color for disabled elevated variant |
|
|
526
|
+
| `--m3e-elevated-chip-disabled-container-opacity` | Opacity applied to disabled elevated background |
|
|
527
|
+
| `--m3e-elevated-chip-disabled-elevation` | Elevation level for disabled elevated variant |
|
|
528
|
+
| `--m3e-outlined-chip-outline-thickness` | Outline thickness for outlined variant |
|
|
529
|
+
| `--m3e-outlined-chip-outline-color` | Outline color for outlined variant |
|
|
530
|
+
| `--m3e-outlined-chip-disabled-outline-color` | Outline color for disabled outlined variant |
|
|
531
|
+
| `--m3e-outlined-chip-disabled-outline-opacity` | Opacity applied to disabled outline |
|
|
532
|
+
|
|
533
|
+
## π€ Contributing
|
|
534
|
+
|
|
535
|
+
See the root monorepo `CONTRIBUTING.md` for guidelines on contributing to this package.
|
|
536
|
+
|
|
537
|
+
## π License
|
|
538
|
+
|
|
539
|
+
This package is licensed under the MIT License.
|
package/cem.config.mjs
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { customElementVsCodePlugin } from "custom-element-vs-code-integration";
|
|
2
|
+
|
|
3
|
+
export default {
|
|
4
|
+
globs: ["src/**/*.ts"],
|
|
5
|
+
exclude: ["src/**/*.spec.ts"],
|
|
6
|
+
packagejson: true,
|
|
7
|
+
outdir: "dist",
|
|
8
|
+
litelement: true,
|
|
9
|
+
plugins: [
|
|
10
|
+
customElementVsCodePlugin({
|
|
11
|
+
outdir: "dist",
|
|
12
|
+
htmlFileName: "html-custom-data.json",
|
|
13
|
+
cssFileName: "css-custom-data.json",
|
|
14
|
+
}),
|
|
15
|
+
],
|
|
16
|
+
};
|