Webcomponent blockquote-tabs following open-wc recommendations
npm install @blockquote-web-components/blockquote-tabs!Lit
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.

`` Panel 1 Panel 2 Panel 3 Panel 4 Panel 5 Panel 6 Panel 7 Panel 8 Panel 9 Panel 10html`
#### 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 | |
#### Exports
| Kind | Name | Declaration | Module | Package |
| ---- | -------------------- | ------------------ | -------------------------------- | ------- |
| js | BlockquoteTabs | BlockquoteTabs | ./BlockquoteTabs.js | |js
| | BlockquoteTab | BlockquoteTab | ./tab/BlockquoteTab.js | |js
| | BlockquoteTabPanel | BlockquoteTabPanel | ./tabpanel/BlockquoteTabPanel.js | |
#### Exports
| Kind | Name | Declaration | Module | Package |
| --------------------------- | ---------------- | ------------- | ------------------------- | ------- |
| custom-element-definition | blockquote-tab | BlockquoteTab | /src/tab/BlockquoteTab.js | |
#### Exports
| Kind | Name | Declaration | Module | Package |
| --------------------------- | --------------------- | ------------------ | ----------------------------------- | ------- |
| custom-element-definition | blockquote-tabpanel | BlockquoteTabPanel | /src/tabpanel/BlockquoteTabPanel.js | |
#### Exports
| Kind | Name | Declaration | Module | Package |
| --------------------------- | ----------------- | -------------- | ---------------------- | ------- |
| custom-element-definition | blockquote-tabs | BlockquoteTabs | /src/BlockquoteTabs.js | |
#### Variables
| Name | Description | Type |
| -------- | ----------- | ---- |
| styles | | |
#### Exports
| Kind | Name | Declaration | Module | Package |
| ---- | -------- | ----------- | ---------------------------------------- | ------- |
| js | styles | styles | src/styles/blockquote-tabs-styles.css.js | |
!Lit
blockquote-tabs
A tab element that can be used inside a element.
#### 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
blockquote-tabs
A tab element that can be used inside a element.
#### 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 | |
#### Variables
| Name | Description | Type |
| -------- | ----------- | ---- |
| styles | | |
#### Exports
| Kind | Name | Declaration | Module | Package |
| ---- | -------- | ----------- | ------------------------------------------- | ------- |
| js | styles | styles | src/tab/styles/blockquote-tab-styles.css.js | |
#### Variables
| Name | Description | Type |
| -------- | ----------- | ---- |
| styles | | |
#### Exports
| Kind | Name | Declaration | Module | Package |
| ---- | -------- | ----------- | ----------------------------------------------------- | ------- |
| js | styles` | styles | src/tabpanel/styles/blockquote-tabpanel-styles.css.js | |