sp-tabs

NPM 1.0.1

View Storybook

Try it on webcomponents.dev

Overview

API

Changelog

Description

The <sp-tabs> displays a list of <sp-tab> element children as role="tablist". An <sp-tab> element is associated with a sibling <sp-tab-panel> element via their value attribute. When an <sp-tab> element is selected, the associated <sp-tab-panel> will also be selected, showing that panel and hiding the others.

Usage

yarn add @spectrum-web-components/tabs

Import the side effectful registration of <sp-tabs>, <sp-tab> or <sp-tab-panel> via:

import '@spectrum-web-components/tabs/sp-tabs.js';
import '@spectrum-web-components/tabs/sp-tab.js';
import '@spectrum-web-components/tabs/sp-tab-panel.js';

When looking to leverage the Tabs, Tab, or TabPanel base class as a type and/or for extension purposes, do so via:

import {
    Tabs,
    Tab,
    TabPanel
} from '@spectrum-web-components/tabs';

Sizes

Small

<sp-tabs selected="1" size="s">
    <sp-tab label="Tab 1" value="1"></sp-tab>
    <sp-tab label="Tab 2" value="2"></sp-tab>
    <sp-tab label="Tab 3" value="3"></sp-tab>
    <sp-tab label="Tab 4" value="4"></sp-tab>
    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>

Medium

<sp-tabs selected="1" size="m">
    <sp-tab label="Tab 1" value="1"></sp-tab>
    <sp-tab label="Tab 2" value="2"></sp-tab>
    <sp-tab label="Tab 3" value="3"></sp-tab>
    <sp-tab label="Tab 4" value="4"></sp-tab>
    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>

Large

<sp-tabs selected="1" size="l">
    <sp-tab label="Tab 1" value="1"></sp-tab>
    <sp-tab label="Tab 2" value="2"></sp-tab>
    <sp-tab label="Tab 3" value="3"></sp-tab>
    <sp-tab label="Tab 4" value="4"></sp-tab>
    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>

Extra Large

<sp-tabs selected="1" size="xl">
    <sp-tab label="Tab 1" value="1"></sp-tab>
    <sp-tab label="Tab 2" value="2"></sp-tab>
    <sp-tab label="Tab 3" value="3"></sp-tab>
    <sp-tab label="Tab 4" value="4"></sp-tab>
    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>

Horizontal Tabs

An <sp-tabs> element will display horizontally by default. It can be modified with states like compact, disabled, and quiet, or with content like icons, etc.

Compact

Compact tabs should never be used without the quiet variation. Please use Quiet + Compact Tabs instead.

<sp-tabs selected="1" compact>
    <sp-tab label="Tab 1" value="1"></sp-tab>
    <sp-tab label="Tab 2" value="2"></sp-tab>
    <sp-tab label="Tab 3" value="3"></sp-tab>
    <sp-tab label="Tab 4" value="4"></sp-tab>
    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>

Disabled

When an <sp-tabs> element is given the disabled attribute its <sp-tab> children will be disabled as well, preventing a visitor from changing the selected tab. By default, <sp-tab-panel> children will not be addressed and the available content of the currently selected tab will be fully visible.

<sp-tabs selected="2" disabled>
    <sp-tab label="Tab 1" value="1"></sp-tab>
    <sp-tab label="Tab 2" value="2"></sp-tab>
    <sp-tab label="Tab 3" value="3"></sp-tab>
    <sp-tab label="Tab 4" value="4"></sp-tab>
    <sp-tab-panel value="1">Content for Tab 1 is not selectable</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2 is selected</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3 is not selectable</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4 is not selectable</sp-tab-panel>
</sp-tabs>

Icons

<sp-tabs selected="1">
    <sp-tab label="Tab 1" value="1">
        <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
    </sp-tab>
    <sp-tab label="Tab 2" value="2">
        <sp-icon-close slot="icon"></sp-icon-close>
    </sp-tab>
    <sp-tab label="Tab 3" value="3">
        <sp-icon-chevron-down slot="icon"></sp-icon-chevron-down>
    </sp-tab>
    <sp-tab label="Tab 4" value="4">
        <sp-icon-help slot="icon"></sp-icon-help>
    </sp-tab>
    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>

Quiet

<sp-tabs selected="1" quiet>
    <sp-tab label="Tab 1" value="1"></sp-tab>
    <sp-tab label="Tab 2" value="2"></sp-tab>
    <sp-tab label="Tab 3" value="3"></sp-tab>
    <sp-tab label="Tab 4" value="4"></sp-tab>
    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>

Quiet + Compact

<sp-tabs selected="1" quiet compact>
    <sp-tab label="Tab 1" value="1"></sp-tab>
    <sp-tab label="Tab 2" value="2"></sp-tab>
    <sp-tab label="Tab 3" value="3"></sp-tab>
    <sp-tab label="Tab 4" value="4"></sp-tab>
    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>

Vertical Tabs

An <sp-tabs> element will display horizontally by default. It can be modified with states like compact, disabled, and quiet, or with content like icons, etc.

Compact

Compact tabs should never be used without the quiet variation. Please use Quiet + Compact Tabs instead.

<sp-tabs selected="1" compact direction="vertical">
    <sp-tab label="Tab 1" value="1"></sp-tab>
    <sp-tab label="Tab 2" value="2"></sp-tab>
    <sp-tab label="Tab 3" value="3"></sp-tab>
    <sp-tab label="Tab 4" value="4"></sp-tab>
    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>

Disabled

<sp-tabs selected="2" disabled direction="vertical">
    <sp-tab label="Tab 1" value="1"></sp-tab>
    <sp-tab label="Tab 2" value="2"></sp-tab>
    <sp-tab label="Tab 3" value="3"></sp-tab>
    <sp-tab label="Tab 4" value="4"></sp-tab>
    <sp-tab-panel value="1">Content for Tab 1 is not selectable</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2 is selected</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3 is not selectable</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4 is not selectable</sp-tab-panel>
</sp-tabs>

Icons

<sp-tabs selected="1" direction="vertical">
    <sp-tab label="Tab 1" value="1">
        <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
    </sp-tab>
    <sp-tab label="Tab 2" value="2">
        <sp-icon-close slot="icon"></sp-icon-close>
    </sp-tab>
    <sp-tab label="Tab 3" value="3">
        <sp-icon-chevron-down slot="icon"></sp-icon-chevron-down>
    </sp-tab>
    <sp-tab label="Tab 4" value="4">
        <sp-icon-help slot="icon"></sp-icon-help>
    </sp-tab>
    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>

Quiet

<sp-tabs selected="1" quiet direction="vertical">
    <sp-tab label="Tab 1" value="1"></sp-tab>
    <sp-tab label="Tab 2" value="2"></sp-tab>
    <sp-tab label="Tab 3" value="3"></sp-tab>
    <sp-tab label="Tab 4" value="4"></sp-tab>
    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>

Quiet + Compact

<sp-tabs selected="1" quiet compact direction="vertical">
    <sp-tab label="Tab 1" value="1"></sp-tab>
    <sp-tab label="Tab 2" value="2"></sp-tab>
    <sp-tab label="Tab 3" value="3"></sp-tab>
    <sp-tab label="Tab 4" value="4"></sp-tab>
    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>

Accessibility

When an <sp-tabs> has a selected value, the <sp-tab> child of that value will be given [tabindex="0"] and will receive initial focus when tabbing into the <sp-tabs> element. When no selected value is present, the first <sp-tab> child will be treated in this way. When focus is currently within the <sp-tabs> element, the left and right arrows will move that focus back and forth through the available <sp-tab> children.

Attributes and Properties

Property

Attribute

Type

Default

Description

auto

boolean

false

Whether to activate a tab on keyboard focus or not.

By default a tab is activated via a "click" interaction. This is specifically intended for when tab content cannot be displayed instantly, e.g. not all of the DOM content is available, etc. To learn more about "Deciding When to Make Selection Automatically Follow Focus", visit: https://w3c.github.io/aria-practices/#kbd_selection_follows_focus

compact

boolean

false

The tab items are displayed closer together.

direction

'vertical' | 'vertical-right' | 'horizontal'

'horizontal'

disabled

boolean

false

Disable this control. It will not receive focus or events

emphasized

boolean

false

enableTabsScroll

boolean

false

label

string

''

quiet

boolean

false

The tab list is displayed without a border.

tabIndex

number

The tab index to apply to this control. See general documentation about the tabindex HTML property

Slots

Name

Description

default slot

Tab elements to manage as a group

tab-panel

Tab Panel elements related to the listed Tab elements

Events

Name

Type

Description

change

Event

The selected Tab child has changed.

1.0.1 (2024-11-11)

Note: Version bump only for package @spectrum-web-components/tabs

1.0.0 (2024-10-31)

Note: Version bump only for package @spectrum-web-components/tabs

0.49.0 (2024-10-15)

Bug Fixes

tabs: scroll exceeding tabs limit (#4722) (fc9a448)

0.48.1 (2024-10-01)

Note: Version bump only for package @spectrum-web-components/tabs

0.48.0 (2024-09-17)

Note: Version bump only for package @spectrum-web-components/tabs

0.47.2 (2024-09-03)

Note: Version bump only for package @spectrum-web-components/tabs

0.47.1 (2024-08-27)

Note: Version bump only for package @spectrum-web-components/tabs

0.47.0 (2024-08-20)

Note: Version bump only for package @spectrum-web-components/tabs

0.46.0 (2024-08-08)

Note: Version bump only for package @spectrum-web-components/tabs

0.45.0 (2024-07-30)

Bug Fixes

tabs: prevent vertical auto scroll (#4613) (e1ef097)

0.44.0 (2024-07-15)

Note: Version bump only for package @spectrum-web-components/tabs

0.43.0 (2024-06-11)

Note: Version bump only for package @spectrum-web-components/tabs

0.42.5 (2024-05-24)

Note: Version bump only for package @spectrum-web-components/tabs

0.42.4 (2024-05-14)

Note: Version bump only for package @spectrum-web-components/tabs

0.42.3 (2024-05-01)

Note: Version bump only for package @spectrum-web-components/tabs

0.42.2 (2024-04-03)

Note: Version bump only for package @spectrum-web-components/tabs

0.42.1 (2024-04-02)

Note: Version bump only for package @spectrum-web-components/tabs

0.42.0 (2024-03-19)

Bug Fixes

styles, theme: surface exports that omit Spectrum Vars proactively (#4142) (5b524c1)
tab-overflow: improve tab navigation experience and support custom aria labels (#4165) (9c9bf95)

Features

asset: use core tokens (99e76f4)

0.41.2 (2024-03-05)

Note: Version bump only for package @spectrum-web-components/tabs

0.41.1 (2024-02-22)

Bug Fixes

tabs: bring selected tab into view (#4032) (a187057)

0.41.0 (2024-02-13)

Note: Version bump only for package @spectrum-web-components/tabs

0.40.5 (2024-02-05)

Bug Fixes

tabs: account for the indicator bar in the overflow decorator (f4a8744)

0.40.4 (2024-01-29)

Note: Version bump only for package @spectrum-web-components/tabs

0.40.3 (2024-01-11)

Note: Version bump only for package @spectrum-web-components/tabs

0.40.2 (2023-12-18)

Note: Version bump only for package @spectrum-web-components/tabs

0.40.1 (2023-12-05)

Bug Fixes

tabs: prevent vertical scrolling in overflow tabs (eb0592f)

0.40.0 (2023-11-16)

Note: Version bump only for package @spectrum-web-components/tabs

0.39.4 (2023-11-02)

Note: Version bump only for package @spectrum-web-components/tabs

0.39.3 (2023-10-18)

Note: Version bump only for package @spectrum-web-components/tabs

0.39.2 (2023-10-13)

Note: Version bump only for package @spectrum-web-components/tabs

0.39.1 (2023-10-06)

Note: Version bump only for package @spectrum-web-components/tabs

0.39.0 (2023-09-25)

Note: Version bump only for package @spectrum-web-components/tabs

0.38.0 (2023-09-05)

Note: Version bump only for package @spectrum-web-components/tabs

0.37.0 (2023-08-18)

Note: Version bump only for package @spectrum-web-components/tabs

0.36.0 (2023-08-18)

Note: Version bump only for package @spectrum-web-components/tabs

0.35.0 (2023-07-31)

Bug Fixes

tabs: allow bi-directional arrow key navigation in both orientations (#3410) (ea10049)

0.34.0 (2023-07-11)

Features

tabs,top-nav: use Core Tokens (c6ba355)

0.33.2 (2023-06-14)

Note: Version bump only for package @spectrum-web-components/tabs

0.33.0 (2023-06-08)

Note: Version bump only for package @spectrum-web-components/tabs

0.32.0 (2023-06-01)

Note: Version bump only for package @spectrum-web-components/tabs

0.31.0 (2023-05-17)

Note: Version bump only for package @spectrum-web-components/tabs

0.30.0 (2023-05-03)

Bug Fixes

allow "updateComplete" to resolve to a boolean like the LitElement default (6127946)
allow Tab elements to accept slotted DOM content (29c9517)
check if current selected value exists before setting selected attr (1878ca3)
correct @element jsDoc listing across library (c97a632)
ensure browser understandable extensions (f4e59f7)
ensure that updates to Tab element content update the Selection Indicator (94891eb)
extract and share tshirt size styles (3acfc30)
extract and share tshirt size styles (b1440f7)
include default export in the "exports" fields (f32407d)
include the "types" entry in package.json files (b432f59)
keep compact property (904df71)
keep compact property (b5af15f)
manually support WHCM in tabs (11884f1)
move hover/focus hoisting into conditioning (15ac2f7)
proper overflow rtl support (9b1c9d4)
remove attribute binding logic (1f6833f)
remove attribute binding logic (7bce0ae)
stop merging selectors in a way that alters the cascade (369388f)
support matching keydown to [dir] (70b40a9)
tab indicator positioning (8c20769)
tabs: add "emphasized" and correct WHCM delivery (27940bd)
tabs: add "quiet", "compact", and "emphasized" "direction=vertical" (26fff53)
tabs: add "tablist" part to manage list styles (bbf8074)
tabs: added test (7d5f41f)
tabs: bind tabindicator update to dir value (09598b5)
tabs: bind tabs overflow state with sp-tabs (a07c45b)
tabs: bind tabs overflow state with sp-tabs (570a2cd)
tabs: correct entry focus element (64407d3)
tabs: correct indicator size by scaling from 100px (a3fb68b)
tabs: ensure only one active tab stop in the tabs (68b2523)
tabs: ensure tabs has layout (7aba515)
tabs: ensure that "auto" attribute is respected (d200775)
tabs: error on click - undefined tab target (9742227)
tabs: include sp-tab-panel.js in the export map (1619ae8)
tabs: manage disabled state on tabs and tab elements (58def1f)
tabs: update css workarounds (c2a17e0)
top-nav: prototype top-nav pattern (9708f6f)
update indicator animation for loading and content direction (f607f8b)
update latest Spectrum CSS beta releases (d8d3acc)
update side effect listings (8160d3a)
update to latest spectrum-css packages (a5ca19f)
use CSS position relative and revert Tabs.ts changes (a682bcf)
use latest @spectrum-css/* versions (c35eb86)
use ObserveSlotText mixin to prevent white space from overriding label attribute (610fb4b)
use typescript@^4.5 for "native" document.fonts typings (a3e4aea)

Features

action-button: add action button pattern (03ac00a)
adopt DNA@7 base Spectrum CSS (e08cafd)
apply sizedMixin for t-shirt sizing (d7b63fb)
icons-workflow: vend fully registered icon components (941f3a4)
include all Dev Mode files in side effects (f70817c)
leverage "exports" field in package.json (321abd7)
shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
tabs-overflow: address comments (b0e3398)
tabs-overflow: first round implementation of sp-tabs-overflow (c5b589a)
tabs: add sp-tab-panel element (b17d276)
tabs: add test coverage, remove unused property from component class (9933ad8)
tabs: add test coverage, update import paths (d104b52)
tabs: moving tabs overflow under tabs package (a18c692)
tabs: update bundle setup and readme (0249b94)
tabs: update imports to get correct coverage (2e421cd)
tabs: update spectrum css input (d875a0c)
update card and tabs to latest spectrum-css (55b8d67)
update lit-* dependencies, wip (377f3c8)
update to Spectrum CSS v3.0.0 (e8b3d8f)
use latest exports specification (a7ecf4b)
use SixedMixin to manage "size" property (8819821)

Performance Improvements

reduce render cycles when managing "dir" attribute (7b28309)

0.11.4 (2023-04-24)

Note: Version bump only for package @spectrum-web-components/tabs

0.11.3 (2023-04-05)

Performance Improvements

reduce render cycles when managing "dir" attribute (7b28309)

0.11.2 (2023-03-22)

Bug Fixes

extract and share tshirt size styles (3acfc30)
extract and share tshirt size styles (b1440f7)
keep compact property (904df71)
keep compact property (b5af15f)
move hover/focus hoisting into conditioning (15ac2f7)
proper overflow rtl support (9b1c9d4)
remove attribute binding logic (1f6833f)
remove attribute binding logic (7bce0ae)
tabs: bind tabs overflow state with sp-tabs (a07c45b)
tabs: bind tabs overflow state with sp-tabs (570a2cd)

0.11.1 (2023-03-08)

Note: Version bump only for package @spectrum-web-components/tabs

0.11.0 (2023-02-21)

Features

tabs-overflow: address comments (b0e3398)
tabs-overflow: first round implementation of sp-tabs-overflow (c5b589a)
tabs: add test coverage, remove unused property from component class (9933ad8)
tabs: add test coverage, update import paths (d104b52)
tabs: moving tabs overflow under tabs package (a18c692)
tabs: update bundle setup and readme (0249b94)
tabs: update imports to get correct coverage (2e421cd)

0.10.7 (2023-02-08)

Bug Fixes

tabs: correct indicator size by scaling from 100px (a3fb68b)

0.10.6 (2023-01-23)

Note: Version bump only for package @spectrum-web-components/tabs

0.10.5 (2023-01-09)

Note: Version bump only for package @spectrum-web-components/tabs

0.10.4 (2022-12-08)

Note: Version bump only for package @spectrum-web-components/tabs

0.10.3 (2022-11-21)

Note: Version bump only for package @spectrum-web-components/tabs

0.10.2 (2022-11-14)

Bug Fixes

tab indicator positioning (8c20769)
use CSS position relative and revert Tabs.ts changes (a682bcf)

0.10.1 (2022-10-28)

Note: Version bump only for package @spectrum-web-components/tabs

0.10.0 (2022-10-17)

Bug Fixes

tabs: update css workarounds (c2a17e0)

Features

update card and tabs to latest spectrum-css (55b8d67)

0.9.2 (2022-10-10)

Note: Version bump only for package @spectrum-web-components/tabs

0.9.1 (2022-09-14)

Bug Fixes

tabs: add "quiet", "compact", and "emphasized" "direction=vertical" (26fff53)

0.9.0 (2022-08-09)

Features

include all Dev Mode files in side effects (f70817c)

0.8.15 (2022-08-04)

Bug Fixes

tabs: add "tablist" part to manage list styles (bbf8074)

0.8.14 (2022-07-18)

Note: Version bump only for package @spectrum-web-components/tabs

0.8.13 (2022-06-29)

Note: Version bump only for package @spectrum-web-components/tabs

0.8.12 (2022-06-07)

Note: Version bump only for package @spectrum-web-components/tabs

0.8.11 (2022-05-27)

Note: Version bump only for package @spectrum-web-components/tabs

0.8.10 (2022-05-12)

Bug Fixes

tabs: add "emphasized" and correct WHCM delivery (27940bd)

0.8.9 (2022-04-21)

Note: Version bump only for package @spectrum-web-components/tabs

0.8.8 (2022-03-30)

Note: Version bump only for package @spectrum-web-components/tabs

0.8.7 (2022-03-08)

Note: Version bump only for package @spectrum-web-components/tabs

0.8.6 (2022-03-04)

Bug Fixes

manually support WHCM in tabs (11884f1)

0.8.5 (2022-02-22)

Bug Fixes

tabs: ensure that "auto" attribute is respected (d200775)

0.8.4 (2022-02-02)

Note: Version bump only for package @spectrum-web-components/tabs

0.8.3 (2022-01-26)

Bug Fixes

tabs: added test (7d5f41f)
tabs: error on click - undefined tab target (9742227)

0.8.2 (2022-01-07)

Note: Version bump only for package @spectrum-web-components/tabs

0.8.1 (2021-12-13)

Bug Fixes

allow Tab elements to accept slotted DOM content (29c9517)
ensure that updates to Tab element content update the Selection Indicator (94891eb)
use typescript@^4.5 for "native" document.fonts typings (a3e4aea)

0.8.0 (2021-11-08)

Features

update lit-* dependencies, wip (377f3c8)

0.7.1 (2021-11-08)

Note: Version bump only for package @spectrum-web-components/tabs

0.7.0 (2021-11-02)

Features

adopt DNA@7 base Spectrum CSS (e08cafd)

0.6.10 (2021-10-12)

Note: Version bump only for package @spectrum-web-components/tabs

0.6.9 (2021-09-20)

Note: Version bump only for package @spectrum-web-components/tabs

0.6.8 (2021-09-13)

Note: Version bump only for package @spectrum-web-components/tabs

0.6.7 (2021-08-24)

Bug Fixes

correct @element jsDoc listing across library (c97a632)

0.6.6 (2021-08-03)

Bug Fixes

allow "updateComplete" to resolve to a boolean like the LitElement default (6127946)

0.6.5 (2021-07-22)

Bug Fixes

tabs: ensure tabs has layout (7aba515)
tabs: manage disabled state on tabs and tab elements (58def1f)

0.6.4 (2021-07-01)

Bug Fixes

update indicator animation for loading and content direction (f607f8b)

0.6.3 (2021-06-16)

Note: Version bump only for package @spectrum-web-components/tabs

0.6.2 (2021-06-07)

Bug Fixes

use ObserveSlotText mixin to prevent white space from overriding label attribute (610fb4b)

0.6.1 (2021-05-25)

Bug Fixes

tabs: include sp-tab-panel.js in the export map (1619ae8)

0.6.0 (2021-05-24)

Features

tabs: add sp-tab-panel element (b17d276)

0.5.6 (2021-05-12)

Note: Version bump only for package @spectrum-web-components/tabs

0.5.5 (2021-04-09)

Note: Version bump only for package @spectrum-web-components/tabs

0.5.4 (2021-03-29)

Note: Version bump only for package @spectrum-web-components/tabs

0.5.3 (2021-03-22)

Note: Version bump only for package @spectrum-web-components/tabs

0.5.2 (2021-03-22)

Note: Version bump only for package @spectrum-web-components/tabs

0.5.1 (2021-03-05)

Note: Version bump only for package @spectrum-web-components/tabs

0.5.0 (2021-03-04)

Features

use latest exports specification (a7ecf4b)

0.4.3 (2021-02-11)

Bug Fixes

update to latest spectrum-css packages (a5ca19f)

0.4.2 (2021-02-02)

Note: Version bump only for package @spectrum-web-components/tabs

0.4.1 (2021-01-28)

Note: Version bump only for package @spectrum-web-components/tabs

0.4.0 (2021-01-21)

Bug Fixes

include the "types" entry in package.json files (b432f59)
stop merging selectors in a way that alters the cascade (369388f)
update latest Spectrum CSS beta releases (d8d3acc)
use latest @spectrum-css/* versions (c35eb86)

Features

apply sizedMixin for t-shirt sizing (d7b63fb)
use SixedMixin to manage "size" property (8819821)
action-button: add action button pattern (03ac00a)
icons-workflow: vend fully registered icon components (941f3a4)
tabs: update spectrum css input (d875a0c)

0.3.0 (2021-01-13)

Bug Fixes

include the "types" entry in package.json files (b432f59)
stop merging selectors in a way that alters the cascade (369388f)
update latest Spectrum CSS beta releases (d8d3acc)
use latest @spectrum-css/* versions (c35eb86)

Features

apply sizedMixin for t-shirt sizing (d7b63fb)
use SixedMixin to manage "size" property (8819821)
action-button: add action button pattern (03ac00a)
icons-workflow: vend fully registered icon components (941f3a4)
tabs: update spectrum css input (d875a0c)

0.2.4 (2020-10-12)

Note: Version bump only for package @spectrum-web-components/tabs

0.2.3 (2020-10-12)

Bug Fixes

include default export in the "exports" fields (f32407d)

0.2.2 (2020-09-25)

Bug Fixes

check if current selected value exists before setting selected attr (1878ca3)
update side effect listings (8160d3a)

0.2.1 (2020-09-14)

Bug Fixes

top-nav: prototype top-nav pattern (9708f6f)

0.2.0 (2020-08-31)

Bug Fixes

tabs: bind tabindicator update to dir value (09598b5)
support matching keydown to dir

Features

update to Spectrum CSS v3.0.0 (e8b3d8f)

0.1.3 (2020-08-19)

Note: Version bump only for package @spectrum-web-components/tabs

0.1.2 (2020-07-27)

Bug Fixes

ensure browser understandable extensions (f4e59f7)

0.1.1 (2020-07-22)

Bug Fixes

tabs: correct entry focus element (64407d3)

0.1.0 (2020-07-17)

Bug Fixes

tabs: ensure only one active tab stop in the tabs (68b2523)

Features

leverage "exports" field in package.json (321abd7)

Spectrum Web Components

sp-tabs

Description

Usage

Sizes

Horizontal Tabs

Vertical Tabs

Accessibility

API

Attributes and Properties

Slots

Events

Changelog

1.0.1 (2024-11-11)

1.0.0 (2024-10-31)

0.49.0 (2024-10-15)

Bug Fixes

0.48.1 (2024-10-01)

0.48.0 (2024-09-17)

0.47.2 (2024-09-03)

0.47.1 (2024-08-27)

0.47.0 (2024-08-20)

0.46.0 (2024-08-08)

0.45.0 (2024-07-30)

Bug Fixes

0.44.0 (2024-07-15)

0.43.0 (2024-06-11)

0.42.5 (2024-05-24)

0.42.4 (2024-05-14)

0.42.3 (2024-05-01)

0.42.2 (2024-04-03)

0.42.1 (2024-04-02)

0.42.0 (2024-03-19)

Bug Fixes

Features

0.41.2 (2024-03-05)

0.41.1 (2024-02-22)

Bug Fixes

0.41.0 (2024-02-13)

0.40.5 (2024-02-05)

Bug Fixes

0.40.4 (2024-01-29)

0.40.3 (2024-01-11)

0.40.2 (2023-12-18)

0.40.1 (2023-12-05)

Bug Fixes

0.40.0 (2023-11-16)

0.39.4 (2023-11-02)

0.39.3 (2023-10-18)

0.39.2 (2023-10-13)

0.39.1 (2023-10-06)

0.39.0 (2023-09-25)

0.38.0 (2023-09-05)

0.37.0 (2023-08-18)

0.36.0 (2023-08-18)

0.35.0 (2023-07-31)

Bug Fixes

0.34.0 (2023-07-11)

Features

0.33.2 (2023-06-14)

0.33.0 (2023-06-08)

0.32.0 (2023-06-01)

0.31.0 (2023-05-17)

0.30.0 (2023-05-03)

Bug Fixes

Features

Performance Improvements

0.11.4 (2023-04-24)

0.11.3 (2023-04-05)

Performance Improvements

0.11.2 (2023-03-22)

Bug Fixes

0.11.1 (2023-03-08)

0.11.0 (2023-02-21)

Features

0.10.7 (2023-02-08)

Bug Fixes

0.10.6 (2023-01-23)

0.10.5 (2023-01-09)

0.10.4 (2022-12-08)

Spectrum
Web Components