@patternfly/elements 4.1.0 → 4.2.0

package/pf-tabs/pf-tab.css

@@ -10,8 +10,11 @@
 }
 
 .active {
+  /** Current tab text color */
   --pf-c-tabs__link--Color: var(--pf-c-tabs__item--m-current__link--Color,  var(--pf-global--Color--100, #151515));
+  /** Current tab border color */
   --pf-c-tabs__link--after--BorderColor: var(--pf-c-tabs__item--m-current__link--after--BorderColor, var(--pf-global--active-color--100, #06c));
+  /** Current tab border width */
   --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__item--m-current__link--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px));
 }
 
@@ -40,18 +43,24 @@ slot[name="icon"] {
   text-decoration: none;
   cursor: pointer;
   align-items: center;
+  /** Tab icon and text spacing */
   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);
+  /** Tab padding (top and bottom) */
   padding:
     var(--pf-c-tabs__link--PaddingTop, var(--pf-global--spacer--sm, 0.5rem))
     var(--pf-c-tabs__link--PaddingRight, var(--pf-global--spacer--md, 1rem))
     var(--pf-c-tabs__link--PaddingBottom, var(--pf-global--spacer--sm, 0.5rem))
     var(--pf-c-tabs__link--PaddingLeft, var(--pf-global--spacer--md, 1rem));
+  /** Tab font size */
   font-size: var(--pf-c-tabs__link--FontSize, var(--pf-global--FontSize--md, 1rem));
+  /** Tab text color */
   color: var(--pf-c-tabs__link--Color, var(--pf-global--Color--200, #6a6e73));
+  /** Tab outline offset */
   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);
+  /** Tab background color */
   background-color: var(--pf-c-tabs__link--BackgroundColor, transparent);
 }
 
@@ -71,25 +80,42 @@ slot[name="icon"] {
 }
 
 #button::before {
+  /** Tab top border width */
   border-block-start-width: var(--pf-c-tabs__link--before--BorderTopWidth, 0);
+  /** Tab right border width */
   border-inline-end-width: var(--pf-c-tabs__link--before--BorderRightWidth, 0);
+  /** Tab bottom border width */
   border-block-end-width: var(--pf-c-tabs__link--before--BorderBottomWidth, 0);
+  /** Tab left border width */
   border-inline-start-width: var(--pf-c-tabs__link--before--BorderLeftWidth, 0);
+  /** Tab top border color */
   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)));
+  /** Tab right border color */
   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)));
+  /** Tab bottom border color */
   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)));
+  /** Tab left border color */
   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 {
+  /** Tab after element top position */
   top: var(--pf-c-tabs__link--after--Top, auto);
+  /** Tab after element right position */
   right: var(--pf-c-tabs__link--after--Right, 0);
+  /** Tab after element bottom position */
   bottom: var(--pf-c-tabs__link--after--Bottom, 0);
+  /** Tab before element left position */
   left: var(--pf-c-tabs__link--before--Left, 0);
+  /** Tab after element border color */
   border-color: var(--pf-c-tabs__link--after--BorderColor, var(--pf-global--BorderColor--light-100, #b8bbbe));
+  /** Tab after element top border width */
   border-block-start-width:  var(--pf-c-tabs__link--after--BorderTopWidth, 0);
+  /** Tab after element right border width */
   border-inline-end-width: var(--pf-c-tabs__link--after--BorderRightWidth, 0);
+  /** Tab after element bottom border width */
   border-block-end-width: var(--pf-c-tabs__link--after--BorderBottomWidth);
+  /** Tab after element left border width */
   border-inline-start-width: var(--pf-c-tabs__link--after--BorderLeftWidth);
 }
 
@@ -154,20 +180,27 @@ slot[name="icon"] {
 }
 
 :host(:first-of-type) .box.active #button::before {
+  /** Box style first tab top border width */
   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)));
+  /** Box style first tab left border width */
   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-of-type) .box.active #button::before {
+  /** Box style last tab right border width */
   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 {
   --pf-c-tabs__link--Color: var(--pf-c-tabs__link--disabled--Color,  var(--pf-global--disabled-color--100, #6a6e73));
+  /** Disabled tab background color */
   --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs__link--disabled--BackgroundColor, var(--pf-global--palette--black-150, #f5f5f5));
+  /** Disabled tab right border width */
   --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--disabled--before--BorderRightWidth, 0);
+  /** Disabled tab bottom border width */
   --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)));
+  /** Disabled tab left border width */
   --pf-c-tabs__link--before--BorderLeftWidth: var(--pf-c-tabs__link--disabled--before--BorderLeftWidth, 0);
   --pf-c-tabs__link--after--BorderWidth: 0;
 }

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

@@ -1,46 +1,6 @@
 import { LitElement, type TemplateResult } from 'lit';
 /**
  * Tab
- * @slot icon
- *       Can contain an `<svg>` or `<pf-icon>`
- * @slot
- *       Tab title text
- * @csspart button - button element
- * @csspart icon - span container for the icon
- * @csspart text - span container for the title text
- * @cssprop     {<length>} [--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth=1px]
- * @cssprop     {<length>} [--pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth=1px]
- * @cssprop     {<color>} [--pf-c-tabs__link--BackgroundColor=#f0f0f0]
- * @cssprop     {<color>} [--pf-c-tabs__link--disabled--BackgroundColor=#d2d2d2]
- * @cssprop     {<length>} [--pf-c-tabs__link--before--BorderTopWidth=1px]
- * @cssprop     {<length>} [--pf-c-tabs__link--before--BorderBottomWidth=1px]
- * @cssprop     {<length>} [--pf-c-tabs__link--before--BorderLeftWidth=0]
- * @cssprop     {<length>} [--pf-c-tabs__link--before--BorderRightWidth=1px]
- * @cssprop     {<length>} [--pf-c-tabs__link--disabled--before--BorderRightWidth=1px]
- * @cssprop     {<length>} [--pf-c-tabs__link--after--Top=auto]
- * @cssprop     {<length>} [--pf-c-tabs__link--after--Right=0]
- * @cssprop     {<length>} [--pf-c-tabs__link--after--Bottom=0]
- * @cssprop     {<length>} [--pf-c-tabs__link--before--Left=0]
- * @cssprop     {<length>} [--pf-c-tabs__link--PaddingTop=1rem]
- * @cssprop     {<length>} [--pf-c-tabs__link--PaddingBottom=1rem]
- * @cssprop     {<length>} [--pf-c-tabs__link--disabled--before--BorderBottomWidth=1px]
- * @cssprop     {<length>} [--pf-c-tabs__link--disabled--before--BorderLeftWidth=1px]
- * @cssprop     {<color>} [--pf-c-tabs__link--before--BorderTopColor=#d2d2d2]
- * @cssprop     {<color>} [--pf-c-tabs__link--before--BorderRightColor=#d2d2d2]
- * @cssprop     {<color>} [--pf-c-tabs__link--before--BorderBottomColor=#d2d2d2]
- * @cssprop     {<color>} [--pf-c-tabs__link--before--BorderLeftColor=#d2d2d2]
- * @cssprop     {<length>}  [--pf-c-tabs__link--FontSize=1rem]
- * @cssprop     {<color>}   [--pf-c-tabs__link--Color=#6a6e73]
- * @cssprop     {<length>}  [--pf-c-tabs__link--OutlineOffset=-0.375rem]
- * @cssprop     {<color>}  [--pf-c-tabs__link--after--BorderColor=#b8bbbe]
- * @cssprop     {<length>} [--pf-c-tabs__link--after--BorderTopWidth=0]
- * @cssprop     {<length>} [--pf-c-tabs__link--after--BorderRightWidth=0]
- * @cssprop     {<length>} [--pf-c-tabs__link--after--BorderBottomWidth=0]
- * @cssprop     {<length>} [--pf-c-tabs__link--after--BorderLeftWidth=0]
- * @cssprop     {<color>} [--pf-c-tabs__item--m-current__link--Color=#151515]
- * @cssprop     {<color>}   [--pf-c-tabs__item--m-current__link--after--BorderColor=#06c]
- * @cssprop     {<length>}  [--pf-c-tabs__item--m-current__link--after--BorderWidth=3px]
- * @cssprop     {<length>} [--pf-c-tabs__link--child--MarginRight=1rem]
  * @fires {TabExpandEvent} expand - when a tab expands
  */
 export declare class PfTab extends LitElement {

package/pf-tabs/pf-tab.js

@@ -11,7 +11,226 @@ 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 `[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`;
+const styles = css `[hidden] {
+  display: none !important;
+}
+
+:host {
+  display: flex;
+  flex: none;
+  outline: none;
+  scroll-snap-align: var(--pf-c-tabs__item--ScrollSnapAlign, end);
+}
+
+.active {
+  /** Current tab text color */
+  --pf-c-tabs__link--Color: var(--pf-c-tabs__item--m-current__link--Color,  var(--pf-global--Color--100, #151515));
+  /** Current tab border color */
+  --pf-c-tabs__link--after--BorderColor: var(--pf-c-tabs__item--m-current__link--after--BorderColor, var(--pf-global--active-color--100, #06c));
+  /** Current tab border width */
+  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__item--m-current__link--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px));
+}
+
+.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);
+}
+
+.vertical [part="text"] {
+  max-width: 100%;
+  overflow-wrap: break-word;
+}
+
+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;
+  /** Tab icon and text spacing */
+  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);
+  /** Tab padding (top and bottom) */
+  padding:
+    var(--pf-c-tabs__link--PaddingTop, var(--pf-global--spacer--sm, 0.5rem))
+    var(--pf-c-tabs__link--PaddingRight, var(--pf-global--spacer--md, 1rem))
+    var(--pf-c-tabs__link--PaddingBottom, var(--pf-global--spacer--sm, 0.5rem))
+    var(--pf-c-tabs__link--PaddingLeft, var(--pf-global--spacer--md, 1rem));
+  /** Tab font size */
+  font-size: var(--pf-c-tabs__link--FontSize, var(--pf-global--FontSize--md, 1rem));
+  /** Tab text color */
+  color: var(--pf-c-tabs__link--Color, var(--pf-global--Color--200, #6a6e73));
+  /** Tab outline offset */
+  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);
+  /** Tab background color */
+  background-color: var(--pf-c-tabs__link--BackgroundColor, transparent);
+}
+
+#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 {
+  /** Tab top border width */
+  border-block-start-width: var(--pf-c-tabs__link--before--BorderTopWidth, 0);
+  /** Tab right border width */
+  border-inline-end-width: var(--pf-c-tabs__link--before--BorderRightWidth, 0);
+  /** Tab bottom border width */
+  border-block-end-width: var(--pf-c-tabs__link--before--BorderBottomWidth, 0);
+  /** Tab left border width */
+  border-inline-start-width: var(--pf-c-tabs__link--before--BorderLeftWidth, 0);
+  /** Tab top border color */
+  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)));
+  /** Tab right border color */
+  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)));
+  /** Tab bottom border color */
+  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)));
+  /** Tab left border color */
+  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 {
+  /** Tab after element top position */
+  top: var(--pf-c-tabs__link--after--Top, auto);
+  /** Tab after element right position */
+  right: var(--pf-c-tabs__link--after--Right, 0);
+  /** Tab after element bottom position */
+  bottom: var(--pf-c-tabs__link--after--Bottom, 0);
+  /** Tab before element left position */
+  left: var(--pf-c-tabs__link--before--Left, 0);
+  /** Tab after element border color */
+  border-color: var(--pf-c-tabs__link--after--BorderColor, var(--pf-global--BorderColor--light-100, #b8bbbe));
+  /** Tab after element top border width */
+  border-block-start-width:  var(--pf-c-tabs__link--after--BorderTopWidth, 0);
+  /** Tab after element right border width */
+  border-inline-end-width: var(--pf-c-tabs__link--after--BorderRightWidth, 0);
+  /** Tab after element bottom border width */
+  border-block-end-width: var(--pf-c-tabs__link--after--BorderBottomWidth);
+  /** Tab after element left border width */
+  border-inline-start-width: var(--pf-c-tabs__link--after--BorderLeftWidth);
+}
+
+: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));
+}
+
+: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));
+}
+
+:host(:active) #button {
+  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--active--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px));
+}
+
+.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);
+}
+
+:is(.box, .vertical) #button {
+  --pf-c-tabs__link--after--BorderBottomWidth: 0;
+}
+
+.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;
+}
+
+.box.vertical #button::after {
+  top: calc(var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)) * -1);
+}
+
+:host(:first-of-type) .box.vertical #button::after,
+.box.vertical.active #button::after {
+  top: 0;
+}
+
+.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-of-type) .box.active #button::before {
+  /** Box style first tab top border width */
+  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)));
+  /** Box style first tab left border width */
+  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-of-type) .box.active #button::before {
+  /** Box style last tab right border width */
+  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 {
+  --pf-c-tabs__link--Color: var(--pf-c-tabs__link--disabled--Color,  var(--pf-global--disabled-color--100, #6a6e73));
+  /** Disabled tab background color */
+  --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs__link--disabled--BackgroundColor, var(--pf-global--palette--black-150, #f5f5f5));
+  /** Disabled tab right border width */
+  --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--disabled--before--BorderRightWidth, 0);
+  /** Disabled tab bottom border width */
+  --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)));
+  /** Disabled tab left border width */
+  --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([disabled][border-bottom="false"]) #button,
+:host([aria-disabled="true"][border-bottom="false"]) #button {
+  --pf-c-tabs__link--before--BorderBottomWidth: 0;
+}
+`;
 let PfTab = class PfTab extends LitElement {
     constructor() {
         super(...arguments);
@@ -52,13 +271,23 @@ let PfTab = class PfTab extends LitElement {
         const dark = box === 'dark';
         const icons = isServer ? [] : this.icons;
         return html `
+      <!-- button element -->
       <div id="button"
            part="button"
            class="${classMap({ active, box: !!box, dark, light, fill, vertical })}">
+        <!-- slot:
+               summary: Can contain an \`<svg>\` or \`<pf-icon>\`
+             part:
+               summary: container for the icon
+        -->
         <slot name="icon"
               part="icon"
               ?hidden="${!icons?.length}"
               @slotchange="${() => this.requestUpdate()}"></slot>
+        <!-- slot:
+               summary: Tab title text
+             part:
+               summary: container for the tab text -->
         <slot part="text"></slot>
       </div>
     `;
@@ -97,7 +326,7 @@ _PfTab_activate = async function _PfTab_activate() {
     this.dispatchEvent(new TabExpandEvent(this));
 };
 PfTab.styles = [styles];
-PfTab.version = "4.1.0";
+PfTab.version = "4.2.0";
 __decorate([
     queryAssignedElements({ slot: 'icon', flatten: true })
 ], PfTab.prototype, "icons", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"pf-tab.js","sourceRoot":"","sources":["pf-tab.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, isServer, type TemplateResult } 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 { observes } 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 * @slot icon\n *       Can contain an `<svg>` or `<pf-icon>`\n * @slot\n *       Tab title text\n * @csspart button - button element\n * @csspart icon - span container for the icon\n * @csspart text - span container for the title text\n * @cssprop     {<length>} [--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth=1px]\n * @cssprop     {<length>} [--pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth=1px]\n * @cssprop     {<color>} [--pf-c-tabs__link--BackgroundColor=#f0f0f0]\n * @cssprop     {<color>} [--pf-c-tabs__link--disabled--BackgroundColor=#d2d2d2]\n * @cssprop     {<length>} [--pf-c-tabs__link--before--BorderTopWidth=1px]\n * @cssprop     {<length>} [--pf-c-tabs__link--before--BorderBottomWidth=1px]\n * @cssprop     {<length>} [--pf-c-tabs__link--before--BorderLeftWidth=0]\n * @cssprop     {<length>} [--pf-c-tabs__link--before--BorderRightWidth=1px]\n * @cssprop     {<length>} [--pf-c-tabs__link--disabled--before--BorderRightWidth=1px]\n * @cssprop     {<length>} [--pf-c-tabs__link--after--Top=auto]\n * @cssprop     {<length>} [--pf-c-tabs__link--after--Right=0]\n * @cssprop     {<length>} [--pf-c-tabs__link--after--Bottom=0]\n * @cssprop     {<length>} [--pf-c-tabs__link--before--Left=0]\n * @cssprop     {<length>} [--pf-c-tabs__link--PaddingTop=1rem]\n * @cssprop     {<length>} [--pf-c-tabs__link--PaddingBottom=1rem]\n * @cssprop     {<length>} [--pf-c-tabs__link--disabled--before--BorderBottomWidth=1px]\n * @cssprop     {<length>} [--pf-c-tabs__link--disabled--before--BorderLeftWidth=1px]\n * @cssprop     {<color>} [--pf-c-tabs__link--before--BorderTopColor=#d2d2d2]\n * @cssprop     {<color>} [--pf-c-tabs__link--before--BorderRightColor=#d2d2d2]\n * @cssprop     {<color>} [--pf-c-tabs__link--before--BorderBottomColor=#d2d2d2]\n * @cssprop     {<color>} [--pf-c-tabs__link--before--BorderLeftColor=#d2d2d2]\n * @cssprop     {<length>}  [--pf-c-tabs__link--FontSize=1rem]\n * @cssprop     {<color>}   [--pf-c-tabs__link--Color=#6a6e73]\n * @cssprop     {<length>}  [--pf-c-tabs__link--OutlineOffset=-0.375rem]\n * @cssprop     {<color>}  [--pf-c-tabs__link--after--BorderColor=#b8bbbe]\n * @cssprop     {<length>} [--pf-c-tabs__link--after--BorderTopWidth=0]\n * @cssprop     {<length>} [--pf-c-tabs__link--after--BorderRightWidth=0]\n * @cssprop     {<length>} [--pf-c-tabs__link--after--BorderBottomWidth=0]\n * @cssprop     {<length>} [--pf-c-tabs__link--after--BorderLeftWidth=0]\n * @cssprop     {<color>} [--pf-c-tabs__item--m-current__link--Color=#151515]\n * @cssprop     {<color>}   [--pf-c-tabs__item--m-current__link--after--BorderColor=#06c]\n * @cssprop     {<length>}  [--pf-c-tabs__item--m-current__link--after--BorderWidth=3px]\n * @cssprop     {<length>} [--pf-c-tabs__link--child--MarginRight=1rem]\n * @fires {TabExpandEvent} expand - when a tab expands\n */\n@customElement('pf-tab')\nexport class PfTab extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  @queryAssignedElements({ slot: 'icon', flatten: true })\n  private icons?: HTMLElement[];\n\n  @property({ reflect: true, type: Boolean }) active = false;\n\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(): void {\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(): void {\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(): TemplateResult<1> {\n    const { active } = this;\n    const { box, fill = false, vertical = false } = this.ctx ?? {};\n    const light = box === 'light';\n    const dark = box === 'dark';\n    const icons = isServer ? [] : this.icons;\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=\"${!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':\n          this.#activate();\n      }\n    }\n  }\n\n  #onFocus() {\n    if (!this.ctx?.manual && !this.disabled) {\n      this.#activate();\n    }\n  }\n\n  async #activate() {\n    this.dispatchEvent(new TabExpandEvent(this));\n  }\n\n  @observes('active')\n  protected activeChanged(old: boolean, active: boolean): void {\n    this.#internals.ariaSelected = String(!!active);\n    if (active && !old) {\n      this.#activate();\n    }\n  }\n\n  @observes('disabled')\n  protected disabledChanged(): void {\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"]}
+{"version":3,"file":"pf-tab.js","sourceRoot":"","sources":["pf-tab.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, isServer, type TemplateResult } 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 { observes } 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 * @fires {TabExpandEvent} expand - when a tab expands\n */\n@customElement('pf-tab')\nexport class PfTab extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  @queryAssignedElements({ slot: 'icon', flatten: true })\n  private icons?: HTMLElement[];\n\n  @property({ reflect: true, type: Boolean }) active = false;\n\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(): void {\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(): void {\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(): TemplateResult<1> {\n    const { active } = this;\n    const { box, fill = false, vertical = false } = this.ctx ?? {};\n    const light = box === 'light';\n    const dark = box === 'dark';\n    const icons = isServer ? [] : this.icons;\n    return html`\n      <!-- button element -->\n      <div id=\"button\"\n           part=\"button\"\n           class=\"${classMap({ active, box: !!box, dark, light, fill, vertical })}\">\n        <!-- slot:\n               summary: Can contain an \\`<svg>\\` or \\`<pf-icon>\\`\n             part:\n               summary: container for the icon\n        -->\n        <slot name=\"icon\"\n              part=\"icon\"\n              ?hidden=\"${!icons?.length}\"\n              @slotchange=\"${() => this.requestUpdate()}\"></slot>\n        <!-- slot:\n               summary: Tab title text\n             part:\n               summary: container for the tab text -->\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':\n          this.#activate();\n      }\n    }\n  }\n\n  #onFocus() {\n    if (!this.ctx?.manual && !this.disabled) {\n      this.#activate();\n    }\n  }\n\n  async #activate() {\n    this.dispatchEvent(new TabExpandEvent(this));\n  }\n\n  @observes('active')\n  protected activeChanged(old: boolean, active: boolean): void {\n    this.#internals.ariaSelected = String(!!active);\n    if (active && !old) {\n      this.#activate();\n    }\n  }\n\n  @observes('disabled')\n  protected disabledChanged(): void {\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

@@ -86,16 +86,24 @@ button:disabled {
 }
 
 [part="tabs-container"] {
+  /** Width of the tabs container */
   width: var(--pf-c-tabs--Width, auto);
+  /** Inset spacing for tabs */
   padding-inline-end: var(--pf-c-tabs--inset, 0);
+  /** Inset spacing for tabs */
   padding-inline-start: var(--pf-c-tabs--inset, 0);
 }
 
 [part="tabs-container"]::before {
+  /** Border color for tabs container pseudo-element */
   border-color: var(--pf-c-tabs--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2));
+  /** Top border width */
   border-block-start-width: var(--pf-c-tabs--before--BorderTopWidth, 0);
+  /** Right border width */
   border-inline-end-width: var(--pf-c-tabs--before--BorderRightWidth, 0);
+  /** Bottom border width */
   border-block-end-width:  var(--pf-c-tabs--before--BorderBottomWidth, var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));
+  /** Left border width */
   border-inline-start-width: var(--pf-c-tabs--before--BorderLeftWidth, 0);
 }
 
@@ -150,6 +158,7 @@ button:disabled {
   position: relative;
   flex-direction: column;
   flex-grow: 1;
+  /** Maximum width for vertical tabs */
   max-width: var(--pf-c-tabs--m-vertical--MaxWidth, 15.625rem);
 }
 
@@ -158,9 +167,13 @@ button:disabled {
   right: auto;
   border-style: solid;
   border-color: var(--pf-c-tabs--m-vertical__list--before--BorderColor, var(--pf-c-tabs--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2)));
+  /** Top border width for vertical tabs */
   border-block-start-width: var(--pf-c-tabs--m-vertical__list--before--BorderTopWidth, 0);
+  /** Right border width for vertical tabs */
   border-inline-end-width: var(--pf-c-tabs--m-vertical__list--before--BorderRightWidth, 0);
+  /** Bottom border width for vertical tabs */
   border-block-end-width: var(--pf-c-tabs--m-vertical__list--before--BorderBottomWidth, 0);
+  /** Left border width for vertical tabs */
   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)));
 }
 
@@ -202,28 +215,40 @@ button:disabled {
 }
 
 [part="tabs"] {
+  /** Display type for the tabs list */
   display: var(--pf-c-tabs__list--Display, flex);
 }
 
 button {
+  /** Width of the scroll buttons */
   width: var(--pf-c-tabs__scroll-button--Width, var(--pf-global--spacer--2xl, 3rem));
+  /** Color of the scroll buttons */
   color: var(--pf-c-tabs__scroll-button--Color, var(--pf-global--Color--100, #151515));
+  /** Background color of the scroll buttons */
   background-color: var(--pf-c-tabs__scroll-button--BackgroundColor, var(--pf-global--BackgroundColor--100, #ffffff));
+  /** Outline offset for scroll buttons */
   outline-offset: var(--pf-c-tabs__scroll-button--OutlineOffset, calc(-1 * var(--pf-global--spacer--xs, 0.25rem)));
   transition:
+    /** Transition duration for margin changes */
     margin var(--pf-c-tabs__scroll-button--TransitionDuration--margin, .125s),
+    /** Transition duration for transform changes */
     translate var(--pf-c-tabs__scroll-button--TransitionDuration--transform, .125s), opacity var(--pf-c-tabs__scroll-button--TransitionDuration--opacity, .125s);
   --pf-icon--size: 16px;
 }
 
 button:hover {
+  /** Hover color for scroll buttons */
   --pf-c-tabs__scroll-button--Color: var(--pf-c-tabs__scroll-button--hover--Color, var(--pf-global--active-color--100, #06c));
 }
 
 button::before {
+  /** Border color for scroll button pseudo-elements */
   border-color: var(--pf-c-tabs__scroll-button--before--BorderColor, var(--pf-c-tabs--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2)));
+  /** Right border width for scroll button pseudo-elements */
   border-inline-end-width: var(--pf-c-tabs__scroll-button--before--BorderRightWidth, 0);
+  /** Bottom border width for scroll button pseudo-elements */
   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)));
+  /** Left border width for scroll button pseudo-elements */
   border-inline-start-width: var(--pf-c-tabs__scroll-button--before--BorderLeftWidth, 0);
 }
 
@@ -238,6 +263,7 @@ button:nth-of-type(2) {
 }
 
 button:disabled {
+  /** Color for disabled scroll buttons */
   --pf-c-tabs__scroll-button--Color: var(--pf-c-tabs__scroll-button--disabled--Color, var(--pf-global--disabled-color--200, #d2d2d2));
 }
 

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

@@ -4,40 +4,7 @@ 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.
- * @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=auto]
- * @cssprop     {<length>} [--pf-c-tabs--inset=0]
- * @cssprop     {<color>}   [--pf-c-tabs--before--BorderColor=#d2d2d2]
- * @cssprop     {<length>}  [--pf-c-tabs--before--BorderTopWidth=0]
- * @cssprop     {<length>}  [--pf-c-tabs--before--BorderRightWidth=0]
- * @cssprop     {<length>}  [--pf-c-tabs--before--BorderBottomWidth=1px]
- * @cssprop     {<length>}  [--pf-c-tabs--before---BorderLeftWidth=0]
- * @cssprop     {<length>}  [--pf-c-tabs--m-vertical--MaxWidth=15.625rem]
- * @cssprop     {<color>}   [--pf-c-tabs--m-vertical__list--before--BorderColor=#d2d2d2]
- * @cssprop     {<length>}  [--pf-c-tabs--m-vertical__list--before--BorderTopWidth=0]
- * @cssprop     {<length>}  [--pf-c-tabs--m-vertical__list--before--BorderRightWidth=0]
- * @cssprop     {<length>}  [--pf-c-tabs--m-vertical__list--before--BorderBottomWidth=0]
- * @cssprop     {<length>}  [--pf-c-tabs--m-vertical__list--before--BorderLeftWidth=1px]
- * @cssprop     {<length>}  [--pf-c-tabs--m-vertical--m-box--inset=2rem]
- * @cssprop     {<display>} [--pf-c-tabs__list--Display=flex]
- * @cssprop     {<length>}  [--pf-c-tabs__scroll-button--Width=3rem]
- * @cssprop     {<color>}   [--pf-c-tabs__scroll-button--Color=#151515]
- * @cssprop     {<color>}   [--pf-c-tabs__scroll-button--BackgroundColor=#ffffff]
- * @cssprop     {<length>}  [--pf-c-tabs__scroll-button--OutlineOffset=-0.25rem]
- * @cssprop     {<time>}    [--pf-c-tabs__scroll-button--TransitionDuration--margin=.125s]
- * @cssprop     {<time>}    [--pf-c-tabs__scroll-button--TransitionDuration--transform=.125s]
- * @cssprop     {<color>}   [--pf-c-tabs__scroll-button--hover--Color=#06c]
- * @cssprop     {<color>}   [--pf-c-tabs__scroll-button--before--BorderColor=#d2d2d2]
- * @cssprop     {<length>}  [--pf-c-tabs__scroll-button--before--BorderRightWidth=0]
- * @cssprop     {<length>}  [--pf-c-tabs__scroll-button--before--BorderBottomWidth=1px]
- * @cssprop     {<length>}  [--pf-c-tabs__scroll-button--before--BorderLeftWidth=0]
- * @cssprop     {<length>}  [--pf-c-tabs__scroll-button--before--border-width--base=1px]
- * @cssprop     {<color>} [--pf-c-tabs__scroll-button--disabled--Color=#d2d2d2]
+ * @alias Tabs
  */
 export declare class PfTabs extends LitElement {
     #private;