@patternfly/elements 2.0.0-rc.4 → 2.0.0-rc.6

package/pf-switch/README.md

@@ -0,0 +1,91 @@
+# PatternFly Elements Switch
+     
+`<pf-switch>` is a switch that toggles the state of a setting (between on and 
+off). Switches provide a more explicit, visible representation on a setting.
+
+Read more about Switch in the [PatternFly Elements Switch documentation](https://patternflyelements.org/components/switch)
+
+##  Installation
+
+Load `<pf-switch>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-switch/pf-switch.js"></script>
+```
+
+Or, if you are using [NPM](https://npm.im), install it
+
+```bash
+npm install @patternfly/elements
+```
+
+Then once installed, import it to your application:
+
+```js
+import '@patternfly/elements/pf-switch/pf-switch.js';
+```
+
+### Note
+For `<pf-switch>` to work in Safari, you'll need to load the [element-internals-polyfill](https://www.npmjs.com/package/element-internals-polyfill). Safari is in the process of [adding element internals to WebKit](https://bugs.webkit.org/show_bug.cgi?id=197960) so this polyfill should be temporary.
+
+## Usage
+```html
+<pf-switch id="switch"></pf-switch>
+<label for="switch" data-state="on">Message when on</label>
+<label for="switch" data-state="off" hidden>Message when off</label>
+```
+
+### Form Associated
+
+`<pf-switch>` is a form-associated custom element. That means that it can
+participate in HTML forms just like a native `<input>`. For example, if you add
+the `name` attribute, or the `id` attribute, the element will appear in the
+FormData object. For example, if you add the `name` attribute, or the `id`
+attribute, the element will appear in the `FormData` object.
+
+```html
+<form>
+  <label> Dark Mode
+    <pf-switch name="dark"></pf-switch>
+  </label>
+  <script>
+  document.currentScript.closest('form').addEventListener('submit', function() {
+    console.log(this.elements.dark) // <pf-switch>
+  })
+  </script>
+</form>
+```
+
+
+### Without label
+
+```html
+<pf-switch></pf-switch>
+```
+
+### Checked with label
+
+```html
+<pf-switch show-check-icon></pf-switch>
+<label for="switch" data-state="on">Message when on</label>
+<label for="switch" data-state="off" hidden>Message when off</label>
+```
+
+### Disabled Switches
+
+```html
+<form>
+  <fieldset>
+    <legend>Checked and Disabled</legend>
+    <pf-switch id="checked-disabled" checked disabled></pf-switch>
+    <label for="checked-disabled" data-state="on">Message when on</label>
+    <label for="checked-disabled" data-state="off">Message when off</label>
+  </fieldset>
+
+  <fieldset>
+    <pf-switch id="disabled" disabled></pf-switch>
+    <label for="disabled" data-state="on">Message when on</label>
+    <label for="disabled" data-state="off">Message when off</label>
+  </fieldset>
+</form>
+```

package/pf-switch/pf-switch.js

@@ -1,8 +1,8 @@
 import { __decorate } from "tslib";
-import { customElement } from 'lit/decorators.js';
+import { customElement } from 'lit/decorators/custom-element.js';
 import { BaseSwitch } from './BaseSwitch.js';
 import { css } from "lit";
-const styles = css `:host([checked]) #container {\n  color: var(--pf-c-switch__input--checked__label--Color,\n    var(--pf-global--Color--dark-100, #151515));\n  background-color: var(--pf-c-switch__input--checked__toggle--BackgroundColor,\n    var(--pf-global--primary-color--100, #06c));\n}\n\n:host([checked]) #container::before {\n  translate: var(--pf-c-switch__input--checked__toggle--before--TranslateX,\n    calc(100% + var(--pf-c-switch__toggle-icon--Offset, 0.125rem)));\n}\n\n:host(:disabled) #container {\n  color: var(--pf-c-switch__input--disabled__label--Color,\n    var(--pf-global--disabled-color--100, #6a6e73));\n  background-color: var(--pf-c-switch__input--disabled__toggle--BackgroundColor,\n    var(--pf-global--disabled-color--200, #d2d2d2));\n}\n\n:host(:disabled) #container::before {\n  background-color: var(--pf-c-switch__input--disabled__toggle--before--BackgroundColor,\n    var(--pf-global--palette--black-150, #f5f5f5));\n}\n\n:host([checked]:disabled) #container::before {\n  translate: var(--pf-c-switch__input--checked__toggle--before--TranslateX,\n    calc(100% + var(--pf-c-switch__toggle-icon--Offset, 0.125rem)));\n}\n\n#container {\n  width: var(--pf-c-switch__toggle--Width,\n    calc(var(--pf-c-switch__toggle--Height,\n      calc(var(--pf-c-switch--FontSize,\n        var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,\n          var(--pf-global--LineHeight--md, 1.5)))) + var(--pf-c-switch__toggle-icon--Offset, 0.125rem) + var(--pf-c-switch__toggle--before--Width,\n            calc(var(--pf-c-switch--FontSize,\n              var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem)))));\n  height: var(--pf-c-switch__toggle--Height,\n    calc(var(--pf-c-switch--FontSize,\n      var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,\n        var(--pf-global--LineHeight--md, 1.5))));\n  background-color: var(--pf-c-switch__toggle--BackgroundColor,\n    var(--pf-global--palette--black-500, #8a8d90));\n  border-radius: var(--pf-c-switch__toggle--BorderRadius,\n    var(--pf-c-switch__toggle--Height, calc(var(--pf-c-switch--FontSize,\n      var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,\n        var(--pf-global--LineHeight--md, 1.5)))));\n}\n\n#container::before {\n  top: var(--pf-c-switch__toggle--before--Top,\n    calc((var(--pf-c-switch__toggle--Height,\n      calc(var(--pf-c-switch--FontSize,\n        var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,\n          var(--pf-global--LineHeight--md, 1.5)))) - var(--pf-c-switch__toggle--before--Height,\n            var(--pf-c-switch__toggle--before--Width,\n              calc(var(--pf-c-switch--FontSize,\n                var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem))))) / 2));\n  left: var(--pf-c-switch__toggle--before--Left,\n    var(--pf-c-switch__toggle--before--Top,\n      calc((var(--pf-c-switch__toggle--Height,\n        calc(var(--pf-c-switch--FontSize,\n          var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,\n            var(--pf-global--LineHeight--md, 1.5)))) - var(--pf-c-switch__toggle--before--Height,\n              var(--pf-c-switch__toggle--before--Width,\n                calc(var(--pf-c-switch--FontSize,\n                  var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem))))) / 2)));\n  width: var(--pf-c-switch__toggle--before--Width,\n    calc(var(--pf-c-switch--FontSize,\n      var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem)));\n  height: var(--pf-c-switch__toggle--before--Height,\n    var(--pf-c-switch__toggle--before--Width,\n      calc(var(--pf-c-switch--FontSize,\n        var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem))));\n  background-color: var(--pf-c-switch__toggle--before--backgroundcolor,\n    var(--pf-global--backgroundcolor--100, #fff));\n  border-radius: var(--pf-c-switch__toggle--before--BorderRadius,\n    var(--pf-global--BorderRadius--lg, 30em));\n  box-shadow: var(--pf-c-switch__toggle--before--BoxShadow,\n    var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)));\n  transition: var(--pf-c-switch__toggle--before--Transition,\n    var(--pf-c-switch__toggle--before--Transition, translate .25s ease 0s)); ;\n}\n\n:host(:focus-within) #container {\n  outline: var(--pf-c-switch__input--focus__toggle--OutlineWidth,\n    var(--pf-global--BorderWidth--md, 2px)) solid var(--pf-c-switch__input--focus__toggle--OutlineColor,\n      var(--pf-global--primary-color--100, #06c));\n  outline-offset: var(--pf-c-switch__input--focus__toggle--OutlineOffset,\n    var(--pf-global--spacer--sm, 0.5rem));\n}\n\nsvg {\n  margin-inline: var(--pf-c-switch__toggle-icon--Left,\n    calc(var(--pf-c-switch--FontSize,\n      var(--pf-global--FontSize--md, 1rem)) * .4));\n  font-size: var(--pf-c-switch__toggle-icon--FontSize,\n    calc(var(--pf-c-switch--FontSize,\n      var(--pf-global--FontSize--md, 1rem)) * .625));\n  color: var(--pf-c-switch__toggle-icon--Color,\n    var(--pf-global--Color--light-100, #fff));\n}\n`;
+const styles = css `:host([checked]) #container{color:var(--pf-c-switch__input--checked__label--Color,var(--pf-global--Color--dark-100,#151515));background-color:var(--pf-c-switch__input--checked__toggle--BackgroundColor,var(--pf-global--primary-color--100,#06c))}:host([checked]) #container::before{translate:var(--pf-c-switch__input--checked__toggle--before--TranslateX,calc(100% + var(--pf-c-switch__toggle-icon--Offset,0.125rem)))}:host(:disabled) #container{color:var(--pf-c-switch__input--disabled__label--Color,var(--pf-global--disabled-color--100,#6a6e73));background-color:var(--pf-c-switch__input--disabled__toggle--BackgroundColor,var(--pf-global--disabled-color--200,#d2d2d2))}:host(:disabled) #container::before{background-color:var(--pf-c-switch__input--disabled__toggle--before--BackgroundColor,var(--pf-global--palette--black-150,#f5f5f5))}:host([checked]:disabled) #container::before{translate:var(--pf-c-switch__input--checked__toggle--before--TranslateX,calc(100% + var(--pf-c-switch__toggle-icon--Offset,0.125rem)))}#container{width:var(--pf-c-switch__toggle--Width,calc(var(--pf-c-switch__toggle--Height,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) * var(--pf-c-switch--LineHeight,var(--pf-global--LineHeight--md,1.5)))) + var(--pf-c-switch__toggle-icon--Offset,.125rem) + var(--pf-c-switch__toggle--before--Width,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) - var(--pf-c-switch__toggle-icon--Offset,.125rem)))));height:var(--pf-c-switch__toggle--Height,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) * var(--pf-c-switch--LineHeight,var(--pf-global--LineHeight--md,1.5))));background-color:var(--pf-c-switch__toggle--BackgroundColor,var(--pf-global--palette--black-500,#8a8d90));border-radius:var(--pf-c-switch__toggle--BorderRadius,var(--pf-c-switch__toggle--Height,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) * var(--pf-c-switch--LineHeight,var(--pf-global--LineHeight--md,1.5)))))}#container::before{top:var(--pf-c-switch__toggle--before--Top,calc((var(--pf-c-switch__toggle--Height,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) * var(--pf-c-switch--LineHeight,var(--pf-global--LineHeight--md,1.5)))) - var(--pf-c-switch__toggle--before--Height,var(--pf-c-switch__toggle--before--Width,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) - var(--pf-c-switch__toggle-icon--Offset,.125rem)))))/ 2));left:var(--pf-c-switch__toggle--before--Left,var(--pf-c-switch__toggle--before--Top,calc((var(--pf-c-switch__toggle--Height,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) * var(--pf-c-switch--LineHeight,var(--pf-global--LineHeight--md,1.5)))) - var(--pf-c-switch__toggle--before--Height,var(--pf-c-switch__toggle--before--Width,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) - var(--pf-c-switch__toggle-icon--Offset,.125rem)))))/ 2)));width:var(--pf-c-switch__toggle--before--Width,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) - var(--pf-c-switch__toggle-icon--Offset,.125rem)));height:var(--pf-c-switch__toggle--before--Height,var(--pf-c-switch__toggle--before--Width,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) - var(--pf-c-switch__toggle-icon--Offset,.125rem))));background-color:var(--pf-c-switch__toggle--before--backgroundcolor,var(--pf-global--backgroundcolor--100,#fff));border-radius:var(--pf-c-switch__toggle--before--BorderRadius,var(--pf-global--BorderRadius--lg,30em));box-shadow:var(--pf-c-switch__toggle--before--BoxShadow,var(--pf-global--BoxShadow--md,0 .25rem .5rem 0 rgba(3,3,3,.12),0 0 .25rem 0 rgba(3,3,3,.06)));transition:var(--pf-c-switch__toggle--before--Transition,\n    var(--pf-c-switch__toggle--before--Transition, translate .25s ease 0s))}:host(:focus-within) #container{outline:var(--pf-c-switch__input--focus__toggle--OutlineWidth,var(--pf-global--BorderWidth--md,2px)) solid var(--pf-c-switch__input--focus__toggle--OutlineColor,var(--pf-global--primary-color--100,#06c));outline-offset:var(--pf-c-switch__input--focus__toggle--OutlineOffset,var(--pf-global--spacer--sm,0.5rem))}svg{margin-inline:var(--pf-c-switch__toggle-icon--Left,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) * .4));font-size:var(--pf-c-switch__toggle-icon--FontSize,\n    calc(var(--pf-c-switch--FontSize,\n      var(--pf-global--FontSize--md, 1rem)) * .625));color:var(--pf-c-switch__toggle-icon--Color,var(--pf-global--Color--light-100,#fff))}`;
 /**
  * Switch
  * @cssprop --pf-c-switch--FontSize {@default `1rem`}

package/pf-switch/pf-switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-switch.js","sourceRoot":"","sources":["pf-switch.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;;;AAG7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAGI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;;AACtB,eAAM,GAAG,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAD7C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAEpB;SAFY,QAAQ","sourcesContent":["import { customElement } from 'lit/decorators.js';\n\nimport { BaseSwitch } from './BaseSwitch.js';\nimport styles from './pf-switch.css';\n\n/**\n * Switch\n * @cssprop --pf-c-switch--FontSize {@default `1rem`}\n * @cssprop {<length>} --pf-c-switch--ColumnGap {@default `1rem`}\n * @cssprop --pf-c-switch__toggle-icon--FontSize {@default `calc(1rem * .625)`}\n * @cssprop {<color>} --pf-c-switch__toggle-icon--Color {@default `#fff`}\n * @cssprop {<length>} --pf-c-switch__toggle-icon--Left {@default `1rem`}\n * @cssprop {<length>} --pf-c-switch__toggle-icon--Offset {@default `0.125rem`}\n * @cssprop {<number>} --pf-c-switch--LineHeight {@default `1.5`}\n * @cssprop {<length>} --pf-c-switch--Height {@default `auto`}\n * @cssprop {<color>} --pf-c-switch__input--checked__toggle--BackgroundColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-switch__input--checked__toggle--before--TranslateX {@default `calc(100% + 0.125rem)`}\n * @cssprop {<color>} --pf-c-switch__input--checked__label--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-switch__input--not-checked__label--Color {@default `#6a6e73`}\n * @cssprop {<color>} --pf-c-switch__input--disabled__label--Color {@default `#6a6e73`}\n * @cssprop {<color>} --pf-c-switch__input--disabled__toggle--BackgroundColor {@default `#d2d2d2`}\n * @cssprop {<color>} --pf-c-switch__input--disabled__toggle--before--BackgroundColor {@default `#f5f5f5`}\n * @cssprop {<length>} --pf-c-switch__input--focus__toggle--OutlineWidth {@default `2px`}\n * @cssprop {<length>} --pf-c-switch__input--focus__toggle--OutlineOffset {@default `0.5rem`}\n * @cssprop {<color>} --pf-c-switch__input--focus__toggle--OutlineColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-switch__toggle--Height {@default `calc(1rem * 1.5)`}\n * @cssprop {<color>} --pf-c-switch__toggle--BackgroundColor {@default `#8a8d90`}\n * @cssprop {<length>} --pf-c-switch__toggle--BorderRadius {@default `calc(1rem * 1.5)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Width {@default `calc(1rem - 0.125rem)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Height {@default `calc(1rem - 0.125rem)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Top {@default calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Left {@default `calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)`}\n * @cssprop {<color>} --pf-c-switch__toggle--before--BackgroundColor {@default `#fff`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--BorderRadius {@default `30em`}\n * @cssprop --pf-c-switch__toggle--before--BoxShadow {@default `0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)`}\n * @cssprop --pf-c-switch__toggle--before--Transition {@default `transform .25s ease 0s`}\n * @cssprop {<length>} --pf-c-switch__toggle--Width {@default `calc(calc(1rem * 1.5) + 0.125rem + calc(1rem - 0.125rem))`}\n */\n\n@customElement('pf-switch')\nexport class PfSwitch extends BaseSwitch {\n  static readonly styles = [...BaseSwitch.styles, styles];\n}\n\n  declare global {\n    interface HTMLElementTagNameMap {\n      'pf-switch': PfSwitch;\n  }\n}\n"]}
+{"version":3,"file":"pf-switch.js","sourceRoot":"","sources":["pf-switch.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;;;AAG7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAGI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;;AACtB,eAAM,GAAG,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAD7C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAEpB;SAFY,QAAQ","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\n\nimport { BaseSwitch } from './BaseSwitch.js';\nimport styles from './pf-switch.css';\n\n/**\n * Switch\n * @cssprop --pf-c-switch--FontSize {@default `1rem`}\n * @cssprop {<length>} --pf-c-switch--ColumnGap {@default `1rem`}\n * @cssprop --pf-c-switch__toggle-icon--FontSize {@default `calc(1rem * .625)`}\n * @cssprop {<color>} --pf-c-switch__toggle-icon--Color {@default `#fff`}\n * @cssprop {<length>} --pf-c-switch__toggle-icon--Left {@default `1rem`}\n * @cssprop {<length>} --pf-c-switch__toggle-icon--Offset {@default `0.125rem`}\n * @cssprop {<number>} --pf-c-switch--LineHeight {@default `1.5`}\n * @cssprop {<length>} --pf-c-switch--Height {@default `auto`}\n * @cssprop {<color>} --pf-c-switch__input--checked__toggle--BackgroundColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-switch__input--checked__toggle--before--TranslateX {@default `calc(100% + 0.125rem)`}\n * @cssprop {<color>} --pf-c-switch__input--checked__label--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-switch__input--not-checked__label--Color {@default `#6a6e73`}\n * @cssprop {<color>} --pf-c-switch__input--disabled__label--Color {@default `#6a6e73`}\n * @cssprop {<color>} --pf-c-switch__input--disabled__toggle--BackgroundColor {@default `#d2d2d2`}\n * @cssprop {<color>} --pf-c-switch__input--disabled__toggle--before--BackgroundColor {@default `#f5f5f5`}\n * @cssprop {<length>} --pf-c-switch__input--focus__toggle--OutlineWidth {@default `2px`}\n * @cssprop {<length>} --pf-c-switch__input--focus__toggle--OutlineOffset {@default `0.5rem`}\n * @cssprop {<color>} --pf-c-switch__input--focus__toggle--OutlineColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-switch__toggle--Height {@default `calc(1rem * 1.5)`}\n * @cssprop {<color>} --pf-c-switch__toggle--BackgroundColor {@default `#8a8d90`}\n * @cssprop {<length>} --pf-c-switch__toggle--BorderRadius {@default `calc(1rem * 1.5)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Width {@default `calc(1rem - 0.125rem)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Height {@default `calc(1rem - 0.125rem)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Top {@default calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Left {@default `calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)`}\n * @cssprop {<color>} --pf-c-switch__toggle--before--BackgroundColor {@default `#fff`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--BorderRadius {@default `30em`}\n * @cssprop --pf-c-switch__toggle--before--BoxShadow {@default `0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)`}\n * @cssprop --pf-c-switch__toggle--before--Transition {@default `transform .25s ease 0s`}\n * @cssprop {<length>} --pf-c-switch__toggle--Width {@default `calc(calc(1rem * 1.5) + 0.125rem + calc(1rem - 0.125rem))`}\n */\n\n@customElement('pf-switch')\nexport class PfSwitch extends BaseSwitch {\n  static readonly styles = [...BaseSwitch.styles, styles];\n}\n\n  declare global {\n    interface HTMLElementTagNameMap {\n      'pf-switch': PfSwitch;\n  }\n}\n"]}

package/pf-tabs/BaseTab.js

@@ -1,10 +1,11 @@
 var _BaseTab_instances, _BaseTab_internals, _BaseTab_clickHandler, _BaseTab_activeChanged, _BaseTab_disabledChanged;
 import { __classPrivateFieldGet, __decorate } from "tslib";
 import { LitElement, html } from 'lit';
-import { queryAssignedElements, query } from 'lit/decorators.js';
+import { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';
+import { query } from 'lit/decorators/query.js';
 import { ComposedEvent } from '@patternfly/pfe-core';
 import { css } from "lit";
-const style = css `:host {\n  display: flex;\n  flex: none;\n}\n\n:host([vertical]) [part="text"] {\n  max-width: 100%;\n  overflow-wrap: break-word;\n}\n\n[hidden] {\n  display: none !important;\n}\n\nslot[name="icon"] {\n  display: block;\n}\n\nbutton {\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}\n\nbutton::before,\nbutton::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}\n\nbutton::before {\n  pointer-events: none;\n}\n\n:host([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`;
+const style = css `:host{display:flex;flex:none}:host([vertical]) [part=text]{max-width:100%;overflow-wrap:break-word}[hidden]{display:none!important}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}button::after,button::before{position:absolute;top:0;right:0;bottom:0;left:0;content:"";border-style:solid;padding:0;margin:0;background-color:transparent}button::before{pointer-events:none}:host([fill]) button{flex-basis:100%;justify-content:center}:host(:disabled) button{pointer-events:none}:host([aria-disabled=true]) button{cursor:default}`;
 export class TabExpandEvent extends ComposedEvent {
     constructor(active, tab) {
         super('expand');

package/pf-tabs/BaseTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTab.js","sourceRoot":"","sources":["BaseTab.ts"],"names":[],"mappings":";;AAEA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;;;AAIrD,MAAM,OAAO,cAAe,SAAQ,aAAa;IAC/C,YACS,MAAe,EACf,GAAY;QAEnB,KAAK,CAAC,QAAQ,CAAC,CAAC;QAHT,WAAM,GAAN,MAAM,CAAS;QACf,QAAG,GAAH,GAAG,CAAS;IAGrB,CAAC;CACF;AAED,MAAM,OAAgB,OAAQ,SAAQ,UAAU;IAAhD;;;QAgBE,6BAAa,IAAI,CAAC,eAAe,EAAE,EAAC;IAqDtC,CAAC;IAnDC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,uBAAA,IAAI,iDAAc,CAAC,CAAC;QACnD,uBAAA,IAAI,0BAAW,CAAC,IAAI,GAAG,KAAK,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;yCAC0B,IAAI,CAAC,QAAQ;;;yBAG7B,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM;6BACd,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;;;KAGlD,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,uBAAA,IAAI,0BAAW,CAAC,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACzD,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACzB,uBAAA,IAAI,kDAAe,MAAnB,IAAI,CAAiB,CAAC;SACvB;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YAC3B,uBAAA,IAAI,oDAAiB,MAArB,IAAI,CAAmB,CAAC;SACzB;IACH,CAAC;;;IAGC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,uBAAA,IAAI,0BAAW,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,YAAY,KAAK,MAAM,EAAE;QAC7F,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACpB;AACH,CAAC;IAGC,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QACjC,uBAAA,IAAI,0BAAW,CAAC,YAAY,GAAG,MAAM,CAAC;KACvC;SAAM;QACL,uBAAA,IAAI,0BAAW,CAAC,YAAY,GAAG,OAAO,CAAC;KACxC;IACD,IAAI,CAAC,aAAa,CAAC,IAAI,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;AAC5D,CAAC;IAQC,uBAAA,IAAI,0BAAW,CAAC,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;AACzD,CAAC;AAnEe,cAAM,GAAG,CAAC,KAAK,CAAC,CAAC;AAE1B,yBAAiB,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC;AAGrF;IADC,qBAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCACpB;AAElB;IAAhB,KAAK,CAAC,QAAQ,CAAC;uCAAoC","sourcesContent":["import type { PropertyValues } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { queryAssignedElements, query } from 'lit/decorators.js';\n\nimport { ComposedEvent } from '@patternfly/pfe-core';\n\nimport style from './BaseTab.css';\n\nexport class TabExpandEvent extends ComposedEvent {\n  constructor(\n    public active: boolean,\n    public tab: BaseTab,\n  ) {\n    super('expand');\n  }\n}\n\nexport abstract class BaseTab extends LitElement {\n  static readonly styles = [style];\n\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  @queryAssignedElements({ slot: 'icon', flatten: true })\n  private icons!: Array<HTMLElement>;\n\n  @query('button') private button!: HTMLButtonElement;\n\n  /** `active` should be observed, and true when the tab is selected */\n  abstract active: boolean;\n\n  /** `active` should be observed, and true when the tab is disabled */\n  abstract disabled: boolean;\n\n  #internals = this.attachInternals();\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this.#clickHandler);\n    this.#internals.role = 'tab';\n  }\n\n  render() {\n    return html`\n      <button part=\"button\" ?disabled=\"${this.disabled}\">\n        <slot name=\"icon\"\n              part=\"icon\"\n              ?hidden=\"${!this.icons.length}\"\n              @slotchange=\"${() => this.requestUpdate()}\"></slot>\n        <slot part=\"text\"></slot>\n      </button>\n    `;\n  }\n\n  updated(changed: PropertyValues<this>) {\n    this.#internals.ariaSelected = String(this.ariaSelected);\n    if (changed.has('active')) {\n      this.#activeChanged();\n    }\n    if (changed.has('disabled')) {\n      this.#disabledChanged();\n    }\n  }\n\n  #clickHandler() {\n    if (!this.disabled && this.#internals.ariaDisabled !== 'true' && this.ariaDisabled !== 'true') {\n      this.active = true;\n    }\n  }\n\n  #activeChanged() {\n    if (this.active && !this.disabled) {\n      this.#internals.ariaSelected = 'true';\n    } else {\n      this.#internals.ariaSelected = 'false';\n    }\n    this.dispatchEvent(new TabExpandEvent(this.active, this));\n  }\n\n  /**\n   * if a tab is disabled, then it is also aria-disabled\n   * if a tab is removed from disabled its not necessarily\n   * not still aria-disabled so we don't remove the aria-disabled\n   */\n  #disabledChanged() {\n    this.#internals.ariaDisabled = String(!!this.disabled);\n  }\n}\n"]}
+{"version":3,"file":"BaseTab.js","sourceRoot":"","sources":["BaseTab.ts"],"names":[],"mappings":";;AAEA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AAClF,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;;;AAIrD,MAAM,OAAO,cAAe,SAAQ,aAAa;IAC/C,YACS,MAAe,EACf,GAAY;QAEnB,KAAK,CAAC,QAAQ,CAAC,CAAC;QAHT,WAAM,GAAN,MAAM,CAAS;QACf,QAAG,GAAH,GAAG,CAAS;IAGrB,CAAC;CACF;AAED,MAAM,OAAgB,OAAQ,SAAQ,UAAU;IAAhD;;;QAgBE,6BAAa,IAAI,CAAC,eAAe,EAAE,EAAC;IAqDtC,CAAC;IAnDC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,uBAAA,IAAI,iDAAc,CAAC,CAAC;QACnD,uBAAA,IAAI,0BAAW,CAAC,IAAI,GAAG,KAAK,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;yCAC0B,IAAI,CAAC,QAAQ;;;yBAG7B,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM;6BACd,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;;;KAGlD,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,uBAAA,IAAI,0BAAW,CAAC,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACzD,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACzB,uBAAA,IAAI,kDAAe,MAAnB,IAAI,CAAiB,CAAC;SACvB;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YAC3B,uBAAA,IAAI,oDAAiB,MAArB,IAAI,CAAmB,CAAC;SACzB;IACH,CAAC;;;IAGC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,uBAAA,IAAI,0BAAW,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,YAAY,KAAK,MAAM,EAAE;QAC7F,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACpB;AACH,CAAC;IAGC,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QACjC,uBAAA,IAAI,0BAAW,CAAC,YAAY,GAAG,MAAM,CAAC;KACvC;SAAM;QACL,uBAAA,IAAI,0BAAW,CAAC,YAAY,GAAG,OAAO,CAAC;KACxC;IACD,IAAI,CAAC,aAAa,CAAC,IAAI,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;AAC5D,CAAC;IAQC,uBAAA,IAAI,0BAAW,CAAC,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;AACzD,CAAC;AAnEe,cAAM,GAAG,CAAC,KAAK,CAAC,CAAC;AAE1B,yBAAiB,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC;AAGrF;IADC,qBAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCACpB;AAElB;IAAhB,KAAK,CAAC,QAAQ,CAAC;uCAAoC","sourcesContent":["import type { PropertyValues } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { query } from 'lit/decorators/query.js';\n\nimport { ComposedEvent } from '@patternfly/pfe-core';\n\nimport style from './BaseTab.css';\n\nexport class TabExpandEvent extends ComposedEvent {\n  constructor(\n    public active: boolean,\n    public tab: BaseTab,\n  ) {\n    super('expand');\n  }\n}\n\nexport abstract class BaseTab extends LitElement {\n  static readonly styles = [style];\n\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  @queryAssignedElements({ slot: 'icon', flatten: true })\n  private icons!: Array<HTMLElement>;\n\n  @query('button') private button!: HTMLButtonElement;\n\n  /** `active` should be observed, and true when the tab is selected */\n  abstract active: boolean;\n\n  /** `active` should be observed, and true when the tab is disabled */\n  abstract disabled: boolean;\n\n  #internals = this.attachInternals();\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this.#clickHandler);\n    this.#internals.role = 'tab';\n  }\n\n  render() {\n    return html`\n      <button part=\"button\" ?disabled=\"${this.disabled}\">\n        <slot name=\"icon\"\n              part=\"icon\"\n              ?hidden=\"${!this.icons.length}\"\n              @slotchange=\"${() => this.requestUpdate()}\"></slot>\n        <slot part=\"text\"></slot>\n      </button>\n    `;\n  }\n\n  updated(changed: PropertyValues<this>) {\n    this.#internals.ariaSelected = String(this.ariaSelected);\n    if (changed.has('active')) {\n      this.#activeChanged();\n    }\n    if (changed.has('disabled')) {\n      this.#disabledChanged();\n    }\n  }\n\n  #clickHandler() {\n    if (!this.disabled && this.#internals.ariaDisabled !== 'true' && this.ariaDisabled !== 'true') {\n      this.active = true;\n    }\n  }\n\n  #activeChanged() {\n    if (this.active && !this.disabled) {\n      this.#internals.ariaSelected = 'true';\n    } else {\n      this.#internals.ariaSelected = 'false';\n    }\n    this.dispatchEvent(new TabExpandEvent(this.active, this));\n  }\n\n  /**\n   * if a tab is disabled, then it is also aria-disabled\n   * if a tab is removed from disabled its not necessarily\n   * not still aria-disabled so we don't remove the aria-disabled\n   */\n  #disabledChanged() {\n    this.#internals.ariaDisabled = String(!!this.disabled);\n  }\n}\n"]}

package/pf-tabs/BaseTabPanel.js

@@ -2,7 +2,7 @@ var _BaseTabPanel_internals;
 import { __classPrivateFieldGet } from "tslib";
 import { LitElement, html } from 'lit';
 import { css } from "lit";
-const style = css `:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n`;
+const style = css `:host{display:block}:host([hidden]){display:none}`;
 export class BaseTabPanel extends LitElement {
     constructor() {
         super(...arguments);

package/pf-tabs/BaseTabs.d.ts

@@ -35,8 +35,6 @@ export declare abstract class BaseTabs extends LitElement {
     set activeIndex(index: number);
     connectedCallback(): void;
     disconnectedCallback(): void;
-    render(): import("lit-html").TemplateResult<1>;
     firstUpdated(): Promise<void>;
-    /** override to prevent scroll buttons from showing */
-    protected get canShowScrollButtons(): boolean;
+    render(): import("lit-html").TemplateResult<1>;
 }

package/pf-tabs/BaseTabs.js

@@ -1,15 +1,18 @@
-var _BaseTabs_instances, _a, _BaseTabs_rovingTabindexController, _BaseTabs_instances_1, _BaseTabs_showScrollButtons, _BaseTabs_overflowOnLeft, _BaseTabs_overflowOnRight, _BaseTabs_logger, _BaseTabs__allTabs, _BaseTabs__allPanels, _BaseTabs_scrollTimeout, _BaseTabs_activeIndex, _BaseTabs_activeTab_get, _BaseTabs_allTabs_get, _BaseTabs_allTabs_set, _BaseTabs_allPanels_get, _BaseTabs_allPanels_set, _BaseTabs_onSlotchange, _BaseTabs_updateAccessibility, _BaseTabs_onTabExpand, _BaseTabs_deactivateExcept, _BaseTabs_firstFocusable_get, _BaseTabs_lastFocusable_get, _BaseTabs_firstTab_get, _BaseTabs_lastTab_get, _BaseTabs_activeItemIndex_get, _BaseTabs_activate, _BaseTabs_select, _BaseTabs_onKeydown, _BaseTabs_onScroll, _BaseTabs_firstLastClasses, _BaseTabs_setOverflowState, _BaseTabs_scrollLeft, _BaseTabs_scrollRight;
+var _BaseTabs_instances, _a, _BaseTabs_instances_1, _BaseTabs_tabindex, _BaseTabs_overflow, _BaseTabs_logger, _BaseTabs__allTabs, _BaseTabs__allPanels, _BaseTabs_activeIndex, _BaseTabs_activeTab_get, _BaseTabs_allTabs_get, _BaseTabs_allTabs_set, _BaseTabs_allPanels_get, _BaseTabs_allPanels_set, _BaseTabs_onSlotchange, _BaseTabs_updateAccessibility, _BaseTabs_onTabExpand, _BaseTabs_deactivateExcept, _BaseTabs_firstFocusable_get, _BaseTabs_lastFocusable_get, _BaseTabs_firstTab_get, _BaseTabs_lastTab_get, _BaseTabs_activeItemIndex_get, _BaseTabs_activate, _BaseTabs_select, _BaseTabs_onKeydown, _BaseTabs_firstLastClasses, _BaseTabs_scrollLeft, _BaseTabs_scrollRight;
 import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
 import { LitElement, html } from 'lit';
-import { property, query, queryAssignedElements } from 'lit/decorators.js';
+import { property } from 'lit/decorators/property.js';
+import { query } from 'lit/decorators/query.js';
+import { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';
-import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
+import { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';
 import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
-import { isElementInView } from '@patternfly/pfe-core/functions/isElementInView.js';
+import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { BaseTab, TabExpandEvent } from './BaseTab.js';
 import { BaseTabPanel } from './BaseTabPanel.js';
 import { css } from "lit";
-const styles = css `:host {\n  display: block;\n}\n\n[part="tabs-container"] {\n  position: relative;\n  display: flex;\n  overflow: hidden;\n}\n\n[part="tabs-container"]::before {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-style: solid;\n}\n\n:host button {\n  opacity: 1;\n}\n\n:host button:nth-of-type(1) {\n  margin-inline-end: 0;\n  translate: 0 0;\n}\n\n:host button:nth-of-type(2) {\n  margin-inline-start: 0;\n  translate: 0 0;\n}\n\n[part="tabs"],\n[part="panels"] {\n  display: block;\n}\n\n[part="tabs"] {\n  scrollbar-width: none;\n  position: relative;\n  max-width: 100%;\n  overflow-x: auto;\n}\n\n[part="tabs-container"]::before,\n[part="tabs"]::before,\nbutton::before {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  content: "";\n  border-style: solid;\n}\n\n[part="tabs"]::before,\nbutton::before {\n  top: 0;\n}\n\nbutton,\n[part="tabs"]::before {\n  border: 0;\n}\n\nbutton {\n  flex: none;\n  line-height: 1;\n  opacity: 0;\n}\n\nbutton::before {\n  border-block-start-width: 0;\n}\n\nbutton:nth-of-type(1) {\n  translate: -100% 0;\n}\n\nbutton:nth-of-type(2) {\n  translate: 100% 0;\n}\n\nbutton:disabled {\n  pointer-events: none;\n}\n\n`;
+const styles = css `:host{display:block}[part=tabs-container]{position:relative;display:flex;overflow:hidden}[part=tabs-container]::before{position:absolute;right:0;bottom:0;left:0;border-style:solid}:host button{opacity:1}:host button:first-of-type{margin-inline-end:0;translate:0 0}:host button:nth-of-type(2){margin-inline-start:0;translate:0 0}[part=panels],[part=tabs]{display:block}[part=tabs]{scrollbar-width:none;position:relative;max-width:100%;overflow-x:auto}[part=tabs-container]::before,[part=tabs]::before,button::before{position:absolute;right:0;bottom:0;left:0;content:"";border-style:solid}[part=tabs]::before,button::before{top:0}[part=tabs]::before,button{border:0}button{flex:none;line-height:1;opacity:0}button::before{border-block-start-width:0}button:first-of-type{translate:-100% 0}button:nth-of-type(2){translate:100% 0}button:disabled{pointer-events:none}`;
 /**
  * BaseTabs
  *
@@ -21,14 +24,11 @@ export class BaseTabs extends LitElement {
     constructor() {
         super(...arguments);
         _BaseTabs_instances.add(this);
-        _BaseTabs_rovingTabindexController.set(this, new RovingTabindexController(this));
-        _BaseTabs_showScrollButtons.set(this, false);
-        _BaseTabs_overflowOnLeft.set(this, false);
-        _BaseTabs_overflowOnRight.set(this, false);
+        _BaseTabs_tabindex.set(this, new RovingTabindexController(this));
+        _BaseTabs_overflow.set(this, new OverflowController(this));
         _BaseTabs_logger.set(this, new Logger(this));
         _BaseTabs__allTabs.set(this, []);
         _BaseTabs__allPanels.set(this, []);
-        _BaseTabs_scrollTimeout.set(this, void 0);
         _BaseTabs_activeIndex.set(this, 0);
         this.id = this.id || getRandomId(this.localName);
         /**
@@ -57,12 +57,12 @@ export class BaseTabs extends LitElement {
                 case 'ArrowUp':
                 case 'ArrowLeft':
                     event.preventDefault();
-                    __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_select).call(this, __classPrivateFieldGet(this, _BaseTabs_rovingTabindexController, "f").activeItem);
+                    __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_select).call(this, __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").activeItem);
                     break;
                 case 'ArrowDown':
                 case 'ArrowRight':
                     event.preventDefault();
-                    __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_select).call(this, __classPrivateFieldGet(this, _BaseTabs_rovingTabindexController, "f").activeItem);
+                    __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_select).call(this, __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").activeItem);
                     break;
                 case 'Home':
                     event.preventDefault();
@@ -76,11 +76,6 @@ export class BaseTabs extends LitElement {
                     return;
             }
         });
-        _BaseTabs_onScroll.set(this, () => {
-            clearTimeout(__classPrivateFieldGet(this, _BaseTabs_scrollTimeout, "f"));
-            const { scrollTimeoutDelay } = this.constructor;
-            __classPrivateFieldSet(this, _BaseTabs_scrollTimeout, setTimeout(() => __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_setOverflowState).call(this), scrollTimeoutDelay), "f");
-        });
     }
     static isTab(element) {
         return element instanceof BaseTab;
@@ -97,7 +92,7 @@ export class BaseTabs extends LitElement {
         if (tab) {
             if (tab.disabled) {
                 __classPrivateFieldGet(this, _BaseTabs_logger, "f").warn(`Disabled tabs can not be active, setting first focusable tab to active`);
-                __classPrivateFieldGet(this, _BaseTabs_rovingTabindexController, "f").updateActiveItem(__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_firstFocusable_get));
+                __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").updateActiveItem(__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_firstFocusable_get));
                 index = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_activeItemIndex_get);
             }
             else if (!tab.active) {
@@ -108,8 +103,8 @@ export class BaseTabs extends LitElement {
         }
         if (index === -1) {
             __classPrivateFieldGet(this, _BaseTabs_logger, "f").warn(`No active tab found, setting first focusable tab to active`);
-            const first = __classPrivateFieldGet(this, _BaseTabs_rovingTabindexController, "f").firstItem;
-            __classPrivateFieldGet(this, _BaseTabs_rovingTabindexController, "f").updateActiveItem(first);
+            const first = __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").firstItem;
+            __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").updateActiveItem(first);
             index = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_activeItemIndex_get);
         }
         __classPrivateFieldSet(this, _BaseTabs_activeIndex, index, "f");
@@ -128,24 +123,27 @@ export class BaseTabs extends LitElement {
         super.disconnectedCallback();
         __classPrivateFieldGet(BaseTabs, _a, "f", _BaseTabs_instances_1).delete(this);
     }
+    async firstUpdated() {
+        this.tabList.addEventListener('scroll', __classPrivateFieldGet(this, _BaseTabs_overflow, "f").onScroll.bind(this));
+    }
     render() {
         const { scrollIconSet, scrollIconLeft, scrollIconRight } = this.constructor;
         return html `
-      <div part="container">
-        <div part="tabs-container">${!__classPrivateFieldGet(this, _BaseTabs_showScrollButtons, "f") ? '' : html `
+      <div part="container" class="${classMap({ overflow: __classPrivateFieldGet(this, _BaseTabs_overflow, "f").showScrollButtons })}">
+        <div part="tabs-container">${!__classPrivateFieldGet(this, _BaseTabs_overflow, "f").showScrollButtons ? '' : html `
           <button id="previousTab" tabindex="-1"
               aria-label="${this.getAttribute('label-scroll-left') ?? 'Scroll left'}"
-              ?disabled="${!__classPrivateFieldGet(this, _BaseTabs_overflowOnLeft, "f")}"
+              ?disabled="${!__classPrivateFieldGet(this, _BaseTabs_overflow, "f").overflowLeft}"
               @click="${__classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_scrollLeft)}">
             <pf-icon icon="${scrollIconLeft}" set="${scrollIconSet}" loading="eager"></pf-icon>
           </button>`}
           <slot name="tab"
                 part="tabs"
                 role="tablist"
-                @slotchange="${__classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_onSlotchange)}"></slot> ${!__classPrivateFieldGet(this, _BaseTabs_showScrollButtons, "f") ? '' : html `
+                @slotchange="${__classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_onSlotchange)}"></slot> ${!__classPrivateFieldGet(this, _BaseTabs_overflow, "f").showScrollButtons ? '' : html `
           <button id="nextTab" tabindex="-1"
               aria-label="${this.getAttribute('label-scroll-right') ?? 'Scroll right'}"
-              ?disabled="${!__classPrivateFieldGet(this, _BaseTabs_overflowOnRight, "f")}"
+              ?disabled="${!__classPrivateFieldGet(this, _BaseTabs_overflow, "f").overflowRight}"
               @click="${__classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_scrollRight)}">
             <pf-icon icon="${scrollIconRight}" set="${scrollIconSet}" loading="eager"></pf-icon>
           </button>`}
@@ -154,16 +152,8 @@ export class BaseTabs extends LitElement {
       </div>
     `;
     }
-    async firstUpdated() {
-        __classPrivateFieldGet(this, _BaseTabs_onScroll, "f").call(this);
-        this.tabList.addEventListener('scroll', __classPrivateFieldGet(this, _BaseTabs_onScroll, "f"));
-    }
-    /** override to prevent scroll buttons from showing */
-    get canShowScrollButtons() {
-        return true;
-    }
 }
-_a = BaseTabs, _BaseTabs_rovingTabindexController = new WeakMap(), _BaseTabs_showScrollButtons = new WeakMap(), _BaseTabs_overflowOnLeft = new WeakMap(), _BaseTabs_overflowOnRight = new WeakMap(), _BaseTabs_logger = new WeakMap(), _BaseTabs__allTabs = new WeakMap(), _BaseTabs__allPanels = new WeakMap(), _BaseTabs_scrollTimeout = new WeakMap(), _BaseTabs_activeIndex = new WeakMap(), _BaseTabs_onTabExpand = new WeakMap(), _BaseTabs_onKeydown = new WeakMap(), _BaseTabs_onScroll = new WeakMap(), _BaseTabs_instances = new WeakSet(), _BaseTabs_activeTab_get = function _BaseTabs_activeTab_get() {
+_a = BaseTabs, _BaseTabs_tabindex = new WeakMap(), _BaseTabs_overflow = new WeakMap(), _BaseTabs_logger = new WeakMap(), _BaseTabs__allTabs = new WeakMap(), _BaseTabs__allPanels = new WeakMap(), _BaseTabs_activeIndex = new WeakMap(), _BaseTabs_onTabExpand = new WeakMap(), _BaseTabs_onKeydown = new WeakMap(), _BaseTabs_instances = new WeakSet(), _BaseTabs_activeTab_get = function _BaseTabs_activeTab_get() {
     const [tab] = __classPrivateFieldGet(this, _BaseTabs__allTabs, "f").filter(tab => tab.active);
     return tab;
 }, _BaseTabs_allTabs_get = function _BaseTabs_allTabs_get() {
@@ -185,9 +175,10 @@ _a = BaseTabs, _BaseTabs_rovingTabindexController = new WeakMap(), _BaseTabs_sho
         (__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).length !== 0 || __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get).length !== 0)) {
         __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_updateAccessibility).call(this);
         __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_firstLastClasses).call(this);
-        __classPrivateFieldGet(this, _BaseTabs_rovingTabindexController, "f").initItems(__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get));
+        __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").initItems(__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get));
         this.activeIndex = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).findIndex(tab => tab.active);
-        __classPrivateFieldGet(this, _BaseTabs_rovingTabindexController, "f").updateActiveItem(__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_activeTab_get));
+        __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").updateActiveItem(__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_activeTab_get));
+        __classPrivateFieldGet(this, _BaseTabs_overflow, "f").init(this.tabList, __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get));
     }
 }, _BaseTabs_updateAccessibility = function _BaseTabs_updateAccessibility() {
     __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).forEach((tab, index) => {
@@ -201,16 +192,16 @@ _a = BaseTabs, _BaseTabs_rovingTabindexController = new WeakMap(), _BaseTabs_sho
     __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).forEach((tab, i) => tab.active = i === index);
     __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get).forEach((panel, i) => panel.hidden = i !== index);
 }, _BaseTabs_firstFocusable_get = function _BaseTabs_firstFocusable_get() {
-    return __classPrivateFieldGet(this, _BaseTabs_rovingTabindexController, "f").firstItem;
+    return __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").firstItem;
 }, _BaseTabs_lastFocusable_get = function _BaseTabs_lastFocusable_get() {
-    return __classPrivateFieldGet(this, _BaseTabs_rovingTabindexController, "f").lastItem;
+    return __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").lastItem;
 }, _BaseTabs_firstTab_get = function _BaseTabs_firstTab_get() {
     const [tab] = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get);
     return tab;
 }, _BaseTabs_lastTab_get = function _BaseTabs_lastTab_get() {
     return __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).at(-1);
 }, _BaseTabs_activeItemIndex_get = function _BaseTabs_activeItemIndex_get() {
-    const { activeItem } = __classPrivateFieldGet(this, _BaseTabs_rovingTabindexController, "f");
+    const { activeItem } = __classPrivateFieldGet(this, _BaseTabs_tabindex, "f");
     return __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).findIndex(t => t === activeItem);
 }, _BaseTabs_activate = function _BaseTabs_activate(selectedTab) {
     if (selectedTab.ariaDisabled !== 'true') {
@@ -223,42 +214,10 @@ _a = BaseTabs, _BaseTabs_rovingTabindexController = new WeakMap(), _BaseTabs_sho
 }, _BaseTabs_firstLastClasses = function _BaseTabs_firstLastClasses() {
     __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_firstTab_get).classList.add('first');
     __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_lastTab_get).classList.add('last');
-}, _BaseTabs_setOverflowState = function _BaseTabs_setOverflowState() {
-    const { canShowScrollButtons } = this;
-    __classPrivateFieldSet(this, _BaseTabs_overflowOnLeft, canShowScrollButtons && !isElementInView(this.tabList, __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_firstTab_get)), "f");
-    __classPrivateFieldSet(this, _BaseTabs_overflowOnRight, canShowScrollButtons && !isElementInView(this.tabList, __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_lastTab_get)), "f");
-    __classPrivateFieldSet(this, _BaseTabs_showScrollButtons, canShowScrollButtons && (__classPrivateFieldGet(this, _BaseTabs_overflowOnLeft, "f") || __classPrivateFieldGet(this, _BaseTabs_overflowOnRight, "f")), "f");
-    this.requestUpdate();
 }, _BaseTabs_scrollLeft = function _BaseTabs_scrollLeft() {
-    const container = this.tabList;
-    const childrenArr = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get);
-    let firstElementInView;
-    let lastElementOutOfView;
-    for (let i = 0; i < childrenArr.length && !firstElementInView; i++) {
-        if (isElementInView(container, childrenArr[i], false)) {
-            firstElementInView = childrenArr[i];
-            lastElementOutOfView = childrenArr[i - 1];
-        }
-    }
-    if (lastElementOutOfView) {
-        container.scrollLeft -= lastElementOutOfView.scrollWidth;
-    }
-    __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_setOverflowState).call(this);
+    __classPrivateFieldGet(this, _BaseTabs_overflow, "f").scrollLeft();
 }, _BaseTabs_scrollRight = function _BaseTabs_scrollRight() {
-    const container = this.tabList;
-    const childrenArr = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get);
-    let lastElementInView;
-    let firstElementOutOfView;
-    for (let i = childrenArr.length - 1; i >= 0 && !lastElementInView; i--) {
-        if (isElementInView(container, childrenArr[i], false)) {
-            lastElementInView = childrenArr[i];
-            firstElementOutOfView = childrenArr[i + 1];
-        }
-    }
-    if (firstElementOutOfView) {
-        container.scrollLeft += firstElementOutOfView.scrollWidth;
-    }
-    __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_setOverflowState).call(this);
+    __classPrivateFieldGet(this, _BaseTabs_overflow, "f").scrollRight();
 };
 BaseTabs.styles = [styles];
 /** Time in milliseconds to debounce between scroll events and updating scroll button state */
@@ -274,7 +233,7 @@ _BaseTabs_instances_1 = { value: new Set() };
     // on resize check for overflows to add or remove scroll buttons
     window.addEventListener('resize', () => {
         for (const instance of __classPrivateFieldGet(_a, _a, "f", _BaseTabs_instances_1)) {
-            __classPrivateFieldGet(instance, _BaseTabs_onScroll, "f").call(instance);
+            __classPrivateFieldGet(instance, _BaseTabs_overflow, "f").onScroll();
         }
     }, { capture: false });
 })();

package/pf-tabs/BaseTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTabs.js","sourceRoot":"","sources":["BaseTabs.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\nimport { isElementInView } from '@patternfly/pfe-core/functions/isElementInView.js';\n\nimport { BaseTab, TabExpandEvent } from './BaseTab.js';\nimport { BaseTabPanel } from './BaseTabPanel.js';\n\nimport styles from './BaseTabs.css';\n\n/**\n * BaseTabs\n *\n * @attr [label-scroll-left=\"Scroll left\"] - accessible label for the tab panel's scroll left button.\n * @attr [label-scroll-right=\"Scroll right\"] - accessible label for the tab panel's scroll right button.\n *\n */\nexport abstract class BaseTabs extends LitElement {\n  static readonly styles = [styles];\n\n  static isTab(element: BaseTab): element is BaseTab {\n    return element instanceof BaseTab;\n  }\n\n  static isPanel(element: BaseTabPanel): element is BaseTabPanel {\n    return element instanceof BaseTabPanel;\n  }\n\n  /** Time in milliseconds to debounce between scroll events and updating scroll button state */\n  protected static readonly scrollTimeoutDelay: number = 0;\n  /** Icon name to use for the scroll left button */\n  protected static readonly scrollIconLeft: string = 'angle-left';\n  /** Icon name to use for the scroll right button */\n  protected static readonly scrollIconRight: string = 'angle-right';\n  /** Icon set to use for the scroll buttons */\n  protected static readonly scrollIconSet: string = 'fas';\n\n  #rovingTabindexController = new RovingTabindexController(this);\n\n  static #instances = new Set<BaseTabs>();\n\n  static {\n    // on resize check for overflows to add or remove scroll buttons\n    window.addEventListener('resize', () => {\n      for (const instance of this.#instances) {\n        instance.#onScroll();\n      }\n    }, { capture: false });\n  }\n\n  @queryAssignedElements({ slot: 'tab' }) private tabs!: BaseTab[];\n\n  @queryAssignedElements() private panels!: BaseTabPanel[];\n\n  @query('[part=\"tabs\"]') private tabList!: HTMLElement;\n\n  #showScrollButtons = false;\n\n  #overflowOnLeft = false;\n\n  #overflowOnRight = false;\n\n  #logger = new Logger(this);\n\n  #_allTabs: BaseTab[] = [];\n\n  #_allPanels: BaseTabPanel[] = [];\n\n  #scrollTimeout?: ReturnType<typeof setTimeout>;\n\n  #activeIndex = 0;\n\n  id: string = this.id || getRandomId(this.localName);\n\n  /**\n   * Tab activation\n   * Tabs can be either [automatic](https://w3c.github.io/aria-practices/examples/tabs/tabs-automatic.html) activated\n   * or [manual](https://w3c.github.io/aria-practices/examples/tabs/tabs-manual.html)\n   */\n  @property({ reflect: true, type: Boolean }) manual = false;\n\n  @property({ attribute: false })\n  get activeIndex() {\n    return this.#activeIndex;\n  }\n\n  set activeIndex(index: number) {\n    const oldIndex = this.activeIndex;\n    const tab = this.#allTabs[index];\n    if (tab) {\n      if (tab.disabled) {\n        this.#logger.warn(`Disabled tabs can not be active, setting first focusable tab to active`);\n        this.#rovingTabindexController.updateActiveItem(this.#firstFocusable);\n        index = this.#activeItemIndex;\n      } else if (!tab.active) {\n        // if the activeIndex was set through the CLI e.g.`$0.activeIndex = 2`\n        tab.active = true;\n        return;\n      }\n    }\n\n    if (index === -1) {\n      this.#logger.warn(`No active tab found, setting first focusable tab to active`);\n      const first = this.#rovingTabindexController.firstItem as BaseTab;\n      this.#rovingTabindexController.updateActiveItem(first);\n      index = this.#activeItemIndex;\n    }\n    this.#activeIndex = index;\n    this.requestUpdate('activeIndex', oldIndex);\n\n    this.#allPanels[this.#activeIndex].hidden = false;\n    // close all tabs that are not the activeIndex\n    this.#deactivateExcept(this.#activeIndex);\n  }\n\n  get #activeTab() {\n    const [tab] = this.#_allTabs.filter(tab => tab.active);\n    return tab;\n  }\n\n  get #allTabs() {\n    return this.#_allTabs;\n  }\n\n  set #allTabs(tabs: BaseTab[]) {\n    this.#_allTabs = tabs.filter(tab => (this.constructor as typeof BaseTabs).isTab(tab));\n  }\n\n  get #allPanels() {\n    return this.#_allPanels;\n  }\n\n  set #allPanels(panels: BaseTabPanel[]) {\n    this.#_allPanels = panels.filter(panel => (this.constructor as typeof BaseTabs).isPanel(panel));\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('expand', this.#onTabExpand);\n    this.addEventListener('keydown', this.#onKeydown);\n    BaseTabs.#instances.add(this);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    BaseTabs.#instances.delete(this);\n  }\n\n  override render() {\n    const { scrollIconSet, scrollIconLeft, scrollIconRight } = this.constructor as typeof BaseTabs;\n\n    return html`\n      <div part=\"container\">\n        <div part=\"tabs-container\">${!this.#showScrollButtons ? '' : html`\n          <button id=\"previousTab\" tabindex=\"-1\"\n              aria-label=\"${this.getAttribute('label-scroll-left') ?? 'Scroll left'}\"\n              ?disabled=\"${!this.#overflowOnLeft}\"\n              @click=\"${this.#scrollLeft}\">\n            <pf-icon icon=\"${scrollIconLeft}\" set=\"${scrollIconSet}\" loading=\"eager\"></pf-icon>\n          </button>`}\n          <slot name=\"tab\"\n                part=\"tabs\"\n                role=\"tablist\"\n                @slotchange=\"${this.#onSlotchange}\"></slot> ${!this.#showScrollButtons ? '' : html`\n          <button id=\"nextTab\" tabindex=\"-1\"\n              aria-label=\"${this.getAttribute('label-scroll-right') ?? 'Scroll right'}\"\n              ?disabled=\"${!this.#overflowOnRight}\"\n              @click=\"${this.#scrollRight}\">\n            <pf-icon icon=\"${scrollIconRight}\" set=\"${scrollIconSet}\" loading=\"eager\"></pf-icon>\n          </button>`}\n        </div>\n        <slot part=\"panels\" @slotchange=\"${this.#onSlotchange}\"></slot>\n      </div>\n    `;\n  }\n\n  async firstUpdated() {\n    this.#onScroll();\n    this.tabList.addEventListener('scroll', this.#onScroll);\n  }\n\n  #onSlotchange(event: { target: { name: string; }; }) {\n    if (event.target.name === 'tab') {\n      this.#allTabs = this.tabs;\n    } else {\n      this.#allPanels = this.panels;\n    }\n\n    if ((this.#allTabs.length === this.#allPanels.length) &&\n      (this.#allTabs.length !== 0 || this.#allPanels.length !== 0)) {\n      this.#updateAccessibility();\n      this.#firstLastClasses();\n      this.#rovingTabindexController.initItems(this.#allTabs);\n      this.activeIndex = this.#allTabs.findIndex(tab => tab.active);\n      this.#rovingTabindexController.updateActiveItem(this.#activeTab);\n    }\n  }\n\n  #updateAccessibility(): void {\n    this.#allTabs.forEach((tab, index) => {\n      const panel = this.#allPanels[index];\n      if (!panel.hasAttribute('aria-labelledby')) {\n        panel.setAttribute('aria-labelledby', tab.id);\n      }\n      tab.setAttribute('aria-controls', panel.id);\n    });\n  }\n\n  #onTabExpand = (event: Event): void => {\n    if (!(event instanceof TabExpandEvent) ||\n        this.#allTabs.length === 0 || this.#allPanels.length === 0) {\n      return;\n    }\n\n    const target = event as TabExpandEvent;\n    if (target.active) {\n      this.activeIndex = this.#allTabs.findIndex(tab => tab === target.tab);\n    }\n  };\n\n  #deactivateExcept(index: number) {\n    this.#allTabs.forEach((tab, i) => tab.active = i === index);\n    this.#allPanels.forEach((panel, i) => panel.hidden = i !== index);\n  }\n\n  get #firstFocusable(): BaseTab {\n    return this.#rovingTabindexController.firstItem as BaseTab;\n  }\n\n  get #lastFocusable(): BaseTab {\n    return this.#rovingTabindexController.lastItem as BaseTab;\n  }\n\n  get #firstTab(): BaseTab {\n    const [tab] = this.#allTabs;\n    return tab;\n  }\n\n  get #lastTab(): BaseTab {\n    return this.#allTabs.at(-1) as BaseTab;\n  }\n\n  get #activeItemIndex() {\n    const { activeItem } = this.#rovingTabindexController;\n    return this.#allTabs.findIndex(t => t === activeItem);\n  }\n\n  #activate(selectedTab: BaseTab): void {\n    if (selectedTab.ariaDisabled !== 'true') {\n      selectedTab.active = true;\n    }\n  }\n\n  async #select(selectedTab: BaseTab): Promise<void> {\n    if (!this.manual) {\n      this.#activate(selectedTab);\n    }\n  }\n\n  // RTI: will handle key events\n  #onKeydown = (event: KeyboardEvent): void => {\n    const foundTab = this.#allTabs.find(tab => tab === event.target);\n    if (!foundTab) {\n      return;\n    }\n    switch (event.key) {\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        event.preventDefault();\n        this.#select(this.#rovingTabindexController.activeItem as BaseTab);\n        break;\n\n      case 'ArrowDown':\n      case 'ArrowRight':\n        event.preventDefault();\n        this.#select(this.#rovingTabindexController.activeItem as BaseTab);\n        break;\n\n      case 'Home':\n        event.preventDefault();\n        this.#select(this.#firstFocusable);\n        break;\n\n      case 'End':\n        event.preventDefault();\n        this.#select(this.#lastFocusable);\n        break;\n\n      default:\n        return;\n    }\n  };\n\n  #onScroll = () => {\n    clearTimeout(this.#scrollTimeout);\n    const { scrollTimeoutDelay } = (this.constructor as typeof BaseTabs);\n    this.#scrollTimeout = setTimeout(() => this.#setOverflowState(), scrollTimeoutDelay);\n  };\n\n  #firstLastClasses() {\n    this.#firstTab.classList.add('first');\n    this.#lastTab.classList.add('last');\n  }\n\n  /** override to prevent scroll buttons from showing */\n  protected get canShowScrollButtons() {\n    return true;\n  }\n\n  #setOverflowState(): void {\n    const { canShowScrollButtons } = this;\n    this.#overflowOnLeft = canShowScrollButtons && !isElementInView(this.tabList, this.#firstTab);\n    this.#overflowOnRight = canShowScrollButtons && !isElementInView(this.tabList, this.#lastTab);\n    this.#showScrollButtons = canShowScrollButtons && (this.#overflowOnLeft || this.#overflowOnRight);\n    this.requestUpdate();\n  }\n\n  #scrollLeft(): void {\n    const container = this.tabList;\n    const childrenArr = this.#allTabs;\n    let firstElementInView: BaseTab | undefined;\n    let lastElementOutOfView: BaseTab | undefined;\n    for (let i = 0; i < childrenArr.length && !firstElementInView; i++) {\n      if (isElementInView(container, childrenArr[i] as HTMLElement, false)) {\n        firstElementInView = childrenArr[i];\n        lastElementOutOfView = childrenArr[i - 1];\n      }\n    }\n    if (lastElementOutOfView) {\n      container.scrollLeft -= lastElementOutOfView.scrollWidth;\n    }\n    this.#setOverflowState();\n  }\n\n  #scrollRight(): void {\n    const container = this.tabList;\n    const childrenArr = this.#allTabs;\n    let lastElementInView: BaseTab | undefined;\n    let firstElementOutOfView: BaseTab | undefined;\n    for (let i = childrenArr.length - 1; i >= 0 && !lastElementInView; i--) {\n      if (isElementInView(container, childrenArr[i] as HTMLElement, false)) {\n        lastElementInView = childrenArr[i];\n        firstElementOutOfView = childrenArr[i + 1];\n      }\n    }\n    if (firstElementOutOfView) {\n      container.scrollLeft += firstElementOutOfView.scrollWidth;\n    }\n    this.#setOverflowState();\n  }\n}\n"]}
+{"version":3,"file":"BaseTabs.js","sourceRoot":"","sources":["BaseTabs.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\n\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\n\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\nimport { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { BaseTab, TabExpandEvent } from './BaseTab.js';\nimport { BaseTabPanel } from './BaseTabPanel.js';\n\nimport styles from './BaseTabs.css';\n\n/**\n * BaseTabs\n *\n * @attr [label-scroll-left=\"Scroll left\"] - accessible label for the tab panel's scroll left button.\n * @attr [label-scroll-right=\"Scroll right\"] - accessible label for the tab panel's scroll right button.\n *\n */\nexport abstract class BaseTabs extends LitElement {\n  static readonly styles = [styles];\n\n  static isTab(element: BaseTab): element is BaseTab {\n    return element instanceof BaseTab;\n  }\n\n  static isPanel(element: BaseTabPanel): element is BaseTabPanel {\n    return element instanceof BaseTabPanel;\n  }\n\n  /** Time in milliseconds to debounce between scroll events and updating scroll button state */\n  protected static readonly scrollTimeoutDelay: number = 0;\n  /** Icon name to use for the scroll left button */\n  protected static readonly scrollIconLeft: string = 'angle-left';\n  /** Icon name to use for the scroll right button */\n  protected static readonly scrollIconRight: string = 'angle-right';\n  /** Icon set to use for the scroll buttons */\n  protected static readonly scrollIconSet: string = 'fas';\n\n  static #instances = new Set<BaseTabs>();\n\n  static {\n    // on resize check for overflows to add or remove scroll buttons\n    window.addEventListener('resize', () => {\n      for (const instance of this.#instances) {\n        instance.#overflow.onScroll();\n      }\n    }, { capture: false });\n  }\n\n  @queryAssignedElements({ slot: 'tab' }) private tabs!: BaseTab[];\n\n  @queryAssignedElements() private panels!: BaseTabPanel[];\n\n  @query('[part=\"tabs\"]') private tabList!: HTMLElement;\n\n  #tabindex = new RovingTabindexController(this);\n\n  #overflow = new OverflowController(this);\n\n  #logger = new Logger(this);\n\n  #_allTabs: BaseTab[] = [];\n\n  #_allPanels: BaseTabPanel[] = [];\n\n  #activeIndex = 0;\n\n  id: string = this.id || getRandomId(this.localName);\n\n  /**\n   * Tab activation\n   * Tabs can be either [automatic](https://w3c.github.io/aria-practices/examples/tabs/tabs-automatic.html) activated\n   * or [manual](https://w3c.github.io/aria-practices/examples/tabs/tabs-manual.html)\n   */\n  @property({ reflect: true, type: Boolean }) manual = false;\n\n  @property({ attribute: false })\n  get activeIndex() {\n    return this.#activeIndex;\n  }\n\n  set activeIndex(index: number) {\n    const oldIndex = this.activeIndex;\n    const tab = this.#allTabs[index];\n    if (tab) {\n      if (tab.disabled) {\n        this.#logger.warn(`Disabled tabs can not be active, setting first focusable tab to active`);\n        this.#tabindex.updateActiveItem(this.#firstFocusable);\n        index = this.#activeItemIndex;\n      } else if (!tab.active) {\n        // if the activeIndex was set through the CLI e.g.`$0.activeIndex = 2`\n        tab.active = true;\n        return;\n      }\n    }\n\n    if (index === -1) {\n      this.#logger.warn(`No active tab found, setting first focusable tab to active`);\n      const first = this.#tabindex.firstItem as BaseTab;\n      this.#tabindex.updateActiveItem(first);\n      index = this.#activeItemIndex;\n    }\n    this.#activeIndex = index;\n    this.requestUpdate('activeIndex', oldIndex);\n\n    this.#allPanels[this.#activeIndex].hidden = false;\n    // close all tabs that are not the activeIndex\n    this.#deactivateExcept(this.#activeIndex);\n  }\n\n  get #activeTab() {\n    const [tab] = this.#_allTabs.filter(tab => tab.active);\n    return tab;\n  }\n\n  get #allTabs() {\n    return this.#_allTabs;\n  }\n\n  set #allTabs(tabs: BaseTab[]) {\n    this.#_allTabs = tabs.filter(tab => (this.constructor as typeof BaseTabs).isTab(tab));\n  }\n\n  get #allPanels() {\n    return this.#_allPanels;\n  }\n\n  set #allPanels(panels: BaseTabPanel[]) {\n    this.#_allPanels = panels.filter(panel => (this.constructor as typeof BaseTabs).isPanel(panel));\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('expand', this.#onTabExpand);\n    this.addEventListener('keydown', this.#onKeydown);\n    BaseTabs.#instances.add(this);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    BaseTabs.#instances.delete(this);\n  }\n\n  async firstUpdated() {\n    this.tabList.addEventListener('scroll', this.#overflow.onScroll.bind(this));\n  }\n\n  override render() {\n    const { scrollIconSet, scrollIconLeft, scrollIconRight } = this.constructor as typeof BaseTabs;\n    return html`\n      <div part=\"container\" class=\"${classMap({ overflow: this.#overflow.showScrollButtons })}\">\n        <div part=\"tabs-container\">${!this.#overflow.showScrollButtons ? '' : html`\n          <button id=\"previousTab\" tabindex=\"-1\"\n              aria-label=\"${this.getAttribute('label-scroll-left') ?? 'Scroll left'}\"\n              ?disabled=\"${!this.#overflow.overflowLeft}\"\n              @click=\"${this.#scrollLeft}\">\n            <pf-icon icon=\"${scrollIconLeft}\" set=\"${scrollIconSet}\" loading=\"eager\"></pf-icon>\n          </button>`}\n          <slot name=\"tab\"\n                part=\"tabs\"\n                role=\"tablist\"\n                @slotchange=\"${this.#onSlotchange}\"></slot> ${!this.#overflow.showScrollButtons ? '' : html`\n          <button id=\"nextTab\" tabindex=\"-1\"\n              aria-label=\"${this.getAttribute('label-scroll-right') ?? 'Scroll right'}\"\n              ?disabled=\"${!this.#overflow.overflowRight}\"\n              @click=\"${this.#scrollRight}\">\n            <pf-icon icon=\"${scrollIconRight}\" set=\"${scrollIconSet}\" loading=\"eager\"></pf-icon>\n          </button>`}\n        </div>\n        <slot part=\"panels\" @slotchange=\"${this.#onSlotchange}\"></slot>\n      </div>\n    `;\n  }\n\n  #onSlotchange(event: { target: { name: string; }; }) {\n    if (event.target.name === 'tab') {\n      this.#allTabs = this.tabs;\n    } else {\n      this.#allPanels = this.panels;\n    }\n\n    if ((this.#allTabs.length === this.#allPanels.length) &&\n      (this.#allTabs.length !== 0 || this.#allPanels.length !== 0)) {\n      this.#updateAccessibility();\n      this.#firstLastClasses();\n      this.#tabindex.initItems(this.#allTabs);\n      this.activeIndex = this.#allTabs.findIndex(tab => tab.active);\n      this.#tabindex.updateActiveItem(this.#activeTab);\n      this.#overflow.init(this.tabList, this.#allTabs);\n    }\n  }\n\n  #updateAccessibility(): void {\n    this.#allTabs.forEach((tab, index) => {\n      const panel = this.#allPanels[index];\n      if (!panel.hasAttribute('aria-labelledby')) {\n        panel.setAttribute('aria-labelledby', tab.id);\n      }\n      tab.setAttribute('aria-controls', panel.id);\n    });\n  }\n\n  #onTabExpand = (event: Event): void => {\n    if (!(event instanceof TabExpandEvent) ||\n        this.#allTabs.length === 0 || this.#allPanels.length === 0) {\n      return;\n    }\n\n    const target = event as TabExpandEvent;\n    if (target.active) {\n      this.activeIndex = this.#allTabs.findIndex(tab => tab === target.tab);\n    }\n  };\n\n  #deactivateExcept(index: number) {\n    this.#allTabs.forEach((tab, i) => tab.active = i === index);\n    this.#allPanels.forEach((panel, i) => panel.hidden = i !== index);\n  }\n\n  get #firstFocusable(): BaseTab {\n    return this.#tabindex.firstItem as BaseTab;\n  }\n\n  get #lastFocusable(): BaseTab {\n    return this.#tabindex.lastItem as BaseTab;\n  }\n\n  get #firstTab(): BaseTab {\n    const [tab] = this.#allTabs;\n    return tab;\n  }\n\n  get #lastTab(): BaseTab {\n    return this.#allTabs.at(-1) as BaseTab;\n  }\n\n  get #activeItemIndex() {\n    const { activeItem } = this.#tabindex;\n    return this.#allTabs.findIndex(t => t === activeItem);\n  }\n\n  #activate(selectedTab: BaseTab): void {\n    if (selectedTab.ariaDisabled !== 'true') {\n      selectedTab.active = true;\n    }\n  }\n\n  async #select(selectedTab: BaseTab): Promise<void> {\n    if (!this.manual) {\n      this.#activate(selectedTab);\n    }\n  }\n\n  // RTI: will handle key events\n  #onKeydown = (event: KeyboardEvent): void => {\n    const foundTab = this.#allTabs.find(tab => tab === event.target);\n    if (!foundTab) {\n      return;\n    }\n    switch (event.key) {\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        event.preventDefault();\n        this.#select(this.#tabindex.activeItem as BaseTab);\n        break;\n\n      case 'ArrowDown':\n      case 'ArrowRight':\n        event.preventDefault();\n        this.#select(this.#tabindex.activeItem as BaseTab);\n        break;\n\n      case 'Home':\n        event.preventDefault();\n        this.#select(this.#firstFocusable);\n        break;\n\n      case 'End':\n        event.preventDefault();\n        this.#select(this.#lastFocusable);\n        break;\n\n      default:\n        return;\n    }\n  };\n\n  #firstLastClasses() {\n    this.#firstTab.classList.add('first');\n    this.#lastTab.classList.add('last');\n  }\n\n  #scrollLeft() {\n    this.#overflow.scrollLeft();\n  }\n\n  #scrollRight() {\n    this.#overflow.scrollRight();\n  }\n}\n"]}

package/pf-tabs/README.md

@@ -0,0 +1,40 @@
+# PatternFly Elements Tabs
+     
+Read more about Tabs in the [PatternFly Elements Tabs documentation](https://patternflyelements.org/components/tabs)
+
+##  Installation
+
+Load `<pf-tabs>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-tabs/pf-tabs.js"></script>
+```
+
+Or, if you are using [NPM](https://npm.im), install it
+
+```bash
+npm install @patternfly/elements
+```
+
+Then once installed, import it to your application:
+
+```js
+import '@patternfly/elements/pf-tabs/pf-tabs.js';
+```
+
+### Note
+For `<pf-tabs>` to work in Safari, you'll need to load the [element-internals-polyfill](https://www.npmjs.com/package/element-internals-polyfill). Safari is in the process of [adding element internals to WebKit](https://bugs.webkit.org/show_bug.cgi?id=197960) so this polyfill should be temporary.
+
+## Usage
+
+```html
+<pf-tabs>
+  <pf-tab id="users" slot="tab">Users</pf-tab>
+  <pf-tab-panel>Users</pf-tab-panel>
+  <pf-tab slot="tab">Containers</pf-tab>
+  <pf-tab-panel>Containers <a href="#">Focusable element</a></pf-tab-panel>
+  <pf-tab slot="tab">Database</pf-tab>
+  <pf-tab-panel>Database</pf-tab-panel>
+</pf-tabs>
+```
+

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

@@ -1,8 +1,8 @@
 import { __decorate } from "tslib";
-import { customElement } from 'lit/decorators.js';
+import { customElement } from 'lit/decorators/custom-element.js';
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { css } from "lit";
-const styles = css `:host([box="light"]) {\n  background-color: var(--pf-c-tab-content--m-light-300, var(--pf-global--BackgroundColor--light-300, #f0f0f0));\n}\n`;
+const styles = css `:host([box=light]){background-color:var(--pf-c-tab-content--m-light-300,var(--pf-global--BackgroundColor--light-300,#f0f0f0))}`;
 import { BaseTabPanel } from './BaseTabPanel.js';
 /**
  * @slot - Tab panel content

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,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;;;AAIvE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD;;;;;;GAMG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,YAAY;IAG1C,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,KAAP,IAAI,CAAC,EAAE,GAAK,WAAW,CAAC,cAAc,CAAC,EAAC;IAC1C,CAAC;;AALe,iBAAM,GAAG,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAD/C,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAOtB;SAPY,UAAU","sourcesContent":["import { customElement } from 'lit/decorators.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport styles from './pf-tab-panel.css';\n\nimport { BaseTabPanel } from './BaseTabPanel.js';\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 BaseTabPanel {\n  static readonly styles = [...BaseTabPanel.styles, styles];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id ||= getRandomId('pf-tab-panel');\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,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;;;AAIvE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD;;;;;;GAMG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,YAAY;IAG1C,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,KAAP,IAAI,CAAC,EAAE,GAAK,WAAW,CAAC,cAAc,CAAC,EAAC;IAC1C,CAAC;;AALe,iBAAM,GAAG,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAD/C,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAOtB;SAPY,UAAU","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport styles from './pf-tab-panel.css';\n\nimport { BaseTabPanel } from './BaseTabPanel.js';\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 BaseTabPanel {\n  static readonly styles = [...BaseTabPanel.styles, styles];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id ||= getRandomId('pf-tab-panel');\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tab-panel': PfTabPanel;\n  }\n}\n"]}