@momentum-design/components 0.18.3 → 0.18.5

package/dist/index.d.ts

@@ -11,6 +11,7 @@ import Marker from './components/marker';
 import Divider from './components/divider';
 import AvatarButton from './components/avatarbutton';
 import Link from './components/link';
+import Checkbox from './components/checkbox';
 import type { TextType } from './components/text/text.types';
-export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, AvatarButton, Link, };
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, AvatarButton, Link, Checkbox, };
 export type { TextType, };

package/dist/index.js

@@ -11,4 +11,5 @@ import Marker from './components/marker';
 import Divider from './components/divider';
 import AvatarButton from './components/avatarbutton';
 import Link from './components/link';
-export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, AvatarButton, Link, };
+import Checkbox from './components/checkbox';
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, AvatarButton, Link, Checkbox, };

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/checkbox/index.d.ts

@@ -0,0 +1,27 @@
+import Component from '../../components/checkbox';
+/**
+ * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.
+ * These are often used in forms, settings, and selections in lists.
+ *
+ * A checkbox component contains an optional label and an optional helper text.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-checkbox
+ *
+ * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.
+ * @cssproperty --mdc-checkbox-border-color - Border color in high contrast.
+ * @cssproperty --mdc-checkbox-checked-background-color - Background color for a selected checkbox.
+ * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.
+ * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.
+ * @cssproperty --mdc-checkbox-disabled-background-color - Background color for a disabled checkbox.
+ * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.
+ * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.
+ * @cssproperty --mdc-checkbox-disabled-icon-color - Icon color for a disabled checkbox.
+ * @cssproperty --mdc-checkbox-icon-background-color - Background color for an unselected checkbox.
+ * @cssproperty --mdc-checkbox-icon-border-color - Default background color for an unselected checkbox.
+ * @cssproperty --mdc-checkbox-icon-color - Icon color for an unselected checkbox.
+ * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/checkbox/index.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/checkbox';
+import { TAG_NAME } from '../../components/checkbox/checkbox.constants';
+/**
+ * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.
+ * These are often used in forms, settings, and selections in lists.
+ *
+ * A checkbox component contains an optional label and an optional helper text.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-checkbox
+ *
+ * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.
+ * @cssproperty --mdc-checkbox-border-color - Border color in high contrast.
+ * @cssproperty --mdc-checkbox-checked-background-color - Background color for a selected checkbox.
+ * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.
+ * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.
+ * @cssproperty --mdc-checkbox-disabled-background-color - Background color for a disabled checkbox.
+ * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.
+ * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.
+ * @cssproperty --mdc-checkbox-disabled-icon-color - Icon color for a disabled checkbox.
+ * @cssproperty --mdc-checkbox-icon-background-color - Background color for an unselected checkbox.
+ * @cssproperty --mdc-checkbox-icon-border-color - Default background color for an unselected checkbox.
+ * @cssproperty --mdc-checkbox-icon-color - Icon color for an unselected checkbox.
+ * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'Checkbox',
+});
+export default reactWrapper;

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

@@ -42,6 +42,8 @@ import Component from '../../components/icon';
  * @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

@@ -45,6 +45,8 @@ import { TAG_NAME } from '../../components/icon/icon.constants';
  * @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

@@ -4,6 +4,7 @@ export { default as Badge } from './badge';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as Buttonsimple } from './buttonsimple';
+export { default as Checkbox } from './checkbox';
 export { default as Divider } from './divider';
 export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Icon } from './icon';

package/dist/react/index.js

@@ -4,6 +4,7 @@ export { default as Badge } from './badge';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as Buttonsimple } from './buttonsimple';
+export { default as Checkbox } from './checkbox';
 export { default as Divider } from './divider';
 export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Icon } from './icon';

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/mixins/DataAriaLabelMixin.d.ts

@@ -0,0 +1,6 @@
+import { LitElement } from 'lit';
+import type { Constructor } from './index.types';
+export interface DataAriaLabelMixinInterface {
+    dataAriaLabel: string | null;
+}
+export declare const DataAriaLabelMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<DataAriaLabelMixinInterface> & T;

package/dist/utils/mixins/DataAriaLabelMixin.js

@@ -0,0 +1,29 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { property } from 'lit/decorators.js';
+export const DataAriaLabelMixin = (superClass) => {
+    class InnerMixinClass extends superClass {
+        constructor() {
+            super(...arguments);
+            /**
+             * Defines a string value that labels the current element.
+             * The Aria-Label attribute to be set for accessibility.
+             * @default null
+             */
+            this.dataAriaLabel = null;
+        }
+    }
+    __decorate([
+        property({ type: String, reflect: true, attribute: 'data-aria-label' }),
+        __metadata("design:type", Object)
+    ], InnerMixinClass.prototype, "dataAriaLabel", void 0);
+    // Cast return type to your mixin's interface intersected with the superClass type
+    return InnerMixinClass;
+};

package/package.json

@@ -36,5 +36,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.18.3"
+  "version": "0.18.5"
 }