@momentum-design/components 0.92.1 → 0.92.3

package/dist/index.d.ts

@@ -64,6 +64,7 @@ import ToggleTip from './components/toggletip';
 import Tooltip from './components/tooltip';
 import VirtualizedList from './components/virtualizedlist';
 import Listheader from './components/listheader';
+import SelectListbox from './components/selectlistbox';
 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';
@@ -75,6 +76,6 @@ import type { MenuSectionChangeEvent } from './components/menusection/menusectio
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
-export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, VirtualizedList, Listheader, };
+export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, VirtualizedList, Listheader, SelectListbox, };
 export type { BadgeType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, SkeletonVariant, SpinnerSize, SpinnerVariant, TextType, };
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIIconsCache, };

package/dist/index.js

@@ -66,11 +66,12 @@ import ToggleTip from './components/toggletip';
 import Tooltip from './components/tooltip';
 import VirtualizedList from './components/virtualizedlist';
 import Listheader from './components/listheader';
+import SelectListbox from './components/selectlistbox';
 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 { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
 // Components Exports
-export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, VirtualizedList, Listheader, };
+export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, VirtualizedList, Listheader, SelectListbox, };
 // Constants / Utils Exports
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIIconsCache, };

package/dist/react/index.d.ts

@@ -6,10 +6,10 @@ export { default as AvatarButton } from './avatarbutton';
 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 ButtonGroup } from './buttongroup';
 export { default as ButtonLink } from './buttonlink';
 export { default as Buttonsimple } from './buttonsimple';
+export { default as Button } from './button';
 export { default as Card } from './card';
 export { default as CardButton } from './cardbutton';
 export { default as CardCheckbox } from './cardcheckbox';
@@ -51,6 +51,7 @@ 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 Selectlistbox } from './selectlistbox';
 export { default as SideNavigation } from './sidenavigation';
 export { default as Skeleton } from './skeleton';
 export { default as Spinner } from './spinner';

package/dist/react/index.js

@@ -6,10 +6,10 @@ export { default as AvatarButton } from './avatarbutton';
 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 ButtonGroup } from './buttongroup';
 export { default as ButtonLink } from './buttonlink';
 export { default as Buttonsimple } from './buttonsimple';
+export { default as Button } from './button';
 export { default as Card } from './card';
 export { default as CardButton } from './cardbutton';
 export { default as CardCheckbox } from './cardcheckbox';
@@ -51,6 +51,7 @@ 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 Selectlistbox } from './selectlistbox';
 export { default as SideNavigation } from './sidenavigation';
 export { default as Skeleton } from './skeleton';
 export { default as Spinner } from './spinner';

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

@@ -8,6 +8,8 @@ import Component from '../../components/select';
  *
  * To set a default option, use the `selected` attribute on the `mdc-option` element.
  *
+ * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.
+ *
  * @dependency mdc-button
  * @dependency mdc-icon
  * @dependency mdc-popover

package/dist/react/select/index.js

@@ -10,6 +10,8 @@ import { TAG_NAME } from '../../components/select/select.constants';
  *
  * To set a default option, use the `selected` attribute on the `mdc-option` element.
  *
+ * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.
+ *
  * @dependency mdc-button
  * @dependency mdc-icon
  * @dependency mdc-popover

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

@@ -0,0 +1,15 @@
+import Component from '../../components/selectlistbox';
+/**
+ * Selectlistbox component as Light DOM component to act as a simple wrapper
+ * for mdc-option components to ensure accessibility and proper role assignment.
+ *
+ * Once [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers, this component can be removed
+ * and mdc-option can be used directly in the select component with a listbox in a different
+ * shadow root and aria-owns attribute to connect them.
+ *
+ * @tagname mdc-selectlistbox
+ *
+ * @slot default - This is a default/unnamed slot, which can be used to insert mdc-option components.
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/selectlistbox/index.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/selectlistbox';
+import { TAG_NAME } from '../../components/selectlistbox/selectlistbox.constants';
+/**
+ * Selectlistbox component as Light DOM component to act as a simple wrapper
+ * for mdc-option components to ensure accessibility and proper role assignment.
+ *
+ * Once [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers, this component can be removed
+ * and mdc-option can be used directly in the select component with a listbox in a different
+ * shadow root and aria-owns attribute to connect them.
+ *
+ * @tagname mdc-selectlistbox
+ *
+ * @slot default - This is a default/unnamed slot, which can be used to insert mdc-option components.
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'Selectlistbox',
+});
+export default reactWrapper;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.92.1",
+  "version": "0.92.3",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"