@blockquote-web-components/blockquote-tabs

!Lit

ARIA patterns

Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time. Each tab panel has an associated tab element, that when activated, displays the panel. The list of tab elements is arranged along one edge of the currently displayed panel, most commonly the top edge.

$3


$3

``html

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Tab 7
Tab 8
Tab 9
Tab 10


Panel 1

Panel 2

Panel 3

Panel 4

Panel 5

Panel 6

Panel 7

Panel 8

Panel 9

Panel 10

`

$3

#### class: BlockquoteTabs, blockquote-tabs

##### Mixins

| Name | Module | Package |
| ---------------------------- | ------ | -------------------------------------------------------- |
| BlockquoteMixinSlotContent | | @blockquote-web-components/blockquote-mixin-slot-content |

##### Fields

| Name | Privacy | Type | Default | Description | Inherited From |
| --------------------------- | ------- | --------- | --------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------- |
| _selectedTab | | | | | |
| _selectedTabIndex | | | | | |
| _selectedTabIndexFromOne | | | | | |
| _getTabListLength | | | | | |
| _onSlotChanges | | | | | |
| _scrollContentTpl | | | | | |
| _tablistTpl | | | | | |
| _separatorTpl | | | | | |
| _indicatorsTpl | | | | | |
| _holdTpl | | | | | |
| _tabpanelTpl | | | | | |
| _onTabClick | | | | | |
| _onTabKeyDown | | | | | |
| autofocus | public | boolean | false | If present, the tab automatically have focus | |
| label | public | string | '' | \aria-label\ for tabs group | |
| selected | public | number | 1 | The tab selected. | |
| _tabList | | array | [] | | |
| _tabpanelList | | array | [] | | |
| _selectTabLast | | | undefined | | |
| _selectTabpanelLast | | | undefined | | |
| _observedFocus | | boolean | false | | |
| _observeScrollBehavior | | boolean | false | | |
| _slotChangesCount | | number | 0 | | |
| _slotNodesCount | | | undefined | | |
| _scrollContentRef | | | | | |
| _resizeControllerObserver | | | new ResizeController(this, { callback: () => { this._onResizeObserverChange(); }, skipInitial: true, }) | | |
| _hasScrollLeftIndicator | public | boolean | | | |
| _hasScrollRightIndicator | public | boolean | | | |

##### Methods

| Name | Privacy | Description | Parameters | Return | Inherited From |
| --------------------------- | ------- | ----------- | ----------------------------------------- | ------ | -------------- |
| _selectedIsInRange | | | idx | | |
| _scrollEdge | | | {target = this._scrollContentRef.value} | | |
| _selectTab | | | | | |
| _moveFocusSelectedTab | | | selectedTab | | |
| _requestFocusUpdate | | | | | |
| _scrollIntoView | | | | | |
| _scrollIntoViewWithOffset | | | tabScroller, behavior | | |
| _onResizeObserverChange | | | | | |

##### Events

| Name | Type | Description | Inherited From |
| ---------------- | ---- | ----------- | -------------- |
| selectedchange | | | |

##### Attributes

| Name | Field | Inherited From |
| -------------------------- | ------------------------- | -------------- |
| autofocus | autofocus | |
| label | label | |
| selected | selected | |
| _hasScrollLeftIndicator | \_hasScrollLeftIndicator | |
| _hasScrollRightIndicator | \_hasScrollRightIndicator | |

---

#### Exports

| Kind | Name | Declaration | Module | Package |
| ---- | ---------------- | -------------- | --------------------- | ------- |
| js | BlockquoteTabs | BlockquoteTabs | src/BlockquoteTabs.js | |

$3

#### Exports

| Kind | Name | Declaration | Module | Package |
| ---- | -------------------- | ------------------ | -------------------------------- | ------- |
| js | BlockquoteTabs | BlockquoteTabs | ./BlockquoteTabs.js | |
| js | BlockquoteTab | BlockquoteTab | ./tab/BlockquoteTab.js | |
| js | BlockquoteTabPanel | BlockquoteTabPanel | ./tabpanel/BlockquoteTabPanel.js | |

$3

#### Exports

| Kind | Name | Declaration | Module | Package |
| --------------------------- | ---------------- | ------------- | ------------------------- | ------- |
| custom-element-definition | blockquote-tab | BlockquoteTab | /src/tab/BlockquoteTab.js | |

$3

#### Exports

| Kind | Name | Declaration | Module | Package |
| --------------------------- | --------------------- | ------------------ | ----------------------------------- | ------- |
| custom-element-definition | blockquote-tabpanel | BlockquoteTabPanel | /src/tabpanel/BlockquoteTabPanel.js | |

$3

#### Exports

| Kind | Name | Declaration | Module | Package |
| --------------------------- | ----------------- | -------------- | ---------------------- | ------- |
| custom-element-definition | blockquote-tabs | BlockquoteTabs | /src/BlockquoteTabs.js | |

$3

#### Variables

| Name | Description | Type |
| -------- | ----------- | ---- |
| styles | | |

---

#### Exports

| Kind | Name | Declaration | Module | Package |
| ---- | -------- | ----------- | ---------------------------------------- | ------- |
| js | styles | styles | src/styles/blockquote-tabs-styles.css.js | |

!Lit


A tab element that can be used inside a blockquote-tabs element.




$3

#### class: BlockquoteTab, blockquote-tab

##### Mixins

| Name | Module | Package |
| ---------------------------- | ------ | -------------------------------------------------------- |
| BlockquoteMixinSlotContent | | @blockquote-web-components/blockquote-mixin-slot-content |

##### Fields

| Name | Privacy | Type | Default | Description | Inherited From |
| ---------------------- | ------- | --------- | -------------------------------------------- | --------------------------------------- | -------------- |
| _onSlotChanges | | | | | |
| selected | public | boolean | false | Whether or not the tab is \selected\. | |
| globalRootAttributes | | object | { role: 'tab', slot: 'tab', tabindex: 0, } | | |

##### Methods

| Name | Privacy | Description | Parameters | Return | Inherited From |
| -------------------- | ------- | ------------------------------- | ----------------------- | ------ | -------------- |
| __setArrayAttibute | | Sets attributes on the element. | entries: Record<, > | | |

##### Attributes

| Name | Field | Inherited From |
| ---------- | -------- | -------------- |
| selected | selected | |

---

#### Exports

| Kind | Name | Declaration | Module | Package |
| ---- | --------------- | ------------- | ------------------------ | ------- |
| js | BlockquoteTab | BlockquoteTab | src/tab/BlockquoteTab.js | |

!Lit


A tab element that can be used inside a blockquote-tabs element.




$3

#### class: BlockquoteTabPanel, blockquote-tabpanel

##### Fields

| Name | Privacy | Type | Default | Description | Inherited From |
| ---------------------- | ------- | --------- | ------------------------------------------------------ | -------------------------------------------- | -------------- |
| selected | public | boolean | false | Whether or not the tabpanel is \selected\. | |
| globalRootAttributes | | object | { role: 'tabpanel', slot: 'tabpanel', tabindex: 0, } | | |

##### Methods

| Name | Privacy | Description | Parameters | Return | Inherited From |
| -------------------- | ------- | ------------------------------- | ----------------------- | ------ | -------------- |
| __setArrayAttibute | | Sets attributes on the element. | entries: Record<, > | | |

##### Attributes

| Name | Field | Inherited From |
| ---------- | -------- | -------------- |
| selected | selected | |

---

#### Exports

| Kind | Name | Declaration | Module | Package |
| ---- | -------------------- | ------------------ | ---------------------------------- | ------- |
| js | BlockquoteTabPanel | BlockquoteTabPanel | src/tabpanel/BlockquoteTabPanel.js | |

$3

#### Variables

| Name | Description | Type |
| -------- | ----------- | ---- |
| styles | | |

---

#### Exports

| Kind | Name | Declaration | Module | Package |
| ---- | -------- | ----------- | ------------------------------------------- | ------- |
| js | styles | styles | src/tab/styles/blockquote-tab-styles.css.js | |

$3

#### Variables

| Name | Description | Type |
| -------- | ----------- | ---- |
| styles | | |

---

#### Exports

| Kind | Name | Declaration | Module | Package |
| ---- | -------- | ----------- | ----------------------------------------------------- | ------- |
| js | styles` | styles | src/tabpanel/styles/blockquote-tabpanel-styles.css.js | |