Shoelace: Tab group unclear how to scroll to tabs outside of the currently positioned view

[nathanb21]

Describe the bug

https://shoelace.style/components/tab-group?id=scrolling-tabs has tabs 1-20, but it's not possible to access all of these easily with a mouse. It took me a while to figure out I can use the horizontal scroll on my mouse, and a lot of mice don't offer this functionality.

Also, if the tabs happen to position themselves perfectly in the view, such that you can't tell there's extra tabs, it's not clear that there are more tabs to select from.

This is with the default CSS provided by Shoelace; we can override this, of course.

Expected behavior

• Provide an indication that the tabs can be scrolled.
• Allow scrolling using a mouse if using horizontal tabs

[claviska]

Fixed in 99747711850af3d8b561b99a3f31a1f916d8c205.

[cepages]

Should I be able to get this fix with:

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/shoelace/shoelace.css"
    />
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/shoelace/shoelace.esm.js"
    ></script>

[claviska]

It's in next and will be in beta 10 once that's released — probably sometime this week.

[claviska]

Heads up! 2.0.0-beta.10 has been released.