1050 - Sync IdsTabs and related components with 4.x Alabaster theme changes

[EdwardCoyle]

Explain the details for making this change. What existing problem does the pull request solve?
This PR syncs Header/Vertical/Module tabs styles with changes that were made to accommodate the Alabaster color scheme in the Enterprise components, making them the default in the Web Components.

In addition, some features were added and some bugs fixed in related components:

• Fixed a bug where it was no longer possible to dismiss tabs (specifically in Module Tabs).
• Added an "Add Tab" and "Reset" button to the header tabs example.
• Added "auto-fit" setting to IdsTabsContext in order to allow Vertical Tabs components to stretch the full height of their parent containers.
• Added "orientation" setting to IdsTabsContext component for easier configuration of Vertical Tabs.

Related github/jira issue (required):
Closes #1050

Steps necessary to review your pull request (required):
Pull/build/run, then test the following using the latest Figma design changes as a reference:

Alabaster Design Sync:
Make sure the following sample pages match the provided designs. Test all theme modes (light/dark/contrast):

• http://localhost:4300/ids-tabs/example.html
• http://localhost:4300/ids-tabs/vertical.html
• http://localhost:4300/ids-tabs/header-tabs.html
• http://localhost:4300/ids-tabs/module.html
• http://localhost:4300/ids-header/example.html

Dismissible Tabs bug:

• Open http://localhost:4300/ids-tabs/module.html
• Use the Add Tab "+" button to add enough tabs that the "More Tabs" menu appears
• Try dismissing tabs from both the tabs themselves, and the popup menu, using the "x" button. Both should cause their tabs and panels to be dismissed.

Auto fit/Orientation:

• Open http://localhost:4300/ids-tabs/vertical.html
• See that the Vertical Tabs and the content panels should stretch their entire page height.
• Additionally the whole thing should be "vertical" (the setting is now being passed down from IdsTabsContext)

Included in this Pull Request:

• A note to the change log.

[tmcconechy]

Looks good but a few things on review:

1. the disabled color on http://localhost:4300/ids-tabs/vertical.html in dark mode seems hard to see maybe up it one
2. on http://localhost:4300/ids-tabs/module.html the icons look abit out of alignment

3) on http://localhost:4300/ids-header/example.html in darkmode the placeholder text is hard to see

4. on http://localhost:4300/ids-header/example.html in darkmode if you hover the buttons the hover state is missing

5. http://localhost:4300/ids-tabs/header-tabs.html in dark mode the disabled is hard to see (maybe move it up 1)

6. on http://localhost:4300/ids-tabs/example.html the underline on the selected state is a lot slimmer than on https://main-enterprise.demo.design.infor.com/components/tabs/example-index.html

[EdwardCoyle]

I have some outstanding questions on what's actually approved on the tab designs after discussing, so placing on hold for now: https://www.figma.com/file/gRpli2TgQ3scLE6GF4e2Hz?node-id=199:36686&mode=design#602711280

[EdwardCoyle]

@tmcconechy I think all the points above have been addressed now