@patternfly/elements 3.0.2 → 4.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"pf-tab-panel.js","sourceRoot":"","sources":["pf-tab-panel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,OAAO,EAAsB,OAAO,EAAE,MAAM,cAAc,CAAC;;;AAI3D;;;;;;GAMG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAMxC,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,KAAP,IAAI,CAAC,EAAE,GAAK,WAAW,CAAC,cAAc,CAAC,EAAC;QACxC,IAAI,CAAC,MAAM,KAAX,IAAI,CAAC,MAAM,GAAK,IAAI,EAAC;QAErB;;;;;;;;UAQE;QACF,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IACpB,CAAC;IAEQ,UAAU;QACjB,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC;QACzC,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QAC3C,IAAI,GAAG,EAAE,CAAC;YACR,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAChC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC;;AApCe,iBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGjB;IADhB,OAAO,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IACrC,KAAK,EAAE;uCAA6B;AAJ1B,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAsCtB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { state } from 'lit/decorators/state.js';\nimport { consume } from '@lit/context';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { type PfTabsContext, context } from './context.js';\n\nimport styles from './pf-tab-panel.css';\n\n/**\n * @slot - Tab panel content\n *\n * @cssprop {<color>} --pf-c-tab-content--m-light-300 {@default `#f0f0f0`}\n *\n * @csspart container - container for the panel content\n */\n@customElement('pf-tab-panel')\nexport class PfTabPanel extends LitElement {\n  static readonly styles = [styles];\n\n  @consume({ context, subscribe: true })\n  @state() private ctx?: PfTabsContext;\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.id ||= getRandomId('pf-tab-panel');\n    this.hidden ??= true;\n\n    /*\n     To make it easy for screen reader users to navigate from a tab\n     to the beginning of content in the active tabpanel, the tabpanel\n     element has tabindex=\"0\" to include the panel in the page Tab sequence.\n     It is recommended that all tabpanel elements in a tab set are focusable\n     if there are any panels in the set that contain content where the first\n     element in the panel is not focusable.\n     https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-automatic\n    */\n    this.tabIndex = 0;\n  }\n\n  override willUpdate() {\n    const { box, vertical } = this.ctx ?? {};\n    this.toggleAttribute('vertical', vertical);\n    if (box) {\n      this.setAttribute('box', box);\n    } else {\n      this.removeAttribute('box');\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tab-panel': PfTabPanel;\n  }\n}\n"]}
+{"version":3,"file":"pf-tab-panel.js","sourceRoot":"","sources":["pf-tab-panel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,OAAO,EAAsB,OAAO,EAAE,MAAM,cAAc,CAAC;;;AAUpD,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAMxC,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,KAAP,IAAI,CAAC,EAAE,GAAK,WAAW,CAAC,cAAc,CAAC,EAAC;QACxC,IAAI,CAAC,MAAM,KAAX,IAAI,CAAC,MAAM,GAAK,IAAI,EAAC;QAErB;;;;;;;;UAQE;QACF,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IACpB,CAAC;IAEQ,UAAU;QACjB,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC;QACzC,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QAC3C,IAAI,GAAG,EAAE,CAAC;YACR,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAChC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC;;AApCe,iBAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AAGlC;IADhB,OAAO,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IACrC,KAAK,EAAE;uCAA6B;AAJ1B,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { state } from 'lit/decorators/state.js';\nimport { consume } from '@lit/context';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { type PfTabsContext, context } from './context.js';\n\nimport styles from './pf-tab-panel.css';\n\n/**\n * @slot - Tab panel content\n * @cssprop {<color>} [--pf-c-tab-content--m-light-300=#f0f0f0]\n * @csspart container - container for the panel content\n */\n@customElement('pf-tab-panel')\nexport class PfTabPanel extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  @consume({ context, subscribe: true })\n  @state() private ctx?: PfTabsContext;\n\n  render(): TemplateResult<1> {\n    return html`\n      <slot></slot>\n    `;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.id ||= getRandomId('pf-tab-panel');\n    this.hidden ??= true;\n\n    /*\n     To make it easy for screen reader users to navigate from a tab\n     to the beginning of content in the active tabpanel, the tabpanel\n     element has tabindex=\"0\" to include the panel in the page Tab sequence.\n     It is recommended that all tabpanel elements in a tab set are focusable\n     if there are any panels in the set that contain content where the first\n     element in the panel is not focusable.\n     https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-automatic\n    */\n    this.tabIndex = 0;\n  }\n\n  override willUpdate(): void {\n    const { box, vertical } = this.ctx ?? {};\n    this.toggleAttribute('vertical', vertical);\n    if (box) {\n      this.setAttribute('box', box);\n    } else {\n      this.removeAttribute('box');\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tab-panel': PfTabPanel;\n  }\n}\n"]}

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
  * Tab
  * @slot icon
@@ -8,39 +8,39 @@ import { LitElement } from 'lit';
  * @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  {@default `1px`}
- * @cssprop     {<length>} --pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth  {@default `1px`}
- * @cssprop     {<color>} --pf-c-tabs__link--BackgroundColor            {@default `#f0f0f0`}
- * @cssprop     {<color>} --pf-c-tabs__link--disabled--BackgroundColor  {@default `#d2d2d2`}
- * @cssprop     {<length>} --pf-c-tabs__link--before--BorderTopWidth    {@default `1px`}
- * @cssprop     {<length>} --pf-c-tabs__link--before--BorderBottomWidth {@default `1px`}
- * @cssprop     {<length>} --pf-c-tabs__link--before--BorderLeftWidth   {@default `0`}
- * @cssprop     {<length>} --pf-c-tabs__link--before--BorderRightWidth  {@default `1px`}
- * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderRightWidth  {@default `1px`}
- * @cssprop     {<length>} --pf-c-tabs__link--after--Top    {@default `auto`}
- * @cssprop     {<length>} --pf-c-tabs__link--after--Right  {@default `0`}
- * @cssprop     {<length>} --pf-c-tabs__link--after--Bottom {@default `0`}
- * @cssprop     {<length>} --pf-c-tabs__link--before--Left  {@default `0`}
- * @cssprop     {<length>} --pf-c-tabs__link--PaddingTop    {@default `1rem`}
- * @cssprop     {<length>} --pf-c-tabs__link--PaddingBottom {@default `1rem`}
- * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderBottomWidth {@default `1px`}
- * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderLeftWidth   {@default `1px`}
- * @cssprop     {<color>} --pf-c-tabs__link--before--BorderTopColor     {@default `#d2d2d2`}
- * @cssprop     {<color>} --pf-c-tabs__link--before--BorderRightColor   {@default `#d2d2d2`}
- * @cssprop     {<color>} --pf-c-tabs__link--before--BorderBottomColor  {@default `#d2d2d2`}
- * @cssprop     {<color>} --pf-c-tabs__link--before--BorderLeftColor    {@default `#d2d2d2`}
- * @cssprop     {<length>}  --pf-c-tabs__link--FontSize      {@default `1rem`}
- * @cssprop     {<color>}   --pf-c-tabs__link--Color          {@default `#6a6e73`}
- * @cssprop     {<length>}  --pf-c-tabs__link--OutlineOffset {@default `-0.375rem`}
- * @cssprop     {<color>}  --pf-c-tabs__link--after--BorderColor        {@default `#b8bbbe`}
- * @cssprop     {<length>} --pf-c-tabs__link--after--BorderTopWidth     {@default `0`}
- * @cssprop     {<length>} --pf-c-tabs__link--after--BorderRightWidth   {@default `0`}
- * @cssprop     {<length>} --pf-c-tabs__link--after--BorderBottomWidth  {@default `0`}
- * @cssprop     {<length>} --pf-c-tabs__link--after--BorderLeftWidth    {@default `0`}
- * @cssprop     {<color>} --pf-c-tabs__item--m-current__link--Color {@default `#151515`}
- * @cssprop     {<color>}   --pf-c-tabs__item--m-current__link--after--BorderColor {@default `#06c`}
- * @cssprop     {<length>}  --pf-c-tabs__item--m-current__link--after--BorderWidth {@default `3px`}
- * @cssprop     {<length>} --pf-c-tabs__link--child--MarginRight  {@default `1rem`}
+ * @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 {
@@ -52,9 +52,9 @@ export declare class PfTab extends LitElement {
     private ctx?;
     connectedCallback(): void;
     willUpdate(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    private _activeChanged;
-    private _disabledChanged;
+    render(): TemplateResult<1>;
+    protected activeChanged(old: boolean, active: boolean): void;
+    protected disabledChanged(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-tabs/pf-tab.js

@@ -6,56 +6,12 @@ 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 { observes } from '@patternfly/pfe-core/decorators.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 `[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
- * @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  {@default `1px`}
- * @cssprop     {<length>} --pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth  {@default `1px`}
- * @cssprop     {<color>} --pf-c-tabs__link--BackgroundColor            {@default `#f0f0f0`}
- * @cssprop     {<color>} --pf-c-tabs__link--disabled--BackgroundColor  {@default `#d2d2d2`}
- * @cssprop     {<length>} --pf-c-tabs__link--before--BorderTopWidth    {@default `1px`}
- * @cssprop     {<length>} --pf-c-tabs__link--before--BorderBottomWidth {@default `1px`}
- * @cssprop     {<length>} --pf-c-tabs__link--before--BorderLeftWidth   {@default `0`}
- * @cssprop     {<length>} --pf-c-tabs__link--before--BorderRightWidth  {@default `1px`}
- * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderRightWidth  {@default `1px`}
- * @cssprop     {<length>} --pf-c-tabs__link--after--Top    {@default `auto`}
- * @cssprop     {<length>} --pf-c-tabs__link--after--Right  {@default `0`}
- * @cssprop     {<length>} --pf-c-tabs__link--after--Bottom {@default `0`}
- * @cssprop     {<length>} --pf-c-tabs__link--before--Left  {@default `0`}
- * @cssprop     {<length>} --pf-c-tabs__link--PaddingTop    {@default `1rem`}
- * @cssprop     {<length>} --pf-c-tabs__link--PaddingBottom {@default `1rem`}
- * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderBottomWidth {@default `1px`}
- * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderLeftWidth   {@default `1px`}
- * @cssprop     {<color>} --pf-c-tabs__link--before--BorderTopColor     {@default `#d2d2d2`}
- * @cssprop     {<color>} --pf-c-tabs__link--before--BorderRightColor   {@default `#d2d2d2`}
- * @cssprop     {<color>} --pf-c-tabs__link--before--BorderBottomColor  {@default `#d2d2d2`}
- * @cssprop     {<color>} --pf-c-tabs__link--before--BorderLeftColor    {@default `#d2d2d2`}
- * @cssprop     {<length>}  --pf-c-tabs__link--FontSize      {@default `1rem`}
- * @cssprop     {<color>}   --pf-c-tabs__link--Color          {@default `#6a6e73`}
- * @cssprop     {<length>}  --pf-c-tabs__link--OutlineOffset {@default `-0.375rem`}
- * @cssprop     {<color>}  --pf-c-tabs__link--after--BorderColor        {@default `#b8bbbe`}
- * @cssprop     {<length>} --pf-c-tabs__link--after--BorderTopWidth     {@default `0`}
- * @cssprop     {<length>} --pf-c-tabs__link--after--BorderRightWidth   {@default `0`}
- * @cssprop     {<length>} --pf-c-tabs__link--after--BorderBottomWidth  {@default `0`}
- * @cssprop     {<length>} --pf-c-tabs__link--after--BorderLeftWidth    {@default `0`}
- * @cssprop     {<color>} --pf-c-tabs__item--m-current__link--Color {@default `#151515`}
- * @cssprop     {<color>}   --pf-c-tabs__item--m-current__link--after--BorderColor {@default `#06c`}
- * @cssprop     {<length>}  --pf-c-tabs__item--m-current__link--after--BorderWidth {@default `3px`}
- * @cssprop     {<length>} --pf-c-tabs__link--child--MarginRight  {@default `1rem`}
- * @fires {TabExpandEvent} expand - when a tab expands
- */
 let PfTab = class PfTab extends LitElement {
     constructor() {
         super(...arguments);
@@ -106,13 +62,13 @@ let PfTab = class PfTab extends LitElement {
       </div>
     `;
     }
-    _activeChanged(old) {
-        __classPrivateFieldGet(this, _PfTab_internals, "f").ariaSelected = String(!!this.active);
-        if (this.active && !old) {
+    activeChanged(old, active) {
+        __classPrivateFieldGet(this, _PfTab_internals, "f").ariaSelected = String(!!active);
+        if (active && !old) {
             __classPrivateFieldGet(this, _PfTab_instances, "m", _PfTab_activate).call(this);
         }
     }
-    _disabledChanged() {
+    disabledChanged() {
         __classPrivateFieldGet(this, _PfTab_internals, "f").ariaDisabled = this.disabled ? 'true' : this.ariaDisabled ?? 'false';
     }
 };
@@ -126,7 +82,8 @@ _PfTab_onClick = function _PfTab_onClick() {
 _PfTab_onKeydown = function _PfTab_onKeydown(event) {
     if (!this.disabled) {
         switch (event.key) {
-            case 'Enter': __classPrivateFieldGet(this, _PfTab_instances, "m", _PfTab_activate).call(this);
+            case 'Enter':
+                __classPrivateFieldGet(this, _PfTab_instances, "m", _PfTab_activate).call(this);
         }
     }
 };
@@ -135,25 +92,30 @@ _PfTab_onFocus = function _PfTab_onFocus() {
         __classPrivateFieldGet(this, _PfTab_instances, "m", _PfTab_activate).call(this);
     }
 };
-_PfTab_activate = function _PfTab_activate() {
-    return this.dispatchEvent(new TabExpandEvent(this));
+_PfTab_activate = async function _PfTab_activate() {
+    this.dispatchEvent(new TabExpandEvent(this));
 };
 PfTab.styles = [styles];
+PfTab.version = "4.0.0";
 __decorate([
     queryAssignedElements({ slot: 'icon', flatten: true })
 ], PfTab.prototype, "icons", void 0);
 __decorate([
-    observed,
     property({ reflect: true, type: Boolean })
 ], PfTab.prototype, "active", void 0);
 __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);
+__decorate([
+    observes('active')
+], PfTab.prototype, "activeChanged", null);
+__decorate([
+    observes('disabled')
+], PfTab.prototype, "disabledChanged", null);
 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":"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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 * @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  {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth  {@default `1px`}\n * @cssprop     {<color>} --pf-c-tabs__link--BackgroundColor            {@default `#f0f0f0`}\n * @cssprop     {<color>} --pf-c-tabs__link--disabled--BackgroundColor  {@default `#d2d2d2`}\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 * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderRightWidth  {@default `1px`}\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 * @cssprop     {<length>} --pf-c-tabs__link--PaddingTop    {@default `1rem`}\n * @cssprop     {<length>} --pf-c-tabs__link--PaddingBottom {@default `1rem`}\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 * @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 * @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 * @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 * @cssprop     {<color>} --pf-c-tabs__item--m-current__link--Color {@default `#151515`}\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 * @cssprop     {<length>} --pf-c-tabs__link--child--MarginRight  {@default `1rem`}\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!: 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"]}
+{"version":3,"file":"pf-tab.js","sourceRoot":"","sources":["pf-tab.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, 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    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':\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.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, type PropertyValues } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import { PfTab } from './pf-tab.js';
 import { TabExpandEvent } from './context.js';
 import '@patternfly/elements/pf-icon/pf-icon.js';
@@ -10,34 +10,34 @@ import '@patternfly/elements/pf-icon/pf-icon.js';
  * @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`}
+ * @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]
  */
 export declare class PfTabs extends LitElement {
     #private;
@@ -74,21 +74,20 @@ export declare class PfTabs extends LitElement {
      * 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;
+    /** The index of the active tab */
+    get activeIndex(): number;
+    set activeIndex(v: 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 willUpdate(): void;
+    protected activeTabChanged(old?: PfTab, activeTab?: PfTab): void;
     protected firstUpdated(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    select(option: PfTab | number): void;
+    render(): TemplateResult<1>;
+    select(tab: PfTab | number): void;
 }
 declare global {
     interface HTMLElementTagNameMap {