@momentum-design/components 0.18.2 → 0.18.4

package/dist/react/badge/index.d.ts

@@ -20,6 +20,18 @@ import Component from '../../components/badge';
  * @dependency mdc-text
  *
  * @tagname mdc-badge
+ *
+ * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.
+ * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.
+ * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.
+ * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.
+ * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.
+ * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.
+ * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.
+ * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.
+ * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.
+ * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.
+ * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/badge/index.js

@@ -23,6 +23,18 @@ import { TAG_NAME } from '../../components/badge/badge.constants';
  * @dependency mdc-text
  *
  * @tagname mdc-badge
+ *
+ * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.
+ * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.
+ * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.
+ * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.
+ * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.
+ * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.
+ * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.
+ * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.
+ * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.
+ * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.
+ * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/dist/react/icon/index.d.ts

@@ -17,7 +17,7 @@ import Component from '../../components/icon';
  * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be
  * `width: 1em; height: 1em`.
  *
- * Regarding accessibility, there are two types of icons: decorative and informative.
+ * Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.
  *
  * ### Decorative Icons
  * - Decorative icons do not convey any essential information to the content of a page.
@@ -28,13 +28,22 @@ import Component from '../../components/icon';
  * - Informative icons convey important information that is not adequately represented
  *   by surrounding text or components.
  * - They provide valuable context and must be announced by assistive technologies.
- * - For informative icons, an `aria-label` is required, and the `role` will be set to "img".
+ * - For informative icons, an `aria-label` is required, and the `role` will be set to "img" automatically.
  * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,
  *   the role will be unset.
  *
+ * ### Informative Standalone Icons
+ * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must
+ * have a Tooltip that describes what it means.
+ * - For informative standalone icons, an `aria-label` & `tabindex="0"` is required,
+ * and the `role` will be set to "img" automatically.
+ * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**
+ *
  * @tagname mdc-icon
  *
  * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.
+ * @cssproperty --mdc-icon-size - Allows customization of the icon size.
+ * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/icon/index.js

@@ -20,7 +20,7 @@ import { TAG_NAME } from '../../components/icon/icon.constants';
  * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be
  * `width: 1em; height: 1em`.
  *
- * Regarding accessibility, there are two types of icons: decorative and informative.
+ * Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.
  *
  * ### Decorative Icons
  * - 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';
  * - Informative icons convey important information that is not adequately represented
  *   by surrounding text or components.
  * - They provide valuable context and must be announced by assistive technologies.
- * - For informative icons, an `aria-label` is required, and the `role` will be set to "img".
+ * - For informative icons, an `aria-label` is required, and the `role` will be set to "img" automatically.
  * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,
  *   the role will be unset.
  *
+ * ### Informative Standalone Icons
+ * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must
+ * have a Tooltip that describes what it means.
+ * - For informative standalone icons, an `aria-label` & `tabindex="0"` is required,
+ * and the `role` will be set to "img" automatically.
+ * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**
+ *
  * @tagname mdc-icon
  *
  * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.
+ * @cssproperty --mdc-icon-size - Allows customization of the icon size.
+ * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/dist/react/index.d.ts

@@ -1,6 +1,6 @@
 export { default as Avatar } from './avatar';
-export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
+export { default as AvatarButton } from './avatarbutton';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as Buttonsimple } from './buttonsimple';

package/dist/react/index.js

@@ -1,6 +1,6 @@
 export { default as Avatar } from './avatar';
-export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
+export { default as AvatarButton } from './avatarbutton';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as Buttonsimple } from './buttonsimple';

package/dist/react/presence/index.d.ts

@@ -9,6 +9,22 @@ import Component from '../../components/presence';
  * @dependency mdc-icon
  *
  * @tagname mdc-presence
+ *
+ * @cssproperty --mdc-presence-active-background-color - The background color of the presence type active.
+ * @cssproperty --mdc-presence-away-background-color - The background color of the presence type away.
+ * @cssproperty --mdc-presence-away-calling-background-color - The background color of the presence type away-calling.
+ * @cssproperty --mdc-presence-busy-background-color - The background color of the presence type busy.
+ * @cssproperty --mdc-presence-dnd-background-color - The background color of the presence type dnd.
+ * @cssproperty --mdc-presence-meeting-background-color - The background color of the presence type meeting.
+ * @cssproperty --mdc-presence-on-call-background-color - The background color of the presence type on-call.
+ * @cssproperty --mdc-presence-on-device-background-color - The background color of the presence type on-device.
+ * @cssproperty --mdc-presence-on-mobile-background-color - The background color of the presence type on-mobile.
+ * @cssproperty --mdc-presence-pause-background-color - The background color of the presence type pause.
+ * @cssproperty --mdc-presence-pto-background-color - The background color of the presence type pto.
+ * @cssproperty --mdc-presence-presenting-background-color - The background color of the presence type presenting.
+ * @cssproperty --mdc-presence-quiet-background-color - The background color of the presence type quiet.
+ * @cssproperty --mdc-presence-scheduled-background-color - The background color of the presence type scheduled.
+ * @cssproperty --mdc-presence-overlay-background-color - The background color of the presence type overlay.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/presence/index.js

@@ -12,6 +12,22 @@ import { TAG_NAME } from '../../components/presence/presence.constants';
  * @dependency mdc-icon
  *
  * @tagname mdc-presence
+ *
+ * @cssproperty --mdc-presence-active-background-color - The background color of the presence type active.
+ * @cssproperty --mdc-presence-away-background-color - The background color of the presence type away.
+ * @cssproperty --mdc-presence-away-calling-background-color - The background color of the presence type away-calling.
+ * @cssproperty --mdc-presence-busy-background-color - The background color of the presence type busy.
+ * @cssproperty --mdc-presence-dnd-background-color - The background color of the presence type dnd.
+ * @cssproperty --mdc-presence-meeting-background-color - The background color of the presence type meeting.
+ * @cssproperty --mdc-presence-on-call-background-color - The background color of the presence type on-call.
+ * @cssproperty --mdc-presence-on-device-background-color - The background color of the presence type on-device.
+ * @cssproperty --mdc-presence-on-mobile-background-color - The background color of the presence type on-mobile.
+ * @cssproperty --mdc-presence-pause-background-color - The background color of the presence type pause.
+ * @cssproperty --mdc-presence-pto-background-color - The background color of the presence type pto.
+ * @cssproperty --mdc-presence-presenting-background-color - The background color of the presence type presenting.
+ * @cssproperty --mdc-presence-quiet-background-color - The background color of the presence type quiet.
+ * @cssproperty --mdc-presence-scheduled-background-color - The background color of the presence type scheduled.
+ * @cssproperty --mdc-presence-overlay-background-color - The background color of the presence type overlay.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/dist/utils/styles/index.js

@@ -53,6 +53,9 @@ const hostFocusRingStyles = (applyFocusRingOnClass = false) => {
     return [
         baseHostStyleVariables,
         css `
+      :host(:focus-visible) {
+        outline: none;
+      }
       :host([disabled]:focus) {
         box-shadow: none;
       }

package/package.json

@@ -36,5 +36,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.18.2"
+  "version": "0.18.4"
 }