@patternfly/elements 3.0.2 → 4.0.0

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

@@ -3,22 +3,32 @@ import { html, render } from 'lit';
 import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 import { PfIcon } from '@patternfly/elements/pf-icon/pf-icon.js';
 import '@patternfly/pfe-tools/test/stub-logger.js';
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-ignore: don't want to include these
+import aed from './rh-icon-aed.js';
+// @ts-ignore: don't want to include these
+import api from './rh-icon-api.js';
+// @ts-ignore: don't want to include these
+import atom from './rh-icon-atom.js';
+// @ts-ignore: don't want to include these
+import bike from './rh-icon-bike.js';
+/* eslint-enable @typescript-eslint/ban-ts-comment */
+const TEST_ICONS = { aed, api, atom, bike };
+async function expectIconsEqual(element, tpl) {
+    await oneEvent(element, 'load');
+    const rootNode = render(tpl, document.createDocumentFragment());
+    const actual = element.shadowRoot?.querySelector('svg');
+    const expected = rootNode.parentNode.querySelector('svg');
+    expect(actual?.outerHTML).to.equal(expected?.outerHTML);
+}
 describe('<pf-icon>', function () {
     let element;
-    async function expectIconsEqual(actualIconUrl) {
-        await oneEvent(element, 'load', false);
-        const tpl = await import(actualIconUrl.pathname).then(x => x.default);
-        const rootNode = render(tpl, document.createDocumentFragment());
-        const actual = element.shadowRoot?.querySelector('svg');
-        const expected = rootNode.parentNode.querySelector('svg');
-        expect(actual?.outerHTML).to.equal(expected?.outerHTML);
-    }
     beforeEach(async function () {
-        // @ts-expect-error: this is necessary to reset test state
-        PfIcon.getters = new Map();
-        PfIcon.io.disconnect();
         element = await fixture(html `<pf-icon></pf-icon>`);
     });
+    afterEach(function () {
+        PfIcon.reset();
+    });
     it('imperatively instantiates', function () {
         expect(document.createElement('pf-icon')).to.be.an.instanceof(PfIcon);
     });
@@ -28,54 +38,57 @@ describe('<pf-icon>', function () {
             .and
             .to.be.an.instanceOf(PfIcon);
     });
-    it('should warn if the 2nd argument to addIconSet is not a function', function () {
-        // @ts-expect-error: 3rd input is a string
-        PfIcon.addIconSet('test', './', 'rh-icon-aed.svg');
-        expect(Logger.warn).to.have.been.calledOnceWith(`[PfIcon.addIconSet(setName, getter)]: getter must be a function`);
-    });
-    it('should warn if there is no function provided to resolve the icon names', function () {
-        // @ts-expect-error: testing bad input
-        PfIcon.addIconSet('test', './');
-        expect(Logger.warn).to.have.been.calledOnceWith('[PfIcon.addIconSet(setName, getter)]: getter must be a function');
-    });
-    describe('with a custom icon set', function () {
-        const testIcons = ['aed', 'api', 'atom', 'bike'];
-        function getter(_, icon) {
-            return new URL(`./rh-icon-${icon}.js`, import.meta.url);
-        }
-        beforeEach(async function () {
-            // replace the default built-in icon set resolveIconName function
-            // with one that loads local icons.  we don't want tests dependent on
-            // prod servers.
-            PfIcon.addIconSet('rh', getter);
-            element.set = 'rh';
+    describe('addIconSet', function () {
+        describe('when 1st argument is not a string', function () {
+            beforeEach(function () {
+                PfIcon.addIconSet(
+                // @ts-expect-error: testing bad input
+                {}, () => void 0);
+            });
+            it('should warn', function () {
+                expect(Logger.warn).to.have.been.calledOnceWith(`[PfIcon]: the first argument to addIconSet must be a string.`);
+            });
         });
-        for (const iconName of testIcons) {
-            it('loads icons', async function () {
-                // wait for each test icon to be loaded, then move to the next one
-                element.icon = iconName;
-                await expectIconsEqual(getter('rh', iconName));
+        describe('when 2nd argument is not a function', function () {
+            beforeEach(function () {
+                PfIcon.addIconSet('rh', 
+                // @ts-expect-error: testing bad input
+                'haha');
+            });
+            it('should warn', function () {
+                expect(Logger.warn).to.have.been.calledOnceWith(`[PfIcon]: the second argument to addIconSet must be a function.`);
             });
-        }
-        it('should hide the fallback when it successfully upgrades', async function () {
-            element.innerHTML = `<p>Icon failed to load.</p>`;
-            // Check that the fallback is hidden when the icon is successfully loaded
-            element.icon = 'bike';
-            await oneEvent(element, 'load', false);
-            expect(element).shadowDom.to.equal(`
-      <div id="container" aria-hidden="true">
-        <span part="fallback" hidden>
-          <slot></slot>
-        </span>
-      </div>`);
         });
-        it('should change color when pf-icon\'s color CSS property is changed', async function () {
-            const newColor = 'rgb(11, 12, 13)';
-            element.style.setProperty('color', newColor);
-            element.icon = 'atom';
-            await oneEvent(element, 'load', false);
-            const color = getComputedStyle(element.shadowRoot.querySelector('svg')).getPropertyValue('color');
-            expect(color).to.equal(newColor);
+        describe('with a good resolve function', function () {
+            beforeEach(async function () {
+                // replace the default built-in icon set resolveIconName function
+                // with one that loads local icons.  we don't want tests dependent on
+                // prod servers.
+                PfIcon.addIconSet('rh', (_, icon) => TEST_ICONS[icon]);
+                element.set = 'rh';
+            });
+            for (const [iconName, icon] of Object.entries(TEST_ICONS)) {
+                it('loads icons', async function () {
+                    // wait for each test icon to be loaded, then move to the next one
+                    element.icon = iconName;
+                    await expectIconsEqual(element, icon);
+                });
+            }
+            it('should hide the fallback when it successfully upgrades', async function () {
+                element.innerHTML = `<p>Icon failed to load.</p>`;
+                element.icon = 'bike';
+                await oneEvent(element, 'load');
+                expect(element.shadowRoot?.querySelector('[part=fallback]'))
+                    .to.have.attribute('hidden');
+            });
+            it('should change color when pf-icon\'s color CSS property is changed', async function () {
+                const newColor = 'rgb(11, 12, 13)';
+                element.style.setProperty('color', newColor);
+                element.icon = 'atom';
+                await oneEvent(element, 'load');
+                const color = getComputedStyle(element.shadowRoot.querySelector('svg')).getPropertyValue('color');
+                expect(color).to.equal(newColor);
+            });
         });
     });
     describe('changing size attribute', function () {
@@ -92,39 +105,40 @@ describe('<pf-icon>', function () {
             });
         }
     });
-    it(`should fetch an icon even when the icon set is registered after the element upgrades`, async function () {
-        const url = new URL('./rh-icon-bike.js', import.meta.url);
-        element.set = 'asdfasdf';
-        element.icon = 'foo';
-        await element.updateComplete;
-        PfIcon.addIconSet('asdfasdf', () => url);
-        await oneEvent(element, 'load', false);
-        await expectIconsEqual(url);
-    });
-    it(`should show fallback when given a valid icon set but invalid icon name, fallback provided`, async function () {
-        element.innerHTML = '<p>Image failed to load.</p>.';
-        element.icon = 'no-scrubs';
-        await oneEvent(element, 'error', false);
-        expect(element.shadowRoot.querySelector('svg')).to.not.be.ok;
-        expect(element).shadowDom.to.equal(`
-      <div id="container" aria-hidden="true">
-        <span part="fallback">
-          <slot></slot>
-        </span>
-      </div>`);
+    describe('when the icon has a custom set attribute', function () {
+        let element;
+        before(async function () {
+            element = await fixture(html `<pf-icon set="asdfasdf" icon="foo"></pf-icon>`);
+        });
+        describe('then the icon set is registered', function () {
+            beforeEach(async function () {
+                PfIcon.addIconSet('asdfasdf', () => import(`./rh-icon-${'bike'}.js`)
+                    .then(m => m.default));
+                await oneEvent(element, 'load');
+            });
+            it(`should render the icon`, function () {
+                expectIconsEqual(element, bike);
+            });
+        });
     });
-    it('should show fallback when given an invalid icon set, fallback provided', async function () {
-        element.innerHTML = '<p>Image failed to load.</p>.';
-        element.set = 'choopee-doopee-pie';
-        element.icon = 'bike';
-        await oneEvent(element, 'error', false);
-        expect(element.shadowRoot.querySelector('svg')).to.not.be.ok;
-        expect(element).shadowDom.to.equal(`
-      <div id="container" aria-hidden="true">
-        <span part="fallback">
-          <slot></slot>
-        </span>
-      </div>`);
+    describe('when the icon has a fallback content', function () {
+        let element;
+        before(async function () {
+            element = await fixture(html `
+        <pf-icon icon="no-scrubs">
+          <p>Image failed to load.</p>.
+        </pf-icon>`);
+            await oneEvent(element, 'error');
+        });
+        it('should display the fallback', function () {
+            expect(element.shadowRoot.querySelector('svg')).to.not.be.ok;
+            expect(element).shadowDom.to.equal(`
+        <div id="container" aria-hidden="true">
+          <span part="fallback">
+            <slot></slot>
+          </span>
+        </div>`);
+        });
     });
 });
 //# sourceMappingURL=pf-icon.spec.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"pf-icon.spec.js","sourceRoot":"","sources":["pf-icon.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, fixture, oneEvent } from '@open-wc/testing';\nimport { html, render } from 'lit';\n\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport { PfIcon } from '@patternfly/elements/pf-icon/pf-icon.js';\n\nimport '@patternfly/pfe-tools/test/stub-logger.js';\n\ndescribe('<pf-icon>', function() {\n  let element: PfIcon;\n\n  async function expectIconsEqual(actualIconUrl: URL) {\n    await oneEvent(element, 'load', false);\n    const tpl = await import(actualIconUrl.pathname).then(x => x.default);\n    const rootNode = render(tpl, document.createDocumentFragment());\n    const actual = element.shadowRoot?.querySelector('svg');\n    const expected = (rootNode.parentNode as DocumentFragment).querySelector('svg');\n    expect(actual?.outerHTML).to.equal(expected?.outerHTML);\n  }\n\n  beforeEach(async function() {\n    // @ts-expect-error: this is necessary to reset test state\n    PfIcon.getters = new Map(); PfIcon.io.disconnect();\n    element = await fixture(html`<pf-icon></pf-icon>`);\n  });\n\n  it('imperatively instantiates', function() {\n    expect(document.createElement('pf-icon')).to.be.an.instanceof(PfIcon);\n  });\n\n  it('should upgrade', function() {\n    expect(element, 'pf-icon should be an instance of PfIcon')\n        .to.be.an.instanceOf(customElements.get('pf-icon'))\n        .and\n        .to.be.an.instanceOf(PfIcon);\n  });\n\n  it('should warn if the 2nd argument to addIconSet is not a function', function() {\n    // @ts-expect-error: 3rd input is a string\n    PfIcon.addIconSet('test', './', 'rh-icon-aed.svg');\n    expect(Logger.warn).to.have.been.calledOnceWith(`[PfIcon.addIconSet(setName, getter)]: getter must be a function`);\n  });\n\n  it('should warn if there is no function provided to resolve the icon names', function() {\n    // @ts-expect-error: testing bad input\n    PfIcon.addIconSet('test', './');\n\n    expect(Logger.warn).to.have.been.calledOnceWith('[PfIcon.addIconSet(setName, getter)]: getter must be a function');\n  });\n\n  describe('with a custom icon set', function() {\n    const testIcons = ['aed', 'api', 'atom', 'bike'];\n\n    function getter(_: string, icon: string) {\n      return new URL(`./rh-icon-${icon}.js`, import.meta.url);\n    }\n\n    beforeEach(async function() {\n      // replace the default built-in icon set resolveIconName function\n      // with one that loads local icons.  we don't want tests dependent on\n      // prod servers.\n      PfIcon.addIconSet('rh', getter);\n      element.set = 'rh';\n    });\n\n    for (const iconName of testIcons) {\n      it('loads icons', async function() {\n        // wait for each test icon to be loaded, then move to the next one\n        element.icon = iconName;\n        await expectIconsEqual(getter('rh', iconName));\n      });\n    }\n\n    it('should hide the fallback when it successfully upgrades', async function() {\n      element.innerHTML = `<p>Icon failed to load.</p>`;\n      // Check that the fallback is hidden when the icon is successfully loaded\n      element.icon = 'bike';\n      await oneEvent(element, 'load', false);\n      expect(element).shadowDom.to.equal(`\n      <div id=\"container\" aria-hidden=\"true\">\n        <span part=\"fallback\" hidden>\n          <slot></slot>\n        </span>\n      </div>`);\n    });\n\n    it('should change color when pf-icon\\'s color CSS property is changed', async function() {\n      const newColor = 'rgb(11, 12, 13)';\n      element.style.setProperty('color', newColor);\n      element.icon = 'atom';\n      await oneEvent(element, 'load', false);\n      const color = getComputedStyle(element.shadowRoot!.querySelector('svg')!).getPropertyValue('color');\n      expect(color).to.equal(newColor);\n    });\n  });\n\n  describe('changing size attribute', function() {\n    const sizes: PfIcon['size'][] = ['sm', 'md', 'lg', 'xl'];\n    let lastSize = { width: 0, height: 0 };\n\n    for (const size of sizes) {\n      it('should change size based on the attribute value', async function() {\n        element.size = size;\n        await element.updateComplete;\n        const { width, height } = element.getBoundingClientRect();\n        expect(width, `size \"${size}\" should be wider than the size below`).to.be.greaterThan(lastSize.width);\n        expect(height, `size \"${size}\" should be taller than the size below`).to.be.greaterThan(lastSize.height);\n        lastSize = { width, height };\n      });\n    }\n  });\n\n  it(`should fetch an icon even when the icon set is registered after the element upgrades`, async function() {\n    const url = new URL('./rh-icon-bike.js', import.meta.url);\n    element.set = 'asdfasdf';\n    element.icon = 'foo';\n    await element.updateComplete;\n    PfIcon.addIconSet('asdfasdf', () => url);\n    await oneEvent(element, 'load', false);\n    await expectIconsEqual(url);\n  });\n\n  it(`should show fallback when given a valid icon set but invalid icon name, fallback provided`, async function() {\n    element.innerHTML = '<p>Image failed to load.</p>.';\n    element.icon = 'no-scrubs';\n    await oneEvent(element, 'error', false);\n    expect(element.shadowRoot!.querySelector('svg')).to.not.be.ok;\n    expect(element).shadowDom.to.equal(`\n      <div id=\"container\" aria-hidden=\"true\">\n        <span part=\"fallback\">\n          <slot></slot>\n        </span>\n      </div>`);\n  });\n\n  it('should show fallback when given an invalid icon set, fallback provided', async function() {\n    element.innerHTML = '<p>Image failed to load.</p>.';\n    element.set = 'choopee-doopee-pie';\n    element.icon = 'bike';\n    await oneEvent(element, 'error', false);\n    expect(element.shadowRoot!.querySelector('svg')).to.not.be.ok;\n    expect(element).shadowDom.to.equal(`\n      <div id=\"container\" aria-hidden=\"true\">\n        <span part=\"fallback\">\n          <slot></slot>\n        </span>\n      </div>`);\n  });\n});\n"]}
+{"version":3,"file":"pf-icon.spec.js","sourceRoot":"","sources":["pf-icon.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, fixture, oneEvent } from '@open-wc/testing';\nimport { html, render, type TemplateResult } from 'lit';\n\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport { PfIcon } from '@patternfly/elements/pf-icon/pf-icon.js';\n\nimport '@patternfly/pfe-tools/test/stub-logger.js';\n\n/* eslint-disable @typescript-eslint/ban-ts-comment */\n// @ts-ignore: don't want to include these\nimport aed from './rh-icon-aed.js';\n// @ts-ignore: don't want to include these\nimport api from './rh-icon-api.js';\n// @ts-ignore: don't want to include these\nimport atom from './rh-icon-atom.js';\n// @ts-ignore: don't want to include these\nimport bike from './rh-icon-bike.js';\n\n/* eslint-enable @typescript-eslint/ban-ts-comment */\n\nconst TEST_ICONS = { aed, api, atom, bike };\n\nasync function expectIconsEqual(element: PfIcon, tpl: TemplateResult) {\n  await oneEvent(element, 'load');\n  const rootNode = render(tpl, document.createDocumentFragment());\n  const actual = element.shadowRoot?.querySelector('svg');\n  const expected = (rootNode.parentNode as DocumentFragment).querySelector('svg');\n  expect(actual?.outerHTML).to.equal(expected?.outerHTML);\n}\n\ndescribe('<pf-icon>', function() {\n  let element: PfIcon;\n\n  beforeEach(async function() {\n    element = await fixture(html`<pf-icon></pf-icon>`);\n  });\n\n  afterEach(function() {\n    PfIcon.reset();\n  });\n\n  it('imperatively instantiates', function() {\n    expect(document.createElement('pf-icon')).to.be.an.instanceof(PfIcon);\n  });\n\n  it('should upgrade', function() {\n    expect(element, 'pf-icon should be an instance of PfIcon')\n        .to.be.an.instanceOf(customElements.get('pf-icon'))\n        .and\n        .to.be.an.instanceOf(PfIcon);\n  });\n\n  describe('addIconSet', function() {\n    describe('when 1st argument is not a string', function() {\n      beforeEach(function() {\n        PfIcon.addIconSet(\n          // @ts-expect-error: testing bad input\n          {},\n          () => void 0,\n        );\n      });\n      it('should warn', function() {\n        expect(Logger.warn).to.have.been.calledOnceWith(`[PfIcon]: the first argument to addIconSet must be a string.`);\n      });\n    });\n\n    describe('when 2nd argument is not a function', function() {\n      beforeEach(function() {\n        PfIcon.addIconSet(\n          'rh',\n          // @ts-expect-error: testing bad input\n          'haha'\n        );\n      });\n      it('should warn', function() {\n        expect(Logger.warn).to.have.been.calledOnceWith(`[PfIcon]: the second argument to addIconSet must be a function.`);\n      });\n    });\n\n    describe('with a good resolve function', function() {\n      beforeEach(async function() {\n        // replace the default built-in icon set resolveIconName function\n        // with one that loads local icons.  we don't want tests dependent on\n        // prod servers.\n        PfIcon.addIconSet('rh', (_, icon: string) => TEST_ICONS[icon as keyof typeof TEST_ICONS]);\n        element.set = 'rh';\n      });\n\n      for (const [iconName, icon] of Object.entries(TEST_ICONS)) {\n        it('loads icons', async function() {\n          // wait for each test icon to be loaded, then move to the next one\n          element.icon = iconName;\n          await expectIconsEqual(element, icon);\n        });\n      }\n\n      it('should hide the fallback when it successfully upgrades', async function() {\n        element.innerHTML = `<p>Icon failed to load.</p>`;\n        element.icon = 'bike';\n        await oneEvent(element, 'load');\n        expect(element.shadowRoot?.querySelector('[part=fallback]'))\n            .to.have.attribute('hidden');\n      });\n\n      it('should change color when pf-icon\\'s color CSS property is changed', async function() {\n        const newColor = 'rgb(11, 12, 13)';\n        element.style.setProperty('color', newColor);\n        element.icon = 'atom';\n        await oneEvent(element, 'load');\n        const color = getComputedStyle(element.shadowRoot!.querySelector('svg')!).getPropertyValue('color');\n        expect(color).to.equal(newColor);\n      });\n    });\n  });\n\n  describe('changing size attribute', function() {\n    const sizes: PfIcon['size'][] = ['sm', 'md', 'lg', 'xl'];\n    let lastSize = { width: 0, height: 0 };\n\n    for (const size of sizes) {\n      it('should change size based on the attribute value', async function() {\n        element.size = size;\n        await element.updateComplete;\n        const { width, height } = element.getBoundingClientRect();\n        expect(width, `size \"${size}\" should be wider than the size below`).to.be.greaterThan(lastSize.width);\n        expect(height, `size \"${size}\" should be taller than the size below`).to.be.greaterThan(lastSize.height);\n        lastSize = { width, height };\n      });\n    }\n  });\n\n  describe('when the icon has a custom set attribute', function() {\n    let element: PfIcon;\n    before(async function() {\n      element = await fixture(html`<pf-icon set=\"asdfasdf\" icon=\"foo\"></pf-icon>`);\n    });\n    describe('then the icon set is registered', function() {\n      beforeEach(async function() {\n        PfIcon.addIconSet('asdfasdf', () =>\n          import(`./rh-icon-${'bike'}.js`)\n              .then(m => m.default));\n        await oneEvent(element, 'load');\n      });\n      it(`should render the icon`, function() {\n        expectIconsEqual(element, bike);\n      });\n    });\n  });\n\n  describe('when the icon has a fallback content', function() {\n    let element: PfIcon;\n    before(async function() {\n      element = await fixture(html`\n        <pf-icon icon=\"no-scrubs\">\n          <p>Image failed to load.</p>.\n        </pf-icon>`);\n      await oneEvent(element, 'error');\n    });\n    it('should display the fallback', function() {\n      expect(element.shadowRoot!.querySelector('svg')).to.not.be.ok;\n      expect(element).shadowDom.to.equal(`\n        <div id=\"container\" aria-hidden=\"true\">\n          <span part=\"fallback\">\n            <slot></slot>\n          </span>\n        </div>`);\n    });\n  });\n});\n"]}

package/pf-jump-links/pf-jump-links-item.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
  * @cssprop --pf-c-jump-links__link--PaddingTop -- padding around the link
  * @cssprop --pf-c-jump-links__link--PaddingRight
@@ -10,20 +10,13 @@ import { LitElement } from 'lit';
 export declare class PfJumpLinksItem extends LitElement {
     #private;
     static readonly styles: CSSStyleSheet[];
-    static readonly shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        slotAssignment?: SlotAssignmentMode | undefined;
-        customElements?: CustomElementRegistry | undefined;
-        registry?: CustomElementRegistry | undefined;
-    };
+    static readonly shadowRootOptions: ShadowRootInit;
     /** Whether this item is active. */
     active: boolean;
     /** hypertext reference for this link */
     href?: string;
-    connectedCallback(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    private activeChanged;
+    render(): TemplateResult<1>;
+    protected activeChanged(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-jump-links/pf-jump-links-item.js

@@ -7,15 +7,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
 import { css } from "lit";
 const style = css `:host {\n  display: block;\n}\n\n#container {\n  display: contents;\n}\n\nslot:not([name]) {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--pf-global--spacer--md, 1rem);\n}\n\na {\n  position: relative;\n  display: flex;\n  cursor: pointer;\n  flex: 1;\n  padding-block-start: var(--pf-c-jump-links__link--PaddingTop,\n    var(--pf-global--spacer--md, 1rem));\n  padding-inline-end: var(--pf-c-jump-links__link--PaddingRight,\n    var(--pf-global--spacer--md, 1rem));\n  padding-block-end: var(--pf-c-jump-links__link--PaddingBottom,\n    var(--pf-global--spacer--md, 1rem));\n  padding-inline-start: var(--pf-c-jump-links__link--PaddingLeft,\n    var(--pf-global--spacer--md, 1rem));\n  text-decoration: none;\n  outline-offset: var(--pf-c-jump-links__link--OutlineOffset,\n    calc(-1 * var(--pf-global--spacer--sm, 0.5rem)));\n  color: var(--pf-c-jump-links__link-text--Color,\n    var(--pf-global--Color--200, #6a6e73));\n}\n\na::before {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  content: "";\n  border-color: var(--pf-c-jump-links__link--before--BorderColor, transparent);\n  border-style: solid;\n  border-width:\n    var(--pf-c-jump-links__link--before--BorderTopWidth,\n      var(--pf-c-jump-links__list--before--BorderTopWidth,\n        var(--pf-global--BorderWidth--sm, 1px)))\n    var(--pf-c-jump-links__link--before--BorderRightWidth, 0)\n    var(--pf-c-jump-links__link--before--BorderBottomWidth, 0)\n    var(--pf-c-jump-links__link--before--BorderLeftWidth, 0);\n}\n\na:hover {\n  --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--hover__link-text--Color,\n    var(--pf-global--Color--100, #151515));\n}\n\na:focus {\n  --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--focus__link-text--Color,\n    var(--pf-global--Color--100, #151515));\n}\n\n:host([active]) {\n  --pf-c-jump-links__link--before--BorderTopWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth,\n    var(--pf-global--BorderWidth--lg, 3px));\n  --pf-c-jump-links__link--before--BorderLeftWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth, 0);\n  --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor,\n    var(--pf-global--primary-color--100, #06c));\n  --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color,\n    pfvar(--pf-global--Color--100, #151515));\n}\n`;
-import { observed } from '@patternfly/pfe-core/decorators/observed.js';
-/**
- * @cssprop --pf-c-jump-links__link--PaddingTop -- padding around the link
- * @cssprop --pf-c-jump-links__link--PaddingRight
- * @cssprop --pf-c-jump-links__link--PaddingBottom
- * @cssprop --pf-c-jump-links__link--PaddingLeft
- * @cssprop --pf-c-jump-links__link--OutlineOffset
- * @cssprop --pf-c-jump-links__link-text--Color
- */
+import { observes } from '@patternfly/pfe-core/decorators/observes.js';
 let PfJumpLinksItem = class PfJumpLinksItem extends LitElement {
     constructor() {
         super(...arguments);
@@ -24,13 +16,11 @@ let PfJumpLinksItem = class PfJumpLinksItem extends LitElement {
         this.active = false;
         _PfJumpLinksItem_internals.set(this, InternalsController.of(this, { role: 'listitem' }));
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.activeChanged();
-    }
     render() {
         return html `
-      <a href="${ifDefined(this.href)}" @focus="${__classPrivateFieldGet(this, _PfJumpLinksItem_instances, "m", _PfJumpLinksItem_onFocus)}" @click="${__classPrivateFieldGet(this, _PfJumpLinksItem_instances, "m", _PfJumpLinksItem_onClick)}">
+      <a href="${ifDefined(this.href)}"
+         @focus="${__classPrivateFieldGet(this, _PfJumpLinksItem_instances, "m", _PfJumpLinksItem_onFocus)}"
+         @click="${__classPrivateFieldGet(this, _PfJumpLinksItem_instances, "m", _PfJumpLinksItem_onClick)}">
         <slot></slot>
       </a>
       <slot name="subsection"></slot>
@@ -53,13 +43,16 @@ PfJumpLinksItem.shadowRootOptions = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
 };
+PfJumpLinksItem.version = "4.0.0";
 __decorate([
-    observed('activeChanged'),
     property({ type: Boolean, reflect: true })
 ], PfJumpLinksItem.prototype, "active", void 0);
 __decorate([
     property({ reflect: true })
 ], PfJumpLinksItem.prototype, "href", void 0);
+__decorate([
+    observes('active')
+], PfJumpLinksItem.prototype, "activeChanged", null);
 PfJumpLinksItem = __decorate([
     customElement('pf-jump-links-item')
 ], PfJumpLinksItem);

package/pf-jump-links/pf-jump-links-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-jump-links-item.js","sourceRoot":"","sources":["pf-jump-links-item.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;;;AAI/F,OAAO,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;AAEvE;;;;;;;GAOG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;;QAQL,mCAAmC;QAES,WAAM,GAAG,KAAK,CAAC;QAK3D,qCAAa,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAAC;IA2BlE,CAAC;IAzBU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;iBACE,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,uBAAA,IAAI,4DAAS,aAAa,uBAAA,IAAI,4DAAS;;;;KAIpF,CAAC;IACJ,CAAC;IAEO,aAAa;QACnB,uBAAA,IAAI,kCAAW,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC;IAChE,CAAC;;;;;IAGC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;AAC7D,CAAC;;IAGC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;AAC5D,CAAC;AAxCe,sBAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;AAER,iCAAiB,GAAG;IAC3C,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHyC,CAGxC;AAI0C;IAD3C,QAAQ,CAAC,eAAe,CAAC;IACzB,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAgB;AAG9B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAe;AAbhC,eAAe;IAD3B,aAAa,CAAC,oBAAoB,CAAC;GACvB,eAAe,CA0C3B","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport style from './pf-jump-links-item.css';\n\nimport { observed } from '@patternfly/pfe-core/decorators/observed.js';\n\n/**\n * @cssprop --pf-c-jump-links__link--PaddingTop -- padding around the link\n * @cssprop --pf-c-jump-links__link--PaddingRight\n * @cssprop --pf-c-jump-links__link--PaddingBottom\n * @cssprop --pf-c-jump-links__link--PaddingLeft\n * @cssprop --pf-c-jump-links__link--OutlineOffset\n * @cssprop --pf-c-jump-links__link-text--Color\n */\n@customElement('pf-jump-links-item')\nexport class PfJumpLinksItem extends LitElement {\n  static readonly styles = [style];\n\n  static override readonly shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /** Whether this item is active. */\n  @observed('activeChanged')\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /** hypertext reference for this link */\n  @property({ reflect: true }) href?: string;\n\n  #internals = InternalsController.of(this, { role: 'listitem' });\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.activeChanged();\n  }\n\n  render() {\n    return html`\n      <a href=\"${ifDefined(this.href)}\" @focus=\"${this.#onFocus}\" @click=\"${this.#onClick}\">\n        <slot></slot>\n      </a>\n      <slot name=\"subsection\"></slot>\n    `;\n  }\n\n  private activeChanged() {\n    this.#internals.ariaCurrent = this.active ? 'location' : null;\n  }\n\n  #onClick() {\n    this.dispatchEvent(new Event('select', { bubbles: true }));\n  }\n\n  #onFocus() {\n    this.dispatchEvent(new Event('focus', { bubbles: true }));\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-jump-links-item': PfJumpLinksItem;\n  }\n}\n"]}
+{"version":3,"file":"pf-jump-links-item.js","sourceRoot":"","sources":["pf-jump-links-item.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;;;AAI/F,OAAO,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;AAWhE,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;;QAQL,mCAAmC;QACS,WAAM,GAAG,KAAK,CAAC;QAK3D,qCAAa,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAAC;;IAEhE,MAAM;QACJ,OAAO,IAAI,CAAA;iBACE,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;mBAClB,uBAAA,IAAI,4DAAS;mBACb,uBAAA,IAAI,4DAAS;;;;KAI3B,CAAC;IACJ,CAAC;IAGS,aAAa;QACrB,uBAAA,IAAI,kCAAW,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC;IAChE,CAAC;;;;;IAGC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;AAC7D,CAAC;;IAGC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;AAC5D,CAAC;AArCe,sBAAM,GAAoB,CAAC,KAAK,CAAC,AAA3B,CAA4B;AAEzB,iCAAiB,GAAmB;IAC3D,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHyC,CAGxC;;AAG0C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAgB;AAG9B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAe;AAgBjC;IADT,QAAQ,CAAC,QAAQ,CAAC;oDAGlB;AA9BU,eAAe;IAD3B,aAAa,CAAC,oBAAoB,CAAC;GACvB,eAAe","sourcesContent":["import { html, LitElement, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport style from './pf-jump-links-item.css';\n\nimport { observes } from '@patternfly/pfe-core/decorators/observes.js';\n\n/**\n * @cssprop --pf-c-jump-links__link--PaddingTop -- padding around the link\n * @cssprop --pf-c-jump-links__link--PaddingRight\n * @cssprop --pf-c-jump-links__link--PaddingBottom\n * @cssprop --pf-c-jump-links__link--PaddingLeft\n * @cssprop --pf-c-jump-links__link--OutlineOffset\n * @cssprop --pf-c-jump-links__link-text--Color\n */\n@customElement('pf-jump-links-item')\nexport class PfJumpLinksItem extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [style];\n\n  static override readonly shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /** Whether this item is active. */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /** hypertext reference for this link */\n  @property({ reflect: true }) href?: string;\n\n  #internals = InternalsController.of(this, { role: 'listitem' });\n\n  render(): TemplateResult<1> {\n    return html`\n      <a href=\"${ifDefined(this.href)}\"\n         @focus=\"${this.#onFocus}\"\n         @click=\"${this.#onClick}\">\n        <slot></slot>\n      </a>\n      <slot name=\"subsection\"></slot>\n    `;\n  }\n\n  @observes('active')\n  protected activeChanged(): void {\n    this.#internals.ariaCurrent = this.active ? 'location' : null;\n  }\n\n  #onClick() {\n    this.dispatchEvent(new Event('select', { bubbles: true }));\n  }\n\n  #onFocus() {\n    this.dispatchEvent(new Event('focus', { bubbles: true }));\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-jump-links-item': PfJumpLinksItem;\n  }\n}\n"]}

package/pf-jump-links/pf-jump-links-list.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
  * @cssprop --pf-c-jump-links__list__list__link--PaddingTop -- padding around each link
  * @cssprop --pf-c-jump-links__list__list__link--PaddingBottom
@@ -6,7 +6,7 @@ import { LitElement } from 'lit';
  */
 export declare class PfJumpLinksList extends LitElement {
     static readonly styles: CSSStyleSheet[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-jump-links/pf-jump-links-list.js

@@ -3,11 +3,6 @@ import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { css } from "lit";
 const style = css `:host {\n  display: block;\n}\n\n#container {\n  display: contents;\n  --pf-c-jump-links__list--PaddingTop: 0;\n  --pf-c-jump-links__list--PaddingBottom: 0;\n  --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop,\n    var(--pf-global--spacer--sm, 0.5rem));\n  --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom,\n    var(--pf-global--spacer--sm, 0.5rem));\n  --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft,\n    var(--pf-global--spacer--lg, 1.5rem));\n}\n`;
-/**
- * @cssprop --pf-c-jump-links__list__list__link--PaddingTop -- padding around each link
- * @cssprop --pf-c-jump-links__list__list__link--PaddingBottom
- * @cssprop --pf-c-jump-links__list__list__link--PaddingLeft
- */
 let PfJumpLinksList = class PfJumpLinksList extends LitElement {
     render() {
         // TODO: add label
@@ -16,6 +11,7 @@ let PfJumpLinksList = class PfJumpLinksList extends LitElement {
     }
 };
 PfJumpLinksList.styles = [style];
+PfJumpLinksList.version = "4.0.0";
 PfJumpLinksList = __decorate([
     customElement('pf-jump-links-list')
 ], PfJumpLinksList);

package/pf-jump-links/pf-jump-links-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-jump-links-list.js","sourceRoot":"","sources":["pf-jump-links-list.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;;;AAIjE;;;;GAIG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAG7C,MAAM;QACJ,kBAAkB;QAClB,oDAAoD;QACpD,OAAO,IAAI,CAAA,wDAAwD,CAAC;IACtE,CAAC;;AANe,sBAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;AADtB,eAAe;IAD3B,aAAa,CAAC,oBAAoB,CAAC;GACvB,eAAe,CAQ3B","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport style from './pf-jump-links-list.css';\n\n/**\n * @cssprop --pf-c-jump-links__list__list__link--PaddingTop -- padding around each link\n * @cssprop --pf-c-jump-links__list__list__link--PaddingBottom\n * @cssprop --pf-c-jump-links__list__list__link--PaddingLeft\n */\n@customElement('pf-jump-links-list')\nexport class PfJumpLinksList extends LitElement {\n  static readonly styles = [style];\n\n  render() {\n    // TODO: add label\n    // eslint-disable-next-line lit-a11y/accessible-name\n    return html`<div id=\"container\" role=\"listbox\"><slot></slot></div>`;\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-jump-links-list': PfJumpLinksList;\n  }\n}\n"]}
+{"version":3,"file":"pf-jump-links-list.js","sourceRoot":"","sources":["pf-jump-links-list.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;;;AAU1D,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAG7C,MAAM;QACJ,kBAAkB;QAClB,oDAAoD;QACpD,OAAO,IAAI,CAAA,wDAAwD,CAAC;IACtE,CAAC;;AANe,sBAAM,GAAoB,CAAC,KAAK,CAAC,AAA3B,CAA4B;;AADvC,eAAe;IAD3B,aAAa,CAAC,oBAAoB,CAAC;GACvB,eAAe","sourcesContent":["import { html, LitElement, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport style from './pf-jump-links-list.css';\n\n/**\n * @cssprop --pf-c-jump-links__list__list__link--PaddingTop -- padding around each link\n * @cssprop --pf-c-jump-links__list__list__link--PaddingBottom\n * @cssprop --pf-c-jump-links__list__list__link--PaddingLeft\n */\n@customElement('pf-jump-links-list')\nexport class PfJumpLinksList extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [style];\n\n  render(): TemplateResult<1> {\n    // TODO: add label\n    // eslint-disable-next-line lit-a11y/accessible-name\n    return html`<div id=\"container\" role=\"listbox\"><slot></slot></div>`;\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-jump-links-list': PfJumpLinksList;\n  }\n}\n"]}

package/pf-jump-links/pf-jump-links.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import '@patternfly/elements/pf-icon/pf-icon.js';
 /**
  * **Jump links** allow users to navigate to sections within a page.
@@ -61,7 +61,7 @@ export declare class PfJumpLinks extends LitElement {
     connectedCallback(): void;
     firstUpdated(): void;
     updated(changed: Map<string, unknown>): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-jump-links/pf-jump-links.js

@@ -1,5 +1,5 @@
-var _PfJumpLinks_instances, _PfJumpLinks_kids, _PfJumpLinks_tabindex, _PfJumpLinks_spy, _PfJumpLinks_updateItems, _PfJumpLinks_onSelect, _PfJumpLinks_setActiveItem, _PfJumpLinks_onToggle;
-import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
+var _PfJumpLinks_instances, _PfJumpLinks_kids, _PfJumpLinks_items_get, _PfJumpLinks_tabindex, _PfJumpLinks_spy, _PfJumpLinks_onSlotChange, _PfJumpLinks_onSelect, _PfJumpLinks_setActiveItem, _PfJumpLinks_onToggle;
+import { __classPrivateFieldGet, __decorate } from "tslib";
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
@@ -9,48 +9,6 @@ import { PfJumpLinksItem } from './pf-jump-links-item.js';
 import '@patternfly/elements/pf-icon/pf-icon.js';
 import { css } from "lit";
 const style = css `[hidden] {\n  display: none !important;\n}\n\n:host {\n  display: block;\n}\n\n#container {\n  display: flex;\n  flex-wrap: wrap;\n  font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif);\n  font-size: var(--pf-global--FontSize--md, 16px);\n  font-weight: var(--pf-global--FontWeight--normal, 400);\n}\n\nslot {\n  position: relative;\n  display: var(--pf-c-jump-links__list--Display, flex);\n  flex-direction: var(--pf-c-jump-links__list--FlexDirection, row);\n  padding-block-start: var(--pf-c-jump-links__list--PaddingTop, 0);\n  padding-inline-end: var(--pf-c-jump-links__list--PaddingRight,\n    var(--pf-global--spacer--md, 1rem));\n  padding-block-end: var(--pf-c-jump-links__list--PaddingBottom, 0);\n  padding-inline-start: var(--pf-c-jump-links__list--PaddingLeft,\n    var(--pf-global--spacer--md, 1rem));\n  visibility: var(--pf-c-jump-links__list--Visibility, visible);\n}\n\nslot::before {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  pointer-events: none;\n  content: "";\n  border: solid var(--pf-c-jump-links__list--before--BorderColor,\n    var(--pf-global--BorderColor--100, #d2d2d2));\n  border-width:\n    var(--pf-c-jump-links__list--before--BorderTopWidth,\n      var(--pf-global--BorderWidth--sm, 1px))\n    var(--pf-c-jump-links__list--before--BorderRightWidth, 0)\n    var(--pf-c-jump-links__list--before--BorderBottomWidth, 0)\n    var(--pf-c-jump-links__list--before--BorderLeftWidth, 0);\n}\n\n:host([vertical]) #container {\n  --pf-c-jump-links__list--PaddingTop: var(--pf-c-jump-links--m-vertical__list--PaddingTop,\n    var(--pf-global--spacer--md, 1rem));\n  --pf-c-jump-links__list--PaddingRight: var(--pf-c-jump-links--m-vertical__list--PaddingRight, 0);\n  --pf-c-jump-links__list--PaddingBottom: var(--pf-c-jump-links--m-vertical__list--PaddingBottom\n    var(--pf-global--spacer--md, 1rem));\n  --pf-c-jump-links__list--PaddingLeft: var(--pf-c-jump-links--m-vertical__list--PaddingLeft, 0);\n  --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth, 0);\n  --pf-c-jump-links__list--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth, \n    var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth, 0);\n  --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth,\n    var(--pf-global--BorderWidth--lg, 3px));\n  --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection, column);\n}\n\n:host([centered]) #container {\n  justify-content: center;\n}\n\n:host([centered]) #label {\n  text-align: center;\n}\n\n:host(:not([expandable])) #label {\n  display: block;\n  width: 100%;\n  margin-block-end: var(--pf-c-jump-links__label--MarginBottom,\n    var(--pf-global--spacer--md, 1rem));\n}\n\n:host([expandable]) {\n  --pf-c-jump-links--m-expanded__toggle--MarginBottom:\n    calc(var(--pf-c-jump-links__toggle--MarginBottom--base,\n      calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))\n    ) + var(--pf-global--spacer--md, 1rem));\n}\n\nsummary {\n  display: block;\n  margin-block-start: var(--pf-c-jump-links__toggle--MarginTop,\n    calc(-1 * var(--pf-global--spacer--form-element, 0.375rem)));\n  margin-block-end: var(--pf-c-jump-links__toggle--MarginBottom,\n    var(--pf-c-jump-links__toggle--MarginBottom--base,\n      calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))));\n  margin-inline-start: var(--pf-c-jump-links__toggle--MarginLeft);\n  color: var(--pf-c-jump-links__toggle-text--Color,\n    var(--pf-global--Color--100, #151515));\n  padding:\n    var(--pf-c-button--PaddingTop,\n      var(--pf-global--spacer--form-element, 0.375rem))\n    var(--pf-c-button--PaddingRight,\n      var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-button--PaddingBottom,\n      var(--pf-global--spacer--form-element, 0.375rem))\n    var(--pf-c-button--PaddingLeft,\n      var(--pf-global--spacer--md, 1rem));\n}\n\nsummary pf-icon {\n  rotate: var(--pf-c-jump-links__toggle-icon--Rotate, 0);\n  transition: var(--pf-c-jump-links__toggle-icon--Transition,\n    var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1)));\n}\n\nsummary span {\n  margin-inline-start: var(--pf-c-jump-links__toggle-text--MarginLeft,\n    var(--pf-global--spacer--md, 1rem));\n}\n\n:host([expanded]) #container {\n  --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom,\n    calc(var(--pf-c-jump-links__toggle--MarginBottom--base,\n      calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))) +\n      var(--pf-global--spacer--md, 1rem)));\n  --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate,\n    90deg);\n  --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color,\n    var(--pf-global--Color--100, #151515));\n  --pf-c-jump-links__toggle-icon--Rotate: 90deg;\n}\n`;
-/**
- * **Jump links** allow users to navigate to sections within a page.
- * @fires toggle - when the `expanded` disclosure widget is toggled
- * @slot - Place pf-jump-links-items here
- * @cssprop --pf-c-jump-links__list--Display
- * @cssprop --pf-c-jump-links__list--FlexDirection
- * @cssprop --pf-c-jump-links__list--PaddingTop -- padding around the list of links
- * @cssprop --pf-c-jump-links__list--PaddingRight
- * @cssprop --pf-c-jump-links__list--PaddingBottom
- * @cssprop --pf-c-jump-links__list--PaddingLeft
- * @cssprop --pf-c-jump-links__list--Visibility
- * @cssprop --pf-c-jump-links__list--before--BorderColor
- * @cssprop --pf-c-jump-links__list--before--BorderTopWidth
- * @cssprop --pf-c-jump-links__list--before--BorderRightWidth
- * @cssprop --pf-c-jump-links__list--before--BorderBottomWidth
- * @cssprop --pf-c-jump-links__list--before--BorderLeftWidth
- * @cssprop --pf-c-jump-links__toggle--MarginBottom--base
- * @cssprop --pf-c-jump-links__toggle--MarginTop -- padding around the expandable jump links disclosure widget.
- * @cssprop --pf-c-jump-links__toggle--MarginBottom
- * @cssprop --pf-c-jump-links__toggle--MarginBottom--base
- * @cssprop --pf-c-jump-links__toggle--MarginLeft
- * @cssprop --pf-c-jump-links__toggle-text--Color
- * @cssprop --pf-c-button--PaddingTop -- padding around the expandable jump links disclosure widget.
- * @cssprop --pf-c-button--PaddingRight
- * @cssprop --pf-c-button--PaddingBottom
- * @cssprop --pf-c-button--PaddingLeft
- * @cssprop --pf-c-jump-links__toggle-icon--Rotate
- * @cssprop --pf-c-jump-links__toggle-icon--Transition
- * @cssprop --pf-c-jump-links__toggle-text--MarginLeft
- * @cssprop --pf-c-jump-links--m-expanded__toggle--MarginBottom
- * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Rotate
- * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Color
- * @cssprop --pf-c-jump-links--m-vertical__list--PaddingTop
- * @cssprop --pf-c-jump-links--m-vertical__list--PaddingRight
- * @cssprop --pf-c-jump-links--m-vertical__list--PaddingBottom
- * @cssprop --pf-c-jump-links--m-vertical__list--PaddingLeft
- * @cssprop --pf-c-jump-links--m-vertical__list--before--BorderTopWidth
- * @cssprop --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth
- * @cssprop --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth
- * @cssprop --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth
- * @cssprop --pf-c-jump-links--m-vertical__list--FlexDirection
- */
 let PfJumpLinks = class PfJumpLinks extends LitElement {
     constructor() {
         super(...arguments);
@@ -65,8 +23,10 @@ let PfJumpLinks = class PfJumpLinks extends LitElement {
         this.centered = false;
         /** Offset to add to the scroll position, potentially for a masthead which content scrolls under. */
         this.offset = 0;
-        _PfJumpLinks_kids.set(this, this.querySelectorAll(':is(pf-jump-links-item, pf-jump-links-list)'));
-        _PfJumpLinks_tabindex.set(this, void 0);
+        _PfJumpLinks_kids.set(this, this.querySelectorAll?.(':is(pf-jump-links-item, pf-jump-links-list)'));
+        _PfJumpLinks_tabindex.set(this, RovingTabindexController.of(this, {
+            getItems: () => __classPrivateFieldGet(this, _PfJumpLinks_instances, "a", _PfJumpLinks_items_get),
+        }));
         _PfJumpLinks_spy.set(this, new ScrollSpyController(this, {
             rootMargin: `${this.offset}px 0px 0px 0px`,
             tagNames: ['pf-jump-links-item'],
@@ -79,21 +39,11 @@ let PfJumpLinks = class PfJumpLinks extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener('slotchange', __classPrivateFieldGet(this, _PfJumpLinks_instances, "m", _PfJumpLinks_updateItems));
+        this.addEventListener('slotchange', __classPrivateFieldGet(this, _PfJumpLinks_instances, "m", _PfJumpLinks_onSlotChange));
         this.addEventListener('select', __classPrivateFieldGet(this, _PfJumpLinks_instances, "m", _PfJumpLinks_onSelect));
     }
     firstUpdated() {
-        __classPrivateFieldSet(this, _PfJumpLinks_tabindex, new RovingTabindexController(this, {
-            getItems: () => {
-                const items = Array.from(__classPrivateFieldGet(this, _PfJumpLinks_kids, "f"))
-                    .flatMap(i => [
-                    ...i.shadowRoot?.querySelectorAll('a') ?? [],
-                    ...i.querySelectorAll('a') ?? [],
-                ]);
-                return items;
-            },
-        }), "f");
-        const active = this.querySelector('pf-jump-links-item[active]');
+        const active = this.querySelector?.('pf-jump-links-item[active]');
         if (active) {
             __classPrivateFieldGet(this, _PfJumpLinks_instances, "m", _PfJumpLinks_setActiveItem).call(this, active);
         }
@@ -127,8 +77,15 @@ _PfJumpLinks_kids = new WeakMap();
 _PfJumpLinks_tabindex = new WeakMap();
 _PfJumpLinks_spy = new WeakMap();
 _PfJumpLinks_instances = new WeakSet();
-_PfJumpLinks_updateItems = function _PfJumpLinks_updateItems() {
-    __classPrivateFieldGet(this, _PfJumpLinks_tabindex, "f")?.updateItems();
+_PfJumpLinks_items_get = function _PfJumpLinks_items_get() {
+    return Array.from(__classPrivateFieldGet(this, _PfJumpLinks_kids, "f") ?? [])
+        .flatMap(i => [
+        ...i.shadowRoot?.querySelectorAll?.('a') ?? [],
+        ...i.querySelectorAll?.('a') ?? [],
+    ]);
+};
+_PfJumpLinks_onSlotChange = function _PfJumpLinks_onSlotChange() {
+    __classPrivateFieldGet(this, _PfJumpLinks_tabindex, "f").items = __classPrivateFieldGet(this, _PfJumpLinks_instances, "a", _PfJumpLinks_items_get);
 };
 _PfJumpLinks_onSelect = function _PfJumpLinks_onSelect(event) {
     if (event.target instanceof PfJumpLinksItem) {
@@ -136,8 +93,11 @@ _PfJumpLinks_onSelect = function _PfJumpLinks_onSelect(event) {
     }
 };
 _PfJumpLinks_setActiveItem = function _PfJumpLinks_setActiveItem(item) {
-    __classPrivateFieldGet(this, _PfJumpLinks_tabindex, "f")?.setActiveItem(item.shadowRoot?.querySelector('a') ?? undefined);
-    __classPrivateFieldGet(this, _PfJumpLinks_spy, "f").setActive(item);
+    const itemLink = item.shadowRoot?.querySelector?.('a') ?? null;
+    if (itemLink) {
+        __classPrivateFieldGet(this, _PfJumpLinks_tabindex, "f").atFocusedItemIndex = __classPrivateFieldGet(this, _PfJumpLinks_tabindex, "f").items.indexOf(itemLink);
+        __classPrivateFieldGet(this, _PfJumpLinks_spy, "f").setActive(item);
+    }
 };
 _PfJumpLinks_onToggle = function _PfJumpLinks_onToggle(event) {
     if (event.target instanceof HTMLDetailsElement) {
@@ -146,6 +106,7 @@ _PfJumpLinks_onToggle = function _PfJumpLinks_onToggle(event) {
     this.dispatchEvent(new Event('toggle'));
 };
 PfJumpLinks.styles = [style];
+PfJumpLinks.version = "4.0.0";
 __decorate([
     property({ reflect: true, type: Boolean })
 ], PfJumpLinks.prototype, "expandable", void 0);