SelectionIndicator

A mark of the selected item, such as a bar under the selected tab, which moves to the next item when the selection changes.

Overview

Activity

Settings and privacy

The overview view.

<script>
  import SelectionIndicator from '@brumate/ui/SelectionIndicator.brm';
  import Tab from '@brumate/ui/Tab.brm';
  import TabList from '@brumate/ui/TabList.brm';
  import TabPanel from '@brumate/ui/TabPanel.brm';
  import Tabs from '@brumate/ui/Tabs.brm';

  const views = ['Overview', 'Activity', 'Settings and privacy'];
</script>

<Tabs>
  <TabList class="ui-tablist ui-tablist-sliding" aria-label="Views">
    #for (view of views by view) {
      <Tab id=view class="ui-tab">{view}<SelectionIndicator class="ui-indicator" /></Tab>
    }
  </TabList>
  #for (view of views by view) {
    <TabPanel id=view class="ui-tabpanel">The {view.toLowerCase()} view.</TabPanel>
  }
</Tabs>

<Tab id="overview">
  Overview
  <SelectionIndicator class="bar" />
</Tab>

.bar {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  transition-duration: 0.25s;
}

Put a SelectionIndicator in each item that can be selected: a Tab, a ToggleButton in a group, a Radio, a ListBoxItem, a GridListItem or a Tag.
It renders only in the selected item, with data-selection-indicator and data-selected, and is hidden from screen readers, since the item says that it is selected.
as sets its element, a <span> by default.

The move

When the selection changes, the indicator of the new item moves from where the last one was, in the same list or group.

Its CSS sets the move: transition-duration and transition-timing-function. With no duration, it does not move, so a page that wants no motion sets none.
It does not move when the user asks for less motion.
It moves with a transform, from the place and the size of the last indicator, so the item needs no layout of its own for it.