@momentum-design/components 0.18.2 → 0.18.4

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.
@@ -20,6 +20,18 @@ import Component from '../../components/badge';
20
20
  * @dependency mdc-text
21
21
  *
22
22
  * @tagname mdc-badge
23
+ *
24
+ * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.
25
+ * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.
26
+ * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.
27
+ * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.
28
+ * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.
29
+ * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.
30
+ * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.
31
+ * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.
32
+ * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.
33
+ * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.
34
+ * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.
23
35
  */
24
36
  declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
25
37
  export default reactWrapper;
@@ -23,6 +23,18 @@ import { TAG_NAME } from '../../components/badge/badge.constants';
23
23
  * @dependency mdc-text
24
24
  *
25
25
  * @tagname mdc-badge
26
+ *
27
+ * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.
28
+ * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.
29
+ * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.
30
+ * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.
31
+ * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.
32
+ * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.
33
+ * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.
34
+ * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.
35
+ * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.
36
+ * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.
37
+ * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.
26
38
  */
27
39
  const reactWrapper = createComponent({
28
40
  tagName: TAG_NAME,
@@ -17,7 +17,7 @@ import Component from '../../components/icon';
17
17
  * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be
18
18
  * `width: 1em; height: 1em`.
19
19
  *
20
- * Regarding accessibility, there are two types of icons: decorative and informative.
20
+ * Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.
21
21
  *
22
22
  * ### Decorative Icons
23
23
  * - Decorative icons do not convey any essential information to the content of a page.
@@ -28,13 +28,22 @@ import Component from '../../components/icon';
28
28
  * - Informative icons convey important information that is not adequately represented
29
29
  * by surrounding text or components.
30
30
  * - They provide valuable context and must be announced by assistive technologies.
31
- * - For informative icons, an `aria-label` is required, and the `role` will be set to "img".
31
+ * - For informative icons, an `aria-label` is required, and the `role` will be set to "img" automatically.
32
32
  * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,
33
33
  * the role will be unset.
34
34
  *
35
+ * ### Informative Standalone Icons
36
+ * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must
37
+ * have a Tooltip that describes what it means.
38
+ * - For informative standalone icons, an `aria-label` & `tabindex="0"` is required,
39
+ * and the `role` will be set to "img" automatically.
40
+ * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**
41
+ *
35
42
  * @tagname mdc-icon
36
43
  *
37
44
  * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.
45
+ * @cssproperty --mdc-icon-size - Allows customization of the icon size.
46
+ * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.
38
47
  */
39
48
  declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
40
49
  export default reactWrapper;
@@ -20,7 +20,7 @@ import { TAG_NAME } from '../../components/icon/icon.constants';
20
20
  * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be
21
21
  * `width: 1em; height: 1em`.
22
22
  *
23
- * Regarding accessibility, there are two types of icons: decorative and informative.
23
+ * Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.
24
24
  *
25
25
  * ### Decorative Icons
26
26
  * - Decorative icons do not convey any essential information to the content of a page.
@@ -31,13 +31,22 @@ import { TAG_NAME } from '../../components/icon/icon.constants';
31
31
  * - Informative icons convey important information that is not adequately represented
32
32
  * by surrounding text or components.
33
33
  * - They provide valuable context and must be announced by assistive technologies.
34
- * - For informative icons, an `aria-label` is required, and the `role` will be set to "img".
34
+ * - For informative icons, an `aria-label` is required, and the `role` will be set to "img" automatically.
35
35
  * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,
36
36
  * the role will be unset.
37
37
  *
38
+ * ### Informative Standalone Icons
39
+ * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must
40
+ * have a Tooltip that describes what it means.
41
+ * - For informative standalone icons, an `aria-label` & `tabindex="0"` is required,
42
+ * and the `role` will be set to "img" automatically.
43
+ * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**
44
+ *
38
45
  * @tagname mdc-icon
39
46
  *
40
47
  * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.
48
+ * @cssproperty --mdc-icon-size - Allows customization of the icon size.
49
+ * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.
41
50
  */
42
51
  const reactWrapper = createComponent({
43
52
  tagName: TAG_NAME,
@@ -1,6 +1,6 @@
1
1
  export { default as Avatar } from './avatar';
2
- export { default as AvatarButton } from './avatarbutton';
3
2
  export { default as Badge } from './badge';
3
+ export { default as AvatarButton } from './avatarbutton';
4
4
  export { default as Bullet } from './bullet';
5
5
  export { default as Button } from './button';
6
6
  export { default as Buttonsimple } from './buttonsimple';
@@ -1,6 +1,6 @@
1
1
  export { default as Avatar } from './avatar';
2
- export { default as AvatarButton } from './avatarbutton';
3
2
  export { default as Badge } from './badge';
3
+ export { default as AvatarButton } from './avatarbutton';
4
4
  export { default as Bullet } from './bullet';
5
5
  export { default as Button } from './button';
6
6
  export { default as Buttonsimple } from './buttonsimple';
@@ -9,6 +9,22 @@ import Component from '../../components/presence';
9
9
  * @dependency mdc-icon
10
10
  *
11
11
  * @tagname mdc-presence
12
+ *
13
+ * @cssproperty --mdc-presence-active-background-color - The background color of the presence type active.
14
+ * @cssproperty --mdc-presence-away-background-color - The background color of the presence type away.
15
+ * @cssproperty --mdc-presence-away-calling-background-color - The background color of the presence type away-calling.
16
+ * @cssproperty --mdc-presence-busy-background-color - The background color of the presence type busy.
17
+ * @cssproperty --mdc-presence-dnd-background-color - The background color of the presence type dnd.
18
+ * @cssproperty --mdc-presence-meeting-background-color - The background color of the presence type meeting.
19
+ * @cssproperty --mdc-presence-on-call-background-color - The background color of the presence type on-call.
20
+ * @cssproperty --mdc-presence-on-device-background-color - The background color of the presence type on-device.
21
+ * @cssproperty --mdc-presence-on-mobile-background-color - The background color of the presence type on-mobile.
22
+ * @cssproperty --mdc-presence-pause-background-color - The background color of the presence type pause.
23
+ * @cssproperty --mdc-presence-pto-background-color - The background color of the presence type pto.
24
+ * @cssproperty --mdc-presence-presenting-background-color - The background color of the presence type presenting.
25
+ * @cssproperty --mdc-presence-quiet-background-color - The background color of the presence type quiet.
26
+ * @cssproperty --mdc-presence-scheduled-background-color - The background color of the presence type scheduled.
27
+ * @cssproperty --mdc-presence-overlay-background-color - The background color of the presence type overlay.
12
28
  */
13
29
  declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
14
30
  export default reactWrapper;
@@ -12,6 +12,22 @@ import { TAG_NAME } from '../../components/presence/presence.constants';
12
12
  * @dependency mdc-icon
13
13
  *
14
14
  * @tagname mdc-presence
15
+ *
16
+ * @cssproperty --mdc-presence-active-background-color - The background color of the presence type active.
17
+ * @cssproperty --mdc-presence-away-background-color - The background color of the presence type away.
18
+ * @cssproperty --mdc-presence-away-calling-background-color - The background color of the presence type away-calling.
19
+ * @cssproperty --mdc-presence-busy-background-color - The background color of the presence type busy.
20
+ * @cssproperty --mdc-presence-dnd-background-color - The background color of the presence type dnd.
21
+ * @cssproperty --mdc-presence-meeting-background-color - The background color of the presence type meeting.
22
+ * @cssproperty --mdc-presence-on-call-background-color - The background color of the presence type on-call.
23
+ * @cssproperty --mdc-presence-on-device-background-color - The background color of the presence type on-device.
24
+ * @cssproperty --mdc-presence-on-mobile-background-color - The background color of the presence type on-mobile.
25
+ * @cssproperty --mdc-presence-pause-background-color - The background color of the presence type pause.
26
+ * @cssproperty --mdc-presence-pto-background-color - The background color of the presence type pto.
27
+ * @cssproperty --mdc-presence-presenting-background-color - The background color of the presence type presenting.
28
+ * @cssproperty --mdc-presence-quiet-background-color - The background color of the presence type quiet.
29
+ * @cssproperty --mdc-presence-scheduled-background-color - The background color of the presence type scheduled.
30
+ * @cssproperty --mdc-presence-overlay-background-color - The background color of the presence type overlay.
15
31
  */
16
32
  const reactWrapper = createComponent({
17
33
  tagName: TAG_NAME,
@@ -53,6 +53,9 @@ const hostFocusRingStyles = (applyFocusRingOnClass = false) => {
53
53
  return [
54
54
  baseHostStyleVariables,
55
55
  css `
56
+ :host(:focus-visible) {
57
+ outline: none;
58
+ }
56
59
  :host([disabled]:focus) {
57
60
  box-shadow: none;
58
61
  }
package/package.json CHANGED
@@ -36,5 +36,5 @@
36
36
  "lit": "^3.2.0",
37
37
  "uuid": "^11.0.5"
38
38
  },
39
- "version": "0.18.2"
39
+ "version": "0.18.4"
40
40
  }