@momentum-design/components 0.49.1 → 0.49.3

package/dist/index.d.ts

@@ -1,7 +1,9 @@
 import AlertChip from './components/alertchip';
+import Appheader from './components/appheader';
 import Avatar from './components/avatar';
 import AvatarButton from './components/avatarbutton';
 import Badge from './components/badge';
+import Brandvisual from './components/brandvisual';
 import Bullet from './components/bullet';
 import Button from './components/button';
 import Checkbox from './components/checkbox';
@@ -18,32 +20,31 @@ import Link from './components/link';
 import List from './components/list';
 import ListItem from './components/listitem';
 import Marker from './components/marker';
+import OptGroup from './components/optgroup';
+import Option from './components/option';
 import Popover from './components/popover';
 import Presence from './components/presence';
+import Progressbar from './components/progressbar';
 import Radio from './components/radio';
 import RadioGroup from './components/radiogroup';
+import ScreenreaderAnnouncer from './components/screenreaderannouncer';
+import Searchfield from './components/searchfield';
+import Select from './components/select';
 import Spinner from './components/spinner';
 import Tab from './components/tab';
 import Text from './components/text';
+import Textarea from './components/textarea';
 import ThemeProvider from './components/themeprovider';
 import Toggle from './components/toggle';
 import Tooltip from './components/tooltip';
 import VirtualizedList from './components/virtualizedlist';
-import Progressbar from './components/progressbar';
-import Option from './components/option';
-import OptGroup from './components/optgroup';
-import Textarea from './components/textarea';
-import Searchfield from './components/searchfield';
-import Brandvisual from './components/brandvisual';
-import Appheader from './components/appheader';
-import ScreenreaderAnnouncer from './components/screenreaderannouncer';
+import type { BadgeType } from './components/badge/badge.types';
+import type { ButtonColor, ButtonVariant, IconButtonSize, PillButtonSize } from './components/button/button.types';
+import type { PopoverPlacement } from './components/popover/popover.types';
 import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.types';
 import type { TextType } from './components/text/text.types';
-import type { PopoverPlacement } from './components/popover/popover.types';
-import type { BadgeType } from './components/badge/badge.types';
-import type { IconButtonSize, PillButtonSize, ButtonVariant, ButtonColor } from './components/button/button.types';
-import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
-export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, Textarea, Tooltip, Searchfield, Brandvisual, Appheader, };
+import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
+export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, Textarea, Tooltip, Searchfield, Brandvisual, Appheader, Select, };
 export type { TextType, SpinnerSize, SpinnerVariant, PopoverPlacement, BadgeType, IconButtonSize, PillButtonSize, ButtonVariant, ButtonColor, };
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };

package/dist/index.js

@@ -1,8 +1,10 @@
 // Components Imports
 import AlertChip from './components/alertchip';
+import Appheader from './components/appheader';
 import Avatar from './components/avatar';
 import AvatarButton from './components/avatarbutton';
 import Badge from './components/badge';
+import Brandvisual from './components/brandvisual';
 import Bullet from './components/bullet';
 import Button from './components/button';
 import Checkbox from './components/checkbox';
@@ -19,29 +21,28 @@ import Link from './components/link';
 import List from './components/list';
 import ListItem from './components/listitem';
 import Marker from './components/marker';
+import OptGroup from './components/optgroup';
+import Option from './components/option';
 import Popover from './components/popover';
 import Presence from './components/presence';
+import Progressbar from './components/progressbar';
 import Radio from './components/radio';
 import RadioGroup from './components/radiogroup';
+import ScreenreaderAnnouncer from './components/screenreaderannouncer';
+import Searchfield from './components/searchfield';
+import Select from './components/select';
 import Spinner from './components/spinner';
 import Tab from './components/tab';
 import Text from './components/text';
+import Textarea from './components/textarea';
 import ThemeProvider from './components/themeprovider';
 import Toggle from './components/toggle';
 import Tooltip from './components/tooltip';
 import VirtualizedList from './components/virtualizedlist';
-import Progressbar from './components/progressbar';
-import Option from './components/option';
-import OptGroup from './components/optgroup';
-import Textarea from './components/textarea';
-import Searchfield from './components/searchfield';
-import Brandvisual from './components/brandvisual';
-import Appheader from './components/appheader';
-import ScreenreaderAnnouncer from './components/screenreaderannouncer';
+import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 // Constants / Utils Imports
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './components/button/button.constants';
-import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 // Components Exports
-export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, Textarea, Tooltip, Searchfield, Brandvisual, Appheader, };
+export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, Textarea, Tooltip, Searchfield, Brandvisual, Appheader, Select, };
 // Constants / Utils Exports
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };

package/dist/react/index.d.ts

@@ -6,10 +6,10 @@ export { default as Badge } from './badge';
 export { default as Brandvisual } from './brandvisual';
 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 Chip } from './chip';
 export { default as Coachmark } from './coachmark';
+export { default as Checkbox } from './checkbox';
+export { default as Buttonsimple } from './buttonsimple';
 export { default as Divider } from './divider';
 export { default as FilterChip } from './filterchip';
 export { default as FormfieldGroup } from './formfieldgroup';
@@ -31,6 +31,7 @@ export { default as Radio } from './radio';
 export { default as RadioGroup } from './radiogroup';
 export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
 export { default as Searchfield } from './searchfield';
+export { default as Select } from './select';
 export { default as Spinner } from './spinner';
 export { default as Tab } from './tab';
 export { default as Text } from './text';

package/dist/react/index.js

@@ -6,10 +6,10 @@ export { default as Badge } from './badge';
 export { default as Brandvisual } from './brandvisual';
 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 Chip } from './chip';
 export { default as Coachmark } from './coachmark';
+export { default as Checkbox } from './checkbox';
+export { default as Buttonsimple } from './buttonsimple';
 export { default as Divider } from './divider';
 export { default as FilterChip } from './filterchip';
 export { default as FormfieldGroup } from './formfieldgroup';
@@ -31,6 +31,7 @@ export { default as Radio } from './radio';
 export { default as RadioGroup } from './radiogroup';
 export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
 export { default as Searchfield } from './searchfield';
+export { default as Select } from './select';
 export { default as Spinner } from './spinner';
 export { default as Tab } from './tab';
 export { default as Text } from './text';

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

@@ -29,8 +29,9 @@ import Component from '../../components/listitem';
  * @cssproperty --mdc-listitem-primary-label-color
  *  - Allows customization of the primary label, side header and subline text slot color.
  * @cssproperty --mdc-listitem-secondary-label-color
- *  - Allows customization of the secondary and teritary label text slot color.
+ *  - Allows customization of the secondary and tertiary label text slot color.
  * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.
+ * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.
  *
  * @event click - (React: onClick) This event is dispatched when the listitem is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.

package/dist/react/listitem/index.js

@@ -31,8 +31,9 @@ import { TAG_NAME } from '../../components/listitem/listitem.constants';
  * @cssproperty --mdc-listitem-primary-label-color
  *  - Allows customization of the primary label, side header and subline text slot color.
  * @cssproperty --mdc-listitem-secondary-label-color
- *  - Allows customization of the secondary and teritary label text slot color.
+ *  - Allows customization of the secondary and tertiary label text slot color.
  * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.
+ * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.
  *
  * @event click - (React: onClick) This event is dispatched when the listitem is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.

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

@@ -4,6 +4,10 @@ import Component from '../../components/option';
  * option component, which is used as a list item in a select component.<br/>
  * We can pass an icon which will be displayed in leading position of the option label text.
  *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-tooltip
+ *
  * @tagname mdc-option
  *
  * @slot default - This is a default/unnamed slot

package/dist/react/option/index.js

@@ -6,6 +6,10 @@ import { TAG_NAME } from '../../components/option/option.constants';
  * option component, which is used as a list item in a select component.<br/>
  * We can pass an icon which will be displayed in leading position of the option label text.
  *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-tooltip
+ *
  * @tagname mdc-option
  *
  * @slot default - This is a default/unnamed slot

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

@@ -24,6 +24,8 @@ import Component from '../../components/popover';
  * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover
  * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover
  * @cssproperty --mdc-popover-elevation-3 - elevation of the popover
+ * @cssproperty --mdc-popover-max-width - max width of the popover
+ * @cssproperty --mdc-popover-max-height - max height of the popover
  *
  * @slot - Default slot for the popover content
  *

package/dist/react/popover/index.js

@@ -26,6 +26,8 @@ import { TAG_NAME } from '../../components/popover/popover.constants';
  * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover
  * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover
  * @cssproperty --mdc-popover-elevation-3 - elevation of the popover
+ * @cssproperty --mdc-popover-max-width - max width of the popover
+ * @cssproperty --mdc-popover-max-height - max height of the popover
  *
  * @slot - Default slot for the popover content
  *

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

@@ -0,0 +1,28 @@
+import { type EventName } from '@lit/react';
+import Component from '../../components/select';
+/**
+ * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.
+ * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.
+ * The component ensures accessibility and usability while handling various use cases,
+ * including long text truncation with tooltip support.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-popover
+ * @dependency mdc-text
+ *
+ * @tagname mdc-select
+ *
+ * @slot default - This is a default/unnamed slot for options and/or option group.
+ *
+ * @event click - (React: onClick) This event is dispatched when the select is clicked.
+ * @event change - (React: onChange) This event is dispatched when the select is changed.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.
+ * @event focus - (React: onFocus) This event is dispatched when the select receives focus.
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onChange: EventName<Event>;
+    onClick: EventName<MouseEvent>;
+    onKeyDown: EventName<KeyboardEvent>;
+    onFocus: EventName<FocusEvent>;
+}>;
+export default reactWrapper;

package/dist/react/select/index.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/select';
+import { TAG_NAME } from '../../components/select/select.constants';
+/**
+ * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.
+ * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.
+ * The component ensures accessibility and usability while handling various use cases,
+ * including long text truncation with tooltip support.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-popover
+ * @dependency mdc-text
+ *
+ * @tagname mdc-select
+ *
+ * @slot default - This is a default/unnamed slot for options and/or option group.
+ *
+ * @event click - (React: onClick) This event is dispatched when the select is clicked.
+ * @event change - (React: onChange) This event is dispatched when the select is changed.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.
+ * @event focus - (React: onFocus) This event is dispatched when the select receives focus.
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onChange: 'change',
+        onClick: 'click',
+        onKeyDown: 'keydown',
+        onFocus: 'focus',
+    },
+    displayName: 'Select',
+});
+export default reactWrapper;

package/dist/utils/keys.d.ts

@@ -0,0 +1,12 @@
+declare const KEYS: {
+    readonly ARROW_DOWN: "ArrowDown";
+    readonly ARROW_UP: "ArrowUp";
+    readonly END: "End";
+    readonly ENTER: "Enter";
+    readonly ESCAPE: "Escape";
+    readonly HOME: "Home";
+    readonly PAGE_DOWN: "PageDown";
+    readonly PAGE_UP: "PageUp";
+    readonly SPACE: " ";
+};
+export { KEYS };

package/dist/utils/keys.js

@@ -0,0 +1,12 @@
+const KEYS = {
+    ARROW_DOWN: 'ArrowDown',
+    ARROW_UP: 'ArrowUp',
+    END: 'End',
+    ENTER: 'Enter',
+    ESCAPE: 'Escape',
+    HOME: 'Home',
+    PAGE_DOWN: 'PageDown',
+    PAGE_UP: 'PageUp',
+    SPACE: ' ',
+};
+export { KEYS };

package/dist/utils/styles/index.js

@@ -60,19 +60,17 @@ const hostFocusRingStyles = (applyFocusRingOnClass = false) => {
     return [
         baseHostStyleVariables,
         css `
-      :host(:focus-visible) {
-        outline: none;
-      }
       :host([disabled]:focus) {
         box-shadow: none;
       }
-      :host(:focus) {
+      :host(:focus-visible) {
+        outline: none;
         position: relative;
         box-shadow: ${boxShadow};
       }
       /* High Contrast Mode */
       @media (forced-colors: active) {
-        :host(:focus) {
+        :host(:focus-visible) {
           outline: 0.125rem solid var(--mds-color-theme-focus-default-0);
         }
       }

package/package.json

@@ -39,5 +39,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.49.1"
+  "version": "0.49.3"
 }