@momentum-design/components 0.95.8 → 0.96.0

package/dist/index.d.ts

@@ -25,6 +25,7 @@ import IconProvider from './components/iconprovider';
 import Input from './components/input';
 import InputChip from './components/inputchip';
 import Link from './components/link';
+import LinkButton from './components/linkbutton';
 import Linksimple from './components/linksimple';
 import List from './components/list';
 import ListItem from './components/listitem';
@@ -79,6 +80,6 @@ import type { MenuSectionChangeEvent } from './components/menusection/menusectio
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
-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, Stepperitem, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, VirtualizedList, Listheader, SelectListbox, StepperConnector, };
+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, LinkButton, 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, Stepperitem, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, VirtualizedList, Listheader, SelectListbox, StepperConnector, };
 export type { BadgeType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, SkeletonVariant, SelectChangeEvent, SelectInputEvent, SpinnerSize, SpinnerVariant, TextType, };
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIIconsCache, };

package/dist/index.js

@@ -27,6 +27,7 @@ import IconProvider from './components/iconprovider';
 import Input from './components/input';
 import InputChip from './components/inputchip';
 import Link from './components/link';
+import LinkButton from './components/linkbutton';
 import Linksimple from './components/linksimple';
 import List from './components/list';
 import ListItem from './components/listitem';
@@ -74,6 +75,6 @@ import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, }
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 // 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, Stepperitem, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, VirtualizedList, Listheader, SelectListbox, StepperConnector, };
+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, LinkButton, 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, Stepperitem, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, VirtualizedList, Listheader, SelectListbox, StepperConnector, };
 // Constants / Utils Exports
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIIconsCache, };

package/dist/react/index.d.ts

@@ -1,12 +1,12 @@
+export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
 export { default as Appheader } from './appheader';
-export { default as AlertChip } from './alertchip';
 export { default as Avatar } from './avatar';
 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 Brandvisual } from './brandvisual';
 export { default as ButtonGroup } from './buttongroup';
 export { default as ButtonLink } from './buttonlink';
 export { default as Buttonsimple } from './buttonsimple';
@@ -16,9 +16,9 @@ export { default as CardCheckbox } from './cardcheckbox';
 export { default as CardRadio } from './cardradio';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
-export { default as Coachmark } from './coachmark';
 export { default as Dialog } from './dialog';
 export { default as Divider } from './divider';
+export { default as Coachmark } from './coachmark';
 export { default as FilterChip } from './filterchip';
 export { default as FormfieldGroup } from './formfieldgroup';
 export { default as FormfieldWrapper } from './formfieldwrapper';
@@ -27,6 +27,7 @@ export { default as IconProvider } from './iconprovider';
 export { default as Input } from './input';
 export { default as InputChip } from './inputchip';
 export { default as Link } from './link';
+export { default as LinkButton } from './linkbutton';
 export { default as Linksimple } from './linksimple';
 export { default as List } from './list';
 export { default as Listheader } from './listheader';

package/dist/react/index.js

@@ -1,12 +1,12 @@
+export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
 export { default as Appheader } from './appheader';
-export { default as AlertChip } from './alertchip';
 export { default as Avatar } from './avatar';
 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 Brandvisual } from './brandvisual';
 export { default as ButtonGroup } from './buttongroup';
 export { default as ButtonLink } from './buttonlink';
 export { default as Buttonsimple } from './buttonsimple';
@@ -16,9 +16,9 @@ export { default as CardCheckbox } from './cardcheckbox';
 export { default as CardRadio } from './cardradio';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
-export { default as Coachmark } from './coachmark';
 export { default as Dialog } from './dialog';
 export { default as Divider } from './divider';
+export { default as Coachmark } from './coachmark';
 export { default as FilterChip } from './filterchip';
 export { default as FormfieldGroup } from './formfieldgroup';
 export { default as FormfieldWrapper } from './formfieldwrapper';
@@ -27,6 +27,7 @@ export { default as IconProvider } from './iconprovider';
 export { default as Input } from './input';
 export { default as InputChip } from './inputchip';
 export { default as Link } from './link';
+export { default as LinkButton } from './linkbutton';
 export { default as Linksimple } from './linksimple';
 export { default as List } from './list';
 export { default as Listheader } from './listheader';

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

@@ -0,0 +1,38 @@
+import { type EventName } from '@lit/react';
+import Component from '../../components/linkbutton';
+/**
+ * `mdc-linkbutton` visually mimics a hyperlink while functioning as a button. It blends the appearance of `mdc-link` with the accessibility and interaction capabilities of `mdc-button`.
+ *
+ * ### Features:
+ * - Looks like a link, behaves like a button.
+ * - Supports slots for a text label and an optional trailing icon.
+ * - Inherits accessibility and keyboard interaction behavior from `mdc-buttonsimple`.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-linkbutton
+ *
+ * @slot - Text label of the linkbutton.
+ *
+ * @event click - (React: onClick) This event is dispatched when the linkbutton is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the linkbutton.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the linkbutton.
+ * @event focus - (React: onFocus) This event is dispatched when the linkbutton receives focus.
+ *
+ * @cssproperty --mdc-link-border-radius - Border radius of the linkbutton.
+ * @cssproperty --mdc-link-color-active - Color of the linkbutton’s child content in the active state.
+ * @cssproperty --mdc-link-color-disabled - Color of the linkbutton’s child content in the disabled state.
+ * @cssproperty --mdc-link-color-hover - Color of the linkbutton’s child content in the hover state.
+ * @cssproperty --mdc-link-color-normal - Color of the linkbutton’s child content in the normal state.
+ * @cssproperty --mdc-link-inverted-color-active - Color of the inverted linkbutton’s child content in the active state.
+ * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted linkbutton’s child content in the disabled state.
+ * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted linkbutton’s child content in the hover state.
+ * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted linkbutton’s child content in the normal state.
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onClick: EventName<MouseEvent>;
+    onKeyDown: EventName<KeyboardEvent>;
+    onKeyUp: EventName<KeyboardEvent>;
+    onFocus: EventName<FocusEvent>;
+}>;
+export default reactWrapper;

package/dist/react/linkbutton/index.js

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/linkbutton';
+import { TAG_NAME } from '../../components/linkbutton/linkbutton.constants';
+/**
+ * `mdc-linkbutton` visually mimics a hyperlink while functioning as a button. It blends the appearance of `mdc-link` with the accessibility and interaction capabilities of `mdc-button`.
+ *
+ * ### Features:
+ * - Looks like a link, behaves like a button.
+ * - Supports slots for a text label and an optional trailing icon.
+ * - Inherits accessibility and keyboard interaction behavior from `mdc-buttonsimple`.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-linkbutton
+ *
+ * @slot - Text label of the linkbutton.
+ *
+ * @event click - (React: onClick) This event is dispatched when the linkbutton is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the linkbutton.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the linkbutton.
+ * @event focus - (React: onFocus) This event is dispatched when the linkbutton receives focus.
+ *
+ * @cssproperty --mdc-link-border-radius - Border radius of the linkbutton.
+ * @cssproperty --mdc-link-color-active - Color of the linkbutton’s child content in the active state.
+ * @cssproperty --mdc-link-color-disabled - Color of the linkbutton’s child content in the disabled state.
+ * @cssproperty --mdc-link-color-hover - Color of the linkbutton’s child content in the hover state.
+ * @cssproperty --mdc-link-color-normal - Color of the linkbutton’s child content in the normal state.
+ * @cssproperty --mdc-link-inverted-color-active - Color of the inverted linkbutton’s child content in the active state.
+ * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted linkbutton’s child content in the disabled state.
+ * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted linkbutton’s child content in the hover state.
+ * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted linkbutton’s child content in the normal state.
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onClick: 'click',
+        onKeyDown: 'keydown',
+        onKeyUp: 'keyup',
+        onFocus: 'focus',
+    },
+    displayName: 'LinkButton',
+});
+export default reactWrapper;

package/package.json

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