feat(design): create DaffTabsComponent

[xelaint]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/graycoreio/daffodil/blob/develop/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

Component doesn't exist and is needed for docs.

Fixes: #3123

TO DO:

• aria-labelledby needs to be set on <daff-tab-panel> by the id of the corresponding <daff-tab>
• aria-controls set on <daff-tab> using the unique id
• Keyboard accessibility

Expect implementation code to be like this


<daff-tabs>
  <button daff-tab>Tab 1</button>
  <button daff-tab>Tab 2</button>
  <button daff-tab>Tab 3</button>
  <button daff-tab>Tab 4</button>
  <daff-tab-panel>Tab 1 Content</daff-tab-panel>
  <daff-tab-panel>Tab 2 Content</daff-tab-panel>
  <daff-tab-panel>Tab 3 Content</daff-tab-panel>
  <daff-tab-panel>Tab 4 Content</daff-tab-panel>
</daff-tabs>

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

[damienwebdev]

lgtm!