@patternfly/elements 2.4.0 → 3.0.0

package/pf-tabs/pf-tabs.js

@@ -1,18 +1,25 @@
-import { __decorate } from "tslib";
+var _PfTabs_instances, _PfTabs_ctx_get, _PfTabs_overflow, _PfTabs_tabs, _PfTabs_tabindex, _PfTabs_logger, _PfTabs_scrollLeft, _PfTabs_scrollRight, _PfTabs_onSlotChange, _PfTabs_onExpand, _PfTabs_updateActive;
+import { __classPrivateFieldGet, __decorate } from "tslib";
+import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
-import { cascades } from '@patternfly/pfe-core/decorators.js';
-import { BaseTabs } from './BaseTabs.js';
-import { TabExpandEvent } from './BaseTab.js';
+import { query } from 'lit/decorators/query.js';
+import { provide } from '@lit/context';
+import { classMap } from 'lit/directives/class-map.js';
+import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
+import { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';
+import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';
+import { TabsAriaController } from '@patternfly/pfe-core/controllers/tabs-aria-controller.js';
 import { PfTab } from './pf-tab.js';
 import { PfTabPanel } from './pf-tab-panel.js';
+import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
+import { TabExpandEvent, context } from './context.js';
+import '@patternfly/elements/pf-icon/pf-icon.js';
 import { css } from "lit";
-const styles = css `[part=tabs-container]{width:var(--pf-c-tabs--Width,auto);padding-inline-end:var(--pf-c-tabs--inset,0);padding-inline-start:var(--pf-c-tabs--inset,0)}[part=tabs-container]::before{border-color:var(--pf-c-tabs--before--BorderColor,var(--pf-global--BorderColor--100,#d2d2d2));border-block-start-width:var(--pf-c-tabs--before--BorderTopWidth,0);border-inline-end-width:var(--pf-c-tabs--before--BorderRightWidth,0);border-block-end-width:var(--pf-c-tabs--before--BorderBottomWidth,var(--pf-c-tabs--before--border-width--base,var(--pf-global--BorderWidth--sm,1px)));border-inline-start-width:var(--pf-c-tabs--before--BorderLeftWidth,0)}:host(:not([vertical])) ::slotted(pf-tab[aria-disabled=true]:last-of-type){translate:calc(-1 * var(--pf-c-tabs__link--disabled--before--BorderRightWidth,1px)) 0}:host(:not([vertical])) ::slotted(pf-tab[aria-disabled=true]:first-of-type){translate:var(--pf-c-tabs__link--disabled--before--BorderRightWidth,1px) 0}:host([box]) [part=tabs-container]{--pf-c-tabs__link--BackgroundColor:var(--pf-c-tabs--m-box__link--BackgroundColor, var(--pf-global--BackgroundColor--200, #f0f0f0));--pf-c-tabs__link--disabled--BackgroundColor:var(--pf-c-tabs--m-box__link--disabled--BackgroundColor, var(--pf-global--disabled-color--200, #d2d2d2));--pf-c-tabs__link--before--BorderBottomWidth:var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));--pf-c-tabs__link--before--BorderRightWidth:var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));--pf-c-tabs__link--disabled--before--BorderRightWidth:var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));--pf-c-tabs__link--after--Top:0;--pf-c-tabs__link--after--Bottom:auto}:host([box]) ::slotted(pf-tab:last-of-type){--pf-c-tabs__link--before--BorderRightWidth:0}:host([box]) button:nth-of-type(2)::before{left:calc(var(--pf-c-tabs__link--before--border-width--base,var(--pf-global--BorderWidth--sm,1px)) * -1)}:host([box]) pf-tab[aria-selected=true]+pf-tab{--pf-c-tabs__link--before--Left:0}:host([box=light]) [part=tabs-container]{--pf-c-tabs__link--BackgroundColor:var(--pf-c-tabs--m-color-scheme--light-300__link--BackgroundColor, transparent);--pf-c-tabs__item--m-current__link--BackgroundColor:var(--pf-c-tabs--m-color-scheme--light-300__item--m-current__link--BackgroundColor, var(--pf-global--BackgroundColor--light-300, #f0f0f0));--pf-c-tabs__link--disabled--BackgroundColor:var(--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor, var(--pf-global--palette--black-150, #f5f5f5))}:host([vertical]) [part=tabs-container]{--pf-c-tabs--Width:var(--pf-c-tabs--m-vertical--Width, 100%);--pf-c-tabs--inset:var(--pf-c-tabs--m-vertical--inset, var(--pf-global--spacer--lg, 1.5rem));--pf-c-tabs--before--BorderBottomWidth:0;--pf-c-tabs__link--PaddingTop:var(--pf-c-tabs--m-vertical__link--PaddingTop, var(--pf-global--spacer--md, 1rem));--pf-c-tabs__link--PaddingBottom:var(--pf-c-tabs--m-vertical__link--PaddingBottom, var(--pf-global--spacer--md, 1rem));--pf-c-tabs__link--before--Left:0;--pf-c-tabs__link--disabled--before--BorderBottomWidth:0;--pf-c-tabs__link--disabled--before--BorderLeftWidth:var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));--pf-c-tabs__link--after--Top:0;--pf-c-tabs__link--after--Right:auto;display:inline-flex;flex-direction:column;height:100%;padding:0;overflow:visible}:host([vertical]) [part=tabs]{position:relative;flex-direction:column;flex-grow:1;max-width:var(--pf-c-tabs--m-vertical--MaxWidth,15.625rem)}:host([vertical]) [part=tabs]::before{position:absolute;right:auto;border-style:solid;border-color:var(--pf-c-tabs--m-vertical__list--before--BorderColor,var(--pf-c-tabs--before--BorderColor,var(--pf-global--BorderColor--100,#d2d2d2)));border-block-start-width:var(--pf-c-tabs--m-vertical__list--before--BorderTopWidth,0);border-inline-end-width:var(--pf-c-tabs--m-vertical__list--before--BorderRightWidth,0);border-block-end-width:var(--pf-c-tabs--m-vertical__list--before--BorderBottomWidth,0);border-inline-start-width:var(--pf-c-tabs--m-vertical__list--before--BorderLeftWidth,var(--pf-c-tabs--before--border-width--base,var(--pf-global--BorderWidth--sm,1px)))}:host([vertical]) ::slotted(pf-tab:first-of-type){margin-block-start:var(--pf-c-tabs--inset,0)}:host([vertical]) ::slotted(pf-tab:last-of-type){margin-block-end:var(--pf-c-tabs--inset,0)}:host([box][vertical]) [part=tabs-container]{--pf-c-tabs--inset:var(--pf-c-tabs--m-vertical--m-box--inset, var(--pf-global--spacer--xl, 2rem));--pf-c-tabs--m-vertical__list--before--BorderLeftWidth:0;--pf-c-tabs--m-vertical__list--before--BorderRightWidth:var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));--pf-c-tabs__link--disabled--before--BorderRightWidth:var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));--pf-c-tabs__link--disabled--before--BorderLeftWidth:0}:host([box][vertical]) [part=tabs]::before{right:0;left:auto}:host([box][vertical]) ::slotted(pf-tab:last-of-type){--pf-c-tabs__link--before--BorderBottomWidth:0;--pf-c-tabs__link--before--BorderRightWidth:var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px))}:host([box][vertical]) ::slotted(pf-tab[aria-selected=true]){--pf-c-tabs__link--before--BorderRightColor:var(--pf-c-tabs__item--m-current__link--BackgroundColor, var(--pf-global--BackgroundColor--100, #ffffff));--pf-c-tabs__link--before--BorderBottomColor:var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2));--pf-c-tabs__link--before--BorderBottomWidth:var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px))}:host([box][vertical]) ::slotted(pf-tab[aria-selected=true]:first-of-type){--pf-c-tabs__link--before--BorderTopWidth:var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px))}[part=tabs]{display:var(--pf-c-tabs__list--Display,flex)}button{width:var(--pf-c-tabs__scroll-button--Width,var(--pf-global--spacer--2xl,3rem));color:var(--pf-c-tabs__scroll-button--Color,var(--pf-global--Color--100,#151515));background-color:var(--pf-c-tabs__scroll-button--BackgroundColor,var(--pf-global--BackgroundColor--100,#fff));outline-offset:var(--pf-c-tabs__scroll-button--OutlineOffset,calc(-1 * var(--pf-global--spacer--xs,0.25rem)));transition:margin var(--pf-c-tabs__scroll-button--TransitionDuration--margin, .125s),translate var(--pf-c-tabs__scroll-button--TransitionDuration--transform, .125s),opacity var(--pf-c-tabs__scroll-button--TransitionDuration--opacity, .125s);--pf-icon--size:16px}button:hover{--pf-c-tabs__scroll-button--Color:var(--pf-c-tabs__scroll-button--hover--Color, var(--pf-global--active-color--100, #06c))}button::before{border-color:var(--pf-c-tabs__scroll-button--before--BorderColor,var(--pf-c-tabs--before--BorderColor,var(--pf-global--BorderColor--100,#d2d2d2)));border-inline-end-width:var(--pf-c-tabs__scroll-button--before--BorderRightWidth,0);border-block-end-width:var(--pf-c-tabs__scroll-button--before--BorderBottomWidth,var(--pf-c-tabs__scroll-button--before--border-width--base,var(--pf-global--BorderWidth--sm,1px)));border-inline-start-width:var(--pf-c-tabs__scroll-button--before--BorderLeftWidth,0)}button:first-of-type{--pf-c-tabs__scroll-button--before--BorderRightWidth:var(--pf-c-tabs__scroll-button--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));margin-inline-end:calc(var(--pf-c-tabs__scroll-button--Width,var(--pf-global--spacer--2xl,3rem)) * -1)}button:nth-of-type(2){--pf-c-tabs__scroll-button--before--BorderLeftWidth:var(--pf-c-tabs__scroll-button--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));margin-inline-start:calc(var(--pf-c-tabs__scroll-button--Width,var(--pf-global--spacer--2xl,3rem)) * -1)}button:disabled{--pf-c-tabs__scroll-button--Color:var(--pf-c-tabs__scroll-button--disabled--Color, var(--pf-global--disabled-color--200, #d2d2d2))}:host(:not[vertical]) [part=tabs-container]{--pf-c-tabs--inset:0;--pf-c-tabs--m-vertical--inset:0;--pf-c-tabs--m-vertical--m-box--inset:0}:host([fill]) [part=tabs]{flex-basis:100%}:host([fill]) ::slotted(pf-tab){flex-grow:1}:host([fill]) ::slotted(pf-tab:first-of-type){--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth:0}:host([fill]) ::slotted(pf-tab:last-of-type){--pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth:0}:host([border-bottom=false]) [part=tabs-container]{--pf-c-tabs--before--BorderBottomWidth:0;--pf-c-tabs__link--before--BorderBottomWidth:0}`;
+const styles = css `:host {\n  display: block;\n}\n\n[part="tabs-container"] {\n  position: relative;\n  display: flex;\n  overflow: hidden;\n}\n\n[part="tabs-container"]::before {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-style: solid;\n}\n\n:host button {\n  opacity: 1;\n}\n\n:host button:nth-of-type(1) {\n  margin-inline-end: 0;\n  translate: 0 0;\n}\n\n:host button:nth-of-type(2) {\n  margin-inline-start: 0;\n  translate: 0 0;\n}\n\n[part="tabs"],\n[part="panels"] {\n  display: block;\n}\n\n[part="tabs"] {\n  scrollbar-width: none;\n  position: relative;\n  max-width: 100%;\n  overflow-x: auto;\n}\n\n[part="tabs-container"]::before,\n[part="tabs"]::before,\nbutton::before {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  content: "";\n  border-style: solid;\n}\n\n[part="tabs"]::before,\nbutton::before {\n  top: 0;\n}\n\nbutton,\n[part="tabs"]::before {\n  border: 0;\n}\n\nbutton {\n  flex: none;\n  line-height: 1;\n  opacity: 0;\n}\n\nbutton::before {\n  border-block-start-width: 0;\n}\n\nbutton:nth-of-type(1) {\n  translate: -100% 0;\n}\n\nbutton:nth-of-type(2) {\n  translate: 100% 0;\n}\n\nbutton:disabled {\n  pointer-events: none;\n}\n\n[part="tabs-container"] {\n  width: var(--pf-c-tabs--Width, auto);\n  padding-inline-end: var(--pf-c-tabs--inset, 0);\n  padding-inline-start: var(--pf-c-tabs--inset, 0);\n}\n\n[part="tabs-container"]::before {\n  border-color: var(--pf-c-tabs--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2));\n  border-block-start-width: var(--pf-c-tabs--before--BorderTopWidth, 0);\n  border-inline-end-width: var(--pf-c-tabs--before--BorderRightWidth, 0);\n  border-block-end-width:  var(--pf-c-tabs--before--BorderBottomWidth, var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));\n  border-inline-start-width: var(--pf-c-tabs--before--BorderLeftWidth, 0);\n}\n\n:host([box]) [part="tabs-container"] {\n  --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs--m-box__link--BackgroundColor, var(--pf-global--BackgroundColor--200, #f0f0f0));\n  --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-box__link--disabled--BackgroundColor, var(--pf-global--disabled-color--200, #d2d2d2));\n  --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-tabs__link--disabled--before--BorderRightWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-tabs__link--after--Top: 0;\n  --pf-c-tabs__link--after--Bottom: auto;\n}\n\n:host([box]) ::slotted(pf-tab:last-of-type) {\n  --pf-c-tabs__link--before--BorderRightWidth: 0;\n}\n\n:host([box]) button:nth-of-type(2)::before {\n  left: calc(var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)) * -1);\n}\n\n:host([box]) pf-tab[aria-selected="true"] + pf-tab {\n  --pf-c-tabs__link--before--Left: 0;\n}\n\n:host([box="light"]) [part="tabs-container"] {\n  --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--BackgroundColor, transparent);\n  --pf-c-tabs__item--m-current__link--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__item--m-current__link--BackgroundColor, var(--pf-global--BackgroundColor--light-300, #f0f0f0));\n  --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor, var(--pf-global--palette--black-150, #f5f5f5));\n}\n\n:host([vertical]) [part="tabs-container"] {\n  --pf-c-tabs--Width: var(--pf-c-tabs--m-vertical--Width, 100%);\n  --pf-c-tabs--inset: var(--pf-c-tabs--m-vertical--inset, var(--pf-global--spacer--lg, 1.5rem));\n  --pf-c-tabs--before--BorderBottomWidth: 0;  /* *override user setting* border bottom should always be 0 for vertical tabs */\n  --pf-c-tabs__link--PaddingTop: var(--pf-c-tabs--m-vertical__link--PaddingTop, var(--pf-global--spacer--md, 1rem));\n  --pf-c-tabs__link--PaddingBottom: var(--pf-c-tabs--m-vertical__link--PaddingBottom, var(--pf-global--spacer--md, 1rem));\n  --pf-c-tabs__link--before--Left: 0;\n  --pf-c-tabs__link--disabled--before--BorderBottomWidth: 0; /* *override user setting* border bottom for disabled should always be 0 for vertical tabs */\n  --pf-c-tabs__link--disabled--before--BorderLeftWidth: var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-tabs__link--after--Top: 0;\n  --pf-c-tabs__link--after--Right: auto;\n\n  display: inline-flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 0;\n  overflow: visible;\n}\n\n:host([vertical]) [part="tabs"] {\n  position: relative;\n  flex-direction: column;\n  flex-grow: 1;\n  max-width: var(--pf-c-tabs--m-vertical--MaxWidth, 15.625rem);\n}\n\n:host([vertical]) [part="tabs"]::before {\n  position: absolute;\n  right: auto;\n  border-style: solid;\n  border-color: var(--pf-c-tabs--m-vertical__list--before--BorderColor, var(--pf-c-tabs--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2)));\n  border-block-start-width: var(--pf-c-tabs--m-vertical__list--before--BorderTopWidth, 0);\n  border-inline-end-width: var(--pf-c-tabs--m-vertical__list--before--BorderRightWidth, 0);\n  border-block-end-width: var(--pf-c-tabs--m-vertical__list--before--BorderBottomWidth, 0);\n  border-inline-start-width: var(--pf-c-tabs--m-vertical__list--before--BorderLeftWidth, var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));\n}\n\n:host([vertical]) ::slotted(pf-tab:first-of-type) {\n  margin-block-start: var(--pf-c-tabs--inset, 0);\n}\n\n:host([vertical]) ::slotted(pf-tab:last-of-type) {\n  margin-block-end: var(--pf-c-tabs--inset, 0);\n}\n\n:host([box][vertical]) [part="tabs-container"] {\n  --pf-c-tabs--inset: var(--pf-c-tabs--m-vertical--m-box--inset, var(--pf-global--spacer--xl, 2rem));\n  --pf-c-tabs--m-vertical__list--before--BorderLeftWidth: 0; /* *override user setting* border left should be 0 for vertical box; */\n  --pf-c-tabs--m-vertical__list--before--BorderRightWidth: var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-tabs__link--disabled--before--BorderRightWidth: var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  /* --pf-c-tabs__link--disabled--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)); */\n  --pf-c-tabs__link--disabled--before--BorderLeftWidth: 0; /* *override user setting* border left should be 0 for disabled ; */\n}\n\n:host([box][vertical]) [part="tabs"]::before {\n  right: 0;\n  left: auto;\n}\n\n:host([box][vertical]) ::slotted(pf-tab:last-of-type) {\n  --pf-c-tabs__link--before--BorderBottomWidth: 0;\n  --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n}\n\n:host([box][vertical]) ::slotted(pf-tab[aria-selected="true"]) {\n  --pf-c-tabs__link--before--BorderRightColor: var(--pf-c-tabs__item--m-current__link--BackgroundColor, var(--pf-global--BackgroundColor--100, #ffffff));\n  --pf-c-tabs__link--before--BorderBottomColor: var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2));\n  --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n}\n\n:host([box][vertical]) ::slotted(pf-tab[aria-selected="true"]:first-of-type) {\n  --pf-c-tabs__link--before--BorderTopWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n}\n\n[part="tabs"] {\n  display: var(--pf-c-tabs__list--Display, flex);\n}\n\nbutton {\n  width: var(--pf-c-tabs__scroll-button--Width, var(--pf-global--spacer--2xl, 3rem));\n  color: var(--pf-c-tabs__scroll-button--Color, var(--pf-global--Color--100, #151515));\n  background-color: var(--pf-c-tabs__scroll-button--BackgroundColor, var(--pf-global--BackgroundColor--100, #ffffff));\n  outline-offset: var(--pf-c-tabs__scroll-button--OutlineOffset, calc(-1 * var(--pf-global--spacer--xs, 0.25rem)));\n  transition:\n    margin var(--pf-c-tabs__scroll-button--TransitionDuration--margin, .125s),\n    translate var(--pf-c-tabs__scroll-button--TransitionDuration--transform, .125s), opacity var(--pf-c-tabs__scroll-button--TransitionDuration--opacity, .125s);\n  --pf-icon--size: 16px;\n}\n\nbutton:hover {\n  --pf-c-tabs__scroll-button--Color: var(--pf-c-tabs__scroll-button--hover--Color, var(--pf-global--active-color--100, #06c));\n}\n\nbutton::before {\n  border-color: var(--pf-c-tabs__scroll-button--before--BorderColor, var(--pf-c-tabs--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2)));\n  border-inline-end-width: var(--pf-c-tabs__scroll-button--before--BorderRightWidth, 0);\n  border-block-end-width: var(--pf-c-tabs__scroll-button--before--BorderBottomWidth, var(--pf-c-tabs__scroll-button--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));\n  border-inline-start-width: var(--pf-c-tabs__scroll-button--before--BorderLeftWidth, 0);\n}\n\nbutton:nth-of-type(1) {\n  --pf-c-tabs__scroll-button--before--BorderRightWidth: var(--pf-c-tabs__scroll-button--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  margin-inline-end: calc(var(--pf-c-tabs__scroll-button--Width, var(--pf-global--spacer--2xl, 3rem)) * -1);\n}\n\nbutton:nth-of-type(2) {\n  --pf-c-tabs__scroll-button--before--BorderLeftWidth: var(--pf-c-tabs__scroll-button--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  margin-inline-start: calc(var(--pf-c-tabs__scroll-button--Width, var(--pf-global--spacer--2xl, 3rem)) * -1);\n}\n\nbutton:disabled {\n  --pf-c-tabs__scroll-button--Color: var(--pf-c-tabs__scroll-button--disabled--Color, var(--pf-global--disabled-color--200, #d2d2d2));\n}\n\n:host(:not[vertical]) [part="tabs-container"] {\n  --pf-c-tabs--inset: 0;\n  --pf-c-tabs--m-vertical--inset: 0;\n  --pf-c-tabs--m-vertical--m-box--inset: 0;\n}\n\n:host([fill]) [part="tabs"] {\n  flex-basis: 100%;\n}\n\n:host([fill]) ::slotted(pf-tab) {\n  flex-grow: 1;\n}\n\n:host([fill]) ::slotted(pf-tab:first-of-type) {\n  --pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth: 0;\n}\n\n:host([fill]) ::slotted(pf-tab:last-of-type) {\n  --pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth: 0;\n}\n\n:host([border-bottom="false"]) [part="tabs-container"] {\n  --pf-c-tabs--before--BorderBottomWidth: 0; /* *override user setting* when border-bottom is false border bottom styles should be 0; */\n  --pf-c-tabs__link--before--BorderBottomWidth: 0;\n}\n`;
 /**
  * **Tabs** allow users to navigate between views within the same page or context.
  *
- * @attr {number} active-key - DOM Property: `activeKey` {@default `0`}
- *
  * @csspart container - outer container
  * @csspart tabs-container - tabs container
  * @csspart tabs - tablist
@@ -58,45 +65,210 @@ const styles = css `[part=tabs-container]{width:var(--pf-c-tabs--Width,auto);pad
  *
  * @cssprop     {<color>} --pf-c-tabs__scroll-button--disabled--Color                 {@default `#d2d2d2`}
  */
-let PfTabs = class PfTabs extends BaseTabs {
+let PfTabs = class PfTabs extends LitElement {
     constructor() {
         super(...arguments);
+        _PfTabs_instances.add(this);
+        /**
+         * Aria Label for the left scroll button
+         */
+        this.labelScrollLeft = 'Scroll left';
+        /**
+         * Aria Label for the right scroll button
+         */
+        this.labelScrollRight = 'Scroll left';
+        /**
+         * Box styling on tabs. Defaults to null
+         */
         this.box = null;
+        /**
+         * Set to true to enable vertical tab styling.
+         */
         this.vertical = false;
+        /**
+         * Set to true to enable filled tab styling.
+         */
         this.fill = false;
+        /**
+         * Border bottom tab styling on tabs. To remove the bottom border, set this prop to false.
+         */
         this.borderBottom = 'true';
-    }
-    static isTab(element) {
-        return element instanceof PfTab;
-    }
-    static isPanel(element) {
-        return element instanceof PfTabPanel;
+        /**
+         * Set's the tabs to be manually activated. This means that the tabs will not automatically select
+         * unless a user clicks on them or uses the keyboard space or enter key to select them.  Roving
+         * tabindex will still update allowing user to keyboard navigate through the tabs with arrow keys.
+         */
+        this.manual = false;
+        /**
+         * The index of the active tab
+         */
+        this.activeIndex = -1;
+        this.ctx = __classPrivateFieldGet(this, _PfTabs_instances, "a", _PfTabs_ctx_get);
+        _PfTabs_overflow.set(this, new OverflowController(this, { scrollTimeoutDelay: 200 }));
+        _PfTabs_tabs.set(this, new TabsAriaController(this, {
+            isTab: (x) => x.localName === 'pf-tab',
+            isPanel: (x) => x.localName === 'pf-tab-panel',
+            isActiveTab: x => x.active,
+        }));
+        _PfTabs_tabindex.set(this, new RovingTabindexController(this, {
+            getHTMLElement: () => this.shadowRoot?.getElementById('tabs') ?? null,
+            getItems: () => this.tabs ?? [],
+        }));
+        _PfTabs_logger.set(this, new Logger(this));
     }
     static isExpandEvent(event) {
         return event instanceof TabExpandEvent;
     }
-    get canShowScrollButtons() {
-        return !this.vertical;
+    get tabs() {
+        return __classPrivateFieldGet(this, _PfTabs_tabs, "f").tabs;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('expand', __classPrivateFieldGet(this, _PfTabs_instances, "m", _PfTabs_onExpand));
+        this.id || (this.id = getRandomId(this.localName));
+    }
+    async getUpdateComplete() {
+        const here = await super.getUpdateComplete();
+        const ps = await Promise.all(Array.from(this.querySelectorAll('pf-tab, pf-tab-panel'), x => x.updateComplete));
+        return here && ps.every(x => !!x);
+    }
+    willUpdate(changed) {
+        if (changed.has('activeIndex')) {
+            this.select(this.activeIndex);
+        }
+        else if (changed.has('activeTab') && this.activeTab) {
+            this.select(this.activeTab);
+        }
+        else {
+            __classPrivateFieldGet(this, _PfTabs_instances, "m", _PfTabs_updateActive).call(this);
+        }
+        __classPrivateFieldGet(this, _PfTabs_overflow, "f").update();
+        this.ctx = __classPrivateFieldGet(this, _PfTabs_instances, "a", _PfTabs_ctx_get);
+    }
+    updated(changed) {
+        if (changed.has('activeTab') && this.activeTab?.disabled) {
+            __classPrivateFieldGet(this, _PfTabs_logger, "f").warn('Active tab is disabled. Setting to first focusable tab');
+            this.activeIndex = 0;
+        }
     }
+    firstUpdated() {
+        if (this.tabs.length && this.activeIndex === -1) {
+            this.select(this.tabs.findIndex(x => !x.disabled));
+        }
+    }
+    render() {
+        return html `
+      <div part="container"
+           class="${classMap({ overflow: __classPrivateFieldGet(this, _PfTabs_overflow, "f").showScrollButtons })}">
+        <div part="tabs-container">${!__classPrivateFieldGet(this, _PfTabs_overflow, "f").showScrollButtons ? '' : html `
+          <button id="previousTab" tabindex="-1"
+              aria-label="${this.labelScrollLeft}"
+              ?disabled="${!__classPrivateFieldGet(this, _PfTabs_overflow, "f").overflowLeft}"
+              @click="${__classPrivateFieldGet(this, _PfTabs_instances, "m", _PfTabs_scrollLeft)}">
+            <pf-icon icon="angle-left" set="fas" loading="eager"></pf-icon>
+          </button>`}
+          <div id="tabs" part="tabs" role="tablist">
+            <slot name="tab" @slotchange="${__classPrivateFieldGet(this, _PfTabs_instances, "m", _PfTabs_onSlotChange)}" @scroll="${__classPrivateFieldGet(this, _PfTabs_overflow, "f").onScroll}"></slot>
+          </div>
+          ${!__classPrivateFieldGet(this, _PfTabs_overflow, "f").showScrollButtons ? '' : html `
+          <button id="nextTab" tabindex="-1"
+              aria-label="${this.labelScrollRight}"
+              ?disabled="${!__classPrivateFieldGet(this, _PfTabs_overflow, "f").overflowRight}"
+              @click="${__classPrivateFieldGet(this, _PfTabs_instances, "m", _PfTabs_scrollRight)}">
+            <pf-icon icon="angle-right" set="fas" loading="eager"></pf-icon>
+          </button>`}
+        </div>
+        <slot part="panels"></slot>
+      </div>
+    `;
+    }
+    select(option) {
+        if (typeof option === 'number') {
+            const item = this.tabs[option];
+            __classPrivateFieldGet(this, _PfTabs_tabindex, "f").setActiveItem(item);
+        }
+        else {
+            __classPrivateFieldGet(this, _PfTabs_tabindex, "f").setActiveItem(option);
+        }
+        __classPrivateFieldGet(this, _PfTabs_instances, "m", _PfTabs_updateActive).call(this, { force: true });
+    }
+};
+_PfTabs_overflow = new WeakMap();
+_PfTabs_tabs = new WeakMap();
+_PfTabs_tabindex = new WeakMap();
+_PfTabs_logger = new WeakMap();
+_PfTabs_instances = new WeakSet();
+_PfTabs_ctx_get = function _PfTabs_ctx_get() {
+    const { activeTab, borderBottom, box, fill, manual, vertical } = this;
+    return { activeTab, borderBottom, box, fill, manual, vertical };
 };
-PfTabs.styles = [...BaseTabs.styles, styles];
+_PfTabs_scrollLeft = function _PfTabs_scrollLeft() {
+    __classPrivateFieldGet(this, _PfTabs_overflow, "f").scrollLeft();
+};
+_PfTabs_scrollRight = function _PfTabs_scrollRight() {
+    __classPrivateFieldGet(this, _PfTabs_overflow, "f").scrollRight();
+};
+_PfTabs_onSlotChange = function _PfTabs_onSlotChange() {
+    if (this.tabs) {
+        __classPrivateFieldGet(this, _PfTabs_overflow, "f").init(this.tabsContainer, this.tabs);
+    }
+};
+_PfTabs_onExpand = function _PfTabs_onExpand(event) {
+    if (event instanceof TabExpandEvent &&
+        !event.defaultPrevented && this.tabs.includes(event.tab)) {
+        this.select(event.tab);
+    }
+};
+_PfTabs_updateActive = function _PfTabs_updateActive({ force = false } = {}) {
+    if (!__classPrivateFieldGet(this, _PfTabs_tabindex, "f").activeItem?.disabled) {
+        this.tabs?.forEach((tab, i) => {
+            if (force || !this.manual) {
+                const active = tab === __classPrivateFieldGet(this, _PfTabs_tabindex, "f").activeItem;
+                tab.active = active;
+                if (active) {
+                    this.activeIndex = i;
+                    this.activeTab = tab;
+                }
+            }
+            __classPrivateFieldGet(this, _PfTabs_tabs, "f").panelFor(tab)?.toggleAttribute('hidden', !tab.active);
+        });
+    }
+};
+PfTabs.styles = [styles];
 PfTabs.scrollTimeoutDelay = 150;
 __decorate([
-    cascades('pf-tab', 'pf-tab-panel'),
+    property({ reflect: false, attribute: 'label-scroll-left' })
+], PfTabs.prototype, "labelScrollLeft", void 0);
+__decorate([
+    property({ reflect: false, attribute: 'label-scroll-right' })
+], PfTabs.prototype, "labelScrollRight", void 0);
+__decorate([
     property({ reflect: true })
 ], PfTabs.prototype, "box", void 0);
 __decorate([
-    cascades('pf-tab', 'pf-tab-panel'),
     property({ reflect: true, type: Boolean })
 ], PfTabs.prototype, "vertical", void 0);
 __decorate([
-    cascades('pf-tab'),
     property({ reflect: true, type: Boolean })
 ], PfTabs.prototype, "fill", void 0);
 __decorate([
-    cascades('pf-tab'),
     property({ attribute: 'border-bottom' })
 ], PfTabs.prototype, "borderBottom", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], PfTabs.prototype, "manual", void 0);
+__decorate([
+    property({ attribute: 'active-index', reflect: true, type: Number })
+], PfTabs.prototype, "activeIndex", void 0);
+__decorate([
+    property({ attribute: false })
+], PfTabs.prototype, "activeTab", void 0);
+__decorate([
+    query('#tabs')
+], PfTabs.prototype, "tabsContainer", void 0);
+__decorate([
+    provide({ context })
+], PfTabs.prototype, "ctx", void 0);
 PfTabs = __decorate([
     customElement('pf-tabs')
 ], PfTabs);

package/pf-tabs/pf-tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-tabs.js","sourceRoot":"","sources":["pf-tabs.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAE9D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;;;AAI/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AAEH,IAAa,MAAM,GAAnB,MAAa,MAAO,SAAQ,QAAQ;IAApC;;QAkB+B,QAAG,GAA4B,IAAI,CAAC;QAGrB,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,KAAK,CAAC;QAGf,iBAAY,GAAqB,MAAM,CAAC;IAKpF,CAAC;IA3BC,MAAM,CAAC,KAAK,CAAC,OAAoB;QAC/B,OAAO,OAAO,YAAY,KAAK,CAAC;IAClC,CAAC;IAED,MAAM,CAAC,OAAO,CAAC,OAAoB;QACjC,OAAO,OAAO,YAAY,UAAU,CAAC;IACvC,CAAC;IAED,MAAM,CAAC,aAAa,CAAC,KAAY;QAC/B,OAAO,KAAK,YAAY,cAAc,CAAC;IACzC,CAAC;IAcD,IAAc,oBAAoB;QAChC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;IACxB,CAAC;;AA9Be,aAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC,AAA/B,CAAgC;AAE5B,yBAAkB,GAAG,GAAG,AAAN,CAAO;AAetB;IAD5B,QAAQ,CAAC,QAAQ,EAAE,cAAc,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mCAAqC;AAGrB;IAD3C,QAAQ,CAAC,QAAQ,EAAE,cAAc,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAkB;AAGjB;IAD3C,QAAQ,CAAC,QAAQ,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oCAAc;AAGf;IADzC,QAAQ,CAAC,QAAQ,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;4CAAyC;AA3BvE,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAgClB;SAhCY,MAAM","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { cascades } from '@patternfly/pfe-core/decorators.js';\n\nimport { BaseTabs } from './BaseTabs.js';\nimport { TabExpandEvent } from './BaseTab.js';\nimport { PfTab } from './pf-tab.js';\nimport { PfTabPanel } from './pf-tab-panel.js';\n\nimport styles from './pf-tabs.css';\n\n/**\n * **Tabs** allow users to navigate between views within the same page or context.\n *\n * @attr {number} active-key - DOM Property: `activeKey` {@default `0`}\n *\n * @csspart container - outer container\n * @csspart tabs-container - tabs container\n * @csspart tabs - tablist\n * @csspart panels - panels\n *\n * @slot tab - Must contain one or more `<pf-tab>`\n * @slot - Must contain one or more `<pf-panel>`\n *\n * @cssprop     {<length>} --pf-c-tabs--Width {@default `auto`}\n * @cssprop     {<length>} --pf-c-tabs--inset {@default `0`}\n *\n * @cssprop     {<color>}   --pf-c-tabs--before--BorderColor       {@default `#d2d2d2`}\n * @cssprop     {<length>}  --pf-c-tabs--before--BorderTopWidth    {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--before--BorderRightWidth  {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--before--BorderBottomWidth {@default `1px`}\n * @cssprop     {<length>}  --pf-c-tabs--before---BorderLeftWidth  {@default `0`}\n *\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical--MaxWidth      {@default `15.625rem`}\n *\n * @cssprop     {<color>}   --pf-c-tabs--m-vertical__list--before--BorderColor       {@default `#d2d2d2`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderTopWidth    {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderRightWidth  {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderBottomWidth {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderLeftWidth   {@default `1px`}\n *\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical--m-box--inset  {@default `2rem`}\n *\n * @cssprop     {<display>} --pf-c-tabs__list--Display  {@default `flex`}\n *\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--Width                         {@default `3rem`}\n * @cssprop     {<color>}   --pf-c-tabs__scroll-button--Color                         {@default `#151515`}\n * @cssprop     {<color>}   --pf-c-tabs__scroll-button--BackgroundColor               {@default `#ffffff`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--OutlineOffset                 {@default `-0.25rem`}\n * @cssprop     {<time>}    --pf-c-tabs__scroll-button--TransitionDuration--margin    {@default `.125s`}\n * @cssprop     {<time>}    --pf-c-tabs__scroll-button--TransitionDuration--transform {@default `.125s`}\n * @cssprop     {<color>}   --pf-c-tabs__scroll-button--hover--Color                  {@default `#06c`}\n *\n * @cssprop     {<color>}   --pf-c-tabs__scroll-button--before--BorderColor           {@default `#d2d2d2`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderRightWidth      {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderBottomWidth     {@default `1px`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderLeftWidth       {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--border-width--base    {@default `1px`}\n *\n * @cssprop     {<color>} --pf-c-tabs__scroll-button--disabled--Color                 {@default `#d2d2d2`}\n */\n@customElement('pf-tabs')\nexport class PfTabs extends BaseTabs {\n  static readonly styles = [...BaseTabs.styles, styles];\n\n  protected static readonly scrollTimeoutDelay = 150;\n\n  static isTab(element: HTMLElement): element is PfTab {\n    return element instanceof PfTab;\n  }\n\n  static isPanel(element: HTMLElement): element is PfTabPanel {\n    return element instanceof PfTabPanel;\n  }\n\n  static isExpandEvent(event: Event): event is TabExpandEvent {\n    return event instanceof TabExpandEvent;\n  }\n\n  @cascades('pf-tab', 'pf-tab-panel')\n  @property({ reflect: true }) box: 'light' | 'dark' | null = null;\n\n  @cascades('pf-tab', 'pf-tab-panel')\n  @property({ reflect: true, type: Boolean }) vertical = false;\n\n  @cascades('pf-tab')\n  @property({ reflect: true, type: Boolean }) fill = false;\n\n  @cascades('pf-tab')\n  @property({ attribute: 'border-bottom' }) borderBottom: 'true' | 'false' = 'true';\n\n  protected get canShowScrollButtons(): boolean {\n    return !this.vertical;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tabs': PfTabs;\n  }\n}\n"]}
+{"version":3,"file":"pf-tabs.js","sourceRoot":"","sources":["pf-tabs.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, type PropertyValues } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { provide } from '@lit/context';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\nimport { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\nimport { TabsAriaController } from '@patternfly/pfe-core/controllers/tabs-aria-controller.js';\n\nimport { PfTab } from './pf-tab.js';\nimport { PfTabPanel } from './pf-tab-panel.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { type PfTabsContext, TabExpandEvent, context } from './context.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nimport styles from './pf-tabs.css';\n\n/**\n * **Tabs** allow users to navigate between views within the same page or context.\n *\n * @csspart container - outer container\n * @csspart tabs-container - tabs container\n * @csspart tabs - tablist\n * @csspart panels - panels\n *\n * @slot tab - Must contain one or more `<pf-tab>`\n * @slot - Must contain one or more `<pf-panel>`\n *\n * @cssprop     {<length>} --pf-c-tabs--Width {@default `auto`}\n * @cssprop     {<length>} --pf-c-tabs--inset {@default `0`}\n *\n * @cssprop     {<color>}   --pf-c-tabs--before--BorderColor       {@default `#d2d2d2`}\n * @cssprop     {<length>}  --pf-c-tabs--before--BorderTopWidth    {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--before--BorderRightWidth  {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--before--BorderBottomWidth {@default `1px`}\n * @cssprop     {<length>}  --pf-c-tabs--before---BorderLeftWidth  {@default `0`}\n *\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical--MaxWidth      {@default `15.625rem`}\n *\n * @cssprop     {<color>}   --pf-c-tabs--m-vertical__list--before--BorderColor       {@default `#d2d2d2`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderTopWidth    {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderRightWidth  {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderBottomWidth {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderLeftWidth   {@default `1px`}\n *\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical--m-box--inset  {@default `2rem`}\n *\n * @cssprop     {<display>} --pf-c-tabs__list--Display  {@default `flex`}\n *\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--Width                         {@default `3rem`}\n * @cssprop     {<color>}   --pf-c-tabs__scroll-button--Color                         {@default `#151515`}\n * @cssprop     {<color>}   --pf-c-tabs__scroll-button--BackgroundColor               {@default `#ffffff`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--OutlineOffset                 {@default `-0.25rem`}\n * @cssprop     {<time>}    --pf-c-tabs__scroll-button--TransitionDuration--margin    {@default `.125s`}\n * @cssprop     {<time>}    --pf-c-tabs__scroll-button--TransitionDuration--transform {@default `.125s`}\n * @cssprop     {<color>}   --pf-c-tabs__scroll-button--hover--Color                  {@default `#06c`}\n *\n * @cssprop     {<color>}   --pf-c-tabs__scroll-button--before--BorderColor           {@default `#d2d2d2`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderRightWidth      {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderBottomWidth     {@default `1px`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderLeftWidth       {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--border-width--base    {@default `1px`}\n *\n * @cssprop     {<color>} --pf-c-tabs__scroll-button--disabled--Color                 {@default `#d2d2d2`}\n */\n@customElement('pf-tabs')\nexport class PfTabs extends LitElement {\n  static readonly styles = [styles];\n\n  protected static readonly scrollTimeoutDelay = 150;\n\n  static isExpandEvent(event: Event): event is TabExpandEvent<PfTab> {\n    return event instanceof TabExpandEvent;\n  }\n\n  /**\n   * Aria Label for the left scroll button\n   */\n  @property({ reflect: false, attribute: 'label-scroll-left' }) labelScrollLeft = 'Scroll left';\n\n  /**\n   * Aria Label for the right scroll button\n   */\n  @property({ reflect: false, attribute: 'label-scroll-right' }) labelScrollRight = 'Scroll left';\n\n  /**\n   * Box styling on tabs. Defaults to null\n   */\n  @property({ reflect: true }) box: 'light' | 'dark' | null = null;\n\n  /**\n   * Set to true to enable vertical tab styling.\n   */\n  @property({ reflect: true, type: Boolean }) vertical = false;\n\n  /**\n   * Set to true to enable filled tab styling.\n   */\n  @property({ reflect: true, type: Boolean }) fill = false;\n\n  /**\n   * Border bottom tab styling on tabs. To remove the bottom border, set this prop to false.\n   */\n  @property({ attribute: 'border-bottom' }) borderBottom: 'true' | 'false' = 'true';\n\n  /**\n   * Set's the tabs to be manually activated. This means that the tabs will not automatically select\n   * unless a user clicks on them or uses the keyboard space or enter key to select them.  Roving\n   * tabindex will still update allowing user to keyboard navigate through the tabs with arrow keys.\n   */\n  @property({ reflect: true, type: Boolean }) manual = false;\n\n  /**\n   * The index of the active tab\n   */\n  @property({ attribute: 'active-index', reflect: true, type: Number }) activeIndex = -1;\n\n  @property({ attribute: false }) activeTab?: PfTab;\n\n  get tabs(): PfTab[] {\n    return this.#tabs.tabs;\n  }\n\n  @query('#tabs') private tabsContainer!: HTMLElement;\n\n  get #ctx(): PfTabsContext {\n    const { activeTab, borderBottom, box, fill, manual, vertical } = this;\n    return { activeTab, borderBottom, box, fill, manual, vertical };\n  }\n\n  @provide({ context })\n  private ctx: PfTabsContext = this.#ctx;\n\n  #overflow = new OverflowController(this, { scrollTimeoutDelay: 200 });\n\n  #tabs = new TabsAriaController<PfTab, PfTabPanel>(this, {\n    isTab: (x): x is PfTab => (x as HTMLElement).localName === 'pf-tab',\n    isPanel: (x): x is PfTabPanel => (x as HTMLElement).localName === 'pf-tab-panel',\n    isActiveTab: x => x.active,\n  });\n\n  #tabindex = new RovingTabindexController(this, {\n    getHTMLElement: () => this.shadowRoot?.getElementById('tabs') ?? null,\n    getItems: () => this.tabs ?? [],\n  });\n\n  #logger = new Logger(this);\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('expand', this.#onExpand);\n    this.id ||= getRandomId(this.localName);\n  }\n\n  protected override async getUpdateComplete(): Promise<boolean> {\n    const here = await super.getUpdateComplete();\n    const ps = await Promise.all(Array.from(\n      this.querySelectorAll<LitElement>('pf-tab, pf-tab-panel'),\n      x => x.updateComplete,\n    ));\n    return here && ps.every(x => !!x);\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('activeIndex')) {\n      this.select(this.activeIndex);\n    } else if (changed.has('activeTab') && this.activeTab) {\n      this.select(this.activeTab);\n    } else {\n      this.#updateActive();\n    }\n    this.#overflow.update();\n    this.ctx = this.#ctx;\n  }\n\n  protected override updated(changed: PropertyValues<this>): void {\n    if (changed.has('activeTab') && this.activeTab?.disabled) {\n      this.#logger.warn('Active tab is disabled. Setting to first focusable tab');\n      this.activeIndex = 0;\n    }\n  }\n\n  protected override firstUpdated(): void {\n    if (this.tabs.length && this.activeIndex === -1) {\n      this.select(this.tabs.findIndex(x => !x.disabled));\n    }\n  }\n\n  render() {\n    return html`\n      <div part=\"container\"\n           class=\"${classMap({ overflow: this.#overflow.showScrollButtons })}\">\n        <div part=\"tabs-container\">${!this.#overflow.showScrollButtons ? '' : html`\n          <button id=\"previousTab\" tabindex=\"-1\"\n              aria-label=\"${this.labelScrollLeft}\"\n              ?disabled=\"${!this.#overflow.overflowLeft}\"\n              @click=\"${this.#scrollLeft}\">\n            <pf-icon icon=\"angle-left\" set=\"fas\" loading=\"eager\"></pf-icon>\n          </button>`}\n          <div id=\"tabs\" part=\"tabs\" role=\"tablist\">\n            <slot name=\"tab\" @slotchange=\"${this.#onSlotChange}\" @scroll=\"${this.#overflow.onScroll}\"></slot>\n          </div>\n          ${!this.#overflow.showScrollButtons ? '' : html`\n          <button id=\"nextTab\" tabindex=\"-1\"\n              aria-label=\"${this.labelScrollRight}\"\n              ?disabled=\"${!this.#overflow.overflowRight}\"\n              @click=\"${this.#scrollRight}\">\n            <pf-icon icon=\"angle-right\" set=\"fas\" loading=\"eager\"></pf-icon>\n          </button>`}\n        </div>\n        <slot part=\"panels\"></slot>\n      </div>\n    `;\n  }\n\n  #scrollLeft() {\n    this.#overflow.scrollLeft();\n  }\n\n  #scrollRight() {\n    this.#overflow.scrollRight();\n  }\n\n  #onSlotChange() {\n    if (this.tabs) {\n      this.#overflow.init(this.tabsContainer, this.tabs);\n    }\n  }\n\n  #onExpand(event: Event) {\n    if (event instanceof TabExpandEvent &&\n      !event.defaultPrevented && this.tabs.includes(event.tab)) {\n      this.select(event.tab);\n    }\n  }\n\n  #updateActive({ force = false } = {}) {\n    if (!this.#tabindex.activeItem?.disabled) {\n      this.tabs?.forEach((tab, i) => {\n        if (force || !this.manual) {\n          const active = tab === this.#tabindex.activeItem;\n          tab.active = active;\n          if (active) {\n            this.activeIndex = i;\n            this.activeTab = tab;\n          }\n        }\n        this.#tabs.panelFor(tab)?.toggleAttribute('hidden', !tab.active);\n      });\n    }\n  }\n\n  select(option: PfTab | number) {\n    if (typeof option === 'number') {\n      const item = this.tabs[option];\n      this.#tabindex.setActiveItem(item);\n    } else {\n      this.#tabindex.setActiveItem(option);\n    }\n    this.#updateActive({ force: true });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tabs': PfTabs;\n  }\n}\n"]}

package/pf-text-area/README.md

@@ -0,0 +1,11 @@
+# Text Area
+Add a description of the component here.
+
+## Usage
+Describe how best to use this web component along with best practices.
+
+```html
+<pf-text-area>
+
+</pf-text-area>
+```

package/pf-text-area/pf-text-area.css

@@ -0,0 +1,193 @@
+:host {
+  display: block;
+
+  /* .pf-c-form-control */
+  --pf-c-form-control--Color: var(--pf-global--Color--100, #151515);
+  --pf-c-form-control--FontSize: var(--pf-global--FontSize--md, 1rem);
+  --pf-c-form-control--LineHeight: var(--pf-global--LineHeight--md, 1.5);
+  --pf-c-form-control--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+  --pf-c-form-control--BorderTopColor: var(--pf-global--BorderColor--300, #f0f0f0);
+  --pf-c-form-control--BorderRightColor: var(--pf-global--BorderColor--300, #f0f0f0);
+  --pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);
+  --pf-c-form-control--BorderLeftColor: var(--pf-global--BorderColor--300, #f0f0f0);
+  --pf-c-form-control--BorderRadius: 0;
+  --pf-c-form-control--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+  --pf-c-form-control--Width: 100%;
+  --pf-c-form-control--Height: calc(var(--pf-c-form-control--FontSize) * var(--pf-c-form-control--LineHeight) + var(--pf-c-form-control--BorderWidth) * 2 + var(--pf-c-form-control--PaddingTop) + var(--pf-c-form-control--PaddingBottom));
+  --pf-c-form-control--inset--base: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-form-control--PaddingTop: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm));
+  --pf-c-form-control--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm));
+  --pf-c-form-control--PaddingRight: var(--pf-c-form-control--inset--base);
+  --pf-c-form-control--PaddingLeft: var(--pf-c-form-control--inset--base);
+  --pf-c-form-control--hover--BorderBottomColor: var(--pf-global--primary-color--100, #06c);
+  --pf-c-form-control--focus--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-form-control--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--focus--BorderBottomWidth));
+  --pf-c-form-control--focus--BorderBottomColor: var(--pf-global--primary-color--100, #06c);
+  --pf-c-form-control--m-expanded--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-form-control--m-expanded--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--focus--BorderBottomWidth));
+  --pf-c-form-control--m-expanded--BorderBottomColor: var(--pf-global--primary-color--100, #06c);
+  --pf-c-form-control--placeholder--Color: var(--pf-global--Color--dark-200, #6a6e73);
+  --pf-c-form-control--placeholder--child--Color: var(--pf-global--Color--100, #151515);
+  --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--100, #6a6e73);
+  --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0);
+  --pf-c-form-control--disabled--BorderColor: transparent;
+  --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0);
+  --pf-c-form-control--readonly--hover--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);
+  --pf-c-form-control--readonly--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm));
+  --pf-c-form-control--readonly--focus--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);
+  --pf-c-form-control--readonly--focus--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);
+  --pf-c-form-control--readonly--m-plain--BackgroundColor: transparent;
+  --pf-c-form-control--readonly--m-plain--inset--base: 0;
+  --pf-c-form-control--success--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-form-control--success--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--success--BorderBottomWidth));
+  --pf-c-form-control--success--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+  --pf-c-form-control--success--PaddingRight: var(--pf-global--spacer--xl, 2rem);
+  --pf-c-form-control--success--BackgroundPositionX: calc(100% - var(--pf-c-form-control--PaddingLeft));
+  --pf-c-form-control--success--BackgroundPositionY: center;
+  --pf-c-form-control--success--BackgroundPosition: var(--pf-c-form-control--success--BackgroundPositionX) var(--pf-c-form-control--success--BackgroundPositionY);
+  --pf-c-form-control--success--BackgroundSizeX: var(--pf-c-form-control--FontSize);
+  --pf-c-form-control--success--BackgroundSizeY: var(--pf-c-form-control--FontSize);
+  --pf-c-form-control--success--BackgroundSize: var(--pf-c-form-control--success--BackgroundSizeX) var(--pf-c-form-control--success--BackgroundSizeY);
+  --pf-c-form-control--success--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%235ba352' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E");
+  --pf-c-form-control--m-warning--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-form-control--m-warning--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--m-warning--BorderBottomWidth));
+  --pf-c-form-control--m-warning--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+  --pf-c-form-control--m-warning--PaddingRight: var(--pf-global--spacer--xl, 2rem);
+  --pf-c-form-control--m-warning--BackgroundPositionX: calc(100% - calc(var(--pf-c-form-control--PaddingLeft) - 0.0625rem));
+  --pf-c-form-control--m-warning--BackgroundPositionY: center;
+  --pf-c-form-control--m-warning--BackgroundPosition: var(--pf-c-form-control--m-warning--BackgroundPositionX) var(--pf-c-form-control--m-warning--BackgroundPositionY);
+  --pf-c-form-control--m-warning--BackgroundSizeX: 1.25rem;
+  --pf-c-form-control--m-warning--BackgroundSizeY: var(--pf-c-form-control--FontSize);
+  --pf-c-form-control--m-warning--BackgroundSize: var(--pf-c-form-control--m-warning--BackgroundSizeX) var(--pf-c-form-control--m-warning--BackgroundSizeY);
+  --pf-c-form-control--m-warning--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23f0ab00' d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E");
+  --pf-c-form-control--invalid--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-form-control--invalid--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--invalid--BorderBottomWidth));
+  --pf-c-form-control--invalid--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+  --pf-c-form-control--invalid--PaddingRight: var(--pf-global--spacer--xl, 2rem);
+  --pf-c-form-control--invalid--BackgroundPositionX: calc(100% - var(--pf-c-form-control--PaddingLeft));
+  --pf-c-form-control--invalid--BackgroundPositionY: center;
+  --pf-c-form-control--invalid--BackgroundPosition: var(--pf-c-form-control--invalid--BackgroundPositionX) var(--pf-c-form-control--invalid--BackgroundPositionY);
+  --pf-c-form-control--invalid--BackgroundSizeX: var(--pf-c-form-control--FontSize);
+  --pf-c-form-control--invalid--BackgroundSizeY: var(--pf-c-form-control--FontSize);
+  --pf-c-form-control--invalid--BackgroundSize: var(--pf-c-form-control--invalid--BackgroundSizeX) var(--pf-c-form-control--invalid--BackgroundSizeY);
+  --pf-c-form-control--invalid--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fe5142' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E");
+  --pf-c-form-control--invalid--exclamation--Background: var(--pf-c-form-control--invalid--BackgroundUrl) var(--pf-c-form-control--invalid--BackgroundPosition) / var(--pf-c-form-control--invalid--BackgroundSize) no-repeat;
+  --pf-c-form-control--invalid--Background: var(--pf-c-form-control--BackgroundColor) var(--pf-c-form-control--invalid--exclamation--Background);
+  --pf-c-form-control--m-search--PaddingLeft: var(--pf-global--spacer--xl, 2rem);
+  --pf-c-form-control--m-search--BackgroundPosition: var(--pf-c-form-control--PaddingRight);
+  --pf-c-form-control--m-search--BackgroundSize: var(--pf-c-form-control--FontSize) var(--pf-c-form-control--FontSize);
+  --pf-c-form-control--m-search--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E");
+  --pf-c-form-control--m-icon--PaddingRight: calc(var(--pf-c-form-control--inset--base) + var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer));
+  --pf-c-form-control--m-icon--BackgroundUrl: none;
+  --pf-c-form-control--m-icon--BackgroundPositionX: calc(100% - var(--pf-c-form-control--inset--base));
+  --pf-c-form-control--m-icon--BackgroundPositionY: center;
+  --pf-c-form-control--m-icon--BackgroundSizeX: var(--pf-c-form-control--FontSize);
+  --pf-c-form-control--m-icon--BackgroundSizeY: var(--pf-c-form-control--FontSize);
+  --pf-c-form-control--m-icon--icon--spacer: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-form-control--m-icon--icon--PaddingRight: calc(var(--pf-c-form-control--inset--base) + var(--pf-c-form-control--invalid--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer) + var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer));
+  --pf-c-form-control--m-icon--icon--BackgroundPositionX: calc(var(--pf-c-form-control--m-icon--BackgroundPositionX) - var(--pf-c-form-control--m-icon--icon--spacer) - var(--pf-c-form-control--invalid--BackgroundSizeX));
+  --pf-c-form-control--m-icon--invalid--BackgroundUrl: var(--pf-c-form-control--invalid--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl);
+  --pf-c-form-control--m-icon--invalid--BackgroundPosition: var(--pf-c-form-control--invalid--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY);
+  --pf-c-form-control--m-icon--invalid--BackgroundSize: var(--pf-c-form-control--invalid--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY);
+  --pf-c-form-control--m-icon--success--BackgroundUrl: var(--pf-c-form-control--success--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl);
+  --pf-c-form-control--m-icon--success--BackgroundPosition: var(--pf-c-form-control--success--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY);
+  --pf-c-form-control--m-icon--success--BackgroundSize: var(--pf-c-form-control--success--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY);
+  --pf-c-form-control--m-icon--m-warning--BackgroundUrl: var(--pf-c-form-control--m-warning--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl);
+  --pf-c-form-control--m-icon--m-warning--BackgroundPosition: var(--pf-c-form-control--m-warning--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY);
+  --pf-c-form-control--m-icon--m-warning--BackgroundSize: var(--pf-c-form-control--m-warning--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY);
+  --pf-c-form-control--m-calendar--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E");
+  --pf-c-form-control--m-clock--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E");
+  --pf-c-form-control__select--PaddingRight: calc(var(--pf-global--spacer--lg, 1.5rem) + var(--pf-c-form-control--BorderWidth) + var(--pf-c-form-control--BorderWidth));
+  --pf-c-form-control__select--PaddingLeft: calc(var(--pf-global--spacer--sm, 0.5rem) - var(--pf-c-form-control--BorderWidth));
+  --pf-c-form-control__select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E");
+  --pf-c-form-control__select--BackgroundSize: .625em;
+  --pf-c-form-control__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md, 1rem) + 1px);
+  --pf-c-form-control__select--BackgroundPositionY: center;
+  --pf-c-form-control__select--BackgroundPosition: var(--pf-c-form-control__select--BackgroundPositionX) var(--pf-c-form-control__select--BackgroundPositionY);
+  --pf-c-form-control__select--success--PaddingRight: var(--pf-global--spacer--3xl, 4rem);
+  --pf-c-form-control__select--success--BackgroundPosition: calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem));
+  --pf-c-form-control__select--m-warning--PaddingRight: var(--pf-global--spacer--3xl, 4rem);
+  --pf-c-form-control__select--m-warning--BackgroundPosition: calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem) + 0.0625rem);
+  --pf-c-form-control__select--invalid--PaddingRight: var(--pf-global--spacer--3xl, 4rem);
+  --pf-c-form-control__select--invalid--BackgroundPosition: calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem));
+  --pf-c-form-control--textarea--Width: var(--pf-c-form-control--Width);
+  --pf-c-form-control--textarea--Height: auto;
+  --pf-c-form-control--textarea--success--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
+  --pf-c-form-control--textarea--m-warning--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
+  --pf-c-form-control--textarea--invalid--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
+  --pf-c-form-control--m-icon-sprite--success--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#success);
+  --pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#warning);
+  --pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#invalid);
+  --pf-c-form-control--m-icon-sprite__select--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#select);
+  --pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#search);
+  --pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#calendar);
+  --pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#clock);
+  --pf-c-form-control--m-icon-sprite__select--BackgroundSize: var(--pf-c-form-control--FontSize);
+  --pf-c-form-control--m-icon-sprite__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md, 1rem) + 7px);
+  --pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition: calc(100% - var(--pf-global--spacer--md, 1rem) + 1px - var(--pf-global--spacer--lg));
+  --pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition: calc(100% - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg) + 0.0625rem);
+  --pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition: calc(100% - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg));
+}
+
+textarea {
+  --pf-c-form-control--success--BackgroundPositionY: var(--pf-c-form-control--textarea--success--BackgroundPositionY);
+  --pf-c-form-control--invalid--BackgroundPositionY: var(--pf-c-form-control--textarea--invalid--BackgroundPositionY);
+  --pf-c-form-control--m-warning--BackgroundPositionY: var(--pf-c-form-control--textarea--m-warning--BackgroundPositionY);
+
+  width: var(--pf-c-form-control--textarea--Width);
+  height: var(--pf-c-form-control--textarea--Height);
+  vertical-align: bottom;
+  color: var(--pf-c-form-control--Color);
+  width: var(--pf-c-form-control--Width);
+  padding: var(--pf-c-form-control--PaddingTop) var(--pf-c-form-control--PaddingRight) var(--pf-c-form-control--PaddingBottom) var(--pf-c-form-control--PaddingLeft);
+  font-size: var(--pf-c-form-control--FontSize);
+  line-height: var(--pf-c-form-control--LineHeight);
+  background-color: var(--pf-c-form-control--BackgroundColor);
+  background-repeat: no-repeat;
+  border: var(--pf-c-form-control--BorderWidth) solid;
+  border-color: var(--pf-c-form-control--BorderTopColor) var(--pf-c-form-control--BorderRightColor) var(--pf-c-form-control--BorderBottomColor) var(--pf-c-form-control--BorderLeftColor);
+  border-radius: var(--pf-c-form-control--BorderRadius);
+  appearance: none;
+}
+
+textarea::placeholder {
+  color: var(--pf-c-form-control--placeholder--Color);
+}
+
+textarea:hover {
+  --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--hover--BorderBottomColor);
+}
+
+textarea:focus {
+  --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--focus--BorderBottomColor);
+
+  padding-bottom: var(--pf-c-form-control--focus--PaddingBottom);
+  border-bottom-width: var(--pf-c-form-control--focus--BorderBottomWidth);
+}
+
+textarea:invalid {
+  --pf-c-form-control--PaddingRight: var(--pf-c-form-control--invalid--PaddingRight);
+  --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--invalid--BorderBottomColor);
+
+  padding-bottom: var(--pf-c-form-control--invalid--PaddingBottom);
+  background-image: var(--pf-c-form-control--invalid--BackgroundUrl);
+  background-position: var(--pf-c-form-control--invalid--BackgroundPosition);
+  background-size: var(--pf-c-form-control--invalid--BackgroundSize);
+  border-bottom-width: var(--pf-c-form-control--invalid--BorderBottomWidth);
+}
+
+textarea:disabled {
+ --pf-c-form-control--BackgroundColor: var(--pf-c-form-control--disabled--BackgroundColor);
+  color: var(--pf-c-form-control--disabled--Color);
+  cursor: not-allowed;
+  border-color: var(--pf-c-form-control--disabled--BorderColor);
+}
+
+textarea[readonly] {
+  background-color: var(--pf-c-form-control--readonly--BackgroundColor);
+}
+
+.vertical { resize: vertical; }
+.horizontal { resize: horizontal; }
+.both { resize: both; }
+