@m3e/chips 1.0.0-rc.1 → 1.0.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/README.md +1 -2
  2. package/dist/custom-elements.json +4780 -481
  3. package/dist/html-custom-data.json +10 -10
  4. package/dist/index.js +10 -12
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.js +60 -60
  7. package/dist/index.min.js.map +1 -1
  8. package/package.json +5 -5
  9. package/cem.config.mjs +0 -16
  10. package/demo/index.html +0 -183
  11. package/dist/src/AssistChipElement.d.ts +0 -82
  12. package/dist/src/AssistChipElement.d.ts.map +0 -1
  13. package/dist/src/ChipElement.d.ts +0 -86
  14. package/dist/src/ChipElement.d.ts.map +0 -1
  15. package/dist/src/ChipSetElement.d.ts +0 -43
  16. package/dist/src/ChipSetElement.d.ts.map +0 -1
  17. package/dist/src/ChipVariant.d.ts +0 -3
  18. package/dist/src/ChipVariant.d.ts.map +0 -1
  19. package/dist/src/FilterChipElement.d.ts +0 -93
  20. package/dist/src/FilterChipElement.d.ts.map +0 -1
  21. package/dist/src/FilterChipSetElement.d.ts +0 -78
  22. package/dist/src/FilterChipSetElement.d.ts.map +0 -1
  23. package/dist/src/InputChipElement.d.ts +0 -104
  24. package/dist/src/InputChipElement.d.ts.map +0 -1
  25. package/dist/src/InputChipSetElement.d.ts +0 -75
  26. package/dist/src/InputChipSetElement.d.ts.map +0 -1
  27. package/dist/src/SuggestionChipElement.d.ts +0 -83
  28. package/dist/src/SuggestionChipElement.d.ts.map +0 -1
  29. package/dist/src/index.d.ts +0 -10
  30. package/dist/src/index.d.ts.map +0 -1
  31. package/eslint.config.mjs +0 -13
  32. package/rollup.config.js +0 -32
  33. package/src/AssistChipElement.ts +0 -103
  34. package/src/ChipElement.ts +0 -336
  35. package/src/ChipSetElement.ts +0 -60
  36. package/src/ChipVariant.ts +0 -2
  37. package/src/FilterChipElement.ts +0 -254
  38. package/src/FilterChipSetElement.ts +0 -161
  39. package/src/InputChipElement.ts +0 -287
  40. package/src/InputChipSetElement.ts +0 -360
  41. package/src/SuggestionChipElement.ts +0 -104
  42. package/src/index.ts +0 -9
  43. package/tsconfig.json +0 -9
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@m3e/chips",
3
- "version": "1.0.0-rc.1",
3
+ "version": "1.0.0-rc.2",
4
4
  "description": "Chips for M3E",
5
5
  "author": "matraic <matraic@yahoo.com>",
6
6
  "license": "MIT",
7
- "homepage": "https://matraic.github.io/m3e/",
7
+ "homepage": "https://matraic.github.io/m3e/#/components/chips.html",
8
8
  "repository": {
9
9
  "type": "git",
10
10
  "url": "git+https://github.com/matraic/m3e.git"
@@ -32,9 +32,9 @@
32
32
  "clean": "rimraf dist"
33
33
  },
34
34
  "peerDependencies": {
35
- "@m3e/core": "1.0.0-rc.1",
36
- "@m3e/icon-button": "1.0.0-rc.1",
37
- "@m3e/form-field": "1.0.0-rc.1",
35
+ "@m3e/core": "1.0.0-rc.2",
36
+ "@m3e/icon-button": "1.0.0-rc.2",
37
+ "@m3e/form-field": "1.0.0-rc.2",
38
38
  "lit": "^3.3.0"
39
39
  },
40
40
  "devDependencies": {
package/cem.config.mjs DELETED
@@ -1,16 +0,0 @@
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
- };
package/demo/index.html DELETED
@@ -1,183 +0,0 @@
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>
package/dist/src/AssistChipElement.d.ts DELETED
@@ -1,82 +0,0 @@
1
- import { M3eChipElement } from "./ChipElement";
2
- declare const M3eAssistChipElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").FormSubmitterMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").AttachInternalsMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").LinkButtonMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DisabledInteractiveMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DisabledMixin> & typeof M3eChipElement;
3
- /**
4
- * @summary
5
- * A chip users interact with to perform a smart or automated action that can span multiple applications.
6
- *
7
- * @description
8
- * The `m3e-assist-chip` component presents a Material 3 assist chip, providing users with quick access to
9
- * contextually relevant actions. It is designed for use cases like suggested actions, quick filters, or
10
- * secondary operations, and supports accessibility, keyboard interaction, and expressive state styling
11
- * in line with Material 3 guidelines. Appearance variants include `elevated` and `outlined`, enabling visual
12
- * differentiation and contextual emphasis.
13
- *
14
- * @example
15
- * The following example illustrates use of the `m3e-assist-chip`. In this example, multiple chips are nested inside
16
- * a `m3e-chip-set` container to create a cohesive set of chips. The container is given the ARIA `role="group"` to convey
17
- * to assistive technologies that the chips are part of a related set of element.
18
- * ```html
19
- * <m3e-chip-set role="group" aria-label="Quick actions">
20
- * <m3e-assist-chip><m3e-icon slot="icon" name="edit"></m3e-icon>Edit</m3e-assist-chip>
21
- * <m3e-assist-chip><m3e-icon slot="icon" name="delete"></m3e-icon>Delete</m3e-assist-chip>
22
- * <m3e-assist-chip><m3e-icon slot="icon" name="content_copy"></m3e-icon>Copy</m3e-assist-chip>
23
- * <m3e-assist-chip><m3e-icon slot="icon" name="share"></m3e-icon>Share</m3e-assist-chip>
24
- * </m3e-chip-set>
25
- * ```
26
- *
27
- * @tag m3e-assist-chip
28
- *
29
- * @slot - Renders the label of the chip.
30
- * @slot icon - Renders an icon before the chip's label.
31
- *
32
- * @attr disabled - A value indicating whether the element is disabled.
33
- * @attr disabled-interactive - A value indicating whether the element is disabled and interactive.
34
- * @attr download - A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.
35
- * @attr href - The URL to which the link button points.
36
- * @attr name - The name of the element, submitted as a pair with the element's `value` as part of form data, when the element is used to submit a form.
37
- * @attr rel - The relationship between the `target` of the link button and the document.
38
- * @attr target - The target of the link button.
39
- * @attr type - The type of the element.
40
- * @attr value - A string representing the value of the chip.
41
- * @attr variant - The appearance variant of the chip.
42
- *
43
- * @cssprop --m3e-chip-container-shape - Border radius of the chip container.
44
- * @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.
45
- * @cssprop --m3e-chip-label-text-font-size - Font size of the chip label text.
46
- * @cssprop --m3e-chip-label-text-font-weight - Font weight of the chip label text.
47
- * @cssprop --m3e-chip-label-text-line-height - Line height of the chip label text.
48
- * @cssprop --m3e-chip-label-text-tracking - Letter spacing of the chip label text.
49
- * @cssprop --m3e-chip-label-text-color - Label text color in default state.
50
- * @cssprop --m3e-chip-icon-color - Icon color in default state.
51
- * @cssprop --m3e-chip-icon-size - Font size of leading/trailing icons.
52
- * @cssprop --m3e-chip-spacing - Horizontal gap between chip content elements.
53
- * @cssprop --m3e-chip-padding-start - Default start padding when no icon is present.
54
- * @cssprop --m3e-chip-padding-end - Default end padding when no trailing icon is present.
55
- * @cssprop --m3e-chip-with-icon-padding-start - Start padding when leading icon is present.
56
- * @cssprop --m3e-chip-with-icon-padding-end - End padding when trailing icon is present.
57
- * @cssprop --m3e-chip-disabled-label-text-color - Base color for disabled label text.
58
- * @cssprop --m3e-chip-disabled-label-text-opacity - Opacity applied to disabled label text.
59
- * @cssprop --m3e-chip-disabled-icon-color - Base color for disabled icons.
60
- * @cssprop --m3e-chip-disabled-icon-opacity - Opacity applied to disabled icons.
61
- * @cssprop --m3e-elevated-chip-container-color - Background color for elevated variant.
62
- * @cssprop --m3e-elevated-chip-elevation - Elevation level for elevated variant.
63
- * @cssprop --m3e-elevated-chip-hover-elevation - Elevation level on hover.
64
- * @cssprop --m3e-elevated-chip-disabled-container-color - Background color for disabled elevated variant.
65
- * @cssprop --m3e-elevated-chip-disabled-container-opacity - Opacity applied to disabled elevated background.
66
- * @cssprop --m3e-elevated-chip-disabled-elevation - Elevation level for disabled elevated variant.
67
- * @cssprop --m3e-outlined-chip-outline-thickness - Outline thickness for outlined variant.
68
- * @cssprop --m3e-outlined-chip-outline-color - Outline color for outlined variant.
69
- * @cssprop --m3e-outlined-chip-disabled-outline-color - Outline color for disabled outlined variant.
70
- * @cssprop --m3e-outlined-chip-disabled-outline-opacity - Opacity applied to disabled outline.
71
- */
72
- export declare class M3eAssistChipElement extends M3eAssistChipElement_base {
73
- /** @internal @inheritdoc */
74
- protected _renderTrailingIcon(): unknown;
75
- }
76
- declare global {
77
- interface HTMLElementTagNameMap {
78
- "m3e-assist-chip": M3eAssistChipElement;
79
- }
80
- }
81
- export {};
82
- //# sourceMappingURL=AssistChipElement.d.ts.map
package/dist/src/AssistChipElement.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"AssistChipElement.d.ts","sourceRoot":"","sources":["../../src/AssistChipElement.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AACH,qBACa,oBAAqB,SAAQ,yBAKzC;IACC,4BAA4B;cACT,mBAAmB,IAAI,OAAO;CAGlD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}
package/dist/src/ChipElement.d.ts DELETED
@@ -1,86 +0,0 @@
1
- import { CSSResultGroup, LitElement, PropertyValues } from "lit";
2
- import { ChipVariant } from "./ChipVariant";
3
- declare const M3eChipElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
4
- /**
5
- * @summary
6
- * A non-interactive chip used to convey small pieces of information.
7
- *
8
- * @description
9
- * The `m3e-chip` component establishes the foundational structure for chips. It supports expressive styling,
10
- * accessible interaction, and flexible content projection, aligning with Material 3 guidelines. Appearance
11
- * variants include `elevated` and `outlined`, enabling visual differentiation and contextual emphasis.
12
- *
13
- * @example
14
- * The following example illustrates use of the `m3e-chip` and `m3e-chip-set` components to present non-interactive chips.
15
- * ```html
16
- * <m3e-chip-set>
17
- * <m3e-chip><m3e-icon slot="icon" name="palette"></m3e-icon>Design</m3e-chip>
18
- * <m3e-chip><m3e-icon slot="icon" name="accessibility_new"></m3e-icon>Accessibility</m3e-chip>
19
- * <m3e-chip><m3e-icon slot="icon" name="motion_photos_on"></m3e-icon>Motion</m3e-chip>
20
- * <m3e-chip><m3e-icon slot="icon" name="description"></m3e-icon>Documentation</m3e-chip>
21
- * </m3e-chip-set>
22
- * ```
23
- *
24
- * @tag m3e-chip
25
- *
26
- * @slot - Renders the label of the chip.
27
- * @slot icon - Renders an icon before the chip's label.
28
- * @slot trailing-icon - Renders an icon after the chip's label.
29
- *
30
- * @attr value - A string representing the value of the chip.
31
- * @attr variant - The appearance variant of the chip.
32
- *
33
- * @cssprop --m3e-chip-container-shape - Border radius of the chip container.
34
- * @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.
35
- * @cssprop --m3e-chip-label-text-font-size - Font size of the chip label text.
36
- * @cssprop --m3e-chip-label-text-font-weight - Font weight of the chip label text.
37
- * @cssprop --m3e-chip-label-text-line-height - Line height of the chip label text.
38
- * @cssprop --m3e-chip-label-text-tracking - Letter spacing of the chip label text.
39
- * @cssprop --m3e-chip-label-text-color - Label text color in default state.
40
- * @cssprop --m3e-chip-icon-color - Icon color in default state.
41
- * @cssprop --m3e-chip-icon-size - Font size of leading/trailing icons.
42
- * @cssprop --m3e-chip-spacing - Horizontal gap between chip content elements.
43
- * @cssprop --m3e-chip-padding-start - Default start padding when no icon is present.
44
- * @cssprop --m3e-chip-padding-end - Default end padding when no trailing icon is present.
45
- * @cssprop --m3e-chip-with-icon-padding-start - Start padding when leading icon is present.
46
- * @cssprop --m3e-chip-with-icon-padding-end - End padding when trailing icon is present.
47
- * @cssprop --m3e-elevated-chip-container-color - Background color for elevated variant.
48
- * @cssprop --m3e-elevated-chip-elevation - Elevation level for elevated variant.
49
- * @cssprop --m3e-elevated-chip-hover-elevation - Elevation level on hover.
50
- * @cssprop --m3e-outlined-chip-outline-thickness - Outline thickness for outlined variant.
51
- * @cssprop --m3e-outlined-chip-outline-color - Outline color for outlined variant.
52
- */
53
- export declare class M3eChipElement extends M3eChipElement_base {
54
- #private;
55
- /** The styles of the element. */
56
- static styles: CSSResultGroup;
57
- /** @private */ private readonly _elevation?;
58
- /** @private */ private readonly _focusRing?;
59
- /** @private */ private readonly _stateLayer?;
60
- /** @private */ private readonly _ripple?;
61
- /**
62
- * The appearance variant of the chip.
63
- * @default "outlined"
64
- */
65
- variant: ChipVariant;
66
- /** A string representing the value of the chip. */
67
- get value(): string;
68
- set value(value: string);
69
- /** @inheritdoc */
70
- protected firstUpdated(_changedProperties: PropertyValues): void;
71
- /** @inheritdoc */
72
- protected render(): unknown;
73
- /** @internal */
74
- protected _renderIcon(): unknown;
75
- /** @internal */
76
- protected _renderTrailingIcon(): unknown;
77
- /** @internal */
78
- protected _renderSlot(): unknown;
79
- }
80
- declare global {
81
- interface HTMLElementTagNameMap {
82
- "m3e-chip": M3eChipElement;
83
- }
84
- }
85
- export {};
86
- //# sourceMappingURL=ChipElement.d.ts.map
package/dist/src/ChipElement.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"ChipElement.d.ts","sourceRoot":"","sources":["../../src/ChipElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAa,MAAM,KAAK,CAAC;AAkBhG,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,qBACa,cAAe,SAAQ,mBAAwB;;IAC1D,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAkKpC;IAEF,eAAe,CAAsB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAsB;IACvF,eAAe,CAAuB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAsB;IACxF,eAAe,CAAwB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAuB;IAC3F,eAAe,CAAmB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAmB;IAK9E;;;OAGG;IAC0B,OAAO,EAAE,WAAW,CAAc;IAE/D,mDAAmD;IACnD,IAAgB,KAAK,IAGJ,MAAM,CADtB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAczE,kBAAkB;cACC,MAAM,IAAI,OAAO;IAsBpC,gBAAgB;IAChB,SAAS,CAAC,WAAW,IAAI,OAAO;IAIhC,gBAAgB;IAChB,SAAS,CAAC,mBAAmB,IAAI,OAAO;IAQxC,gBAAgB;IAChB,SAAS,CAAC,WAAW,IAAI,OAAO;CAkBjC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}
package/dist/src/ChipSetElement.d.ts DELETED
@@ -1,43 +0,0 @@
1
- import { CSSResultGroup, LitElement } from "lit";
2
- declare const M3eChipSetElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").VerticalMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
3
- /**
4
- * @summary
5
- * A container used to organize chips into a cohesive unit.
6
- *
7
- * @description
8
- * The `m3e-chip-set` component provides a flexible container for grouping chips, supporting both
9
- * horizontal and vertical layouts. It manages chip arrangement, spacing, and accessibility, and
10
- * serves as the foundation for chip set variants such as input and filter chip sets.
11
- *
12
- * @example
13
- * The following example illustrates use of the `m3e-chip` and `m3e-chip-set` components to present non-interactive chips.
14
- * ```html
15
- * <m3e-chip-set>
16
- * <m3e-chip><m3e-icon slot="icon" name="palette"></m3e-icon>Design</m3e-chip>
17
- * <m3e-chip><m3e-icon slot="icon" name="accessibility_new"></m3e-icon>Accessibility</m3e-chip>
18
- * <m3e-chip><m3e-icon slot="icon" name="motion_photos_on"></m3e-icon>Motion</m3e-chip>
19
- * <m3e-chip><m3e-icon slot="icon" name="description"></m3e-icon>Documentation</m3e-chip>
20
- * </m3e-chip-set>
21
- * ```
22
- *
23
- * @tag m3e-chip-set
24
- *
25
- * @slot - Renders the chips of the set.
26
- *
27
- * @attr vertical - Whether the element is oriented vertically.
28
- *
29
- * @cssprop --m3e-chip-set-spacing - The spacing (gap) between chips in the set.
30
- */
31
- export declare class M3eChipSetElement extends M3eChipSetElement_base {
32
- /** The styles of the element. */
33
- static styles: CSSResultGroup;
34
- /** @inheritdoc */
35
- protected render(): unknown;
36
- }
37
- declare global {
38
- interface HTMLElementTagNameMap {
39
- "m3e-chip-set": M3eChipSetElement;
40
- }
41
- }
42
- export {};
43
- //# sourceMappingURL=ChipSetElement.d.ts.map
package/dist/src/ChipSetElement.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"ChipSetElement.d.ts","sourceRoot":"","sources":["../../src/ChipSetElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AAK5D;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBACa,iBAAkB,SAAQ,sBAAkC;IACvE,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAWpC;IAEF,kBAAkB;cACC,MAAM,IAAI,OAAO;CAGrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,iBAAiB,CAAC;KACnC;CACF"}
package/dist/src/ChipVariant.d.ts DELETED
@@ -1,3 +0,0 @@
1
- /** Specifies the possible appearance variants of a chip. */
2
- export type ChipVariant = "outlined" | "elevated";
3
- //# sourceMappingURL=ChipVariant.d.ts.map
package/dist/src/ChipVariant.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"ChipVariant.d.ts","sourceRoot":"","sources":["../../src/ChipVariant.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,UAAU,CAAC"}
package/dist/src/FilterChipElement.d.ts DELETED
@@ -1,93 +0,0 @@
1
- import { CSSResultGroup, PropertyValues } from "lit";
2
- import { M3eChipElement } from "./ChipElement";
3
- declare const M3eFilterChipElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").SelectedMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DisabledInteractiveMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DisabledMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").AttachInternalsMixin> & typeof M3eChipElement;
4
- /**
5
- * @summary
6
- * A chip users interact with to select/deselect options.
7
- *
8
- * @description
9
- * The `m3e-filter-chip` component presents a chip that users can select or deselect to filter
10
- * content or data sets. It supports single and multi-selection, keyboard interaction, accessibility,
11
- * and expressive state styling, providing a modern and interactive filtering experience in line
12
- * with Material 3 guidelines. Appearance variants include `elevated` and `outlined`, enabling visual
13
- * differentiation and contextual emphasis.
14
- *
15
- * @tag m3e-filter-chip
16
- *
17
- * @slot - Renders the label of the chip.
18
- * @slot icon - Renders an icon before the chip's label.
19
- * @slot trailing-icon - Renders an icon after the chip's label.
20
- *
21
- * @attr disabled - A value indicating whether the element is disabled.
22
- * @attr disabled-interactive - A value indicating whether the element is disabled and interactive.
23
- * @attr selected - A value indicating whether the element is selected.
24
- * @attr value - A string representing the value of the chip.
25
- * @attr variant - The appearance variant of the chip.
26
- *
27
- * @fires input - Emitted when the selected state changes.
28
- * @fires change - Emitted when the selected state changes.
29
- *
30
- * @cssprop --m3e-chip-container-shape - Border radius of the chip container.
31
- * @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.
32
- * @cssprop --m3e-chip-label-text-font-size - Font size of the chip label text.
33
- * @cssprop --m3e-chip-label-text-font-weight - Font weight of the chip label text.
34
- * @cssprop --m3e-chip-label-text-line-height - Line height of the chip label text.
35
- * @cssprop --m3e-chip-label-text-tracking - Letter spacing of the chip label text.
36
- * @cssprop --m3e-chip-icon-size - Font size of leading/trailing icons.
37
- * @cssprop --m3e-chip-spacing - Horizontal gap between chip content elements.
38
- * @cssprop --m3e-chip-padding-start - Default start padding when no icon is present.
39
- * @cssprop --m3e-chip-padding-end - Default end padding when no trailing icon is present.
40
- * @cssprop --m3e-chip-with-icon-padding-start - Start padding when leading icon is present.
41
- * @cssprop --m3e-chip-with-icon-padding-end - End padding when trailing icon is present.
42
- * @cssprop --m3e-chip-disabled-label-text-color - Base color for disabled label text.
43
- * @cssprop --m3e-chip-disabled-label-text-opacity - Opacity applied to disabled label text.
44
- * @cssprop --m3e-chip-disabled-icon-color - Base color for disabled icons.
45
- * @cssprop --m3e-chip-disabled-icon-opacity - Opacity applied to disabled icons.
46
- * @cssprop --m3e-elevated-chip-container-color - Background color for elevated variant.
47
- * @cssprop --m3e-elevated-chip-elevation - Elevation level for elevated variant.
48
- * @cssprop --m3e-elevated-chip-hover-elevation - Elevation level on hover.
49
- * @cssprop --m3e-elevated-chip-disabled-container-color - Background color for disabled elevated variant.
50
- * @cssprop --m3e-elevated-chip-disabled-container-opacity - Opacity applied to disabled elevated background.
51
- * @cssprop --m3e-elevated-chip-disabled-elevation - Elevation level for disabled elevated variant.
52
- * @cssprop --m3e-outlined-chip-outline-thickness - Outline thickness for outlined variant.
53
- * @cssprop --m3e-outlined-chip-outline-color - Outline color for outlined variant.
54
- * @cssprop --m3e-outlined-chip-disabled-outline-color - Outline color for disabled outlined variant.
55
- * @cssprop --m3e-outlined-chip-disabled-outline-opacity - Opacity applied to disabled outline.
56
- * @cssprop --m3e-chip-selected-outline-thickness - Outline thickness for selected state.
57
- * @cssprop --m3e-chip-selected-label-text-color - Text color in selected state.
58
- * @cssprop --m3e-chip-selected-container-color - Background color in selected state.
59
- * @cssprop --m3e-chip-selected-container-hover-color - Hover state layer color in selected state.
60
- * @cssprop --m3e-chip-selected-container-focus-color - Focus state layer color in selected state.
61
- * @cssprop --m3e-chip-selected-hover-elevation - Elevation on hover in selected state.
62
- * @cssprop --m3e-chip-selected-ripple-color - Ripple color in selected state.
63
- * @cssprop --m3e-chip-selected-state-layer-focus-color - Focus state layer color in selected state.
64
- * @cssprop --m3e-chip-selected-state-layer-hover-color - Hover state layer color in selected state.
65
- * @cssprop --m3e-chip-selected-leading-icon-color - Leading icon color in selected state.
66
- * @cssprop --m3e-chip-selected-trailing-icon-color - Trailing icon color in selected state.
67
- * @cssprop --m3e-chip-unselected-label-text-color - Text color in unselected state.
68
- * @cssprop --m3e-chip-unselected-ripple-color - Ripple color in unselected state.
69
- * @cssprop --m3e-chip-unselected-state-layer-focus-color - Focus state layer color in unselected state.
70
- * @cssprop --m3e-chip-unselected-state-layer-hover-color - Hover state layer color in unselected state.
71
- * @cssprop --m3e-chip-unselected-leading-icon-color - Leading icon color in unselected state.
72
- * @cssprop --m3e-chip-unselected-trailing-icon-color - Trailing icon color in unselected state.
73
- */
74
- export declare class M3eFilterChipElement extends M3eFilterChipElement_base {
75
- #private;
76
- /** The styles of the element. */
77
- static styles: CSSResultGroup;
78
- /** @inheritdoc */
79
- connectedCallback(): void;
80
- /** @inheritdoc */
81
- disconnectedCallback(): void;
82
- /** @inheritdoc */
83
- protected update(changedProperties: PropertyValues<this>): void;
84
- /** @inheritdoc @private */
85
- protected _renderIcon(): unknown;
86
- }
87
- declare global {
88
- interface HTMLElementTagNameMap {
89
- "m3e-filter-chip": M3eFilterChipElement;
90
- }
91
- }
92
- export {};
93
- //# sourceMappingURL=FilterChipElement.d.ts.map
package/dist/src/FilterChipElement.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"FilterChipElement.d.ts","sourceRoot":"","sources":["../../src/FilterChipElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAgBhE,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AACH,qBACa,oBAAqB,SAAQ,yBAEzC;;IACC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA0GpC;IAIF,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAKrC,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQxE,2BAA2B;cACR,WAAW,IAAI,OAAO;CAsB1C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}
package/dist/src/FilterChipSetElement.d.ts DELETED
@@ -1,78 +0,0 @@
1
- import { PropertyValues } from "lit";
2
- import { formValue } from "@m3e/core";
3
- import { SelectionManager, selectionManager } from "@m3e/core/a11y";
4
- import { M3eChipSetElement } from "./ChipSetElement";
5
- import { M3eFilterChipElement } from "./FilterChipElement";
6
- declare const M3eFilterChipSetElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").LabelledMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DirtyMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").TouchedMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").FormAssociatedMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DisabledMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").AttachInternalsMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof M3eChipSetElement;
7
- /**
8
- * @summary
9
- * A container that organizes filter chips into a cohesive group, enabling selection and
10
- * deselection of values used to refine content or trigger contextual behavior.
11
- *
12
- * @description
13
- * The `m3e-filter-chip-set` component presents a group of filter chips, enabling users to select
14
- * one or more options to filter content or data sets. It supports single and multi-selection,
15
- * keyboard navigation, accessibility, and seamless form association, providing expressive and
16
- * interactive filtering experiences in line with Material 3 guidelines.
17
- *
18
- * @example
19
- * The following example illustrates a single-select `m3e-filter-chip-set` containing multiple `m3e-filter-chip` components that
20
- * allow a user to choose an option. You can use the `multi` attribute to enable multiselect.
21
- * ```html
22
- * <m3e-filter-chip-set aria-label="Filter by topic">
23
- * <m3e-filter-chip><m3e-icon slot="icon" name="palette"></m3e-icon>Design</m3e-filter-chip>
24
- * <m3e-filter-chip><m3e-icon slot="icon" name="accessibility_new"></m3e-icon>Accessibility</m3e-filter-chip>
25
- * <m3e-filter-chip><m3e-icon slot="icon" name="motion_photos_on"></m3e-icon>Motion</m3e-filter-chip>
26
- * <m3e-filter-chip><m3e-icon slot="icon" name="description"></m3e-icon>Documentation</m3e-filter-chip>
27
- * </m3e-filter-chip-set>
28
- * ```
29
- *
30
- * @tag m3e-filter-chip-set
31
- *
32
- * @slot - Renders the chips of the set.
33
- *
34
- * @attr disabled - Whether the element is disabled.
35
- * @attr hide-selection-indicator - Whether to hide the selection indicator.
36
- * @attr multi - Whether multiple chips can be selected.
37
- * @attr name - The name that identifies the element when submitting the associated form.
38
- * @attr vertical - Whether the element is oriented vertically.
39
- *
40
- * @fires input - Emitted when the selected state of a chip changes.
41
- * @fires change - Emitted when the selected state of a chip changes.
42
- *
43
- * @cssprop --m3e-chip-set-spacing - The spacing (gap) between chips in the set.
44
- */
45
- export declare class M3eFilterChipSetElement extends M3eFilterChipSetElement_base {
46
- #private;
47
- /** @internal */
48
- readonly [selectionManager]: SelectionManager<M3eFilterChipElement>;
49
- /**
50
- * Whether multiple chips can be selected.
51
- * @default false
52
- */
53
- multi: boolean;
54
- /**
55
- * Whether to hide the selection indicator.
56
- * @default false
57
- */
58
- hideSelectionIndicator: boolean;
59
- /** The chips of the set. */
60
- get chips(): readonly M3eFilterChipElement[];
61
- /** The selected chip(s) of the set. */
62
- get selected(): readonly M3eFilterChipElement[];
63
- /** The selected value(s) of the set. */
64
- get value(): string | readonly string[] | null;
65
- /** @inheritdoc @internal */
66
- get [formValue](): string | FormData | null;
67
- /** @inheritdoc */
68
- protected update(changedProperties: PropertyValues<this>): void;
69
- /** @inheritdoc */
70
- protected render(): unknown;
71
- }
72
- declare global {
73
- interface HTMLElementTagNameMap {
74
- "m3e-filter-chip-set": M3eFilterChipSetElement;
75
- }
76
- }
77
- export {};
78
- //# sourceMappingURL=FilterChipSetElement.d.ts.map
package/dist/src/FilterChipSetElement.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"FilterChipSetElement.d.ts","sourceRoot":"","sources":["../../src/FilterChipSetElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAG3C,OAAO,EAA8D,SAAS,EAAiB,MAAM,WAAW,CAAC;AACjH,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,qBACa,uBAAwB,SAAQ,4BAE5C;;IACC,gBAAgB;IAChB,QAAQ,CAAC,CAAC,gBAAgB,CAAC,yCAEb;IAEd;;;OAGG;IAC0B,KAAK,UAAS;IAE3C;;;OAGG;IACiE,sBAAsB,UAAS;IAEnG,4BAA4B;IAC5B,IAAI,KAAK,IAAI,SAAS,oBAAoB,EAAE,CAE3C;IAED,uCAAuC;IACvC,IAAI,QAAQ,IAAI,SAAS,oBAAoB,EAAE,CAE9C;IAED,wCAAwC;IACxC,IAAI,KAAK,IAAI,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,IAAI,CAU7C;IAED,4BAA4B;IAC5B,IAAa,CAAC,SAAS,CAAC,6BAUvB;IAED,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAsBxE,kBAAkB;cACC,MAAM,IAAI,OAAO;CA0BrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,uBAAuB,CAAC;KAChD;CACF"}