@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
@@ -1,104 +0,0 @@
1
- import { CSSResultGroup, PropertyValues } from "lit";
2
- import { M3eIconButtonElement } from "@m3e/icon-button";
3
- import { M3eChipElement } from "./ChipElement";
4
- declare const M3eInputChipElement_base: 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> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof M3eChipElement;
5
- /**
6
- * @summary
7
- * A chip which represents a discrete piece of information entered by a user.
8
- *
9
- * @description
10
- * The `m3e-input-chip` component represents an input chip, allowing users to enter, display,
11
- * and manage discrete values such as tags or keywords. It supports expressive styling, accessibility,
12
- * keyboard interaction, and appearance variants including `elevated` and `outlined`.
13
- *
14
- * @tag m3e-input-chip
15
- *
16
- * @slot - Renders the label of the chip.
17
- * @slot avatar - Renders an avatar before the chip's label.
18
- * @slot icon - Renders an icon before the chip's label.
19
- * @slot remove-icon - Renders the icon for the button used to remove the chip.
20
- *
21
- * @attr disabled - Whether the element is disabled.
22
- * @attr disabled-interactive - Whether the element is disabled and interactive.
23
- * @attr removable - Whether the chip is removable.
24
- * @attr remove-label - The accessible label given to the button used to remove the chip.
25
- * @attr value - A string representing the value of the chip.
26
- * @attr variant - The appearance variant of the chip.
27
- *
28
- * @fires remove - Emitted when the remove button is clicked or DELETE or BACKSPACE key is pressed.
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-label-text-color - Label text color in default state.
37
- * @cssprop --m3e-chip-icon-color - Icon color in default state.
38
- * @cssprop --m3e-chip-icon-size - Font size of leading/trailing icons.
39
- * @cssprop --m3e-chip-spacing - Horizontal gap between chip content elements.
40
- * @cssprop --m3e-chip-padding-start - Default start padding when no icon is present.
41
- * @cssprop --m3e-chip-padding-end - Default end padding when no trailing icon is present.
42
- * @cssprop --m3e-chip-with-icon-padding-start - Start padding when leading icon is present.
43
- * @cssprop --m3e-chip-with-icon-padding-end - End padding when trailing icon is present.
44
- * @cssprop --m3e-chip-disabled-label-text-color - Base color for disabled label text.
45
- * @cssprop --m3e-chip-disabled-label-text-opacity - Opacity applied to disabled label text.
46
- * @cssprop --m3e-chip-disabled-icon-color - Base color for disabled icons.
47
- * @cssprop --m3e-chip-disabled-icon-opacity - Opacity applied to disabled icons.
48
- * @cssprop --m3e-elevated-chip-container-color - Background color for elevated variant.
49
- * @cssprop --m3e-elevated-chip-elevation - Elevation level for elevated variant.
50
- * @cssprop --m3e-elevated-chip-hover-elevation - Elevation level on hover.
51
- * @cssprop --m3e-elevated-chip-disabled-container-color - Background color for disabled elevated variant.
52
- * @cssprop --m3e-elevated-chip-disabled-container-opacity - Opacity applied to disabled elevated background.
53
- * @cssprop --m3e-elevated-chip-disabled-elevation - Elevation level for disabled elevated variant.
54
- * @cssprop --m3e-outlined-chip-outline-thickness - Outline thickness for outlined variant.
55
- * @cssprop --m3e-outlined-chip-outline-color - Outline color for outlined variant.
56
- * @cssprop --m3e-outlined-chip-disabled-outline-color - Outline color for disabled outlined variant.
57
- * @cssprop --m3e-outlined-chip-disabled-outline-opacity - Opacity applied to disabled outline.
58
- * @cssprop --m3e-chip-avatar-size - Font size of the avatar slot content.
59
- * @cssprop --m3e-chip-disabled-avatar-opacity - Opacity applied to the avatar when disabled.
60
- * @cssprop --m3e-chip-with-avatar-padding-start - Start padding when an avatar is present.
61
- */
62
- export declare class M3eInputChipElement extends M3eInputChipElement_base {
63
- #private;
64
- /** The styles of the element. */
65
- static styles: CSSResultGroup;
66
- /** A reference to the grid cell of the chip. */
67
- readonly cell: HTMLSpanElement;
68
- /** A reference to the button used to remove the chip. */
69
- readonly removeButton: M3eIconButtonElement | null;
70
- /**
71
- * Whether the chip is removable.
72
- * @default false
73
- */
74
- removable: boolean;
75
- /**
76
- * The accessible label given to the button used to remove the chip.
77
- * @default "Remove"
78
- */
79
- removeLabel: string;
80
- /** @inheritdoc */
81
- connectedCallback(): void;
82
- /** @inheritdoc */
83
- protected update(changedProperties: PropertyValues<this>): void;
84
- /** @inheritdoc */
85
- protected render(): unknown;
86
- /** @internal @inheritdoc */
87
- protected _renderTrailingIcon(): unknown;
88
- }
89
- interface M3eInputChipElementEventMap extends HTMLElementEventMap {
90
- remove: Event;
91
- }
92
- export interface M3eInputChipElement {
93
- addEventListener<K extends keyof M3eInputChipElementEventMap>(type: K, listener: (this: M3eInputChipElement, ev: M3eInputChipElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
94
- addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
95
- removeEventListener<K extends keyof M3eInputChipElementEventMap>(type: K, listener: (this: M3eInputChipElement, ev: M3eInputChipElementEventMap[K]) => void, options?: boolean | EventListenerOptions): void;
96
- removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
97
- }
98
- declare global {
99
- interface HTMLElementTagNameMap {
100
- "m3e-input-chip": M3eInputChipElement;
101
- }
102
- }
103
- export {};
104
- //# sourceMappingURL=InputChipElement.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"InputChipElement.d.ts","sourceRoot":"","sources":["../../src/InputChipElement.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,cAAc,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AAczE,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,qBACa,mBAAoB,SAAQ,wBAGxC;;IACC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAoDpC;IAEF,gDAAgD;IAChC,QAAQ,CAAC,IAAI,EAAG,eAAe,CAAC;IAEhD,yDAAyD;IAChC,QAAQ,CAAC,YAAY,EAAG,oBAAoB,GAAG,IAAI,CAAC;IAE7E;;;OAGG;IAC0B,SAAS,UAAS;IAE/C;;;OAGG;IACsC,WAAW,SAAY;IAEhE,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IASxE,kBAAkB;cACC,MAAM,IAAI,OAAO;IAgCpC,4BAA4B;cACT,mBAAmB,IAAI,OAAO;CA8ClD;AAED,UAAU,2BAA4B,SAAQ,mBAAmB;IAC/D,MAAM,EAAE,KAAK,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,gBAAgB,CAAC,CAAC,SAAS,MAAM,2BAA2B,EAC1D,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,mBAAmB,EAAE,EAAE,EAAE,2BAA2B,CAAC,CAAC,CAAC,KAAK,IAAI,EACjF,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IAER,gBAAgB,CACd,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IAER,mBAAmB,CAAC,CAAC,SAAS,MAAM,2BAA2B,EAC7D,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,mBAAmB,EAAE,EAAE,EAAE,2BAA2B,CAAC,CAAC,CAAC,KAAK,IAAI,EACjF,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;IAER,mBAAmB,CACjB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;CACT;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}
@@ -1,75 +0,0 @@
1
- import { CSSResultGroup, PropertyValues } from "lit";
2
- import { formValue } from "@m3e/core";
3
- import { FormFieldControl } from "@m3e/form-field";
4
- import { M3eChipSetElement } from "./ChipSetElement";
5
- import { M3eInputChipElement } from "./InputChipElement";
6
- declare const M3eInputChipSetElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").RequiredConstraintValidationMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").RequiredMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").ConstraintValidationMixin> & 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 transforms user input into a cohesive set of interactive chips, supporting entry, editing, and removal of discrete values.
10
- *
11
- * @description
12
- * The `m3e-input-chip-set` component enables users to input, display, and manage a collection of discrete
13
- * values as input chips. Designed for expressive, accessible forms, it supports keyboard navigation, validation,
14
- * and seamless integration with form controls. This component is ideal for capturing user-generated tags,
15
- * keywords, or selections in a visually consistent and interactive manner.
16
- *
17
- * @example
18
- * The following example illustrates the use of the `m3e-input-chip-set` inside a `m3e-form-field`.
19
- * In this example, the `input` slot specifies the `input` element used to add input chips and the
20
- * field label's `for` attribute targets the `input` element to provide an accessible label.
21
- * ```html
22
- * <m3e-form-field>
23
- * <label slot="label" for="keywords">Keywords</label>
24
- * <m3e-input-chip-set aria-label="Enter keywords">
25
- * <input id="keywords" slot="input" placeholder="New keyword..." />
26
- * </m3e-input-chip-set>
27
- * </m3e-form-field>
28
- * ```
29
- *
30
- * @tag m3e-input-chip-set
31
- *
32
- * @slot - Renders the chips of the set.
33
- * @slot input - Renders the input element used to add new chips to the set.
34
- *
35
- * @attr disabled - Whether the element is disabled.
36
- * @attr name - The name that identifies the element when submitting the associated form.
37
- * @attr required - Whether a value is required for the element.
38
- * @attr vertical - Whether the element is oriented vertically.
39
- *
40
- * @fires change - Emitted when a chip is added to, or removed from, the set.
41
- *
42
- * @cssprop --m3e-chip-set-spacing - The spacing (gap) between chips in the set.
43
- */
44
- export declare class M3eInputChipSetElement extends M3eInputChipSetElement_base implements FormFieldControl {
45
- #private;
46
- /** The styles of the element. */
47
- static styles: CSSResultGroup;
48
- /** The chips of the set. */
49
- get chips(): readonly M3eInputChipElement[];
50
- /** The selected values of the set. */
51
- get value(): readonly string[] | null;
52
- /** @inheritdoc @internal */
53
- get [formValue](): FormData | null;
54
- /** @inheritdoc */
55
- get shouldLabelFloat(): boolean;
56
- /** @inheritdoc */
57
- onContainerClick(): void;
58
- /** @inheritdoc */
59
- connectedCallback(): void;
60
- /** @inheritdoc */
61
- disconnectedCallback(): void;
62
- /** @inheritdoc */
63
- protected firstUpdated(_changedProperties: PropertyValues): void;
64
- /** @inheritdoc */
65
- protected update(changedProperties: PropertyValues<this>): void;
66
- /** @inheritdoc */
67
- protected render(): unknown;
68
- }
69
- declare global {
70
- interface HTMLElementTagNameMap {
71
- "m3e-input-chip-set": M3eInputChipSetElement;
72
- }
73
- }
74
- export {};
75
- //# sourceMappingURL=InputChipSetElement.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"InputChipSetElement.d.ts","sourceRoot":"","sources":["../../src/InputChipSetElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhE,OAAO,EAOL,SAAS,EAKV,MAAM,WAAW,CAAC;AAGnB,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,qBACa,sBACX,SAAQ,2BAKR,YAAW,gBAAgB;;IAE3B,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA0CpC;IAoBF,4BAA4B;IAC5B,IAAI,KAAK,IAAI,SAAS,mBAAmB,EAAE,CAI1C;IAED,sCAAsC;IACtC,IAAI,KAAK,IAAI,SAAS,MAAM,EAAE,GAAG,IAAI,CAGpC;IAED,4BAA4B;IAC5B,IAAa,CAAC,SAAS,CAAC,oBAQvB;IAED,kBAAkB;IAClB,IAAI,gBAAgB,IAAI,OAAO,CAE9B;IAED,kBAAkB;IAClB,gBAAgB,IAAI,IAAI;IAIxB,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAWlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAQrC,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAQzE,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAcxE,kBAAkB;cACC,MAAM,IAAI,OAAO;CA6IrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,sBAAsB,CAAC;KAC9C;CACF"}
@@ -1,83 +0,0 @@
1
- import { M3eChipElement } from "./ChipElement";
2
- declare const M3eSuggestionChipElement_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 used to help narrow a user's intent by presenting dynamically generated suggestions, such as
6
- * suggested responses or search filters.
7
- *
8
- * @description
9
- * The `m3e-suggestion-chip` component presents a suggestion chip, offering users contextually relevant
10
- * actions or responses. It is designed for dynamic suggestion scenarios, such as search filters or
11
- * smart replies, and supports accessibility, keyboard interaction, and expressive state styling in line
12
- * with Material 3 guidelines. Appearance variants include `elevated` and `outlined`, enabling visual
13
- * differentiation and contextual emphasis.
14
- *
15
- * @example
16
- * The following example illustrates use of the `m3e-suggestion-chip`. In this example, multiple chips are nested inside
17
- * a `m3e-chip-set` container to create a cohesive set of chips. The container is given the ARIA `role="group"` to convey
18
- * to assistive technologies that the chips are part of a related set of element.
19
- * ```html
20
- * <m3e-chip-set role="group" aria-label="Suggested replies">
21
- * <m3e-suggestion-chip>Sounds good!</m3e-suggestion-chip>
22
- * <m3e-suggestion-chip>Can you clarify?</m3e-suggestion-chip>
23
- * <m3e-suggestion-chip>Let's do it.</m3e-suggestion-chip>
24
- * <m3e-suggestion-chip>Maybe later.</m3e-suggestion-chip>
25
- * </m3e-chip-set>
26
- * ```
27
- *
28
- * @tag m3e-suggestion-chip
29
- *
30
- * @slot - Renders the label of the chip.
31
- * @slot icon - Renders an icon before the chip's label.
32
- *
33
- * @attr disabled - A value indicating whether the element is disabled.
34
- * @attr disabled-interactive - A value indicating whether the element is disabled and interactive.
35
- * @attr download - A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.
36
- * @attr href - The URL to which the link button points.
37
- * @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.
38
- * @attr rel - The relationship between the `target` of the link button and the document.
39
- * @attr target - The target of the link button.
40
- * @attr type - The type of the element.
41
- * @attr value - A string representing the value of the chip.
42
- * @attr variant - The appearance variant of the chip.
43
- *
44
- * @cssprop --m3e-chip-container-shape - Border radius of the chip container.
45
- * @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.
46
- * @cssprop --m3e-chip-label-text-font-size - Font size of the chip label text.
47
- * @cssprop --m3e-chip-label-text-font-weight - Font weight of the chip label text.
48
- * @cssprop --m3e-chip-label-text-line-height - Line height of the chip label text.
49
- * @cssprop --m3e-chip-label-text-tracking - Letter spacing of the chip label text.
50
- * @cssprop --m3e-chip-label-text-color - Label text color in default state.
51
- * @cssprop --m3e-chip-icon-color - Icon color in default state.
52
- * @cssprop --m3e-chip-icon-size - Font size of leading/trailing icons.
53
- * @cssprop --m3e-chip-spacing - Horizontal gap between chip content elements.
54
- * @cssprop --m3e-chip-padding-start - Default start padding when no icon is present.
55
- * @cssprop --m3e-chip-padding-end - Default end padding when no trailing icon is present.
56
- * @cssprop --m3e-chip-with-icon-padding-start - Start padding when leading icon is present.
57
- * @cssprop --m3e-chip-with-icon-padding-end - End padding when trailing icon is present.
58
- * @cssprop --m3e-chip-disabled-label-text-color - Base color for disabled label text.
59
- * @cssprop --m3e-chip-disabled-label-text-opacity - Opacity applied to disabled label text.
60
- * @cssprop --m3e-chip-disabled-icon-color - Base color for disabled icons.
61
- * @cssprop --m3e-chip-disabled-icon-opacity - Opacity applied to disabled icons.
62
- * @cssprop --m3e-elevated-chip-container-color - Background color for elevated variant.
63
- * @cssprop --m3e-elevated-chip-elevation - Elevation level for elevated variant.
64
- * @cssprop --m3e-elevated-chip-hover-elevation - Elevation level on hover.
65
- * @cssprop --m3e-elevated-chip-disabled-container-color - Background color for disabled elevated variant.
66
- * @cssprop --m3e-elevated-chip-disabled-container-opacity - Opacity applied to disabled elevated background.
67
- * @cssprop --m3e-elevated-chip-disabled-elevation - Elevation level for disabled elevated variant.
68
- * @cssprop --m3e-outlined-chip-outline-thickness - Outline thickness for outlined variant.
69
- * @cssprop --m3e-outlined-chip-outline-color - Outline color for outlined variant.
70
- * @cssprop --m3e-outlined-chip-disabled-outline-color - Outline color for disabled outlined variant.
71
- * @cssprop --m3e-outlined-chip-disabled-outline-opacity - Opacity applied to disabled outline.
72
- */
73
- export declare class M3eSuggestionChipElement extends M3eSuggestionChipElement_base {
74
- /** @internal @inheritdoc */
75
- protected _renderTrailingIcon(): unknown;
76
- }
77
- declare global {
78
- interface HTMLElementTagNameMap {
79
- "m3e-suggestion-chip": M3eSuggestionChipElement;
80
- }
81
- }
82
- export {};
83
- //# sourceMappingURL=SuggestionChipElement.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SuggestionChipElement.d.ts","sourceRoot":"","sources":["../../src/SuggestionChipElement.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AACH,qBACa,wBAAyB,SAAQ,6BAK7C;IACC,4BAA4B;cACT,mBAAmB,IAAI,OAAO;CAGlD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,wBAAwB,CAAC;KACjD;CACF"}
@@ -1,10 +0,0 @@
1
- export * from "./AssistChipElement";
2
- export * from "./ChipElement";
3
- export * from "./ChipSetElement";
4
- export * from "./ChipVariant";
5
- export * from "./FilterChipElement";
6
- export * from "./FilterChipSetElement";
7
- export * from "./InputChipElement";
8
- export * from "./InputChipSetElement";
9
- export * from "./SuggestionChipElement";
10
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC"}
package/eslint.config.mjs DELETED
@@ -1,13 +0,0 @@
1
- import eslint from "@eslint/js";
2
- import tseslint from "typescript-eslint";
3
- import { fileURLToPath } from "url";
4
- import { dirname } from "path";
5
-
6
- export default tseslint.config(eslint.configs.recommended, tseslint.configs.recommended, {
7
- languageOptions: {
8
- parserOptions: {
9
- project: true,
10
- tsconfigRootDir: dirname(fileURLToPath(import.meta.url)),
11
- },
12
- },
13
- });
package/rollup.config.js DELETED
@@ -1,32 +0,0 @@
1
- import resolve from "@rollup/plugin-node-resolve";
2
- import terser from "@rollup/plugin-terser";
3
- import typescript from "@rollup/plugin-typescript";
4
-
5
- const banner = `/**
6
- * @license MIT
7
- * Copyright (c) 2025 matraic
8
- * See LICENSE file in the project root for full license text.
9
- */`;
10
-
11
- export default [
12
- {
13
- input: "src/index.ts",
14
- output: [
15
- {
16
- file: "dist/index.js",
17
- format: "esm",
18
- sourcemap: true,
19
- banner: banner,
20
- },
21
- {
22
- file: "dist/index.min.js",
23
- format: "esm",
24
- sourcemap: true,
25
- banner: banner,
26
- plugins: [terser({ mangle: true })],
27
- },
28
- ],
29
- external: ["@m3e/core", "@m3e/core/a11y", "@m3e/icon-button", "@m3e/form-field", "lit"],
30
- plugins: [resolve(), typescript()],
31
- },
32
- ];
@@ -1,103 +0,0 @@
1
- import { nothing } from "lit";
2
- import { customElement } from "lit/decorators.js";
3
-
4
- import {
5
- AttachInternals,
6
- Disabled,
7
- DisabledInteractive,
8
- Focusable,
9
- FormSubmitter,
10
- KeyboardClick,
11
- LinkButton,
12
- Role,
13
- } from "@m3e/core";
14
-
15
- import { M3eChipElement } from "./ChipElement";
16
-
17
- /**
18
- * @summary
19
- * A chip users interact with to perform a smart or automated action that can span multiple applications.
20
- *
21
- * @description
22
- * The `m3e-assist-chip` component presents a Material 3 assist chip, providing users with quick access to
23
- * contextually relevant actions. It is designed for use cases like suggested actions, quick filters, or
24
- * secondary operations, and supports accessibility, keyboard interaction, and expressive state styling
25
- * in line with Material 3 guidelines. Appearance variants include `elevated` and `outlined`, enabling visual
26
- * differentiation and contextual emphasis.
27
- *
28
- * @example
29
- * The following example illustrates use of the `m3e-assist-chip`. In this example, multiple chips are nested inside
30
- * a `m3e-chip-set` container to create a cohesive set of chips. The container is given the ARIA `role="group"` to convey
31
- * to assistive technologies that the chips are part of a related set of element.
32
- * ```html
33
- * <m3e-chip-set role="group" aria-label="Quick actions">
34
- * <m3e-assist-chip><m3e-icon slot="icon" name="edit"></m3e-icon>Edit</m3e-assist-chip>
35
- * <m3e-assist-chip><m3e-icon slot="icon" name="delete"></m3e-icon>Delete</m3e-assist-chip>
36
- * <m3e-assist-chip><m3e-icon slot="icon" name="content_copy"></m3e-icon>Copy</m3e-assist-chip>
37
- * <m3e-assist-chip><m3e-icon slot="icon" name="share"></m3e-icon>Share</m3e-assist-chip>
38
- * </m3e-chip-set>
39
- * ```
40
- *
41
- * @tag m3e-assist-chip
42
- *
43
- * @slot - Renders the label of the chip.
44
- * @slot icon - Renders an icon before the chip's label.
45
- *
46
- * @attr disabled - A value indicating whether the element is disabled.
47
- * @attr disabled-interactive - A value indicating whether the element is disabled and interactive.
48
- * @attr download - A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.
49
- * @attr href - The URL to which the link button points.
50
- * @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.
51
- * @attr rel - The relationship between the `target` of the link button and the document.
52
- * @attr target - The target of the link button.
53
- * @attr type - The type of the element.
54
- * @attr value - A string representing the value of the chip.
55
- * @attr variant - The appearance variant of the chip.
56
- *
57
- * @cssprop --m3e-chip-container-shape - Border radius of the chip container.
58
- * @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.
59
- * @cssprop --m3e-chip-label-text-font-size - Font size of the chip label text.
60
- * @cssprop --m3e-chip-label-text-font-weight - Font weight of the chip label text.
61
- * @cssprop --m3e-chip-label-text-line-height - Line height of the chip label text.
62
- * @cssprop --m3e-chip-label-text-tracking - Letter spacing of the chip label text.
63
- * @cssprop --m3e-chip-label-text-color - Label text color in default state.
64
- * @cssprop --m3e-chip-icon-color - Icon color in default state.
65
- * @cssprop --m3e-chip-icon-size - Font size of leading/trailing icons.
66
- * @cssprop --m3e-chip-spacing - Horizontal gap between chip content elements.
67
- * @cssprop --m3e-chip-padding-start - Default start padding when no icon is present.
68
- * @cssprop --m3e-chip-padding-end - Default end padding when no trailing icon is present.
69
- * @cssprop --m3e-chip-with-icon-padding-start - Start padding when leading icon is present.
70
- * @cssprop --m3e-chip-with-icon-padding-end - End padding when trailing icon is present.
71
- * @cssprop --m3e-chip-disabled-label-text-color - Base color for disabled label text.
72
- * @cssprop --m3e-chip-disabled-label-text-opacity - Opacity applied to disabled label text.
73
- * @cssprop --m3e-chip-disabled-icon-color - Base color for disabled icons.
74
- * @cssprop --m3e-chip-disabled-icon-opacity - Opacity applied to disabled icons.
75
- * @cssprop --m3e-elevated-chip-container-color - Background color for elevated variant.
76
- * @cssprop --m3e-elevated-chip-elevation - Elevation level for elevated variant.
77
- * @cssprop --m3e-elevated-chip-hover-elevation - Elevation level on hover.
78
- * @cssprop --m3e-elevated-chip-disabled-container-color - Background color for disabled elevated variant.
79
- * @cssprop --m3e-elevated-chip-disabled-container-opacity - Opacity applied to disabled elevated background.
80
- * @cssprop --m3e-elevated-chip-disabled-elevation - Elevation level for disabled elevated variant.
81
- * @cssprop --m3e-outlined-chip-outline-thickness - Outline thickness for outlined variant.
82
- * @cssprop --m3e-outlined-chip-outline-color - Outline color for outlined variant.
83
- * @cssprop --m3e-outlined-chip-disabled-outline-color - Outline color for disabled outlined variant.
84
- * @cssprop --m3e-outlined-chip-disabled-outline-opacity - Opacity applied to disabled outline.
85
- */
86
- @customElement("m3e-assist-chip")
87
- export class M3eAssistChipElement extends FormSubmitter(
88
- AttachInternals(
89
- LinkButton(KeyboardClick(Focusable(DisabledInteractive(Disabled(Role(M3eChipElement, "button")))))),
90
- true
91
- )
92
- ) {
93
- /** @internal @inheritdoc */
94
- protected override _renderTrailingIcon(): unknown {
95
- return nothing;
96
- }
97
- }
98
-
99
- declare global {
100
- interface HTMLElementTagNameMap {
101
- "m3e-assist-chip": M3eAssistChipElement;
102
- }
103
- }