@patternfly/elements 2.3.2 → 3.0.0

package/pf-tabs/pf-tab.css

@@ -1,23 +1,44 @@
+[hidden] {
+  display: none !important;
+}
+
 :host {
+  display: flex;
+  flex: none;
+  outline: none;
   scroll-snap-align: var(--pf-c-tabs__item--ScrollSnapAlign, end);
 }
 
-:host([active]) {
+.active {
   --pf-c-tabs__link--Color: var(--pf-c-tabs__item--m-current__link--Color,  var(--pf-global--Color--100, #151515));
   --pf-c-tabs__link--after--BorderColor: var(--pf-c-tabs__item--m-current__link--after--BorderColor, var(--pf-global--active-color--100, #06c));
   --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__item--m-current__link--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px));
 }
 
-:host([box][active]) {
+.box.active {
   --pf-c-tabs__link--BackgroundColor: 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--BackgroundColor, transparent);
 }
 
-:host(.first[box][active]) #current::before {
-  left: calc(var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)) * -1);
+.vertical [part="text"] {
+  max-width: 100%;
+  overflow-wrap: break-word;
 }
 
-button {
+slot[name="icon"] {
+  display: block;
+}
+
+#button {
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  border: 0;
+  position: relative;
+  display: flex;
+  flex: 1;
+  text-decoration: none;
+  cursor: pointer;
   align-items: center;
   gap: var(--pf-c-tabs__link--child--MarginRight, var(--pf-global--spacer--md, 1rem));
   line-height: var(--pf-global--LineHeight--md, 1.5);
@@ -34,7 +55,22 @@ button {
   background-color: var(--pf-c-tabs__link--BackgroundColor, transparent);
 }
 
-button::before {
+#button::before,
+#button::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  border-style: solid;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+  pointer-events: none;
+}
+
+#button::before {
   border-block-start-width: var(--pf-c-tabs__link--before--BorderTopWidth, 0);
   border-inline-end-width: var(--pf-c-tabs__link--before--BorderRightWidth, 0);
   border-block-end-width: var(--pf-c-tabs__link--before--BorderBottomWidth, 0);
@@ -45,7 +81,7 @@ button::before {
   border-inline-start-color: var(--pf-c-tabs__link--before--BorderLeftColor,  var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2)));
 }
 
-button::after {
+#button::after {
   top: var(--pf-c-tabs__link--after--Top, auto);
   right: var(--pf-c-tabs__link--after--Right, 0);
   bottom: var(--pf-c-tabs__link--after--Bottom, 0);
@@ -57,31 +93,44 @@ button::after {
   border-inline-start-width: var(--pf-c-tabs__link--after--BorderLeftWidth);
 }
 
-button:hover {
+:host(:hover) #button {
   --pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--hover__toggle-icon--Color);
   --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--hover--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px));
 }
 
-button:focus,
-button:focus-visible {
+:host(:is(:focus, :focus-visible)) #button {
+  outline-width: 1px;
+  outline-style: auto;
   outline-color: var(--pf-c-tabs__link--after--BorderColor, #06c);
   --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--focus--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px));
 }
 
-button:active {
+:host(:active) #button {
   --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--active--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px));
 }
 
-:host([box]) button {
+.fill #button {
+  flex-basis: 100%;
+  justify-content: center;
+}
+
+:host(:disabled) #button {
+  pointer-events: none;
+}
+
+:host([aria-disabled="true"]) #button {
+  cursor: default;
+}
+
+.box #button {
   --pf-c-tabs__link--after--BorderTopWidth: var(--pf-c-tabs__link--after--BorderWidth, 0);
 }
 
-:host([box]) button,
-:host([vertical]) button {
+:is(.box, .vertical) #button {
   --pf-c-tabs__link--after--BorderBottomWidth: 0;
 }
 
-:host([vertical]) button {
+.vertical #button {
   --pf-c-tabs__link--after--Bottom: 0;
   --pf-c-tabs__link--after--BorderTopWidth: 0;
   --pf-c-tabs__link--after--BorderLeftWidth: var(--pf-c-tabs__link--after--BorderWidth, 0);
@@ -89,32 +138,32 @@ button:active {
   text-align: left;
 }
 
-:host([box][vertical]) button::after {
+.box.vertical #button::after {
   top: calc(var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)) * -1);
 }
 
-:host(.first[box][vertical]) button::after,
-:host([box][vertical][active]) button::after {
+:host(:first-of-type) .box.vertical #button::after,
+.box.vertical.active #button::after {
   top: 0;
 }
 
-:host([box][vertical][active]) button::before {
+.box.vertical.active #button::before {
   --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--BorderBottomWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));
   --pf-c-tabs__link--before--BorderBottomColor: var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2));
 }
 
-:host(.first[box][active]) button::before {
+:host(:first-of-type) .box.active #button::before {
   border-block-start-width: var(--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderTopWidth,  var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));
   border-inline-start-width: var(--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth,  var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));
 }
 
-:host(.last[box][active]) button::before {
+:host(:last-of-type) .box.active #button::before {
   border-inline-end-width: var(--pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth, var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));
 }
 
-:host([disabled]) button,
-:host([aria-disabled="true"]) button {
+:host([disabled]) #button,
+:host([aria-disabled="true"]) #button {
   --pf-c-tabs__link--Color: var(--pf-c-tabs__link--disabled--Color,  var(--pf-global--disabled-color--100, #6a6e73));
   --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs__link--disabled--BackgroundColor, var(--pf-global--palette--black-150, #f5f5f5));
   --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--disabled--before--BorderRightWidth, 0);
@@ -131,7 +180,7 @@ button:active {
   display: none !important;
 }
 
-:host([disabled][border-bottom="false"]) button,
-:host([aria-disabled="true"][border-bottom="false"]) button {
+:host([disabled][border-bottom="false"]) #button,
+:host([aria-disabled="true"][border-bottom="false"]) #button {
   --pf-c-tabs__link--before--BorderBottomWidth: 0;
 }

package/pf-tabs/pf-tab.d.ts

@@ -1,4 +1,4 @@
-import { BaseTab } from './BaseTab.js';
+import { LitElement } from 'lit';
 /**
  * Tab
  *
@@ -57,12 +57,20 @@ import { BaseTab } from './BaseTab.js';
  *
  * @cssprop     {<length>} --pf-c-tabs__link--child--MarginRight  {@default `1rem`}
  *
- * @fires { TabExpandEvent } tab-expand - when a tab expands
+ * @fires {TabExpandEvent} expand - when a tab expands
  */
-export declare class PfTab extends BaseTab {
-    static readonly styles: import("lit").CSSResult[];
+export declare class PfTab extends LitElement {
+    #private;
+    static readonly styles: CSSStyleSheet[];
+    private icons;
     active: boolean;
     disabled: boolean;
+    private ctx?;
+    connectedCallback(): void;
+    willUpdate(): void;
+    render(): import("lit").TemplateResult<1>;
+    private _activeChanged;
+    private _disabledChanged;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-tabs/pf-tab.js

@@ -1,10 +1,17 @@
-import { __decorate } from "tslib";
+var _PfTab_instances, _PfTab_internals, _PfTab_onClick, _PfTab_onKeydown, _PfTab_onFocus, _PfTab_activate;
+import { __classPrivateFieldGet, __decorate } from "tslib";
+import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
+import { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { consume } from '@lit/context';
 import { observed } from '@patternfly/pfe-core/decorators.js';
-import { BaseTab } from './BaseTab.js';
+import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
+import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
+import { TabExpandEvent, context } from './context.js';
 import { css } from "lit";
-const styles = css `:host{scroll-snap-align:var(--pf-c-tabs__item--ScrollSnapAlign,end)}:host([active]){--pf-c-tabs__link--Color:var(--pf-c-tabs__item--m-current__link--Color,  var(--pf-global--Color--100, #151515));--pf-c-tabs__link--after--BorderColor:var(--pf-c-tabs__item--m-current__link--after--BorderColor, var(--pf-global--active-color--100, #06c));--pf-c-tabs__link--after--BorderWidth:var(--pf-c-tabs__item--m-current__link--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px))}:host([box][active]){--pf-c-tabs__link--BackgroundColor: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--BackgroundColor, transparent)}:host(.first[box][active]) #current::before{left:calc(var(--pf-c-tabs__link--before--border-width--base,var(--pf-global--BorderWidth--sm,1px)) * -1)}button{align-items:center;gap:var(--pf-c-tabs__link--child--MarginRight,var(--pf-global--spacer--md,1rem));line-height:var(--pf-global--LineHeight--md, 1.5);color:var(--pf-global--Color--100,#151515);padding:var(--pf-c-tabs__link--PaddingTop,var(--pf-global--spacer--sm,.5rem)) var(--pf-c-tabs__link--PaddingRight,var(--pf-global--spacer--md,1rem)) var(--pf-c-tabs__link--PaddingBottom,var(--pf-global--spacer--sm,.5rem)) var(--pf-c-tabs__link--PaddingLeft,var(--pf-global--spacer--md,1rem));font-size:var(--pf-c-tabs__link--FontSize, var(--pf-global--FontSize--md, 1rem));color:var(--pf-c-tabs__link--Color,var(--pf-global--Color--200,#6a6e73));outline-offset:var(--pf-c-tabs__link--OutlineOffset,calc(-1 * 0.375rem));--pf-c-tabs__link--after--BorderBottomWidth:var(--pf-c-tabs__link--after--BorderWidth, 0);background-color:var(--pf-c-tabs__link--BackgroundColor,transparent)}button::before{border-block-start-width:var(--pf-c-tabs__link--before--BorderTopWidth,0);border-inline-end-width:var(--pf-c-tabs__link--before--BorderRightWidth,0);border-block-end-width:var(--pf-c-tabs__link--before--BorderBottomWidth,0);border-inline-start-width:var(--pf-c-tabs__link--before--BorderLeftWidth,0);border-block-start-color:var(--pf-c-tabs__link--before--BorderTopColor,var(--pf-c-tabs__link--before--border-color--base,var(--pf-global--BorderColor--100,#d2d2d2)));border-inline-end-color:var(--pf-c-tabs__link--before--BorderRightColor,var(--pf-c-tabs__link--before--border-color--base,var(--pf-global--BorderColor--100,#d2d2d2)));border-block-end-color:var(--pf-c-tabs__link--before--BorderBottomColor,var(--pf-c-tabs__link--before--border-color--base,var(--pf-global--BorderColor--100,#d2d2d2)));border-inline-start-color:var(--pf-c-tabs__link--before--BorderLeftColor,var(--pf-c-tabs__link--before--border-color--base,var(--pf-global--BorderColor--100,#d2d2d2)))}button::after{top:var(--pf-c-tabs__link--after--Top,auto);right:var(--pf-c-tabs__link--after--Right,0);bottom:var(--pf-c-tabs__link--after--Bottom,0);left:var(--pf-c-tabs__link--before--Left,0);border-color:var(--pf-c-tabs__link--after--BorderColor,var(--pf-global--BorderColor--light-100,#b8bbbe));border-block-start-width:var(--pf-c-tabs__link--after--BorderTopWidth,0);border-inline-end-width:var(--pf-c-tabs__link--after--BorderRightWidth,0);border-block-end-width:var(--pf-c-tabs__link--after--BorderBottomWidth);border-inline-start-width:var(--pf-c-tabs__link--after--BorderLeftWidth)}button:hover{--pf-c-tabs__link-toggle-icon--Color:var(--pf-c-tabs__link--hover__toggle-icon--Color);--pf-c-tabs__link--after--BorderWidth:var(--pf-c-tabs__link--hover--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px))}button:focus,button:focus-visible{outline-color:var(--pf-c-tabs__link--after--BorderColor,#06c);--pf-c-tabs__link--after--BorderWidth:var(--pf-c-tabs__link--focus--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px))}button:active{--pf-c-tabs__link--after--BorderWidth:var(--pf-c-tabs__link--active--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px))}:host([box]) button{--pf-c-tabs__link--after--BorderTopWidth:var(--pf-c-tabs__link--after--BorderWidth, 0)}:host([box]) button,:host([vertical]) button{--pf-c-tabs__link--after--BorderBottomWidth:0}:host([vertical]) button{--pf-c-tabs__link--after--Bottom:0;--pf-c-tabs__link--after--BorderTopWidth:0;--pf-c-tabs__link--after--BorderLeftWidth:var(--pf-c-tabs__link--after--BorderWidth, 0);max-width:100%;text-align:left}:host([box][vertical]) button::after{top:calc(var(--pf-c-tabs__link--before--border-width--base,var(--pf-global--BorderWidth--sm,1px)) * -1)}:host(.first[box][vertical]) button::after,:host([box][vertical][active]) button::after{top:0}:host([box][vertical][active]) button::before{--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--BorderBottomWidth:var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));--pf-c-tabs__link--before--BorderBottomColor:var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2))}:host(.first[box][active]) button::before{border-block-start-width:var(--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderTopWidth,var(--pf-c-tabs__link--before--border-width--base,var(--pf-global--BorderWidth--sm,1px)));border-inline-start-width:var(--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth,var(--pf-c-tabs__link--before--border-width--base,var(--pf-global--BorderWidth--sm,1px)))}:host(.last[box][active]) button::before{border-inline-end-width:var(--pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth,var(--pf-c-tabs--before--border-width--base,var(--pf-global--BorderWidth--sm,1px)))}:host([aria-disabled=true]) button,:host([disabled]) button{--pf-c-tabs__link--Color:var(--pf-c-tabs__link--disabled--Color,  var(--pf-global--disabled-color--100, #6a6e73));--pf-c-tabs__link--BackgroundColor:var(--pf-c-tabs__link--disabled--BackgroundColor, var(--pf-global--palette--black-150, #f5f5f5));--pf-c-tabs__link--before--BorderRightWidth:var(--pf-c-tabs__link--disabled--before--BorderRightWidth, 0);--pf-c-tabs__link--before--BorderBottomWidth:var(--pf-c-tabs__link--disabled--before--BorderBottomWidth, var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));--pf-c-tabs__link--before--BorderLeftWidth:var(--pf-c-tabs__link--disabled--before--BorderLeftWidth, 0);--pf-c-tabs__link--after--BorderWidth:0}[part=icon]{display:flex!important}[part=icon][hidden]{display:none!important}:host([aria-disabled=true][border-bottom=false]) button,:host([disabled][border-bottom=false]) button{--pf-c-tabs__link--before--BorderBottomWidth:0}`;
+const styles = css `[hidden] {\n  display: none !important;\n}\n\n:host {\n  display: flex;\n  flex: none;\n  outline: none;\n  scroll-snap-align: var(--pf-c-tabs__item--ScrollSnapAlign, end);\n}\n\n.active {\n  --pf-c-tabs__link--Color: var(--pf-c-tabs__item--m-current__link--Color,  var(--pf-global--Color--100, #151515));\n  --pf-c-tabs__link--after--BorderColor: var(--pf-c-tabs__item--m-current__link--after--BorderColor, var(--pf-global--active-color--100, #06c));\n  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__item--m-current__link--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px));\n}\n\n.box.active {\n  --pf-c-tabs__link--BackgroundColor: 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--BackgroundColor, transparent);\n}\n\n.vertical [part="text"] {\n  max-width: 100%;\n  overflow-wrap: break-word;\n}\n\nslot[name="icon"] {\n  display: block;\n}\n\n#button {\n  margin: 0;\n  font-family: inherit;\n  font-size: 100%;\n  border: 0;\n  position: relative;\n  display: flex;\n  flex: 1;\n  text-decoration: none;\n  cursor: pointer;\n  align-items: center;\n  gap: var(--pf-c-tabs__link--child--MarginRight, var(--pf-global--spacer--md, 1rem));\n  line-height: var(--pf-global--LineHeight--md, 1.5);\n  color: var(--pf-global--Color--100, #151515);\n  padding:\n    var(--pf-c-tabs__link--PaddingTop, var(--pf-global--spacer--sm, 0.5rem))\n    var(--pf-c-tabs__link--PaddingRight, var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-tabs__link--PaddingBottom, var(--pf-global--spacer--sm, 0.5rem))\n    var(--pf-c-tabs__link--PaddingLeft, var(--pf-global--spacer--md, 1rem));\n  font-size: var(--pf-c-tabs__link--FontSize, var(--pf-global--FontSize--md, 1rem));\n  color: var(--pf-c-tabs__link--Color, var(--pf-global--Color--200, #6a6e73));\n  outline-offset: var(--pf-c-tabs__link--OutlineOffset, calc(-1 * 0.375rem));\n  --pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth, 0);\n  background-color: var(--pf-c-tabs__link--BackgroundColor, transparent);\n}\n\n#button::before,\n#button::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  content: "";\n  border-style: solid;\n  padding: 0;\n  margin: 0;\n  background-color: transparent;\n  pointer-events: none;\n}\n\n#button::before {\n  border-block-start-width: var(--pf-c-tabs__link--before--BorderTopWidth, 0);\n  border-inline-end-width: var(--pf-c-tabs__link--before--BorderRightWidth, 0);\n  border-block-end-width: var(--pf-c-tabs__link--before--BorderBottomWidth, 0);\n  border-inline-start-width: var(--pf-c-tabs__link--before--BorderLeftWidth, 0);\n  border-block-start-color: var(--pf-c-tabs__link--before--BorderTopColor,  var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2)));\n  border-inline-end-color: var(--pf-c-tabs__link--before--BorderRightColor,  var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2)));\n  border-block-end-color: var(--pf-c-tabs__link--before--BorderBottomColor,  var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2)));\n  border-inline-start-color: var(--pf-c-tabs__link--before--BorderLeftColor,  var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2)));\n}\n\n#button::after {\n  top: var(--pf-c-tabs__link--after--Top, auto);\n  right: var(--pf-c-tabs__link--after--Right, 0);\n  bottom: var(--pf-c-tabs__link--after--Bottom, 0);\n  left: var(--pf-c-tabs__link--before--Left, 0);\n  border-color: var(--pf-c-tabs__link--after--BorderColor, var(--pf-global--BorderColor--light-100, #b8bbbe));\n  border-block-start-width:  var(--pf-c-tabs__link--after--BorderTopWidth, 0);\n  border-inline-end-width: var(--pf-c-tabs__link--after--BorderRightWidth, 0);\n  border-block-end-width: var(--pf-c-tabs__link--after--BorderBottomWidth);\n  border-inline-start-width: var(--pf-c-tabs__link--after--BorderLeftWidth);\n}\n\n:host(:hover) #button {\n  --pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--hover__toggle-icon--Color);\n  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--hover--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px));\n}\n\n:host(:is(:focus, :focus-visible)) #button {\n  outline-width: 1px;\n  outline-style: auto;\n  outline-color: var(--pf-c-tabs__link--after--BorderColor, #06c);\n  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--focus--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px));\n}\n\n:host(:active) #button {\n  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--active--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px));\n}\n\n.fill #button {\n  flex-basis: 100%;\n  justify-content: center;\n}\n\n:host(:disabled) #button {\n  pointer-events: none;\n}\n\n:host([aria-disabled="true"]) #button {\n  cursor: default;\n}\n\n.box #button {\n  --pf-c-tabs__link--after--BorderTopWidth: var(--pf-c-tabs__link--after--BorderWidth, 0);\n}\n\n:is(.box, .vertical) #button {\n  --pf-c-tabs__link--after--BorderBottomWidth: 0;\n}\n\n.vertical #button {\n  --pf-c-tabs__link--after--Bottom: 0;\n  --pf-c-tabs__link--after--BorderTopWidth: 0;\n  --pf-c-tabs__link--after--BorderLeftWidth: var(--pf-c-tabs__link--after--BorderWidth, 0);\n  max-width: 100%;\n  text-align: left;\n}\n\n.box.vertical #button::after {\n  top: calc(var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)) * -1);\n}\n\n:host(:first-of-type) .box.vertical #button::after,\n.box.vertical.active #button::after {\n  top: 0;\n}\n\n.box.vertical.active #button::before {\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--BorderBottomWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-tabs__link--before--BorderBottomColor: var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2));\n}\n\n:host(:first-of-type) .box.active #button::before {\n  border-block-start-width: var(--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderTopWidth,  var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));\n  border-inline-start-width: var(--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth,  var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));\n}\n\n:host(:last-of-type) .box.active #button::before {\n  border-inline-end-width: var(--pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth, var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));\n}\n\n:host([disabled]) #button,\n:host([aria-disabled="true"]) #button {\n  --pf-c-tabs__link--Color: var(--pf-c-tabs__link--disabled--Color,  var(--pf-global--disabled-color--100, #6a6e73));\n  --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs__link--disabled--BackgroundColor, var(--pf-global--palette--black-150, #f5f5f5));\n  --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--disabled--before--BorderRightWidth, 0);\n  --pf-c-tabs__link--before--BorderBottomWidth: var(--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--before--BorderLeftWidth: var(--pf-c-tabs__link--disabled--before--BorderLeftWidth, 0);\n  --pf-c-tabs__link--after--BorderWidth: 0;\n}\n\n[part="icon"] {\n  display: flex !important;\n}\n\n[part="icon"][hidden] {\n  display: none !important;\n}\n\n:host([disabled][border-bottom="false"]) #button,\n:host([aria-disabled="true"][border-bottom="false"]) #button {\n  --pf-c-tabs__link--before--BorderBottomWidth: 0;\n}\n`;
 /**
  * Tab
  *
@@ -63,16 +70,94 @@ const styles = css `:host{scroll-snap-align:var(--pf-c-tabs__item--ScrollSnapAli
  *
  * @cssprop     {<length>} --pf-c-tabs__link--child--MarginRight  {@default `1rem`}
  *
- * @fires { TabExpandEvent } tab-expand - when a tab expands
+ * @fires {TabExpandEvent} expand - when a tab expands
  */
-let PfTab = class PfTab extends BaseTab {
+let PfTab = class PfTab extends LitElement {
     constructor() {
         super(...arguments);
+        _PfTab_instances.add(this);
         this.active = false;
         this.disabled = false;
+        _PfTab_internals.set(this, InternalsController.of(this, { role: 'tab' }));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.id || (this.id = getRandomId(this.localName));
+        this.addEventListener('click', __classPrivateFieldGet(this, _PfTab_instances, "m", _PfTab_onClick));
+        this.addEventListener('keydown', __classPrivateFieldGet(this, _PfTab_instances, "m", _PfTab_onKeydown));
+        this.addEventListener('focus', __classPrivateFieldGet(this, _PfTab_instances, "m", _PfTab_onFocus));
+    }
+    willUpdate() {
+        const { borderBottom, box, fill, manual, vertical } = this.ctx ?? {};
+        this.toggleAttribute('fill', fill);
+        this.toggleAttribute('manual', manual);
+        this.toggleAttribute('vertical', vertical);
+        if (box) {
+            this.setAttribute('box', box);
+        }
+        else {
+            this.removeAttribute('box');
+        }
+        if (borderBottom) {
+            this.setAttribute('border-bottom', borderBottom);
+        }
+        else {
+            this.removeAttribute('border-bottom');
+        }
+    }
+    render() {
+        const { active } = this;
+        const { box, fill = false, vertical = false } = this.ctx ?? {};
+        const light = box === 'light';
+        const dark = box === 'dark';
+        return html `
+      <div id="button"
+           part="button"
+           class="${classMap({ active, box: !!box, dark, light, fill, vertical })}">
+        <slot name="icon"
+              part="icon"
+              ?hidden="${!this.icons.length}"
+              @slotchange="${() => this.requestUpdate()}"></slot>
+        <slot part="text"></slot>
+      </div>
+    `;
+    }
+    _activeChanged(old) {
+        __classPrivateFieldGet(this, _PfTab_internals, "f").ariaSelected = String(!!this.active);
+        if (this.active && !old) {
+            __classPrivateFieldGet(this, _PfTab_instances, "m", _PfTab_activate).call(this);
+        }
+    }
+    _disabledChanged() {
+        __classPrivateFieldGet(this, _PfTab_internals, "f").ariaDisabled = this.disabled ? 'true' : this.ariaDisabled ?? 'false';
+    }
+};
+_PfTab_internals = new WeakMap();
+_PfTab_instances = new WeakSet();
+_PfTab_onClick = function _PfTab_onClick() {
+    if (!this.disabled) {
+        __classPrivateFieldGet(this, _PfTab_instances, "m", _PfTab_activate).call(this);
     }
-    static { this.styles = [...BaseTab.styles, styles]; }
 };
+_PfTab_onKeydown = function _PfTab_onKeydown(event) {
+    if (!this.disabled) {
+        switch (event.key) {
+            case 'Enter': __classPrivateFieldGet(this, _PfTab_instances, "m", _PfTab_activate).call(this);
+        }
+    }
+};
+_PfTab_onFocus = function _PfTab_onFocus() {
+    if (!this.ctx?.manual && !this.disabled) {
+        __classPrivateFieldGet(this, _PfTab_instances, "m", _PfTab_activate).call(this);
+    }
+};
+_PfTab_activate = function _PfTab_activate() {
+    return this.dispatchEvent(new TabExpandEvent(this));
+};
+PfTab.styles = [styles];
+__decorate([
+    queryAssignedElements({ slot: 'icon', flatten: true })
+], PfTab.prototype, "icons", void 0);
 __decorate([
     observed,
     property({ reflect: true, type: Boolean })
@@ -81,6 +166,10 @@ __decorate([
     observed,
     property({ reflect: true, type: Boolean })
 ], PfTab.prototype, "disabled", void 0);
+__decorate([
+    consume({ context, subscribe: true }),
+    property({ attribute: false })
+], PfTab.prototype, "ctx", void 0);
 PfTab = __decorate([
     customElement('pf-tab')
 ], PfTab);

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

@@ -1 +1 @@
-{"version":3,"file":"pf-tab.js","sourceRoot":"","sources":["pf-tab.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,OAAO,EAAE,MAAM,cAAc,CAAC;;;AAIvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AAEH,IAAa,KAAK,GAAlB,MAAa,KAAM,SAAQ,OAAO;IAAlC;;QAI8C,WAAM,GAAG,KAAK,CAAC;QAGf,aAAQ,GAAG,KAAK,CAAC;IAC/D,CAAC;aAPiB,WAAM,GAAG,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,AAA9B,CAA+B;;AAGT;IAD3C,QAAQ;IACR,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCAAgB;AAGf;IAD3C,QAAQ;IACR,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCAAkB;AAPlD,KAAK;IADjB,aAAa,CAAC,QAAQ,CAAC;GACX,KAAK,CAQjB;SARY,KAAK","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { observed } from '@patternfly/pfe-core/decorators.js';\n\nimport { BaseTab } from './BaseTab.js';\n\nimport styles from './pf-tab.css';\n\n/**\n * Tab\n *\n * @slot icon\n *       Can contain an `<svg>` or `<pf-icon>`\n * @slot\n *       Tab title text\n *\n * @csspart button - button element\n * @csspart icon - span container for the icon\n * @csspart text - span container for the title text\n *\n * @cssprop     {<length>} --pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth  {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth  {@default `1px`}\n *\n * @cssprop     {<color>} --pf-c-tabs__link--BackgroundColor            {@default `#f0f0f0`}\n * @cssprop     {<color>} --pf-c-tabs__link--disabled--BackgroundColor  {@default `#d2d2d2`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderTopWidth    {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderBottomWidth {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderLeftWidth   {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderRightWidth  {@default `1px`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderRightWidth  {@default `1px`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--after--Top    {@default `auto`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--Right  {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--Bottom {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--Left  {@default `0`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--PaddingTop    {@default `1rem`}\n * @cssprop     {<length>} --pf-c-tabs__link--PaddingBottom {@default `1rem`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderBottomWidth {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderLeftWidth   {@default `1px`}\n *\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderTopColor     {@default `#d2d2d2`}\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderRightColor   {@default `#d2d2d2`}\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderBottomColor  {@default `#d2d2d2`}\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderLeftColor    {@default `#d2d2d2`}\n *\n * @cssprop     {<length>}  --pf-c-tabs__link--FontSize      {@default `1rem`}\n * @cssprop     {<color>}   --pf-c-tabs__link--Color          {@default `#6a6e73`}\n * @cssprop     {<length>}  --pf-c-tabs__link--OutlineOffset {@default `-0.375rem`}\n *\n * @cssprop     {<color>}  --pf-c-tabs__link--after--BorderColor        {@default `#b8bbbe`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderTopWidth     {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderRightWidth   {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderBottomWidth  {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderLeftWidth    {@default `0`}\n *\n * @cssprop     {<color>} --pf-c-tabs__item--m-current__link--Color {@default `#151515`}\n *\n * @cssprop     {<color>}   --pf-c-tabs__item--m-current__link--after--BorderColor {@default `#06c`}\n * @cssprop     {<length>}  --pf-c-tabs__item--m-current__link--after--BorderWidth {@default `3px`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--child--MarginRight  {@default `1rem`}\n *\n * @fires { TabExpandEvent } tab-expand - when a tab expands\n */\n@customElement('pf-tab')\nexport class PfTab extends BaseTab {\n  static readonly styles = [...BaseTab.styles, styles];\n\n  @observed\n  @property({ reflect: true, type: Boolean }) active = false;\n\n  @observed\n  @property({ reflect: true, type: Boolean }) disabled = false;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tab': PfTab;\n  }\n}\n"]}
+{"version":3,"file":"pf-tab.js","sourceRoot":"","sources":["pf-tab.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { consume } from '@lit/context';\n\nimport { observed } from '@patternfly/pfe-core/decorators.js';\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport { TabExpandEvent, context, type PfTabsContext } from './context.js';\n\nimport styles from './pf-tab.css';\n\n/**\n * Tab\n *\n * @slot icon\n *       Can contain an `<svg>` or `<pf-icon>`\n * @slot\n *       Tab title text\n *\n * @csspart button - button element\n * @csspart icon - span container for the icon\n * @csspart text - span container for the title text\n *\n * @cssprop     {<length>} --pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth  {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth  {@default `1px`}\n *\n * @cssprop     {<color>} --pf-c-tabs__link--BackgroundColor            {@default `#f0f0f0`}\n * @cssprop     {<color>} --pf-c-tabs__link--disabled--BackgroundColor  {@default `#d2d2d2`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderTopWidth    {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderBottomWidth {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderLeftWidth   {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderRightWidth  {@default `1px`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderRightWidth  {@default `1px`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--after--Top    {@default `auto`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--Right  {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--Bottom {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--Left  {@default `0`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--PaddingTop    {@default `1rem`}\n * @cssprop     {<length>} --pf-c-tabs__link--PaddingBottom {@default `1rem`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderBottomWidth {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderLeftWidth   {@default `1px`}\n *\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderTopColor     {@default `#d2d2d2`}\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderRightColor   {@default `#d2d2d2`}\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderBottomColor  {@default `#d2d2d2`}\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderLeftColor    {@default `#d2d2d2`}\n *\n * @cssprop     {<length>}  --pf-c-tabs__link--FontSize      {@default `1rem`}\n * @cssprop     {<color>}   --pf-c-tabs__link--Color          {@default `#6a6e73`}\n * @cssprop     {<length>}  --pf-c-tabs__link--OutlineOffset {@default `-0.375rem`}\n *\n * @cssprop     {<color>}  --pf-c-tabs__link--after--BorderColor        {@default `#b8bbbe`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderTopWidth     {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderRightWidth   {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderBottomWidth  {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderLeftWidth    {@default `0`}\n *\n * @cssprop     {<color>} --pf-c-tabs__item--m-current__link--Color {@default `#151515`}\n *\n * @cssprop     {<color>}   --pf-c-tabs__item--m-current__link--after--BorderColor {@default `#06c`}\n * @cssprop     {<length>}  --pf-c-tabs__item--m-current__link--after--BorderWidth {@default `3px`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--child--MarginRight  {@default `1rem`}\n *\n * @fires {TabExpandEvent} expand - when a tab expands\n */\n@customElement('pf-tab')\nexport class PfTab extends LitElement {\n  static readonly styles = [styles];\n\n  @queryAssignedElements({ slot: 'icon', flatten: true })\n  private icons!: Array<HTMLElement>;\n\n  @observed\n  @property({ reflect: true, type: Boolean }) active = false;\n\n  @observed\n  @property({ reflect: true, type: Boolean }) disabled = false;\n\n  @consume({ context, subscribe: true })\n  @property({ attribute: false })\n  private ctx?: PfTabsContext;\n\n  #internals = InternalsController.of(this, { role: 'tab' });\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.id ||= getRandomId(this.localName);\n    this.addEventListener('click', this.#onClick);\n    this.addEventListener('keydown', this.#onKeydown);\n    this.addEventListener('focus', this.#onFocus);\n  }\n\n  override willUpdate() {\n    const { borderBottom, box, fill, manual, vertical } = this.ctx ?? {};\n    this.toggleAttribute('fill', fill);\n    this.toggleAttribute('manual', manual);\n    this.toggleAttribute('vertical', vertical);\n    if (box) {\n      this.setAttribute('box', box);\n    } else {\n      this.removeAttribute('box');\n    }\n    if (borderBottom) {\n      this.setAttribute('border-bottom', borderBottom);\n    } else {\n      this.removeAttribute('border-bottom');\n    }\n  }\n\n  render() {\n    const { active } = this;\n    const { box, fill = false, vertical = false } = this.ctx ?? {};\n    const light = box === 'light';\n    const dark = box === 'dark';\n    return html`\n      <div id=\"button\"\n           part=\"button\"\n           class=\"${classMap({ active, box: !!box, dark, light, fill, vertical })}\">\n        <slot name=\"icon\"\n              part=\"icon\"\n              ?hidden=\"${!this.icons.length}\"\n              @slotchange=\"${() => this.requestUpdate()}\"></slot>\n        <slot part=\"text\"></slot>\n      </div>\n    `;\n  }\n\n  #onClick() {\n    if (!this.disabled) {\n      this.#activate();\n    }\n  }\n\n  #onKeydown(event: KeyboardEvent) {\n    if (!this.disabled) {\n      switch (event.key) {\n        case 'Enter': this.#activate();\n      }\n    }\n  }\n\n  #onFocus() {\n    if (!this.ctx?.manual && !this.disabled) {\n      this.#activate();\n    }\n  }\n\n  #activate() {\n    return this.dispatchEvent(new TabExpandEvent(this));\n  }\n\n  private _activeChanged(old: boolean) {\n    this.#internals.ariaSelected = String(!!this.active);\n    if (this.active && !old) {\n      this.#activate();\n    }\n  }\n\n  private _disabledChanged() {\n    this.#internals.ariaDisabled = this.disabled ? 'true' : this.ariaDisabled ?? 'false';\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tab': PfTab;\n  }\n}\n"]}

package/pf-tabs/pf-tabs.css

@@ -1,3 +1,90 @@
+:host {
+  display: block;
+}
+
+[part="tabs-container"] {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+}
+
+[part="tabs-container"]::before {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-style: solid;
+}
+
+:host button {
+  opacity: 1;
+}
+
+:host button:nth-of-type(1) {
+  margin-inline-end: 0;
+  translate: 0 0;
+}
+
+:host button:nth-of-type(2) {
+  margin-inline-start: 0;
+  translate: 0 0;
+}
+
+[part="tabs"],
+[part="panels"] {
+  display: block;
+}
+
+[part="tabs"] {
+  scrollbar-width: none;
+  position: relative;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+[part="tabs-container"]::before,
+[part="tabs"]::before,
+button::before {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  border-style: solid;
+}
+
+[part="tabs"]::before,
+button::before {
+  top: 0;
+}
+
+button,
+[part="tabs"]::before {
+  border: 0;
+}
+
+button {
+  flex: none;
+  line-height: 1;
+  opacity: 0;
+}
+
+button::before {
+  border-block-start-width: 0;
+}
+
+button:nth-of-type(1) {
+  translate: -100% 0;
+}
+
+button:nth-of-type(2) {
+  translate: 100% 0;
+}
+
+button:disabled {
+  pointer-events: none;
+}
+
 [part="tabs-container"] {
   width: var(--pf-c-tabs--Width, auto);
   padding-inline-end: var(--pf-c-tabs--inset, 0);
@@ -12,16 +99,6 @@
   border-inline-start-width: var(--pf-c-tabs--before--BorderLeftWidth, 0);
 }
 
-/* workaround to disable scroll right button when last tab is aria-disabled */
-: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;
-}
-
-/* workaround to disable scroll left button when first tab is aria-disabled */
-: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));

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

@@ -1,11 +1,10 @@
-import { BaseTabs } from './BaseTabs.js';
+import { LitElement, type PropertyValues } from 'lit';
 import { PfTab } from './pf-tab.js';
-import { PfTabPanel } from './pf-tab-panel.js';
+import { TabExpandEvent } from './context.js';
+import '@patternfly/elements/pf-icon/pf-icon.js';
 /**
  * **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
@@ -51,16 +50,56 @@ import { PfTabPanel } from './pf-tab-panel.js';
  *
  * @cssprop     {<color>} --pf-c-tabs__scroll-button--disabled--Color                 {@default `#d2d2d2`}
  */
-export declare class PfTabs extends BaseTabs {
-    static readonly styles: import("lit").CSSResult[];
+export declare class PfTabs extends LitElement {
+    #private;
+    static readonly styles: CSSStyleSheet[];
     protected static readonly scrollTimeoutDelay = 150;
-    static isTab(element: HTMLElement): element is PfTab;
-    static isPanel(element: HTMLElement): element is PfTabPanel;
+    static isExpandEvent(event: Event): event is TabExpandEvent<PfTab>;
+    /**
+     * Aria Label for the left scroll button
+     */
+    labelScrollLeft: string;
+    /**
+     * Aria Label for the right scroll button
+     */
+    labelScrollRight: string;
+    /**
+     * Box styling on tabs. Defaults to null
+     */
     box: 'light' | 'dark' | null;
+    /**
+     * Set to true to enable vertical tab styling.
+     */
     vertical: boolean;
+    /**
+     * Set to true to enable filled tab styling.
+     */
     fill: boolean;
+    /**
+     * Border bottom tab styling on tabs. To remove the bottom border, set this prop to false.
+     */
     borderBottom: 'true' | 'false';
-    protected get canShowScrollButtons(): boolean;
+    /**
+     * 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.
+     */
+    manual: boolean;
+    /**
+     * The index of the active tab
+     */
+    activeIndex: number;
+    activeTab?: PfTab;
+    get tabs(): PfTab[];
+    private tabsContainer;
+    private ctx;
+    connectedCallback(): void;
+    protected getUpdateComplete(): Promise<boolean>;
+    willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    protected firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
+    select(option: PfTab | number): void;
 }
 declare global {
     interface HTMLElementTagNameMap {