@patternfly/elements 1.0.0

package/pf-tabs/pf-tabs.js

@@ -0,0 +1,101 @@
+import { __decorate } from "tslib";
+import { customElement, property } from 'lit/decorators.js';
+import { cascades } from '@patternfly/pfe-core/decorators.js';
+import { BaseTabs } from './BaseTabs.js';
+import { PfTab } from './pf-tab.js';
+import { PfTabPanel } from './pf-tab-panel.js';
+import { css } from "lit";
+const styles = css `[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/* workaround to disable scroll right button when last tab is aria-disabled */\n:host(:not([vertical])) ::slotted(pf-tab[aria-disabled=true]:last-of-type) {\n  translate: calc(-1 * var(--pf-c-tabs__link--disabled--before--BorderRightWidth, 1px)) 0;\n}\n\n/* workaround to disable scroll left button when first tab is aria-disabled */\n:host(:not([vertical])) ::slotted(pf-tab[aria-disabled=true]:first-of-type) {\n  translate: var(--pf-c-tabs__link--disabled--before--BorderRightWidth, 1px) 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}\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. Variants include
+ * horizontal, vertical, inset, and filled. Most tab variations are available as open (default) or
+ * box style tabs. Box style tabs also feature a light and dark variation.
+ *
+ * @attr {number} active-key - DOM Property: `activeKey` {@default `0`}
+ *
+ * @csspart container - outer container
+ * @csspart tabs-container - tabs container
+ * @csspart tabs - tablist
+ * @csspart panels - panels
+ *
+ * @slot tab - Must contain one or more `<pf-tab>`
+ * @slot - Must contain one or more `<pf-panel>`
+ *
+ * @cssprop     {<length>} --pf-c-tabs--Width {@default `auto`}
+ * @cssprop     {<length>} --pf-c-tabs--inset {@default `0`}
+ *
+ * @cssprop     {<color>}   --pf-c-tabs--before--BorderColor       {@default `#d2d2d2`}
+ * @cssprop     {<length>}  --pf-c-tabs--before--BorderTopWidth    {@default `0`}
+ * @cssprop     {<length>}  --pf-c-tabs--before--BorderRightWidth  {@default `0`}
+ * @cssprop     {<length>}  --pf-c-tabs--before--BorderBottomWidth {@default `1px`}
+ * @cssprop     {<length>}  --pf-c-tabs--before---BorderLeftWidth  {@default `0`}
+ *
+ * @cssprop     {<length>}  --pf-c-tabs--m-vertical--MaxWidth      {@default `15.625rem`}
+ *
+ * @cssprop     {<color>}   --pf-c-tabs--m-vertical__list--before--BorderColor       {@default `#d2d2d2`}
+ * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderTopWidth    {@default `0`}
+ * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderRightWidth  {@default `0`}
+ * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderBottomWidth {@default `0`}
+ * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderLeftWidth   {@default `1px`}
+ *
+ * @cssprop     {<length>}  --pf-c-tabs--m-vertical--m-box--inset  {@default `2rem`}
+ *
+ * @cssprop     {<display>} --pf-c-tabs__list--Display  {@default `flex`}
+ *
+ * @cssprop     {<length>}  --pf-c-tabs__scroll-button--Width                         {@default `3rem`}
+ * @cssprop     {<color>}   --pf-c-tabs__scroll-button--Color                         {@default `#151515`}
+ * @cssprop     {<color>}   --pf-c-tabs__scroll-button--BackgroundColor               {@default `#ffffff`}
+ * @cssprop     {<length>}  --pf-c-tabs__scroll-button--OutlineOffset                 {@default `-0.25rem`}
+ * @cssprop     {<time>}    --pf-c-tabs__scroll-button--TransitionDuration--margin    {@default `.125s`}
+ * @cssprop     {<time>}    --pf-c-tabs__scroll-button--TransitionDuration--transform {@default `.125s`}
+ * @cssprop     {<color>}   --pf-c-tabs__scroll-button--hover--Color                  {@default `#06c`}
+ *
+ * @cssprop     {<color>}   --pf-c-tabs__scroll-button--before--BorderColor           {@default `#d2d2d2`}
+ * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderRightWidth      {@default `0`}
+ * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderBottomWidth     {@default `1px`}
+ * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderLeftWidth       {@default `0`}
+ * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--border-width--base    {@default `1px`}
+ *
+ * @cssprop     {<color>} --pf-c-tabs__scroll-button--disabled--Color                 {@default `#d2d2d2`}
+ */
+let PfTabs = class PfTabs extends BaseTabs {
+    constructor() {
+        super(...arguments);
+        this.box = null;
+        this.vertical = false;
+        this.fill = false;
+        this.borderBottom = 'true';
+    }
+    static isTab(element) {
+        return element instanceof PfTab;
+    }
+    static isPanel(element) {
+        return element instanceof PfTabPanel;
+    }
+    get canShowScrollButtons() {
+        return !this.vertical;
+    }
+};
+PfTabs.styles = [...BaseTabs.styles, styles];
+PfTabs.scrollTimeoutDelay = 150;
+__decorate([
+    cascades('pf-tab', 'pf-tab-panel'),
+    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);
+PfTabs = __decorate([
+    customElement('pf-tabs')
+], PfTabs);
+export { PfTabs };
+//# sourceMappingURL=pf-tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-tabs.js","sourceRoot":"","sources":["pf-tabs.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAE9D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;;;AAI/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,QAAQ;IAA7B;;QAcwB,QAAG,GAA4B,IAAI,CAAC;QAGrB,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,KAAK,CAAC;QAGf,iBAAY,GAAqB,MAAM,CAAC;IAKpF,CAAC;IAvBC,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;IAcD,IAAc,oBAAoB;QAChC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;IACxB,CAAC;;AA1Be,aAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAE5B,yBAAkB,GAAG,GAAG,CAAC;AAWtB;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;AAvBvE,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CA4BlB;SA5BY,MAAM","sourcesContent":["import { customElement, property } from 'lit/decorators.js';\n\nimport { cascades } from '@patternfly/pfe-core/decorators.js';\n\nimport { BaseTabs } from './BaseTabs.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. Variants include\n * horizontal, vertical, inset, and filled. Most tab variations are available as open (default) or\n * box style tabs. Box style tabs also feature a light and dark variation.\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  @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"]}

package/pf-tabs/test/pf-tabs.e2e.d.ts

@@ -0,0 +1 @@
+export {};

package/pf-tabs/test/pf-tabs.e2e.js

@@ -0,0 +1,13 @@
+import { test } from '@playwright/test';
+import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+const tagName = 'pf-tabs';
+test.describe(tagName, () => {
+    // Run tests in this file with portrait-like viewport.
+    test.use({ viewport: { width: 1200, height: 1000 } });
+    test('snapshot', async ({ page }) => {
+        const componentPage = new PfeDemoPage(page, tagName);
+        await componentPage.navigate();
+        await componentPage.snapshot();
+    });
+});
+//# sourceMappingURL=pf-tabs.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-tabs.e2e.js","sourceRoot":"","sources":["pf-tabs.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,SAAS,CAAC;AAE1B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,sDAAsD;IACtD,IAAI,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;IACtD,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\n\nconst tagName = 'pf-tabs';\n\ntest.describe(tagName, () => {\n  // Run tests in this file with portrait-like viewport.\n  test.use({ viewport: { width: 1200, height: 1000 } });\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n});\n"]}

package/pf-tabs/test/pf-tabs.spec.d.ts

@@ -0,0 +1 @@
+import '@patternfly/pfe-tools/test/stub-logger.js';

package/pf-tabs/test/pf-tabs.spec.js

@@ -0,0 +1,178 @@
+import { expect, html, nextFrame, aTimeout } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+import { setViewport, sendKeys } from '@web/test-runner-commands';
+import { BaseTab } from '../BaseTab.js';
+import { PfTabs } from '../pf-tabs.js';
+import '@patternfly/pfe-tools/test/stub-logger.js';
+const TEMPLATE = html `
+    <pf-tabs>
+      <pf-tab slot="tab" active>Users</pf-tab>
+      <pf-tab-panel>Users</pf-tab-panel>
+      <pf-tab slot="tab">Containers</pf-tab>
+      <pf-tab-panel>Containers</pf-tab-panel>
+      <pf-tab slot="tab">Database</pf-tab>
+      <pf-tab-panel>Database</pf-tab-panel>
+      <pf-tab slot="tab" disabled>Disabled</pf-tab>
+      <pf-tab-panel>Disabled</pf-tab-panel>
+      <pf-tab slot="tab" aria-disabled="true">Aria Disabled</pf-tab>
+      <pf-tab-panel>Aria Disabled</pf-tab-panel>
+    </pf-tabs>
+  `;
+const DISABLED = html `
+  <pf-tabs>
+    <pf-tab slot="tab" disabled>Users</pf-tab>
+    <pf-tab-panel>Users</pf-tab-panel>
+    <pf-tab slot="tab">Containers</pf-tab>
+    <pf-tab-panel>Containers</pf-tab-panel>
+    <pf-tab slot="tab">Database</pf-tab>
+    <pf-tab-panel>Database</pf-tab-panel>
+    <pf-tab slot="tab" disabled>Disabled</pf-tab>
+    <pf-tab-panel>Disabled</pf-tab-panel>
+    <pf-tab slot="tab" aria-disabled="true">Aria Disabled</pf-tab>
+    <pf-tab-panel>Aria Disabled</pf-tab-panel>
+  </pf-tabs>
+`;
+describe('<pf-tabs>', function () {
+    it('should upgrade', async function () {
+        const el = await createFixture(TEMPLATE);
+        expect(el, 'pf-tabs should be an instance of PfeTabs')
+            .to.be.an.instanceOf(customElements.get('pf-tabs'))
+            .and
+            .to.be.an.instanceOf(PfTabs);
+    });
+    it('should apply correct aria attributes', async function () {
+        const el = await createFixture(TEMPLATE);
+        await nextFrame();
+        const tabs = el.querySelectorAll('pf-tab');
+        const tabPanels = el.querySelectorAll('pf-tab-panels');
+        tabs.forEach(function (tab, index) {
+            const tabId = tab.getAttribute('id');
+            const tabControls = tab.getAttribute('aria-controls');
+            const tabButton = tab.shadowRoot?.querySelector('button');
+            expect(tabButton?.getAttribute('role')).to.equal('tab');
+            tabPanels.forEach(function (panel, pindex) {
+                if (index === pindex) {
+                    expect(panel.getAttribute('aria-labelledby')).to.equal(tabId);
+                    expect(panel.id).to.equal(tabControls);
+                }
+            });
+        });
+    });
+    it('should activate the first focusable tab when first tab is disabled and no active is given', async function () {
+        const el = await createFixture(DISABLED);
+        await nextFrame();
+        const secondTab = el.querySelector('pf-tab:nth-of-type(2)');
+        expect(secondTab.hasAttribute('active')).to.equal(true);
+    });
+    it('should activate tab when given an active attribute', async function () {
+        const el = await createFixture(TEMPLATE);
+        const tab = el.querySelector('pf-tab:nth-of-type(3)');
+        tab.setAttribute('active', '');
+        await nextFrame();
+        expect(tab.hasAttribute('active'), 'active attr').to.equal(true);
+        const panel = (await a11ySnapshot()).children.find(x => x.role === 'tabpanel');
+        expect(panel?.name, 'active panel').to.equal('Database');
+    });
+    it('should activate tab when activeIndex property is changed', async function () {
+        const el = await createFixture(TEMPLATE);
+        el.activeIndex = 2;
+        await nextFrame();
+        el.activeIndex = 0;
+        await nextFrame();
+        const tab = el.querySelector('pf-tab:first-of-type');
+        expect(tab.hasAttribute('active')).to.equal(true);
+        const panel = (await a11ySnapshot()).children.find(x => x.role === 'tabpanel');
+        expect(panel?.name, 'active panel').to.equal('Users');
+    });
+    it('should change focus when keyboard navigation is used', async function () {
+        const el = await createFixture(TEMPLATE);
+        await el.updateComplete;
+        const firstTab = el.querySelector('pf-tab:first-of-type');
+        const secondTab = el.querySelector('pf-tab:nth-of-type(2)')?.id;
+        firstTab?.focus();
+        await nextFrame();
+        const initial = document.activeElement?.id;
+        await sendKeys({ down: 'ArrowRight' });
+        await nextFrame();
+        const after = document.activeElement?.id;
+        expect(initial).to.not.equal(after);
+        expect(secondTab).to.equal(after);
+    });
+    it('should open panel at same index of selected tab', async function () {
+        const el = await createFixture(TEMPLATE);
+        await nextFrame();
+        el.activeIndex = 1;
+        await nextFrame();
+        const inactivePanel = el.querySelector('pf-tab-panel:first-of-type');
+        /* given active-key of 1 on a zero based index, nth-of-type(n) takes a 1 based index = 2. */
+        const activePanel = el.querySelector('pf-tab-panel:nth-of-type(2)');
+        expect(inactivePanel.hasAttribute('hidden')).to.equal(true);
+        expect(activePanel.hasAttribute('hidden')).to.equal(false);
+    });
+    describe('vertical tabs', function () {
+        it('should have vertical styles', async function () {
+            const el = await createFixture(TEMPLATE);
+            el.setAttribute('vertical', '');
+            await nextFrame();
+            const tabs = el.shadowRoot.querySelector('[part="tabs"]');
+            const tabsVerticalStyles = getComputedStyle(tabs).flexDirection;
+            expect(tabsVerticalStyles).to.be.equal('column');
+        });
+    });
+    describe('disabled tabs', function () {
+        beforeEach(async function () {
+            await setViewport({ width: 320, height: 640 });
+        });
+        it('should aria-disable the tab if disabled', async function () {
+            const el = await createFixture(TEMPLATE);
+            const disabledTab = el.querySelector('pf-tab:nth-of-type(2)');
+            disabledTab.disabled = true;
+            await nextFrame();
+            const tab = (await a11ySnapshot()).children.find(x => x.role === 'tab' && x.name === 'Containers');
+            expect(tab?.disabled).to.be.true;
+        });
+        it('should have disabled css styles if disabled', async function () {
+            const el = await createFixture(TEMPLATE);
+            const disabledTab = el.querySelector('pf-tab:first-of-type');
+            disabledTab.setAttribute('disabled', 'disabled');
+            await nextFrame();
+            const button = disabledTab.shadowRoot.firstElementChild;
+            const disabledStyles = getComputedStyle(button).backgroundColor;
+            expect(disabledStyles).to.equal('rgb(245, 245, 245)');
+        });
+        it('should have disabled css styles if aria-disabled attribute is true', async function () {
+            const el = await createFixture(TEMPLATE);
+            const disabledTab = el.querySelector('pf-tab:first-of-type');
+            disabledTab.setAttribute('aria-disabled', 'true');
+            await nextFrame();
+            const button = disabledTab.shadowRoot.firstElementChild;
+            const disabledStyles = getComputedStyle(button).backgroundColor;
+            expect(disabledStyles).to.equal('rgb(245, 245, 245)');
+        });
+    });
+    describe('on small screen', function () {
+        beforeEach(async function () {
+            await setViewport({ width: 320, height: 640 });
+        });
+        it('should overflow if too wide', async function () {
+            const el = await createFixture(TEMPLATE);
+            const tabs = el.shadowRoot.querySelector('[part="tabs"]');
+            const tabsOverflow = getComputedStyle(tabs).overflowX === 'auto';
+            expect(tabsOverflow).to.equal(true);
+        });
+        it('should have visible scroll buttons if overflowed', async function () {
+            const el = await createFixture(TEMPLATE);
+            // Property 'scrollTimeoutDelay' is protected and only accessible within class 'PfeTabs' and its subclasses.
+            // using 150 as a static representation.
+            await aTimeout(150);
+            const previousTab = el.shadowRoot.querySelector('#previousTab');
+            const nextTab = el.shadowRoot.querySelector('#nextTab');
+            const prevDisplayStyle = getComputedStyle(previousTab).display;
+            const nextDisplayStyle = getComputedStyle(nextTab).display;
+            expect(prevDisplayStyle).to.not.equal('none');
+            expect(nextDisplayStyle).to.not.equal('none');
+        });
+    });
+});
+//# sourceMappingURL=pf-tabs.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-tabs.spec.js","sourceRoot":"","sources":["pf-tabs.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,6CAA6C,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAElE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC,OAAO,2CAA2C,CAAC;AAEnD,MAAM,QAAQ,GAAG,IAAI,CAAA;;;;;;;;;;;;;GAalB,CAAC;AAEJ,MAAM,QAAQ,GAAG,IAAI,CAAA;;;;;;;;;;;;;CAapB,CAAC;AAEF,QAAQ,CAAC,WAAW,EAAE;IACpB,EAAE,CAAC,gBAAgB,EAAE,KAAK;QACxB,MAAM,EAAE,GAAG,MAAM,aAAa,CAAS,QAAQ,CAAC,CAAC;QACjD,MAAM,CAAC,EAAE,EAAE,0CAA0C,CAAC;aACnD,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;aAClD,GAAG;aACH,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK;QAC9C,MAAM,EAAE,GAAG,MAAM,aAAa,CAAS,QAAQ,CAAC,CAAC;QACjD,MAAM,SAAS,EAAE,CAAC;QAClB,MAAM,IAAI,GAAG,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC3C,MAAM,SAAS,GAAG,EAAE,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;QAEvD,IAAI,CAAC,OAAO,CAAC,UAAS,GAAY,EAAE,KAAa;YAC/C,MAAM,KAAK,GAAG,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YACrC,MAAM,WAAW,GAAG,GAAG,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC;YACtD,MAAM,SAAS,GAAG,GAAG,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;YAC1D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YACxD,SAAS,CAAC,OAAO,CAAC,UAAS,KAAc,EAAE,MAAc;gBACvD,IAAI,KAAK,KAAK,MAAM,EAAE;oBACpB,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;oBAC9D,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;iBACxC;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2FAA2F,EAAE,KAAK;QACnG,MAAM,EAAE,GAAG,MAAM,aAAa,CAAS,QAAQ,CAAC,CAAC;QACjD,MAAM,SAAS,EAAE,CAAC;QAClB,MAAM,SAAS,GAAG,EAAE,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QAC5D,MAAM,CAAC,SAAU,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC3D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oDAAoD,EAAE,KAAK;QAC5D,MAAM,EAAE,GAAG,MAAM,aAAa,CAAS,QAAQ,CAAC,CAAC;QACjD,MAAM,GAAG,GAAG,EAAE,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QACtD,GAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QAChC,MAAM,SAAS,EAAE,CAAC;QAClB,MAAM,CAAC,GAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,aAAa,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAClE,MAAM,KAAK,GAAG,CAAC,MAAM,YAAY,EAAE,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC;QAC/E,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,cAAc,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;IAC3D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0DAA0D,EAAE,KAAK;QAClE,MAAM,EAAE,GAAG,MAAM,aAAa,CAAS,QAAQ,CAAC,CAAC;QACjD,EAAE,CAAC,WAAW,GAAG,CAAC,CAAC;QACnB,MAAM,SAAS,EAAE,CAAC;QAClB,EAAE,CAAC,WAAW,GAAG,CAAC,CAAC;QACnB,MAAM,SAAS,EAAE,CAAC;QAClB,MAAM,GAAG,GAAG,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QACrD,MAAM,CAAC,GAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACnD,MAAM,KAAK,GAAG,CAAC,MAAM,YAAY,EAAE,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC;QAC/E,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,cAAc,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACxD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sDAAsD,EAAE,KAAK;QAC9D,MAAM,EAAE,GAAG,MAAM,aAAa,CAAS,QAAQ,CAAC,CAAC;QACjD,MAAM,EAAE,CAAC,cAAc,CAAC;QACxB,MAAM,QAAQ,GAAG,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAgB,CAAC;QACzE,MAAM,SAAS,GAAG,EAAE,CAAC,aAAa,CAAC,uBAAuB,CAAC,EAAE,EAAE,CAAC;QAChE,QAAQ,EAAE,KAAK,EAAE,CAAC;QAClB,MAAM,SAAS,EAAE,CAAC;QAClB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,EAAE,EAAE,CAAC;QAC3C,MAAM,QAAQ,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAC;QACvC,MAAM,SAAS,EAAE,CAAC;QAClB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,EAAE,EAAE,CAAC;QACzC,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACpC,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iDAAiD,EAAE,KAAK;QACzD,MAAM,EAAE,GAAG,MAAM,aAAa,CAAS,QAAQ,CAAC,CAAC;QACjD,MAAM,SAAS,EAAE,CAAC;QAClB,EAAE,CAAC,WAAW,GAAG,CAAC,CAAC;QACnB,MAAM,SAAS,EAAE,CAAC;QAClB,MAAM,aAAa,GAAG,EAAE,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC;QACrE,4FAA4F;QAC5F,MAAM,WAAW,GAAG,EAAE,CAAC,aAAa,CAAC,6BAA6B,CAAC,CAAC;QACpE,MAAM,CAAC,aAAc,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAC7D,MAAM,CAAC,WAAY,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC9D,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,eAAe,EAAE;QACxB,EAAE,CAAC,6BAA6B,EAAE,KAAK;YACrC,MAAM,EAAE,GAAG,MAAM,aAAa,CAAS,QAAQ,CAAC,CAAC;YACjD,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;YAChC,MAAM,SAAS,EAAE,CAAC;YAClB,MAAM,IAAI,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,eAAe,CAAE,CAAC;YAC5D,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC,aAAa,CAAC;YAChE,MAAM,CAAC,kBAAkB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACnD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,eAAe,EAAE;QACxB,UAAU,CAAC,KAAK;YACd,MAAM,WAAW,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;QACjD,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,yCAAyC,EAAE,KAAK;YACjD,MAAM,EAAE,GAAG,MAAM,aAAa,CAAS,QAAQ,CAAC,CAAC;YACjD,MAAM,WAAW,GAAG,EAAE,CAAC,aAAa,CAAC,uBAAuB,CAAa,CAAC;YAC1E,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC;YAC5B,MAAM,SAAS,EAAE,CAAC;YAClB,MAAM,GAAG,GAAG,CAAC,MAAM,YAAY,EAAE,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC;YACnG,MAAM,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QACnC,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,6CAA6C,EAAE,KAAK;YACrD,MAAM,EAAE,GAAG,MAAM,aAAa,CAAS,QAAQ,CAAC,CAAC;YACjD,MAAM,WAAW,GAAG,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAE,CAAC;YAC9D,WAAW,CAAC,YAAY,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;YACjD,MAAM,SAAS,EAAE,CAAC;YAClB,MAAM,MAAM,GAAG,WAAY,CAAC,UAAW,CAAC,iBAAkB,CAAC;YAC3D,MAAM,cAAc,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC,eAAe,CAAC;YAChE,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAC;QACxD,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,oEAAoE,EAAE,KAAK;YAC5E,MAAM,EAAE,GAAG,MAAM,aAAa,CAAS,QAAQ,CAAC,CAAC;YACjD,MAAM,WAAW,GAAG,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAE,CAAC;YAC9D,WAAW,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;YAClD,MAAM,SAAS,EAAE,CAAC;YAClB,MAAM,MAAM,GAAG,WAAY,CAAC,UAAW,CAAC,iBAAkB,CAAC;YAC3D,MAAM,cAAc,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC,eAAe,CAAC;YAChE,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAC;QACxD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,iBAAiB,EAAE;QAC1B,UAAU,CAAC,KAAK;YACd,MAAM,WAAW,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;QACjD,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK;YACrC,MAAM,EAAE,GAAG,MAAM,aAAa,CAAS,QAAQ,CAAC,CAAC;YACjD,MAAM,IAAI,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,eAAe,CAAE,CAAC;YAC5D,MAAM,YAAY,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC,SAAS,KAAK,MAAM,CAAC;YACjE,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACtC,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,kDAAkD,EAAE,KAAK;YAC1D,MAAM,EAAE,GAAG,MAAM,aAAa,CAAS,QAAQ,CAAC,CAAC;YACjD,4GAA4G;YAC5G,wCAAwC;YACxC,MAAM,QAAQ,CAAC,GAAG,CAAC,CAAC;YACpB,MAAM,WAAW,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,cAAc,CAAE,CAAC;YAClE,MAAM,OAAO,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,UAAU,CAAE,CAAC;YAC1D,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC;YAC/D,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC;YAC3D,MAAM,CAAC,gBAAgB,CAAE,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YAC/C,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAChD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect, html, nextFrame, aTimeout } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';\nimport { setViewport, sendKeys } from '@web/test-runner-commands';\n\nimport { BaseTab } from '../BaseTab.js';\nimport { PfTabs } from '../pf-tabs.js';\n\nimport '@patternfly/pfe-tools/test/stub-logger.js';\n\nconst TEMPLATE = html`\n    <pf-tabs>\n      <pf-tab slot=\"tab\" active>Users</pf-tab>\n      <pf-tab-panel>Users</pf-tab-panel>\n      <pf-tab slot=\"tab\">Containers</pf-tab>\n      <pf-tab-panel>Containers</pf-tab-panel>\n      <pf-tab slot=\"tab\">Database</pf-tab>\n      <pf-tab-panel>Database</pf-tab-panel>\n      <pf-tab slot=\"tab\" disabled>Disabled</pf-tab>\n      <pf-tab-panel>Disabled</pf-tab-panel>\n      <pf-tab slot=\"tab\" aria-disabled=\"true\">Aria Disabled</pf-tab>\n      <pf-tab-panel>Aria Disabled</pf-tab-panel>\n    </pf-tabs>\n  `;\n\nconst DISABLED = html`\n  <pf-tabs>\n    <pf-tab slot=\"tab\" disabled>Users</pf-tab>\n    <pf-tab-panel>Users</pf-tab-panel>\n    <pf-tab slot=\"tab\">Containers</pf-tab>\n    <pf-tab-panel>Containers</pf-tab-panel>\n    <pf-tab slot=\"tab\">Database</pf-tab>\n    <pf-tab-panel>Database</pf-tab-panel>\n    <pf-tab slot=\"tab\" disabled>Disabled</pf-tab>\n    <pf-tab-panel>Disabled</pf-tab-panel>\n    <pf-tab slot=\"tab\" aria-disabled=\"true\">Aria Disabled</pf-tab>\n    <pf-tab-panel>Aria Disabled</pf-tab-panel>\n  </pf-tabs>\n`;\n\ndescribe('<pf-tabs>', function() {\n  it('should upgrade', async function() {\n    const el = await createFixture<PfTabs>(TEMPLATE);\n    expect(el, 'pf-tabs should be an instance of PfeTabs')\n      .to.be.an.instanceOf(customElements.get('pf-tabs'))\n      .and\n      .to.be.an.instanceOf(PfTabs);\n  });\n\n  it('should apply correct aria attributes', async function() {\n    const el = await createFixture<PfTabs>(TEMPLATE);\n    await nextFrame();\n    const tabs = el.querySelectorAll('pf-tab');\n    const tabPanels = el.querySelectorAll('pf-tab-panels');\n\n    tabs.forEach(function(tab: Element, index: number) {\n      const tabId = tab.getAttribute('id');\n      const tabControls = tab.getAttribute('aria-controls');\n      const tabButton = tab.shadowRoot?.querySelector('button');\n      expect(tabButton?.getAttribute('role')).to.equal('tab');\n      tabPanels.forEach(function(panel: Element, pindex: number) {\n        if (index === pindex) {\n          expect(panel.getAttribute('aria-labelledby')).to.equal(tabId);\n          expect(panel.id).to.equal(tabControls);\n        }\n      });\n    });\n  });\n\n  it('should activate the first focusable tab when first tab is disabled and no active is given', async function() {\n    const el = await createFixture<PfTabs>(DISABLED);\n    await nextFrame();\n    const secondTab = el.querySelector('pf-tab:nth-of-type(2)');\n    expect(secondTab!.hasAttribute('active')).to.equal(true);\n  });\n\n  it('should activate tab when given an active attribute', async function() {\n    const el = await createFixture<PfTabs>(TEMPLATE);\n    const tab = el.querySelector('pf-tab:nth-of-type(3)');\n    tab!.setAttribute('active', '');\n    await nextFrame();\n    expect(tab!.hasAttribute('active'), 'active attr').to.equal(true);\n    const panel = (await a11ySnapshot()).children.find(x => x.role === 'tabpanel');\n    expect(panel?.name, 'active panel').to.equal('Database');\n  });\n\n  it('should activate tab when activeIndex property is changed', async function() {\n    const el = await createFixture<PfTabs>(TEMPLATE);\n    el.activeIndex = 2;\n    await nextFrame();\n    el.activeIndex = 0;\n    await nextFrame();\n    const tab = el.querySelector('pf-tab:first-of-type');\n    expect(tab!.hasAttribute('active')).to.equal(true);\n    const panel = (await a11ySnapshot()).children.find(x => x.role === 'tabpanel');\n    expect(panel?.name, 'active panel').to.equal('Users');\n  });\n\n  it('should change focus when keyboard navigation is used', async function() {\n    const el = await createFixture<PfTabs>(TEMPLATE);\n    await el.updateComplete;\n    const firstTab = el.querySelector('pf-tab:first-of-type') as HTMLElement;\n    const secondTab = el.querySelector('pf-tab:nth-of-type(2)')?.id;\n    firstTab?.focus();\n    await nextFrame();\n    const initial = document.activeElement?.id;\n    await sendKeys({ down: 'ArrowRight' });\n    await nextFrame();\n    const after = document.activeElement?.id;\n    expect(initial).to.not.equal(after);\n    expect(secondTab).to.equal(after);\n  });\n\n  it('should open panel at same index of selected tab', async function() {\n    const el = await createFixture<PfTabs>(TEMPLATE);\n    await nextFrame();\n    el.activeIndex = 1;\n    await nextFrame();\n    const inactivePanel = el.querySelector('pf-tab-panel:first-of-type');\n    /* given active-key of 1 on a zero based index, nth-of-type(n) takes a 1 based index = 2. */\n    const activePanel = el.querySelector('pf-tab-panel:nth-of-type(2)');\n    expect(inactivePanel!.hasAttribute('hidden')).to.equal(true);\n    expect(activePanel!.hasAttribute('hidden')).to.equal(false);\n  });\n\n  describe('vertical tabs', function() {\n    it('should have vertical styles', async function() {\n      const el = await createFixture<PfTabs>(TEMPLATE);\n      el.setAttribute('vertical', '');\n      await nextFrame();\n      const tabs = el.shadowRoot!.querySelector('[part=\"tabs\"]')!;\n      const tabsVerticalStyles = getComputedStyle(tabs).flexDirection;\n      expect(tabsVerticalStyles).to.be.equal('column');\n    });\n  });\n\n  describe('disabled tabs', function() {\n    beforeEach(async function() {\n      await setViewport({ width: 320, height: 640 });\n    });\n\n    it('should aria-disable the tab if disabled', async function() {\n      const el = await createFixture<PfTabs>(TEMPLATE);\n      const disabledTab = el.querySelector('pf-tab:nth-of-type(2)')! as BaseTab;\n      disabledTab.disabled = true;\n      await nextFrame();\n      const tab = (await a11ySnapshot()).children.find(x => x.role === 'tab' && x.name === 'Containers');\n      expect(tab?.disabled).to.be.true;\n    });\n\n    it('should have disabled css styles if disabled', async function() {\n      const el = await createFixture<PfTabs>(TEMPLATE);\n      const disabledTab = el.querySelector('pf-tab:first-of-type')!;\n      disabledTab.setAttribute('disabled', 'disabled');\n      await nextFrame();\n      const button = disabledTab!.shadowRoot!.firstElementChild!;\n      const disabledStyles = getComputedStyle(button).backgroundColor;\n      expect(disabledStyles).to.equal('rgb(245, 245, 245)');\n    });\n\n    it('should have disabled css styles if aria-disabled attribute is true', async function() {\n      const el = await createFixture<PfTabs>(TEMPLATE);\n      const disabledTab = el.querySelector('pf-tab:first-of-type')!;\n      disabledTab.setAttribute('aria-disabled', 'true');\n      await nextFrame();\n      const button = disabledTab!.shadowRoot!.firstElementChild!;\n      const disabledStyles = getComputedStyle(button).backgroundColor;\n      expect(disabledStyles).to.equal('rgb(245, 245, 245)');\n    });\n  });\n\n  describe('on small screen', function() {\n    beforeEach(async function() {\n      await setViewport({ width: 320, height: 640 });\n    });\n\n    it('should overflow if too wide', async function() {\n      const el = await createFixture<PfTabs>(TEMPLATE);\n      const tabs = el.shadowRoot!.querySelector('[part=\"tabs\"]')!;\n      const tabsOverflow = getComputedStyle(tabs).overflowX === 'auto';\n      expect(tabsOverflow).to.equal(true);\n    });\n\n    it('should have visible scroll buttons if overflowed', async function() {\n      const el = await createFixture<PfTabs>(TEMPLATE);\n      // Property 'scrollTimeoutDelay' is protected and only accessible within class 'PfeTabs' and its subclasses.\n      // using 150 as a static representation.\n      await aTimeout(150);\n      const previousTab = el.shadowRoot!.querySelector('#previousTab')!;\n      const nextTab = el.shadowRoot!.querySelector('#nextTab')!;\n      const prevDisplayStyle = getComputedStyle(previousTab).display;\n      const nextDisplayStyle = getComputedStyle(nextTab).display;\n      expect(prevDisplayStyle ).to.not.equal('none');\n      expect(nextDisplayStyle).to.not.equal('none');\n    });\n  });\n});\n"]}

package/pf-tile/BaseTile.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+/**
+ * @slot icon           - Icon expects a `<pf-icon>` or `<svg>`
+ * @slot title          - the title of the tile should be a heading
+ * @slot                - The content should be a paragraph
+ *
+ * @csspart icon        - container for the icon
+ * @csspart title       - container for the title
+ * @csspart body        - container for the body content
+ */
+export declare abstract class BaseTile extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+}

package/pf-tile/BaseTile.js

@@ -0,0 +1,28 @@
+import { LitElement, html } from 'lit';
+/**
+ * @slot icon           - Icon expects a `<pf-icon>` or `<svg>`
+ * @slot title          - the title of the tile should be a heading
+ * @slot                - The content should be a paragraph
+ *
+ * @csspart icon        - container for the icon
+ * @csspart title       - container for the title
+ * @csspart body        - container for the body content
+ */
+export class BaseTile extends LitElement {
+    render() {
+        return html `
+      <div part="header">
+        <div part="icon">
+          <slot id="icon" name="icon"></slot>
+        </div>
+        <div part="title">
+          <slot id="title" name="title"></slot>
+        </div>
+      </div>
+      <div part="body">
+        <slot id="body"></slot>
+      </div>
+    `;
+    }
+}
+//# sourceMappingURL=BaseTile.js.map

package/pf-tile/BaseTile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseTile.js","sourceRoot":"","sources":["BaseTile.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAGvC;;;;;;;;GAQG;AACH,MAAM,OAAgB,QAAS,SAAQ,UAAU;IACtC,MAAM;QACb,OAAO,IAAI,CAAA;;;;;;;;;;;;KAYV,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { LitElement, html } from 'lit';\n\n\n/**\n * @slot icon           - Icon expects a `<pf-icon>` or `<svg>`\n * @slot title          - the title of the tile should be a heading\n * @slot                - The content should be a paragraph\n *\n * @csspart icon        - container for the icon\n * @csspart title       - container for the title\n * @csspart body        - container for the body content\n */\nexport abstract class BaseTile extends LitElement {\n  override render() {\n    return html`\n      <div part=\"header\">\n        <div part=\"icon\">\n          <slot id=\"icon\" name=\"icon\"></slot>\n        </div>\n        <div part=\"title\">\n          <slot id=\"title\" name=\"title\"></slot>\n        </div>\n      </div>\n      <div part=\"body\">\n        <slot id=\"body\"></slot>\n      </div>\n    `;\n  }\n}\n"]}

package/pf-tile/demo/demo.css

@@ -0,0 +1,59 @@
+:host {
+  display: block;
+}
+
+section {
+  margin: 0 auto;
+  padding: 0 16px 32px;
+  width: 100%;
+  max-width: 1008px;
+}
+
+.pf-l-flex {
+  display: var(--pf-l-flex--Display, flex);
+  flex-wrap: var(--pf-l-flex--FlexWrap, wrap);
+  align-items: var(--pf-l-flex--AlignItems, baseline);
+}
+
+.pf-l-flex > * {
+  order: var(--pf-l-flex--item--Order, 0);
+  max-width: 100%;
+  margin-right: var(--pf-l-flex--spacer, var(--pf-l-flex--spacer-base, 1rem));
+}
+
+.pf-l-flex > .pf-m-flex-1 {
+  flex: 1 0 0;
+}
+
+@media screen and (min-width: 576px) {
+  .pf-l-flex > * {
+    order: var(--pf-l-flex--item--Order-on-sm, var(--pf-l-flex--item--Order, 0));
+  }
+}
+@media screen and (min-width: 768px) {
+  .pf-l-flex > * {
+    order: var(--pf-l-flex--item--Order-on-md, var(--pf-l-flex--item--Order-on-sm, var(--pf-l-flex--item--Order, 0)));
+  }
+}
+@media screen and (min-width: 992px) {
+  .pf-l-flex > * {
+    order: var(--pf-l-flex--item--Order-on-lg, var(--pf-l-flex--item--Order-on-md, var(--pf-l-flex--item--Order-on-sm, var(--pf-l-flex--item--Order, 0))));
+  }
+}
+@media screen and (min-width: 1200px) {
+  .pf-l-flex > * {
+    order: var(--pf-l-flex--item--Order-on-xl, var(--pf-l-flex--item--Order-on-lg, var(--pf-l-flex--item--Order-on-md, var(--pf-l-flex--item--Order-on-sm, var(--pf-l-flex--item--Order, 0)))));
+  }
+}
+@media screen and (min-width: 1450px) {
+  .pf-l-flex > * {
+    order: var(--pf-l-flex--item--Order-on-2xl, var(--pf-l-flex--item--Order-on-xl, var(--pf-l-flex--item--Order-on-lg, var(--pf-l-flex--item--Order-on-md, var(--pf-l-flex--item--Order-on-sm, var(--pf-l-flex--item--Order, 0))))));
+  }
+}
+.pf-l-flex > *:last-child {
+  --pf-l-flex--spacer: 0;
+}
+
+.pf-l-flex.pf-m-flex {
+  display: var(--pf-l-flex--Display, flex);
+}

package/pf-tile/demo/pf-tile.js

@@ -0,0 +1,21 @@
+import '@patternfly/elements/pf-tile/pf-tile.js';
+
+const container = document.getElementById('keyboard-interaction');
+
+function selectByEvent(event) {
+  const tile = event.composedPath().find(node => node.localName === 'pf-tile');
+  if (tile) {
+    for (const child of container.querySelectorAll('pf-tile')) {
+      child.selected = tile === child && !child.disabled;
+    }
+  }
+}
+container.addEventListener('click', selectByEvent);
+container.addEventListener('keydown', function(event) {
+  switch (event.key) {
+    case ' ':
+    case 'Enter':
+      event.preventDefault();
+      selectByEvent(event);
+  }
+});

package/pf-tile/pf-tile.css

@@ -0,0 +1,128 @@
+:host {
+  position: relative;
+  display: inline-grid;
+  padding: var(--pf-c-tile--PaddingTop, var(--pf-global--spacer--lg, 1.5rem))
+          var(--pf-c-tile--PaddingRight, var(--pf-global--spacer--lg, 1.5rem))
+          var(--pf-c-tile--PaddingBottom, var(--pf-global--spacer--lg, 1.5rem))
+          var(--pf-c-tile--PaddingLeft, var(--pf-global--spacer--lg, 1.5rem));
+  text-align: center;
+  cursor: pointer;
+  background-color: var(--pf-c-tile--BackgroundColor,
+                    var(--pf-global--BackgroundColor--100,
+                    var(--pf-global--BackgroundColor--light-100), #ffffff));
+  grid-template-rows: -webkit-min-content;
+  grid-template-rows: min-content;
+  transition: var(--pf-c-tile--Transition, none);
+  transform: translateY(var(--pf-c-tile--TranslateY, 0));
+}
+
+:host::before,
+:host::after {
+  position: absolute;
+  pointer-events: none;
+  content: "";
+}
+
+:host::before {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border: var(--pf-c-tile--before--BorderWidth, var(--pf-global--BorderWidth--sm, 1px))
+          solid
+          var(--pf-c-tile--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2));
+}
+
+:host::after {
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: var(--pf-c-tile--after--Height, var(--pf-global--BorderWidth--lg, 3px));
+  background-color: var(--pf-c-tile--after--BackgroundColor, transparent);
+  transition: var(--pf-c-tile--after--Transition, none);
+  transform: scaleY(var(--pf-c-tile--after--ScaleY, 1)) translateY(var(--pf-c-tile--after--TranslateY, 0));
+}
+
+:host(:hover) {
+  --pf-c-tile__title--Color: var(--pf-c-tile--hover__title--Color, var(--pf-global--primary-color--100, #06c));
+  --pf-c-tile__icon--Color: var(--pf-c-tile--hover__icon--Color, var(--pf-global--primary-color--100, #06c));
+  --pf-c-tile--after--BackgroundColor: var(--pf-c-tile--hover--after--BackgroundColor, var(--pf-global--active-color--400, #73bcf7));
+}
+
+:host(:focus) {
+  --pf-c-tile__title--Color: var(--pf-c-tile--focus__title--Color, var(--pf-global--primary-color--100, #06c));
+  --pf-c-tile__icon--Color: var(--pf-c-tile--focus__icon--Color, var(--pf-global--primary-color--100, #06c));
+  --pf-c-tile--after--BackgroundColor: var(--pf-c-tile--focus--after--BackgroundColor, var(--pf-global--active-color--400, #73bcf7));
+}
+
+:host(:active),
+:host([selected]) {
+  --pf-c-tile__title--Color: var(--pf-c-tile--m-selected__title--Color, var(--pf-global--primary-color--100, #06c));
+  --pf-c-tile__icon--Color: var(--pf-c-tile--m-selected__icon--Color, var(--pf-global--primary-color--100, #06c));
+  --pf-c-tile--TranslateY: var(--pf-c-tile--m-selected--TranslateY,
+                            calc(-1 * var(--pf-c-tile--m-selected--after--ScaleY, 2) * var(--pf-c-tile--m-selected--after--Height,
+                            var(--pf-global--BorderWidth--lg, 3px))));
+  --pf-c-tile--Transition: var(--pf-c-tile--m-selected--Transition,
+                          var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1)));
+  --pf-c-tile--after--Height: var(--pf-c-tile--m-selected--after--Height, var(--pf-global--BorderWidth--lg, 3px));
+  --pf-c-tile--after--BackgroundColor: var(--pf-c-tile--m-selected--after--BackgroundColor, var(--pf-global--active-color--100, #06c));
+  --pf-c-tile--after--Transition: var(--pf-c-tile--m-selected--after--Transition,
+                          var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1)));
+  --pf-c-tile--after--ScaleY: var(--pf-c-tile--m-selected--after--ScaleY, 2);
+}
+
+:host([disabled]) {
+  --pf-c-tile--BackgroundColor: var(--pf-c-tile--m-disabled--BackgroundColor, var( --pf-global--disabled-color--300, #f0f0f0));
+  --pf-c-tile__title--Color: var(--pf-c-tile--m-disabled__title--Color, var(--pf-global--disabled-color--100, #6a6e73));
+  --pf-c-tile__body--Color: var(--pf-c-tile--m-disabled__body--Color,  var(--pf-global--disabled-color--100, #6a6e73));
+  --pf-c-tile--before--BorderWidth: 0;
+  --pf-c-tile__icon--Color: var(--pf-c-tile--m-disabled__icon--Color, var(--pf-global--disabled-color--100, #6a6e73));
+  pointer-events: none;
+}
+
+[part="header"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+[part="title"] {
+  color: var(--pf-c-tile__title--Color, var(--pf-global--Color--100, var(--pf-global--Color--dark-100, #151515)));
+}
+
+[part="body"] {
+  font-size: var(--pf-c-tile__body--FontSize, var(--pf-global--FontSize--xs, 0.75rem));
+  color: var(--pf-c-tile__body--Color, var(--pf-global--Color--100, #151515));
+}
+
+[part="icon"] {
+  --_icon-size: var(--pf-c-tile__icon--FontSize: var(--pf-global--icon--FontSize--md, 1.125rem));
+  --pf-icon--size: var(--_icon-size);
+  margin-right: var(--pf-c-tile__icon--MarginRight, var(--pf-global--spacer--sm, 0.5rem));
+  font-size: var(--_icon-size);
+  color: var(--pf-c-tile__icon--Color, var(--pf-global--Color--100, #151515));
+}
+
+:host([stacked]) [part="header"] {
+  --pf-c-tile__icon--MarginRight: 0;
+  --_icon-size: var(--pf-c-tile__icon--FontSize, var(--pf-c-tile__header--m-stacked__icon--FontSize, var(--pf-global--icon--FontSize--lg, 1.5rem)));
+  flex-direction: column;
+  justify-content: initial;
+}
+
+:host([stacked="lg"]) [part="icon"] {
+  --_icon-size: var(--pf-c-tile__icon--FontSize, var(--pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize, var(--pf-global--icon--FontSize--xl, 3.375rem)));
+}
+
+:host([stacked]) [part="icon"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: var(--pf-c-tile__header--m-stacked__icon--MarginBottom, var(--pf-global--spacer--xs, 0.25rem));
+}
+
+#body::slotted(:is(h1,h2,h3,h4,h5,h6,p)),
+#title::slotted(:is(h1,h2,h3,h4,h5,h6,p)) {
+  margin-block: 0;
+}
+