@patternfly/elements 1.0.0

package/pf-switch/pf-switch.js

@@ -0,0 +1,46 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.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`;
+/**
+ * Switch
+ * @cssprop --pf-c-switch--FontSize {@default `1rem`}
+ * @cssprop {<length>} --pf-c-switch--ColumnGap {@default `1rem`}
+ * @cssprop --pf-c-switch__toggle-icon--FontSize {@default `calc(1rem * .625)`}
+ * @cssprop {<color>} --pf-c-switch__toggle-icon--Color {@default `#fff`}
+ * @cssprop {<length>} --pf-c-switch__toggle-icon--Left {@default `1rem`}
+ * @cssprop {<length>} --pf-c-switch__toggle-icon--Offset {@default `0.125rem`}
+ * @cssprop {<number>} --pf-c-switch--LineHeight {@default `1.5`}
+ * @cssprop {<length>} --pf-c-switch--Height {@default `auto`}
+ * @cssprop {<color>} --pf-c-switch__input--checked__toggle--BackgroundColor {@default `#06c`}
+ * @cssprop {<length>} --pf-c-switch__input--checked__toggle--before--TranslateX {@default `calc(100% + 0.125rem)`}
+ * @cssprop {<color>} --pf-c-switch__input--checked__label--Color {@default `#151515`}
+ * @cssprop {<color>} --pf-c-switch__input--not-checked__label--Color {@default `#6a6e73`}
+ * @cssprop {<color>} --pf-c-switch__input--disabled__label--Color {@default `#6a6e73`}
+ * @cssprop {<color>} --pf-c-switch__input--disabled__toggle--BackgroundColor {@default `#d2d2d2`}
+ * @cssprop {<color>} --pf-c-switch__input--disabled__toggle--before--BackgroundColor {@default `#f5f5f5`}
+ * @cssprop {<length>} --pf-c-switch__input--focus__toggle--OutlineWidth {@default `2px`}
+ * @cssprop {<length>} --pf-c-switch__input--focus__toggle--OutlineOffset {@default `0.5rem`}
+ * @cssprop {<color>} --pf-c-switch__input--focus__toggle--OutlineColor {@default `#06c`}
+ * @cssprop {<length>} --pf-c-switch__toggle--Height {@default `calc(1rem * 1.5)`}
+ * @cssprop {<color>} --pf-c-switch__toggle--BackgroundColor {@default `#8a8d90`}
+ * @cssprop {<length>} --pf-c-switch__toggle--BorderRadius {@default `calc(1rem * 1.5)`}
+ * @cssprop {<length>} --pf-c-switch__toggle--before--Width {@default `calc(1rem - 0.125rem)`}
+ * @cssprop {<length>} --pf-c-switch__toggle--before--Height {@default `calc(1rem - 0.125rem)`}
+ * @cssprop {<length>} --pf-c-switch__toggle--before--Top {@default calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)`}
+ * @cssprop {<length>} --pf-c-switch__toggle--before--Left {@default `calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)`}
+ * @cssprop {<color>} --pf-c-switch__toggle--before--BackgroundColor {@default `#fff`}
+ * @cssprop {<length>} --pf-c-switch__toggle--before--BorderRadius {@default `30em`}
+ * @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)`}
+ * @cssprop --pf-c-switch__toggle--before--Transition {@default `transform .25s ease 0s`}
+ * @cssprop {<length>} --pf-c-switch__toggle--Width {@default `calc(calc(1rem * 1.5) + 0.125rem + calc(1rem - 0.125rem))`}
+ */
+let PfSwitch = class PfSwitch extends BaseSwitch {
+};
+PfSwitch.styles = [...BaseSwitch.styles, styles];
+PfSwitch = __decorate([
+    customElement('pf-switch')
+], PfSwitch);
+export { PfSwitch };
+//# sourceMappingURL=pf-switch.js.map

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

@@ -0,0 +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"]}

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

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

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

@@ -0,0 +1,11 @@
+import { test } from '@playwright/test';
+import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+const tagName = 'pf-switch';
+test.describe(tagName, () => {
+    test('snapshot', async ({ page }) => {
+        const componentPage = new PfeDemoPage(page, tagName);
+        await componentPage.navigate();
+        await componentPage.snapshot();
+    });
+});
+//# sourceMappingURL=pf-switch.e2e.js.map

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

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

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

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

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

@@ -0,0 +1,164 @@
+import { expect, html, nextFrame } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+import { PfSwitch } from '@patternfly/elements/pf-switch/pf-switch.js';
+describe('<pf-switch>', function () {
+    describe('simply instantiating', function () {
+        let element;
+        let snapshot;
+        beforeEach(async function () {
+            const container = await createFixture(html `
+        <div>
+          <pf-switch></pf-switch>
+        </div>
+      `);
+            element = container.querySelector('pf-switch');
+            snapshot = await a11ySnapshot({ selector: 'pf-switch' });
+        });
+        it('should upgrade', async function () {
+            const klass = customElements.get('pf-switch');
+            expect(element)
+                .to.be.an.instanceOf(klass)
+                .and
+                .to.be.an.instanceOf(PfSwitch);
+        });
+        it('has accessible role', function () {
+            expect(snapshot.role).to.equal('checkbox');
+        });
+        it('has accessible checked field', function () {
+            expect(snapshot.role).to.equal('checkbox');
+        });
+        it('requires accessible name', function () {
+            // Double negative - this would fail an accessibility audit,
+            // but that failure would be correct, because the template instantiated
+            // in this test's beforeeach hook does not have an accessible name
+            expect(snapshot.name).to.not.be.ok;
+        });
+    });
+    describe('with labels for on and off state', function () {
+        let element;
+        let snapshot;
+        beforeEach(async function () {
+            const container = await createFixture(html `
+        <div>
+          <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>
+        </div>
+        `);
+            element = container.querySelector('pf-switch');
+            snapshot = await a11ySnapshot({ selector: '#switch' });
+        });
+        it('is accessible', function () {
+            expect(snapshot.role).to.equal('checkbox');
+            expect(snapshot.name).to.be.ok;
+            expect(snapshot.checked).to.be.false;
+        });
+        it('should show the label for the unchecked state', function () {
+            expect(snapshot.name).to.equal('Message when off');
+        });
+        describe('clicking the checkbox', function () {
+            beforeEach(async function () {
+                element.click();
+                await element.updateComplete;
+                await nextFrame();
+                snapshot = await a11ySnapshot({ selector: '#switch' });
+            });
+            it('should be checked', function () {
+                expect(element.checked).to.be.true;
+                expect(snapshot.checked).to.be.true;
+            });
+            it('should show the label for the checked state', function () {
+                expect(snapshot.name).to.equal('Message when on');
+            });
+        });
+    });
+    describe('when checked attr is present', function () {
+        let element;
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-switch checked></pf-switch>
+      `);
+        });
+        it('should display a check icon', async function () {
+            // TODO: can we test this without inspecting the private shadowRoot?
+            const svg = element.shadowRoot.querySelector('svg');
+            expect(svg).to.be.ok;
+            expect(svg?.hasAttribute('hidden')).to.be.false;
+        });
+    });
+    describe('when checked and show-check-icon attrs are present', function () {
+        let element;
+        beforeEach(async function () {
+            const container = await createFixture(html `
+        <div>
+          <pf-switch id="switch" show-check-icon checked></pf-switch>
+          <label for="switch" data-state="on">Message when on</label>
+          <label for="switch" data-state="off">Message when off</label>
+        </div>
+      `);
+            element = container.querySelector('pf-switch');
+        });
+        it('should display a check icon', async function () {
+            // TODO: can we test this without inspecting the private shadowRoot?
+            const svg = element.shadowRoot.querySelector('svg');
+            expect(svg).to.be.ok;
+            expect(svg?.hasAttribute('hidden')).to.be.false;
+        });
+    });
+    describe('when checked and show-check-icon attrs are present', function () {
+        let element;
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-switch id="switch" show-check-icon checked></pf-switch>
+        <label for="switch" data-state="on">Message when on</label>
+        <label for="switch" data-state="off">Message when off</label>
+      `);
+        });
+        it('should display a check icon', async function () {
+            // TODO: can we test this without inspecting the private shadowRoot?
+            const svg = element.shadowRoot.querySelector('svg');
+            expect(svg).to.be.ok;
+            expect(svg?.hasAttribute('hidden')).to.be.false;
+        });
+    });
+    describe('when nested inside a label element', function () {
+        let label;
+        let element;
+        let snapshot;
+        beforeEach(async function () {
+            label = await createFixture(html `
+        <label>
+          <span>Dark Mode</span>
+          <pf-switch id="switch"></pf-switch>
+        </label>
+      `);
+            element = label.querySelector('pf-switch');
+            snapshot = await a11ySnapshot({ selector: 'pf-switch' });
+        });
+        it('does not hide label', function () {
+            expect(label.hidden).to.be.false;
+        });
+        it('has an accessible name', function () {
+            expect(snapshot.name).to.equal('Dark Mode');
+        });
+        describe('clicking the label', function () {
+            beforeEach(function () {
+                label.click();
+            });
+            it('toggles the state', function () {
+                expect(element.checked).to.be.true;
+            });
+        });
+        describe('clicking the switch', function () {
+            beforeEach(function () {
+                element.click();
+            });
+            it('toggles the state', function () {
+                expect(element.checked).to.be.true;
+            });
+        });
+    });
+    // TODO: test keyboard a11y with wtr sendKeys
+});
+//# sourceMappingURL=pf-switch.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-switch.spec.js","sourceRoot":"","sources":["pf-switch.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import type { A11yTreeSnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';\nimport { expect, html, nextFrame } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';\n\nimport { PfSwitch } from '@patternfly/elements/pf-switch/pf-switch.js';\n\ndescribe('<pf-switch>', function() {\n  describe('simply instantiating', function() {\n    let element: PfSwitch;\n    let snapshot: A11yTreeSnapshot;\n    beforeEach(async function() {\n      const container = await createFixture<PfSwitch>(html`\n        <div>\n          <pf-switch></pf-switch>\n        </div>\n      `);\n      element = container.querySelector('pf-switch')!;\n      snapshot = await a11ySnapshot({ selector: 'pf-switch' });\n    });\n    it('should upgrade', async function() {\n      const klass = customElements.get('pf-switch');\n      expect(element)\n        .to.be.an.instanceOf(klass)\n        .and\n        .to.be.an.instanceOf(PfSwitch);\n    });\n    it('has accessible role', function() {\n      expect(snapshot.role).to.equal('checkbox');\n    });\n    it('has accessible checked field', function() {\n      expect(snapshot.role).to.equal('checkbox');\n    });\n    it('requires accessible name', function() {\n      // Double negative - this would fail an accessibility audit,\n      // but that failure would be correct, because the template instantiated\n      // in this test's beforeeach hook does not have an accessible name\n      expect(snapshot.name).to.not.be.ok;\n    });\n  });\n\n  describe('with labels for on and off state', function() {\n    let element: PfSwitch;\n    let snapshot: A11yTreeSnapshot;\n    beforeEach(async function() {\n      const container = await createFixture<PfSwitch>(html`\n        <div>\n          <pf-switch id=\"switch\"></pf-switch>\n          <label for=\"switch\" data-state=\"on\">Message when on</label>\n          <label for=\"switch\" data-state=\"off\" hidden>Message when off</label>\n        </div>\n        `);\n      element = container.querySelector('pf-switch')!;\n      snapshot = await a11ySnapshot({ selector: '#switch' });\n    });\n\n    it('is accessible', function() {\n      expect(snapshot.role).to.equal('checkbox');\n      expect(snapshot.name).to.be.ok;\n      expect(snapshot.checked).to.be.false;\n    });\n\n    it('should show the label for the unchecked state', function() {\n      expect(snapshot.name).to.equal('Message when off');\n    });\n\n    describe('clicking the checkbox', function() {\n      beforeEach(async function() {\n        element.click();\n        await element.updateComplete;\n        await nextFrame();\n        snapshot = await a11ySnapshot({ selector: '#switch' });\n      });\n      it('should be checked', function() {\n        expect(element.checked).to.be.true;\n        expect(snapshot.checked).to.be.true;\n      });\n      it('should show the label for the checked state', function() {\n        expect(snapshot.name).to.equal('Message when on');\n      });\n    });\n  });\n\n  describe('when checked attr is present', function() {\n    let element: PfSwitch;\n    beforeEach(async function() {\n      element = await createFixture<PfSwitch>(html`\n        <pf-switch checked></pf-switch>\n      `);\n    });\n    it('should display a check icon', async function() {\n      // TODO: can we test this without inspecting the private shadowRoot?\n      const svg = element.shadowRoot.querySelector('svg');\n      expect(svg).to.be.ok;\n      expect(svg?.hasAttribute('hidden')).to.be.false;\n    });\n  });\n\n  describe('when checked and show-check-icon attrs are present', function() {\n    let element: PfSwitch;\n    beforeEach(async function() {\n      const container = await createFixture<PfSwitch>(html`\n        <div>\n          <pf-switch id=\"switch\" show-check-icon checked></pf-switch>\n          <label for=\"switch\" data-state=\"on\">Message when on</label>\n          <label for=\"switch\" data-state=\"off\">Message when off</label>\n        </div>\n      `);\n      element = container.querySelector('pf-switch')!;\n    });\n    it('should display a check icon', async function() {\n      // TODO: can we test this without inspecting the private shadowRoot?\n      const svg = element.shadowRoot.querySelector('svg');\n      expect(svg).to.be.ok;\n      expect(svg?.hasAttribute('hidden')).to.be.false;\n    });\n  });\n\n  describe('when checked and show-check-icon attrs are present', function() {\n    let element: PfSwitch;\n    beforeEach(async function() {\n      element = await createFixture<PfSwitch>(html`\n        <pf-switch id=\"switch\" show-check-icon checked></pf-switch>\n        <label for=\"switch\" data-state=\"on\">Message when on</label>\n        <label for=\"switch\" data-state=\"off\">Message when off</label>\n      `);\n    });\n    it('should display a check icon', async function() {\n      // TODO: can we test this without inspecting the private shadowRoot?\n      const svg = element.shadowRoot.querySelector('svg');\n      expect(svg).to.be.ok;\n      expect(svg?.hasAttribute('hidden')).to.be.false;\n    });\n  });\n\n  describe('when nested inside a label element', function() {\n    let label: HTMLLabelElement;\n    let element: PfSwitch;\n    let snapshot: A11yTreeSnapshot;\n    beforeEach(async function() {\n      label = await createFixture<HTMLLabelElement>(html`\n        <label>\n          <span>Dark Mode</span>\n          <pf-switch id=\"switch\"></pf-switch>\n        </label>\n      `);\n      element = label.querySelector('pf-switch')!;\n      snapshot = await a11ySnapshot({ selector: 'pf-switch' });\n    });\n    it('does not hide label', function() {\n      expect(label.hidden).to.be.false;\n    });\n    it('has an accessible name', function() {\n      expect(snapshot.name).to.equal('Dark Mode');\n    });\n    describe('clicking the label', function() {\n      beforeEach(function() {\n        label.click();\n      });\n      it('toggles the state', function() {\n        expect(element.checked).to.be.true;\n      });\n    });\n    describe('clicking the switch', function() {\n      beforeEach(function() {\n        element.click();\n      });\n      it('toggles the state', function() {\n        expect(element.checked).to.be.true;\n      });\n    });\n  });\n\n  // TODO: test keyboard a11y with wtr sendKeys\n});\n"]}

package/pf-tabs/BaseTab.css

@@ -0,0 +1,60 @@
+: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::before,
+button::after {
+  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;
+}

package/pf-tabs/BaseTab.d.ts

@@ -0,0 +1,26 @@
+import type { PropertyValues } from 'lit';
+import { LitElement } from 'lit';
+import { ComposedEvent } from '@patternfly/pfe-core';
+export declare class TabExpandEvent extends ComposedEvent {
+    active: boolean;
+    tab: BaseTab;
+    constructor(active: boolean, tab: BaseTab);
+}
+export declare abstract class BaseTab extends LitElement {
+    #private;
+    static readonly styles: import("lit").CSSResult[];
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+        customElements?: CustomElementRegistry | undefined;
+    };
+    private icons;
+    /** `active` should be observed, and true when the tab is selected */
+    abstract active: boolean;
+    /** `active` should be observed, and true when the tab is disabled */
+    abstract disabled: boolean;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changed: PropertyValues<this>): void;
+}

package/pf-tabs/BaseTab.js

@@ -0,0 +1,67 @@
+var _BaseTab_instances, _BaseTab_internals, _BaseTab_clickHandler, _BaseTab_activeChanged, _BaseTab_disabledChanged;
+import { __classPrivateFieldGet, __decorate } from "tslib";
+import { LitElement, html, nothing } from 'lit';
+import { queryAssignedElements } from 'lit/decorators.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`;
+export class TabExpandEvent extends ComposedEvent {
+    constructor(active, tab) {
+        super('expand');
+        this.active = active;
+        this.tab = tab;
+    }
+}
+export class BaseTab extends LitElement {
+    constructor() {
+        super(...arguments);
+        _BaseTab_instances.add(this);
+        _BaseTab_internals.set(this, this.attachInternals());
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', __classPrivateFieldGet(this, _BaseTab_instances, "m", _BaseTab_clickHandler));
+    }
+    render() {
+        const tabIndex = (this.active && !this.disabled) ? null : '-1';
+        return html `
+      <button part="button" role="tab" tabindex="${tabIndex ?? nothing}">
+        <slot name="icon"
+              part="icon"
+              ?hidden="${!this.icons.length}"
+              @slotchange="${() => this.requestUpdate()}"></slot>
+        <slot part="text"></slot>
+      </button>
+    `;
+    }
+    updated(changed) {
+        __classPrivateFieldGet(this, _BaseTab_internals, "f").ariaSelected = String(this.ariaSelected);
+        if (changed.has('active')) {
+            __classPrivateFieldGet(this, _BaseTab_instances, "m", _BaseTab_activeChanged).call(this);
+        }
+        if (changed.has('disabled')) {
+            __classPrivateFieldGet(this, _BaseTab_instances, "m", _BaseTab_disabledChanged).call(this);
+        }
+    }
+}
+_BaseTab_internals = new WeakMap(), _BaseTab_instances = new WeakSet(), _BaseTab_clickHandler = function _BaseTab_clickHandler() {
+    if (!this.disabled && __classPrivateFieldGet(this, _BaseTab_internals, "f").ariaDisabled !== 'true') {
+        this.active = true;
+    }
+}, _BaseTab_activeChanged = function _BaseTab_activeChanged() {
+    if (this.active && !this.disabled) {
+        __classPrivateFieldGet(this, _BaseTab_internals, "f").ariaSelected = 'true';
+    }
+    else {
+        __classPrivateFieldGet(this, _BaseTab_internals, "f").ariaSelected = 'false';
+    }
+    this.dispatchEvent(new TabExpandEvent(this.active, this));
+}, _BaseTab_disabledChanged = function _BaseTab_disabledChanged() {
+    __classPrivateFieldGet(this, _BaseTab_internals, "f").ariaDisabled = String(!!this.disabled);
+};
+BaseTab.styles = [style];
+BaseTab.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+__decorate([
+    queryAssignedElements({ slot: 'icon', flatten: true })
+], BaseTab.prototype, "icons", void 0);
+//# sourceMappingURL=BaseTab.js.map

package/pf-tabs/BaseTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseTab.js","sourceRoot":"","sources":["BaseTab.ts"],"names":[],"mappings":";;AAEA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,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;;;QAcE,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;IACrD,CAAC;IAED,MAAM;QACJ,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;QAC/D,OAAO,IAAI,CAAA;mDACoC,QAAQ,IAAI,OAAO;;;yBAG7C,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,EAAE;QAC7D,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;AAjEe,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","sourcesContent":["import type { PropertyValues } from 'lit';\n\nimport { LitElement, html, nothing } from 'lit';\nimport { queryAssignedElements } 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  /** `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  }\n\n  render() {\n    const tabIndex = (this.active && !this.disabled) ? null : '-1';\n    return html`\n      <button part=\"button\" role=\"tab\" tabindex=\"${tabIndex ?? nothing}\">\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') {\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.css

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}

package/pf-tabs/BaseTabPanel.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from 'lit';
+export declare abstract class BaseTabPanel extends LitElement {
+    #private;
+    static readonly styles: import("lit").CSSResult[];
+    hidden: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+}

package/pf-tabs/BaseTabPanel.js

@@ -0,0 +1,34 @@
+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`;
+export class BaseTabPanel extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.hidden = true;
+        _BaseTabPanel_internals.set(this, this.attachInternals());
+    }
+    render() {
+        return html `
+      <slot></slot>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        __classPrivateFieldGet(this, _BaseTabPanel_internals, "f").role = 'tabpanel';
+        /*
+         To make it easy for screen reader users to navigate from a tab
+         to the beginning of content in the active tabpanel, the tabpanel
+         element has tabindex="0" to include the panel in the page Tab sequence.
+         It is recommended that all tabpanel elements in a tab set are focusable
+         if there are any panels in the set that contain content where the first
+         element in the panel is not focusable.
+         https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-automatic
+        */
+        this.tabIndex = 0;
+    }
+}
+_BaseTabPanel_internals = new WeakMap();
+BaseTabPanel.styles = [style];
+//# sourceMappingURL=BaseTabPanel.js.map

package/pf-tabs/BaseTabPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseTabPanel.js","sourceRoot":"","sources":["BaseTabPanel.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;;;AAIvC,MAAM,OAAgB,YAAa,SAAQ,UAAU;IAArD;;QAGE,WAAM,GAAG,IAAI,CAAC;QAEd,kCAAa,IAAI,CAAC,eAAe,EAAE,EAAC;IAsBtC,CAAC;IApBC,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,uBAAA,IAAI,+BAAW,CAAC,IAAI,GAAG,UAAU,CAAC;QAClC;;;;;;;;UAQE;QACF,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IACpB,CAAC;;;AAzBe,mBAAM,GAAG,CAAC,KAAK,CAAC,CAAC","sourcesContent":["import { LitElement, html } from 'lit';\n\nimport style from './BaseTabPanel.css';\n\nexport abstract class BaseTabPanel extends LitElement {\n  static readonly styles = [style];\n\n  hidden = true;\n\n  #internals = this.attachInternals();\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.#internals.role = 'tabpanel';\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"]}

package/pf-tabs/BaseTabs.css

@@ -0,0 +1,87 @@
+:host {
+  display: block;
+}
+
+[part="tabs-container"] {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+}
+
+[part="tabs-container"]::before {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-style: solid;
+}
+
+:host button {
+  opacity: 1;
+}
+
+:host button:nth-of-type(1) {
+  margin-inline-end: 0;
+  translate: 0 0;
+}
+
+:host button:nth-of-type(2) {
+  margin-inline-start: 0;
+  translate: 0 0;
+}
+
+[part="tabs"],
+[part="panels"] {
+  display: block;
+}
+
+[part="tabs"] {
+  scrollbar-width: none;
+  position: relative;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+[part="tabs-container"]::before,
+[part="tabs"]::before,
+button::before {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  border-style: solid;
+}
+
+[part="tabs"]::before,
+button::before {
+  top: 0;
+}
+
+button,
+[part="tabs"]::before {
+  border: 0;
+}
+
+button {
+  flex: none;
+  line-height: 1;
+  opacity: 0;
+}
+
+button::before {
+  border-block-start-width: 0;
+}
+
+button:nth-of-type(1) {
+  translate: -100% 0;
+}
+
+button:nth-of-type(2) {
+  translate: 100% 0;
+}
+
+button:disabled {
+  pointer-events: none;
+}
+

package/pf-tabs/BaseTabs.d.ts

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+import { BaseTab } from './BaseTab.js';
+import { BaseTabPanel } from './BaseTabPanel.js';
+/**
+ * BaseTabs
+ *
+ * @attr [label-scroll-left="Scroll left"] - accessible label for the tab panel's scroll left button.
+ * @attr [label-scroll-right="Scroll right"] - accessible label for the tab panel's scroll right button.
+ *
+ */
+export declare abstract class BaseTabs extends LitElement {
+    #private;
+    static readonly styles: import("lit").CSSResult[];
+    static isTab(element: BaseTab): element is BaseTab;
+    static isPanel(element: BaseTabPanel): element is BaseTabPanel;
+    /** Time in milliseconds to debounce between scroll events and updating scroll button state */
+    protected static readonly scrollTimeoutDelay: number;
+    /** Icon name to use for the scroll left button */
+    protected static readonly scrollIconLeft: string;
+    /** Icon name to use for the scroll right button */
+    protected static readonly scrollIconRight: string;
+    /** Icon set to use for the scroll buttons */
+    protected static readonly scrollIconSet: string;
+    private tabs;
+    private panels;
+    private tabList;
+    id: string;
+    get activeIndex(): number;
+    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;
+}