@patternfly/elements 3.0.0 → 3.0.1

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

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

package/pf-icon/test/rh-icon-aed.js

@@ -0,0 +1,2 @@
+import { svg } from 'lit';
+export default svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="rh-icon-aed"><path d="M14.22 22.14c.07-.01.12-.06.15-.12l2.39-5.43c.03-.06.02-.14-.02-.2a.21.21 0 0 0-.18-.1l-2.47-.01 3.93-5.11-1.44 4.1c-.02.06-.01.14.03.19.04.06.1.09.17.09l2.63.01-4.54 6.99c-.06.09-.05.21.04.28l.09.08c.36.31.51.43.95.8.04.03.09.05.13.05.05 0 .1-.02.13-.05 6.27-5.2 7.37-7.27 7.48-7.49 1.4-2.14 1.08-3.91.57-5.03a5.5 5.5 0 0 0-1.47-1.92c-.92-.68-1.87-1.02-2.82-1.02-2.05 0-3.49 1.57-3.98 2.19-.49-.62-1.94-2.19-3.99-2.19-.95 0-1.89.34-2.82 1.02-.03.03-.89.68-1.43 1.87-.5 1.1-.82 2.87.54 5.08.07.14 1.02 1.78 5.75 5.88.04.04.11.05.18.04zm-5.57-6.13c0-.01-.01-.01-.01-.01-1.01-1.64-1.18-3.21-.52-4.67.5-1.1 1.31-1.72 1.31-1.72.85-.62 1.72-.94 2.57-.94 2.26 0 3.79 2.21 3.8 2.23.04.06.1.09.18.09.07 0 .14-.03.17-.09.02-.02 1.54-2.23 3.8-2.23.85 0 1.72.31 2.57.93.01.01.84.66 1.35 1.77.67 1.48.49 3.03-.55 4.62-.01.01-.01.02-.02.03-.01.02-.96 2.02-7.24 7.24-.32-.27-.47-.4-.75-.63l4.66-7.16c.05-.06.05-.15.01-.22a.214.214 0 0 0-.19-.11l-2.73-.01 1.73-4.93c.03-.1-.01-.2-.09-.25a.216.216 0 0 0-.27.05l-4.97 6.36c-.05.06-.06.15-.03.22s.11.12.19.12l2.6.01-2.14 4.88c-4.55-3.99-5.42-5.57-5.43-5.58z"/></svg>`;

package/pf-icon/test/rh-icon-api.js

@@ -0,0 +1,2 @@
+import { svg } from 'lit';
+export default svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.68 31.68" id="rh-icon-api"><path d="M25.17 20.3v-8.67h-2.94V8.74h1.55l-1.81-3.13-1.8 3.13h1.55v2.89h-5.66V8.83h1.23V5.87h-2.97v2.97h1.23V11.64H9.9V8.81c.7-.12 1.23-.73 1.23-1.46 0-.82-.66-1.48-1.48-1.48s-1.48.67-1.48 1.48c0 .73.53 1.34 1.23 1.46v2.82H6.51v8.67h2.88v2.8H8.22v2.97h2.97V23.1H9.9v-2.8h5.66v2.97h.01l-1.56 2.7h3.61l-1.56-2.7h.01V20.3h5.66v2.82c-.7.12-1.23.73-1.23 1.46 0 .82.66 1.48 1.48 1.48s1.48-.67 1.48-1.48c0-.73-.53-1.34-1.23-1.46V20.3h2.94zM9.9 17.39v-1.17h11.83v1.17H9.9zm11.83-2.88v1.21H9.9v-1.21h11.83zm0-.51h-5.66v-1.86h5.66V14zm-6.17 0H9.9v-1.86h5.66V14zM9.9 17.89h5.66v1.9H9.9v-1.9zm6.16 0h5.66v1.9h-5.66v-1.9zm6.17 1.91v-3.58h2.43v3.58h-2.43zm2.43-4.09h-2.43v-3.58h2.43v3.58zm-2.68-9.08l.93 1.61h-1.86l.93-1.61zm-7.15-.26h1.95v1.95h-1.95V6.37zm-6.16.98c0-.54.44-.98.98-.98s.98.44.98.98-.44.98-.98.98-.98-.44-.98-.98zm.72 4.79v3.58H7.02v-3.58h2.37zm-2.37 4.08h2.37v3.58H7.02v-3.58zm3.66 9.34H8.72V23.6h1.95v1.96zm4.2-.09l.93-1.61.93 1.61h-1.86zm8.08-.89c0 .54-.44.98-.98.98s-.98-.44-.98-.98.44-.98.98-.98.98.44.98.98z"/></svg>`;

package/pf-icon/test/rh-icon-atom.js

@@ -0,0 +1,2 @@
+import { svg } from 'lit';
+export default svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="rh-icon-atom"><path d="M28.35 16c0-1.22-2.7-2.08-6.24-2.53.55-.71 1.05-1.4 1.47-2.05 1.38-2.14 1.77-3.54 1.16-4.16-.19-.19-.45-.28-.78-.28-1.1 0-3.09 1.1-5.42 2.91-.45-3.54-1.3-6.24-2.53-6.24-1.22 0-2.08 2.7-2.52 6.24-2.33-1.81-4.32-2.91-5.42-2.91-.33 0-.6.09-.78.28-.61.61-.22 2.01 1.16 4.16.42.65.92 1.34 1.47 2.05-3.54.45-6.24 1.3-6.24 2.53s2.7 2.08 6.24 2.53c-.55.71-1.05 1.4-1.47 2.05-1.38 2.14-1.77 3.54-1.16 4.16.19.19.45.28.78.28 1.1 0 3.09-1.1 5.42-2.91.45 3.54 1.3 6.24 2.53 6.24 1.22 0 2.08-2.7 2.53-6.24 2.33 1.81 4.32 2.91 5.42 2.91.33 0 .6-.09.78-.28.61-.61.22-2.01-1.16-4.16-.42-.65-.92-1.34-1.47-2.05 3.52-.45 6.23-1.31 6.23-2.53zm-4.4-8.44c.18 0 .3.04.38.11.28.28.12 1.34-1.24 3.44-.46.72-1.02 1.48-1.65 2.28-.85-.09-1.73-.16-2.63-.21-.05-.9-.12-1.79-.21-2.63 2.5-1.97 4.43-2.99 5.35-2.99zM18.32 16c0 .33 0 .64-.01.95-.22.23-.44.46-.67.68-.23.23-.46.45-.68.67-.31 0-.63.01-.96.01-.32 0-.64 0-.96-.01-.23-.22-.45-.44-.68-.67-.23-.23-.45-.45-.67-.68-.01-.31-.01-.63-.01-.96 0-.33 0-.64.01-.96.22-.23.44-.46.67-.68.23-.23.46-.45.68-.67.31-.01.63-.01.96-.01s.64 0 .96.01c.23.22.45.44.68.67.23.23.45.46.67.69 0 .32.01.64.01.96zm-.28-2.04c-.08-.08-.17-.16-.25-.25.16.01.32.01.48.02.01.16.01.32.02.48-.08-.08-.16-.17-.25-.25zm-.85-.83c-.26-.25-.51-.49-.77-.72.57-.52 1.13-.99 1.66-1.43.07.68.12 1.41.17 2.19-.36-.02-.71-.03-1.06-.04zm-.84-.01h-.7c.12-.11.24-.22.35-.33.11.1.23.22.35.33zm-1.54.01l-1.05.03c.04-.77.1-1.5.16-2.19.53.44 1.09.91 1.66 1.43-.26.24-.52.48-.77.73zm-.6.58c-.08.08-.17.16-.25.25-.08.08-.16.17-.25.25.01-.16.01-.32.02-.48.16-.01.32-.01.48-.02zm-1.08 1.1c-.25.26-.49.51-.72.77-.5-.56-.98-1.11-1.43-1.66.68-.07 1.41-.12 2.18-.16-.02.35-.03.7-.03 1.05zm-.02.84v.7c-.11-.11-.22-.23-.32-.35l.32-.35zm.02 1.54l.03 1.05c-.77-.04-1.5-.1-2.18-.16.44-.54.92-1.1 1.43-1.66.23.26.47.52.72.77zm.58.6c.08.08.16.17.25.25.08.08.17.16.25.25-.16 0-.32-.01-.48-.02-.01-.16-.02-.32-.02-.48zm1.1 1.09c.26.25.51.49.77.72-.57.52-1.13.99-1.66 1.43-.07-.68-.12-1.41-.16-2.19.34.02.7.03 1.05.04zm.84.01h.7c-.12.11-.24.22-.35.33-.12-.11-.23-.22-.35-.33zm1.54-.01l1.06-.03c-.04.77-.1 1.5-.17 2.19-.53-.44-1.09-.91-1.66-1.43.26-.25.51-.49.77-.73zm.6-.59c.08-.08.17-.16.25-.25s.16-.17.25-.25c0 .16-.01.32-.02.48-.16.01-.32.02-.48.02zm1.08-1.1c.25-.26.49-.51.72-.77.5.56.98 1.11 1.43 1.66-.68.07-1.41.12-2.18.16.02-.34.03-.7.03-1.05zm.02-.84V16v-.35c.11.12.22.23.33.35-.12.12-.23.23-.33.35zm-.02-1.54l-.03-1.05c.77.04 1.5.1 2.18.16-.44.54-.92 1.1-1.43 1.66-.23-.26-.47-.51-.72-.77zM16 4.22c.68 0 1.55 2.22 2.01 6.09-.65.52-1.32 1.1-2.01 1.71-.68-.62-1.36-1.19-2.01-1.71.46-3.86 1.33-6.09 2.01-6.09zm-7.1 6.9c-1.35-2.1-1.51-3.17-1.24-3.44.08-.08.2-.11.38-.11.91 0 2.85 1.02 5.35 3-.09.85-.16 1.73-.21 2.63-.9.05-1.79.12-2.63.21a37.15 37.15 0 0 1-1.65-2.29zM4.22 16c0-.68 2.22-1.55 6.08-2.01.53.66 1.1 1.33 1.72 2.01-.61.68-1.19 1.35-1.72 2.01-3.86-.46-6.08-1.33-6.08-2.01zm3.83 8.45c-.18 0-.3-.04-.38-.11-.28-.28-.12-1.34 1.24-3.44.46-.72 1.02-1.49 1.65-2.28.85.09 1.73.16 2.63.21.05.9.12 1.79.21 2.63-2.5 1.96-4.44 2.99-5.35 2.99zM16 27.78c-.68 0-1.55-2.22-2.01-6.09.65-.52 1.32-1.1 2.01-1.71.68.62 1.36 1.19 2.01 1.71-.46 3.87-1.33 6.09-2.01 6.09zm7.09-6.89c1.35 2.1 1.51 3.17 1.24 3.44-.08.08-.2.11-.38.11-.91 0-2.85-1.02-5.34-3 .09-.85.16-1.73.21-2.63.9-.05 1.78-.12 2.63-.21.62.8 1.18 1.57 1.64 2.29zm-1.4-2.88c-.53-.66-1.1-1.33-1.72-2.01.61-.68 1.19-1.35 1.72-2.01 3.86.46 6.08 1.33 6.08 2.01.01.68-2.21 1.55-6.08 2.01zM16 14.79c-.67 0-1.21.54-1.21 1.21s.54 1.21 1.21 1.21 1.22-.55 1.22-1.21-.55-1.21-1.22-1.21zm0 1.86c-.35 0-.64-.29-.64-.64a.644.644 0 0 1 1.29 0c0 .35-.3.64-.65.64z"/></svg>`;

package/pf-icon/test/rh-icon-bike.js

@@ -0,0 +1,2 @@
+import { svg } from 'lit';
+export default svg`<svg id="rh-icon-bike" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M23.19 14c-.59 0-1.15.11-1.67.31l-.79-2.72a.355.355 0 0 1-.02-.1l-.12-1.12 1.15-.57a.4.4 0 0 0 .12.1c.54.33.73.6.72.74-.01.2-.39.46-.64.57-.25.1-.37.39-.26.64a.486.486 0 0 0 .64.26c.12-.05 1.17-.51 1.24-1.4.05-.59-.35-1.15-1.18-1.65a.487.487 0 0 0-.67.16l-.03.06-1.39.69c-.13.06-.2.21-.19.35l.12 1.09h-7.79l-.48-1.24c.1-.03.21-.07.34-.12.34-.13.73-.27 1.06-.27.38 0 .65-.27.68-.53.03-.31-.28-.42-.5-.5-.11-.04-.35-.05-.94-.07-.51-.02-1.14-.04-1.38-.1-.02-.01-.05-.01-.09-.02-.14-.03-.34-.09-.56-.09-.27 0-.48.08-.64.23-.07.04-.35.37-.31.61.02.19.21.29.77.57.13.07.28.14.47.23.16.07.32.11.48.13h.01l.1-.01.49 1.27-1.39 2.9c-.55-.23-1.15-.35-1.79-.35-2.6 0-4.71 2.11-4.71 4.71s2.11 4.71 4.71 4.71a4.72 4.72 0 0 0 4.62-3.78l.94.14a1.067 1.067 0 1 0 1.9-.75l4.53-5.69.33 1.12c-1.57.78-2.64 2.4-2.64 4.26 0 2.63 2.14 4.77 4.77 4.77s4.77-2.14 4.77-4.77A4.79 4.79 0 0 0 23.19 14zm-1.21-4.6c.04-.07.14-.1.21-.05.71.44 1.06.89 1.02 1.34-.06.7-.99 1.09-1.03 1.11-.02.01-.04.01-.06.01a.15.15 0 0 1-.14-.1c-.03-.08 0-.17.08-.2.22-.09.81-.43.85-.85.03-.32-.28-.69-.88-1.05a.16.16 0 0 1-.05-.21zm-10.29.46l-.35.02c-.12-.01-.23-.05-.34-.1-.17-.09-.33-.17-.46-.23-.25-.12-.49-.24-.57-.31.03-.08.13-.23.18-.28.09-.09.21-.13.39-.13.17 0 .35.05.47.07.04.01.08.02.09.02.27.08.9.11 1.45.13.33.01.75.03.83.05.09.03.24.09.27.12-.01.07-.12.2-.31.2-.39 0-.81.16-1.18.29-.19.06-.35.12-.47.15zm-1.13 5.63c1.15.64 1.93 1.87 1.93 3.27 0 .1-.01.2-.02.3l-3.14-.46a.597.597 0 0 0-.14-.26l1.37-2.85zm-1.85 3.66a.4.4 0 0 1 0 0 .38.38 0 1 1 0-.76.38.38 0 0 0-.38.38c-.01.21.17.38.38.38zm.04-1.02h-.03c-.35 0-.64.29-.64.64s.29.64.64.64c.23 0 .44-.13.55-.31l3.14.46a3.744 3.744 0 0 1-3.66 2.96c-2.06 0-3.74-1.68-3.74-3.74 0-2.06 1.68-3.74 3.74-3.74.48 0 .94.1 1.37.26l-1.37 2.83zm0 4.98c-2.39 0-4.34-1.95-4.34-4.34s1.95-4.34 4.34-4.34c.58 0 1.12.11 1.63.32l-.15.32a4.01 4.01 0 0 0-1.47-.29c-2.2 0-3.99 1.79-3.99 3.99s1.79 3.99 3.99 3.99a3.99 3.99 0 0 0 3.9-3.17l.34.05a4.343 4.343 0 0 1-4.25 3.47zm4.32-3.96l-.35-.05c.01-.11.02-.22.02-.33 0-1.5-.84-2.82-2.07-3.49l.15-.32a4.35 4.35 0 0 1 2.27 3.81c0 .13-.01.25-.02.38zm.36.05c.01-.15.02-.29.02-.44 0-1.79-1.01-3.35-2.48-4.15l1.16-2.41 2.59 6.68c-.15.12-.27.27-.34.45l-.95-.13zm1.95 1.36c-.46 0-.83-.37-.83-.83s.37-.83.83-.83.83.37.83.83-.38.83-.83.83zm5.15-7.7l-4.74 5.89a.984.984 0 0 0-.42-.08c-.05 0-.1.01-.15.01L12.6 11.9h7.65l.28.96zm.86 2.77c.01.05.04.12.07.17l1.51 3.07c.04.09.13.14.22.14.04 0 .07-.01.11-.02.12-.06.17-.21.11-.33l-1.51-3.07c-.01-.02-.03-.07-.04-.09l-.06-.2c.43-.17.9-.27 1.39-.27 2.06 0 3.74 1.68 3.74 3.74s-1.68 3.74-3.74 3.74-3.74-1.68-3.74-3.74c0-1.4.77-2.61 1.91-3.26l.03.12zm1.8 7.42c-2.36 0-4.28-1.92-4.28-4.28 0-1.64.93-3.07 2.29-3.79l.08.29a3.987 3.987 0 0 0 1.91 7.49c2.2 0 3.99-1.79 3.99-3.99s-1.79-3.99-3.99-3.99c-.51 0-1 .1-1.45.28l-.08-.28c.48-.19.99-.29 1.54-.29 2.36 0 4.28 1.92 4.28 4.28s-1.93 4.27-4.29 4.28z"/></svg>`;

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

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

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

@@ -49,7 +49,10 @@ _PfJumpLinksItem_onFocus = function _PfJumpLinksItem_onFocus() {
     this.dispatchEvent(new Event('focus', { bubbles: true }));
 };
 PfJumpLinksItem.styles = [style];
-PfJumpLinksItem.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+PfJumpLinksItem.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
 __decorate([
     observed('activeChanged'),
     property({ type: Boolean, reflect: true })

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;;;QAKL,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;AArCe,sBAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;AAEjB,iCAAiB,GAAmB,EAAE,GAAG,UAAU,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,AAA5E,CAA6E;AAIlE;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;AAVhC,eAAe;IAD3B,aAAa,CAAC,oBAAoB,CAAC;GACvB,eAAe,CAuC3B","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 readonly shadowRootOptions: ShadowRootInit = { ...LitElement.shadowRootOptions, delegatesFocus: true };\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,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"]}

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

@@ -6,7 +6,7 @@ import { LitElement } from 'lit';
  */
 export declare class PfJumpLinksList extends LitElement {
     static readonly styles: CSSStyleSheet[];
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -2,10 +2,8 @@ import { LitElement } from 'lit';
 import '@patternfly/elements/pf-icon/pf-icon.js';
 /**
  * **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
@@ -19,7 +17,6 @@ import '@patternfly/elements/pf-icon/pf-icon.js';
  * @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
@@ -29,15 +26,12 @@ import '@patternfly/elements/pf-icon/pf-icon.js';
  * @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
@@ -67,7 +61,7 @@ export declare class PfJumpLinks extends LitElement {
     connectedCallback(): void;
     firstUpdated(): void;
     updated(changed: Map<string, unknown>): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -11,10 +11,8 @@ 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
@@ -28,7 +26,6 @@ const style = css `[hidden] {\n  display: none !important;\n}\n\n:host {\n  disp
  * @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
@@ -38,15 +35,12 @@ const style = css `[hidden] {\n  display: none !important;\n}\n\n:host {\n  disp
  * @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
@@ -97,7 +91,7 @@ let PfJumpLinks = class PfJumpLinks extends LitElement {
                     ...i.querySelectorAll('a') ?? [],
                 ]);
                 return items;
-            }
+            },
         }), "f");
         const active = this.querySelector('pf-jump-links-item[active]');
         if (active) {

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

@@ -1 +1 @@
-{"version":3,"file":"pf-jump-links.js","sourceRoot":"","sources":["pf-jump-links.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,mBAAmB,EAAE,MAAM,2DAA2D,CAAC;AAChG,OAAO,EAAE,wBAAwB,EAAE,MAAM,gEAAgE,CAAC;AAE1G,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE1D,OAAO,yCAAyC,CAAC;;;AAIjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;;QAGL,4EAA4E;QAChC,eAAU,GAAG,KAAK,CAAC;QAE/D,qEAAqE;QACzB,aAAQ,GAAG,KAAK,CAAC;QAE7D,gEAAgE;QACpB,aAAQ,GAAG,KAAK,CAAC;QAE7D,kCAAkC;QACU,aAAQ,GAAG,KAAK,CAAC;QAE7D,oGAAoG;QACxE,WAAM,GAAG,CAAC,CAAC;QAKvC,4BAAQ,IAAI,CAAC,gBAAgB,CAAa,6CAA6C,CAAC,EAAC;QAEzF,wCAAwD;QAExD,2BAAO,IAAI,mBAAmB,CAAC,IAAI,EAAE;YACnC,UAAU,EAAE,GAAG,IAAI,CAAC,MAAM,gBAAgB;YAC1C,QAAQ,EAAE,CAAC,oBAAoB,CAAC;SACjC,CAAC,EAAC;IA8EL,CAAC;IA5EoB,KAAK,CAAC,iBAAiB;QACxC,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC7C,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,uBAAA,IAAI,yBAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC;QAC5E,OAAO,IAAI,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACpC,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,uBAAA,IAAI,wDAAa,CAAC,CAAC;QACvD,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,uBAAA,IAAI,qDAAU,CAAC,CAAC;IAClD,CAAC;IAEQ,YAAY;QACnB,uBAAA,IAAI,yBAAa,IAAI,wBAAwB,CAAoB,IAAI,EAAE;YACrE,QAAQ,EAAE,GAAG,EAAE;gBACb,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,uBAAA,IAAI,yBAAM,CAAC;qBACjC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;oBACZ,GAAG,CAAC,CAAC,UAAU,EAAE,gBAAgB,CAAC,GAAG,CAAC,IAAI,EAAE;oBAC5C,GAAG,CAAC,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,EAAE;iBACjC,CAAC,CAAC;gBACL,OAAO,KAAK,CAAC;YACf,CAAC;SACF,CAAC,MAAA,CAAC;QACH,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAkB,4BAA4B,CAAC,CAAC;QACjF,IAAI,MAAM,EAAE,CAAC;YACX,uBAAA,IAAI,0DAAe,MAAnB,IAAI,EAAgB,MAAM,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC;IAEQ,OAAO,CAAC,OAA6B;QAC5C,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1B,uBAAA,IAAI,wBAAK,CAAC,UAAU,GAAG,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,gBAAgB,CAAC;QAC7D,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;4BACa,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;0BACxB,IAAI,CAAC,QAAQ,cAAc,uBAAA,IAAI,qDAAU;;;+BAGpC,IAAI,CAAC,KAAK;;;;;mBAKtB,CAAC,CAAC,CAAC,IAAI,CAAA;2BACC,IAAI,CAAC,KAAK;;;eAGtB;;KAEV,CAAC;IACJ,CAAC;;;;;;;IAGC,uBAAA,IAAI,6BAAU,EAAE,WAAW,EAAE,CAAC;AAChC,CAAC;uDAES,KAAY;IACpB,IAAI,KAAK,CAAC,MAAM,YAAY,eAAe,EAAE,CAAC;QAC5C,uBAAA,IAAI,0DAAe,MAAnB,IAAI,EAAgB,KAAK,CAAC,MAAM,CAAC,CAAC;IACpC,CAAC;AACH,CAAC;iEAEc,IAAqB;IAClC,uBAAA,IAAI,6BAAU,EAAE,aAAa,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,CAAC,IAAI,SAAS,CAAC,CAAC;IAChF,uBAAA,IAAI,wBAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;AAC5B,CAAC;uDAES,KAAY;IACpB,IAAI,KAAK,CAAC,MAAM,YAAY,kBAAkB,EAAE,CAAC;QAC/C,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;IACpC,CAAC;IACD,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;AAC1C,CAAC;AAxGe,kBAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;AAGW;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAoB;AAGnB;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAkB;AAGjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAY;AAG3B;IAAX,QAAQ,EAAE;0CAAgB;AAnBhB,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CA0GvB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { ScrollSpyController } from '@patternfly/pfe-core/controllers/scroll-spy-controller.js';\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\n\nimport { PfJumpLinksItem } from './pf-jump-links-item.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nimport style from './pf-jump-links.css';\n\n/**\n * **Jump links** allow users to navigate to sections within a page.\n *\n * @fires toggle - when the `expanded` disclosure widget is toggled\n * @slot - Place pf-jump-links-items here\n *\n * @cssprop --pf-c-jump-links__list--Display\n * @cssprop --pf-c-jump-links__list--FlexDirection\n * @cssprop --pf-c-jump-links__list--PaddingTop -- padding around the list of links\n * @cssprop --pf-c-jump-links__list--PaddingRight\n * @cssprop --pf-c-jump-links__list--PaddingBottom\n * @cssprop --pf-c-jump-links__list--PaddingLeft\n * @cssprop --pf-c-jump-links__list--Visibility\n * @cssprop --pf-c-jump-links__list--before--BorderColor\n * @cssprop --pf-c-jump-links__list--before--BorderTopWidth\n * @cssprop --pf-c-jump-links__list--before--BorderRightWidth\n * @cssprop --pf-c-jump-links__list--before--BorderBottomWidth\n * @cssprop --pf-c-jump-links__list--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links__toggle--MarginBottom--base\n *\n * @cssprop --pf-c-jump-links__toggle--MarginTop -- padding around the expandable jump links disclosure widget.\n * @cssprop --pf-c-jump-links__toggle--MarginBottom\n * @cssprop --pf-c-jump-links__toggle--MarginBottom--base\n * @cssprop --pf-c-jump-links__toggle--MarginLeft\n * @cssprop --pf-c-jump-links__toggle-text--Color\n * @cssprop --pf-c-button--PaddingTop -- padding around the expandable jump links disclosure widget.\n * @cssprop --pf-c-button--PaddingRight\n * @cssprop --pf-c-button--PaddingBottom\n * @cssprop --pf-c-button--PaddingLeft\n *\n * @cssprop --pf-c-jump-links__toggle-icon--Rotate\n * @cssprop --pf-c-jump-links__toggle-icon--Transition\n * @cssprop --pf-c-jump-links__toggle-text--MarginLeft\n *\n * @cssprop --pf-c-jump-links--m-expanded__toggle--MarginBottom\n * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Rotate\n * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Color\n *\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingTop\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingRight\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingBottom\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingLeft\n * @cssprop --pf-c-jump-links--m-vertical__list--before--BorderTopWidth\n * @cssprop --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth\n * @cssprop --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links--m-vertical__list--FlexDirection\n */\n@customElement('pf-jump-links')\nexport class PfJumpLinks extends LitElement {\n  static readonly styles = [style];\n\n  /** Whether the element features a disclosure widget around the nav items */\n  @property({ reflect: true, type: Boolean }) expandable = false;\n\n  /** Whether the expandable element's disclosure widget is expanded */\n  @property({ reflect: true, type: Boolean }) expanded = false;\n\n  /** Whether the layout of children is vertical or horizontal. */\n  @property({ reflect: true, type: Boolean }) vertical = false;\n\n  /** Whether to center children. */\n  @property({ reflect: true, type: Boolean }) centered = false;\n\n  /** Offset to add to the scroll position, potentially for a masthead which content scrolls under. */\n  @property({ type: Number }) offset = 0;\n\n  /** Label to add to nav element. */\n  @property() label?: string;\n\n  #kids = this.querySelectorAll<LitElement>(':is(pf-jump-links-item, pf-jump-links-list)');\n\n  #tabindex?: RovingTabindexController<HTMLAnchorElement>;\n\n  #spy = new ScrollSpyController(this, {\n    rootMargin: `${this.offset}px 0px 0px 0px`,\n    tagNames: ['pf-jump-links-item'],\n  });\n\n  protected override async getUpdateComplete(): Promise<boolean> {\n    const here = await super.getUpdateComplete();\n    const ps = await Promise.all(Array.from(this.#kids, x => x.updateComplete));\n    return here && ps.every(x => !!x);\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('slotchange', this.#updateItems);\n    this.addEventListener('select', this.#onSelect);\n  }\n\n  override firstUpdated() {\n    this.#tabindex = new RovingTabindexController<HTMLAnchorElement>(this, {\n      getItems: () => {\n        const items = Array.from(this.#kids)\n          .flatMap(i => [\n            ...i.shadowRoot?.querySelectorAll('a') ?? [],\n            ...i.querySelectorAll('a') ?? [],\n          ]);\n        return items;\n      }\n    });\n    const active = this.querySelector<PfJumpLinksItem>('pf-jump-links-item[active]');\n    if (active) {\n      this.#setActiveItem(active);\n    }\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('offset')) {\n      this.#spy.rootMargin = `${this.offset ?? 0}px 0px 0px 0px`;\n    }\n  }\n\n  render() {\n    return html`\n      <nav id=\"container\">${this.expandable ? html`\n        <details ?open=\"${this.expanded}\" @toggle=\"${this.#onToggle}\">\n          <summary>\n            <pf-icon icon=\"chevron-right\"></pf-icon>\n            <span id=\"label\">${this.label}</span>\n          </summary>\n          <div role=\"listbox\" aria-labelledby=\"label\">\n            <slot></slot>\n          </div>\n        </details>` : html`\n        <span id=\"label\">${this.label}</span>\n        <div role=\"listbox\" aria-labelledby=\"label\">\n          <slot></slot>\n        </div>`}\n      </nav>\n    `;\n  }\n\n  #updateItems() {\n    this.#tabindex?.updateItems();\n  }\n\n  #onSelect(event: Event) {\n    if (event.target instanceof PfJumpLinksItem) {\n      this.#setActiveItem(event.target);\n    }\n  }\n\n  #setActiveItem(item: PfJumpLinksItem) {\n    this.#tabindex?.setActiveItem(item.shadowRoot?.querySelector('a') ?? undefined);\n    this.#spy.setActive(item);\n  }\n\n  #onToggle(event: Event) {\n    if (event.target instanceof HTMLDetailsElement) {\n      this.expanded = event.target.open;\n    }\n    this.dispatchEvent(new Event('toggle'));\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-jump-links': PfJumpLinks;\n  }\n}\n"]}
+{"version":3,"file":"pf-jump-links.js","sourceRoot":"","sources":["pf-jump-links.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { ScrollSpyController } from '@patternfly/pfe-core/controllers/scroll-spy-controller.js';\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\n\nimport { PfJumpLinksItem } from './pf-jump-links-item.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nimport style from './pf-jump-links.css';\n\n/**\n * **Jump links** allow users to navigate to sections within a page.\n * @fires toggle - when the `expanded` disclosure widget is toggled\n * @slot - Place pf-jump-links-items here\n * @cssprop --pf-c-jump-links__list--Display\n * @cssprop --pf-c-jump-links__list--FlexDirection\n * @cssprop --pf-c-jump-links__list--PaddingTop -- padding around the list of links\n * @cssprop --pf-c-jump-links__list--PaddingRight\n * @cssprop --pf-c-jump-links__list--PaddingBottom\n * @cssprop --pf-c-jump-links__list--PaddingLeft\n * @cssprop --pf-c-jump-links__list--Visibility\n * @cssprop --pf-c-jump-links__list--before--BorderColor\n * @cssprop --pf-c-jump-links__list--before--BorderTopWidth\n * @cssprop --pf-c-jump-links__list--before--BorderRightWidth\n * @cssprop --pf-c-jump-links__list--before--BorderBottomWidth\n * @cssprop --pf-c-jump-links__list--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links__toggle--MarginBottom--base\n * @cssprop --pf-c-jump-links__toggle--MarginTop -- padding around the expandable jump links disclosure widget.\n * @cssprop --pf-c-jump-links__toggle--MarginBottom\n * @cssprop --pf-c-jump-links__toggle--MarginBottom--base\n * @cssprop --pf-c-jump-links__toggle--MarginLeft\n * @cssprop --pf-c-jump-links__toggle-text--Color\n * @cssprop --pf-c-button--PaddingTop -- padding around the expandable jump links disclosure widget.\n * @cssprop --pf-c-button--PaddingRight\n * @cssprop --pf-c-button--PaddingBottom\n * @cssprop --pf-c-button--PaddingLeft\n * @cssprop --pf-c-jump-links__toggle-icon--Rotate\n * @cssprop --pf-c-jump-links__toggle-icon--Transition\n * @cssprop --pf-c-jump-links__toggle-text--MarginLeft\n * @cssprop --pf-c-jump-links--m-expanded__toggle--MarginBottom\n * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Rotate\n * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Color\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingTop\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingRight\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingBottom\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingLeft\n * @cssprop --pf-c-jump-links--m-vertical__list--before--BorderTopWidth\n * @cssprop --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth\n * @cssprop --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links--m-vertical__list--FlexDirection\n */\n@customElement('pf-jump-links')\nexport class PfJumpLinks extends LitElement {\n  static readonly styles = [style];\n\n  /** Whether the element features a disclosure widget around the nav items */\n  @property({ reflect: true, type: Boolean }) expandable = false;\n\n  /** Whether the expandable element's disclosure widget is expanded */\n  @property({ reflect: true, type: Boolean }) expanded = false;\n\n  /** Whether the layout of children is vertical or horizontal. */\n  @property({ reflect: true, type: Boolean }) vertical = false;\n\n  /** Whether to center children. */\n  @property({ reflect: true, type: Boolean }) centered = false;\n\n  /** Offset to add to the scroll position, potentially for a masthead which content scrolls under. */\n  @property({ type: Number }) offset = 0;\n\n  /** Label to add to nav element. */\n  @property() label?: string;\n\n  #kids = this.querySelectorAll<LitElement>(':is(pf-jump-links-item, pf-jump-links-list)');\n\n  #tabindex?: RovingTabindexController<HTMLAnchorElement>;\n\n  #spy = new ScrollSpyController(this, {\n    rootMargin: `${this.offset}px 0px 0px 0px`,\n    tagNames: ['pf-jump-links-item'],\n  });\n\n  protected override async getUpdateComplete(): Promise<boolean> {\n    const here = await super.getUpdateComplete();\n    const ps = await Promise.all(Array.from(this.#kids, x => x.updateComplete));\n    return here && ps.every(x => !!x);\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('slotchange', this.#updateItems);\n    this.addEventListener('select', this.#onSelect);\n  }\n\n  override firstUpdated() {\n    this.#tabindex = new RovingTabindexController<HTMLAnchorElement>(this, {\n      getItems: () => {\n        const items = Array.from(this.#kids)\n            .flatMap(i => [\n              ...i.shadowRoot?.querySelectorAll('a') ?? [],\n              ...i.querySelectorAll('a') ?? [],\n            ]);\n        return items;\n      },\n    });\n    const active = this.querySelector<PfJumpLinksItem>('pf-jump-links-item[active]');\n    if (active) {\n      this.#setActiveItem(active);\n    }\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('offset')) {\n      this.#spy.rootMargin = `${this.offset ?? 0}px 0px 0px 0px`;\n    }\n  }\n\n  render() {\n    return html`\n      <nav id=\"container\">${this.expandable ? html`\n        <details ?open=\"${this.expanded}\" @toggle=\"${this.#onToggle}\">\n          <summary>\n            <pf-icon icon=\"chevron-right\"></pf-icon>\n            <span id=\"label\">${this.label}</span>\n          </summary>\n          <div role=\"listbox\" aria-labelledby=\"label\">\n            <slot></slot>\n          </div>\n        </details>` : html`\n        <span id=\"label\">${this.label}</span>\n        <div role=\"listbox\" aria-labelledby=\"label\">\n          <slot></slot>\n        </div>`}\n      </nav>\n    `;\n  }\n\n  #updateItems() {\n    this.#tabindex?.updateItems();\n  }\n\n  #onSelect(event: Event) {\n    if (event.target instanceof PfJumpLinksItem) {\n      this.#setActiveItem(event.target);\n    }\n  }\n\n  #setActiveItem(item: PfJumpLinksItem) {\n    this.#tabindex?.setActiveItem(item.shadowRoot?.querySelector('a') ?? undefined);\n    this.#spy.setActive(item);\n  }\n\n  #onToggle(event: Event) {\n    if (event.target instanceof HTMLDetailsElement) {\n      this.expanded = event.target.open;\n    }\n    this.dispatchEvent(new Event('toggle'));\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-jump-links': PfJumpLinks;\n  }\n}\n"]}

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

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

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

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

package/pf-jump-links/test/pf-jump-links.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-jump-links.e2e.js","sourceRoot":"","sources":["pf-jump-links.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,eAAe,CAAC;AAEhC,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,CAAC,EAAE,QAAQ,EAAE,mBAAmB,EAAE,CAAC,CAAC;QAChE,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-jump-links';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate({ selector: 'pf-jump-links-nav' });\n    await componentPage.snapshot();\n  });\n});\n"]}

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

@@ -0,0 +1 @@
+import '@patternfly/pfe-tools/test/stub-logger.js';

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

@@ -0,0 +1,85 @@
+import { expect, html, nextFrame } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { sendKeys } from '@web/test-runner-commands';
+import { PfJumpLinks } from '../pf-jump-links.js';
+import { PfJumpLinksItem } from '../pf-jump-links-item.js';
+import { PfJumpLinksList } from '../pf-jump-links-list.js';
+import '@patternfly/pfe-tools/test/stub-logger.js';
+import { allUpdates } from '@patternfly/pfe-tools/test/utils.js';
+describe('<pf-jump-links>', function () {
+    let element;
+    let firstItem;
+    let secondItem;
+    beforeEach(async function () {
+        element = await createFixture(html `
+      <pf-jump-links>
+        <pf-jump-links-item id="first">Inactive section</pf-jump-links-item>
+        <pf-jump-links-item id="second" active>Active section</pf-jump-links-item>
+        <pf-jump-links-item id="third">Inactive section</pf-jump-links-item>
+      </pf-jump-links>
+    `);
+        await allUpdates(element);
+        [firstItem, secondItem] = element.querySelectorAll('pf-jump-links-item');
+    });
+    it('imperatively instantiates', function () {
+        expect(document.createElement('pf-jump-links')).to.be.an.instanceof(PfJumpLinks);
+        expect(document.createElement('pf-jump-links-item')).to.be.an.instanceof(PfJumpLinksItem);
+        expect(document.createElement('pf-jump-links-list')).to.be.an.instanceof(PfJumpLinksList);
+    });
+    describe('tabbing to first item', function () {
+        let initialActiveElement;
+        beforeEach(async function () {
+            initialActiveElement = document.activeElement;
+            await sendKeys({ press: 'Tab' });
+            await nextFrame();
+        });
+        it('should focus the first jump-links-item', function () {
+            expect(document.activeElement).to.equal(firstItem);
+        });
+        describe('pressing right arrow key', function () {
+            beforeEach(async function () {
+                await sendKeys({ press: 'ArrowRight' });
+                await allUpdates(element);
+                await nextFrame();
+            });
+            it('should focus a jump-links-item', function () {
+                expect(document.activeElement).to.be.an.instanceof(PfJumpLinksItem);
+            });
+            it('should change focus when keyboard navigation is used', function () {
+                expect(document.activeElement).to.not.equal(initialActiveElement);
+            });
+            it('should focus the second jump links item', function () {
+                expect(document.activeElement).to.equal(secondItem);
+            });
+        });
+    });
+});
+describe('<pf-jump-links-item>', function () {
+    let element;
+    beforeEach(async function () {
+        element = await createFixture(html `
+      <pf-jump-links-item></pf-jump-links-item>
+    `);
+    });
+    it('should upgrade', async function () {
+        expect(element)
+            .to.be.an.instanceof(customElements.get('pf-jump-links-item'))
+            .and
+            .to.be.an.instanceof(PfJumpLinksItem);
+    });
+});
+describe('<pf-jump-links-list>', function () {
+    let element;
+    beforeEach(async function () {
+        element = await createFixture(html `
+      <pf-jump-links-list></pf-jump-links-list>
+    `);
+    });
+    it('should upgrade', async function () {
+        expect(element)
+            .to.be.an.instanceof(customElements.get('pf-jump-links-list'))
+            .and
+            .to.be.an.instanceof(PfJumpLinksList);
+    });
+});
+//# sourceMappingURL=pf-jump-links.spec.js.map

package/pf-jump-links/test/pf-jump-links.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-jump-links.spec.js","sourceRoot":"","sources":["pf-jump-links.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, html, nextFrame } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { sendKeys } from '@web/test-runner-commands';\n\nimport { PfJumpLinks } from '../pf-jump-links.js';\nimport { PfJumpLinksItem } from '../pf-jump-links-item.js';\nimport { PfJumpLinksList } from '../pf-jump-links-list.js';\n\nimport '@patternfly/pfe-tools/test/stub-logger.js';\nimport { allUpdates } from '@patternfly/pfe-tools/test/utils.js';\n\ndescribe('<pf-jump-links>', function() {\n  let element: PfJumpLinks;\n  let firstItem: PfJumpLinksItem;\n  let secondItem: PfJumpLinksItem;\n\n  beforeEach(async function() {\n    element = await createFixture<PfJumpLinks>(html`\n      <pf-jump-links>\n        <pf-jump-links-item id=\"first\">Inactive section</pf-jump-links-item>\n        <pf-jump-links-item id=\"second\" active>Active section</pf-jump-links-item>\n        <pf-jump-links-item id=\"third\">Inactive section</pf-jump-links-item>\n      </pf-jump-links>\n    `);\n    await allUpdates(element);\n    [firstItem, secondItem] = element.querySelectorAll<PfJumpLinksItem>('pf-jump-links-item');\n  });\n\n  it('imperatively instantiates', function() {\n    expect(document.createElement('pf-jump-links')).to.be.an.instanceof(PfJumpLinks);\n    expect(document.createElement('pf-jump-links-item')).to.be.an.instanceof(PfJumpLinksItem);\n    expect(document.createElement('pf-jump-links-list')).to.be.an.instanceof(PfJumpLinksList);\n  });\n\n  describe('tabbing to first item', function() {\n    let initialActiveElement: Element | null;\n    beforeEach(async function() {\n      initialActiveElement = document.activeElement;\n      await sendKeys({ press: 'Tab' });\n      await nextFrame();\n    });\n\n    it('should focus the first jump-links-item', function() {\n      expect(document.activeElement).to.equal(firstItem);\n    });\n\n    describe('pressing right arrow key', function() {\n      beforeEach(async function() {\n        await sendKeys({ press: 'ArrowRight' });\n        await allUpdates(element);\n        await nextFrame();\n      });\n      it('should focus a jump-links-item', function() {\n        expect(document.activeElement).to.be.an.instanceof(PfJumpLinksItem);\n      });\n      it('should change focus when keyboard navigation is used', function() {\n        expect(document.activeElement).to.not.equal(initialActiveElement);\n      });\n      it('should focus the second jump links item', function() {\n        expect(document.activeElement).to.equal(secondItem);\n      });\n    });\n  });\n});\n\ndescribe('<pf-jump-links-item>', function() {\n  let element: PfJumpLinksItem;\n\n  beforeEach(async function() {\n    element = await createFixture<PfJumpLinksItem>(html`\n      <pf-jump-links-item></pf-jump-links-item>\n    `);\n  });\n\n  it('should upgrade', async function() {\n    expect(element)\n        .to.be.an.instanceof(customElements.get('pf-jump-links-item'))\n        .and\n        .to.be.an.instanceof(PfJumpLinksItem);\n  });\n});\n\ndescribe('<pf-jump-links-list>', function() {\n  let element: PfJumpLinksList;\n\n  beforeEach(async function() {\n    element = await createFixture<PfJumpLinks>(html`\n      <pf-jump-links-list></pf-jump-links-list>\n    `);\n  });\n\n  it('should upgrade', async function() {\n    expect(element)\n        .to.be.an.instanceof(customElements.get('pf-jump-links-list'))\n        .and\n        .to.be.an.instanceof(PfJumpLinksList);\n  });\n});\n"]}

package/pf-label/BaseLabel.d.ts

@@ -10,7 +10,7 @@ export declare abstract class BaseLabel extends LitElement {
     abstract icon?: string;
     /** Represents the state of the anonymous and icon slots */
     protected slots: SlotController;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     /**
      * Fallback content for the icon slot. When the `icon` attribute is set, it
      * should render an icon corresponding to the value.

package/pf-label/pf-label.d.ts

@@ -5,82 +5,62 @@ export type LabelColor = ('blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red
 /**
  * The **label** component allows users to add specific element captions for user
  * clarity and convenience.
- *
  * @summary Allows users to display meta data in a stylized form.
- *
  * @fires close - when a removable label's close button is clicked
- *
  * @cssprop {<length>} --pf-c-label--FontSize   {@default `0.875em`}
- *
  * @cssprop {<length>} --pf-c-label--PaddingTop     {@default `0.25rem`}
  * @cssprop {<length>} --pf-c-label--PaddingRight   {@default `0.5rem`}
  * @cssprop {<length>} --pf-c-label--PaddingBottom  {@default `0.25rem`}
  * @cssprop {<length>} --pf-c-label--PaddingLeft    {@default `0.5rem`}
- *
  * @cssprop {<color>} --pf-c-label--Color           {@default `#151515`}
  * @cssprop {<color>} --pf-c-label--BackgroundColor {@default `#f5f5f5`}
- *
  * @cssprop {<length>} --pf-c-label--BorderRadius {@default `30em`}
- *
  * @cssprop {<length>} --pf-c-label__content--MaxWidth            {@default `100%`}
  * @cssprop {<color>} --pf-c-label__content--Color                {@default `#151515`}
  * @cssprop {<length>} --pf-c-label__content--before--BorderWidth {@default `1px`}
  * @cssprop {<color>} --pf-c-label__content--before--BorderColor  {@default `#d2d2d2`}
- *
  * @cssprop {<color>} --pf-c-label--m-outline__content--Color  {@default `#151515`}
  * @cssprop {<color>} --pf-c-label--m-outline--BackgroundColor {@default `#ffffff`}
- *
  * @cssprop {<color>} --pf-c-label--m-blue__content--Color                {@default `#002952`}
  * @cssprop {<color>} --pf-c-label--m-blue--BackgroundColor               {@default `#e7f1fa`}
  * @cssprop {<color>} --pf-c-label--m-blue__content--before--BorderColor  {@default `#bee1f4`}
  * @cssprop {<color>} --pf-c-label--m-outline--m-blue__content--Color      {@default `#06c`}
- *
  * @cssprop {<color>} --pf-c-label--m-cyan__content--Color                {@default `#3b1f00`}
  * @cssprop {<color>} --pf-c-label--m-cyan--BackgroundColor               {@default `#f2f9f9`}
  * @cssprop {<color>} --pf-c-label--m-cyan__content--before--BorderColor  {@default `#a2d9d9`}
  * @cssprop {<color>} --pf-c-label--m-outline--m-cyan__content--Color      {@default `#005f60`}
- *
  * @cssprop {<color>} --pf-c-label--m-green__content--Color                {@default `#1e4f18`}
  * @cssprop {<color>} --pf-c-label--m-green--BackgroundColor               {@default `#f3faf2`}
  * @cssprop {<color>} --pf-c-label--m-green__content--before--BorderColor  {@default `#bde5b8`}
  * @cssprop {<color>} --pf-c-label--m-outline--m-green__content--Color     {@default `#3e8635`}
- *
  * @cssprop {<color>} --pf-c-label--m-orange__content--Color                {@default `#003737`}
  * @cssprop {<color>} --pf-c-label--m-orange--BackgroundColor               {@default `#fff6ec`}
  * @cssprop {<color>} --pf-c-label--m-orange__content--before--BorderColor  {@default `#f4b678`}
  * @cssprop {<color>} --pf-c-label--m-outline--m-orange__content--Color     {@default `#8f4700`}
- *
  * @cssprop {<color>} --pf-c-label--m-purple__content--Color                {@default `#1f0066`}
  * @cssprop {<color>} --pf-c-label--m-purple--BackgroundColor               {@default `#f2f0fc`}
  * @cssprop {<color>} --pf-c-label--m-purple__content--before--BorderColor  {@default `#cbc1ff`}
  * @cssprop {<color>} --pf-c-label--m-outline--m-purple__content--Color     {@default `#6753ac`}
- *
  * @cssprop {<color>} --pf-c-label--m-red__content--Color                {@default `#7d1007`}
  * @cssprop {<color>} --pf-c-label--m-red--BackgroundColor               {@default `#faeae8`}
  * @cssprop {<color>} --pf-c-label--m-red__content--before--BorderColor  {@default `#c9190b`}
  * @cssprop {<color>} --pf-c-label--m-outline--m-red__content--Color     {@default `#c9190b`}
- *
  * @cssprop {<color>} --pf-c-label--m-gold__content--Color                {@default `#3d2c00`}
  * @cssprop {<color>} --pf-c-label--m-gold--BackgroundColor               {@default `#fdf7e7`}
  * @cssprop {<color>} --pf-c-label--m-gold__content--before--BorderColor  {@default `#f9e0a2`}
  * @cssprop {<color>} --pf-c-label--m-outline--m-gold__content--Color     {@default `#795600`}
-
  * @cssprop {<color>} --pf-c-label--m-blue__icon--Color {@default `#06c`}
  * @cssprop {<color>} --pf-c-label--m-cyan__icon--Color {@default `#009596`}
  * @cssprop {<color>} --pf-c-label--m-green__icon--Color {@default `#3e8635`}
  * @cssprop {<color>} --pf-c-label--m-orange__icon--Color {@default `#ec7a08`}
  * @cssprop {<color>} --pf-c-label--m-red__icon--Color {@default `#c9190b`}
  * @cssprop {<color>} --pf-c-label--m-gold__icon--Color {@default `#f0ab00`}
- *
  * @csspart icon - container for the label icon
  * @csspart close-button - container for removable labels' close button
- *
  * @slot icon
  *       Contains the labels's icon, e.g. web-icon-alert-success.
- *
  * @slot
  *       Must contain the text for the label.
- *
  * @cssprop {<length>} --pf-c-label--m-compact--PaddingTop     {@default `0`}
  * @cssprop {<length>} --pf-c-label--m-compact--PaddingRight   {@default `0.5rem`}
  * @cssprop {<length>} --pf-c-label--m-compact--PaddingBottom  {@default `0`}
@@ -88,7 +68,13 @@ export type LabelColor = ('blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red
  */
 export declare class PfLabel extends BaseLabel {
     static readonly styles: CSSStyleSheet[];
-    static readonly shadowRootOptions: ShadowRootInit;
+    static readonly shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+        customElements?: CustomElementRegistry | undefined;
+        registry?: CustomElementRegistry | undefined;
+    };
     /**
      * Changes the style of the label.
      * - Filled: Colored background with colored border.
@@ -109,9 +95,9 @@ export declare class PfLabel extends BaseLabel {
     removable: boolean;
     /** Text label for a removable label's close button */
     closeButtonLabel?: string;
-    render(): import("lit").TemplateResult<1>;
-    protected renderDefaultIcon(): import("lit").TemplateResult<1> | "";
-    protected renderSuffix(): import("lit").TemplateResult<1> | "";
+    render(): import("lit-html").TemplateResult<1>;
+    protected renderDefaultIcon(): import("lit-html").TemplateResult<1> | "";
+    protected renderSuffix(): import("lit-html").TemplateResult<1> | "";
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-label/pf-label.js

@@ -11,82 +11,62 @@ const styles = css `#pf-container {\n  display: contents;\n}\n\n#container {\n
 /**
  * The **label** component allows users to add specific element captions for user
  * clarity and convenience.
- *
  * @summary Allows users to display meta data in a stylized form.
- *
  * @fires close - when a removable label's close button is clicked
- *
  * @cssprop {<length>} --pf-c-label--FontSize   {@default `0.875em`}
- *
  * @cssprop {<length>} --pf-c-label--PaddingTop     {@default `0.25rem`}
  * @cssprop {<length>} --pf-c-label--PaddingRight   {@default `0.5rem`}
  * @cssprop {<length>} --pf-c-label--PaddingBottom  {@default `0.25rem`}
  * @cssprop {<length>} --pf-c-label--PaddingLeft    {@default `0.5rem`}
- *
  * @cssprop {<color>} --pf-c-label--Color           {@default `#151515`}
  * @cssprop {<color>} --pf-c-label--BackgroundColor {@default `#f5f5f5`}
- *
  * @cssprop {<length>} --pf-c-label--BorderRadius {@default `30em`}
- *
  * @cssprop {<length>} --pf-c-label__content--MaxWidth            {@default `100%`}
  * @cssprop {<color>} --pf-c-label__content--Color                {@default `#151515`}
  * @cssprop {<length>} --pf-c-label__content--before--BorderWidth {@default `1px`}
  * @cssprop {<color>} --pf-c-label__content--before--BorderColor  {@default `#d2d2d2`}
- *
  * @cssprop {<color>} --pf-c-label--m-outline__content--Color  {@default `#151515`}
  * @cssprop {<color>} --pf-c-label--m-outline--BackgroundColor {@default `#ffffff`}
- *
  * @cssprop {<color>} --pf-c-label--m-blue__content--Color                {@default `#002952`}
  * @cssprop {<color>} --pf-c-label--m-blue--BackgroundColor               {@default `#e7f1fa`}
  * @cssprop {<color>} --pf-c-label--m-blue__content--before--BorderColor  {@default `#bee1f4`}
  * @cssprop {<color>} --pf-c-label--m-outline--m-blue__content--Color      {@default `#06c`}
- *
  * @cssprop {<color>} --pf-c-label--m-cyan__content--Color                {@default `#3b1f00`}
  * @cssprop {<color>} --pf-c-label--m-cyan--BackgroundColor               {@default `#f2f9f9`}
  * @cssprop {<color>} --pf-c-label--m-cyan__content--before--BorderColor  {@default `#a2d9d9`}
  * @cssprop {<color>} --pf-c-label--m-outline--m-cyan__content--Color      {@default `#005f60`}
- *
  * @cssprop {<color>} --pf-c-label--m-green__content--Color                {@default `#1e4f18`}
  * @cssprop {<color>} --pf-c-label--m-green--BackgroundColor               {@default `#f3faf2`}
  * @cssprop {<color>} --pf-c-label--m-green__content--before--BorderColor  {@default `#bde5b8`}
  * @cssprop {<color>} --pf-c-label--m-outline--m-green__content--Color     {@default `#3e8635`}
- *
  * @cssprop {<color>} --pf-c-label--m-orange__content--Color                {@default `#003737`}
  * @cssprop {<color>} --pf-c-label--m-orange--BackgroundColor               {@default `#fff6ec`}
  * @cssprop {<color>} --pf-c-label--m-orange__content--before--BorderColor  {@default `#f4b678`}
  * @cssprop {<color>} --pf-c-label--m-outline--m-orange__content--Color     {@default `#8f4700`}
- *
  * @cssprop {<color>} --pf-c-label--m-purple__content--Color                {@default `#1f0066`}
  * @cssprop {<color>} --pf-c-label--m-purple--BackgroundColor               {@default `#f2f0fc`}
  * @cssprop {<color>} --pf-c-label--m-purple__content--before--BorderColor  {@default `#cbc1ff`}
  * @cssprop {<color>} --pf-c-label--m-outline--m-purple__content--Color     {@default `#6753ac`}
- *
  * @cssprop {<color>} --pf-c-label--m-red__content--Color                {@default `#7d1007`}
  * @cssprop {<color>} --pf-c-label--m-red--BackgroundColor               {@default `#faeae8`}
  * @cssprop {<color>} --pf-c-label--m-red__content--before--BorderColor  {@default `#c9190b`}
  * @cssprop {<color>} --pf-c-label--m-outline--m-red__content--Color     {@default `#c9190b`}
- *
  * @cssprop {<color>} --pf-c-label--m-gold__content--Color                {@default `#3d2c00`}
  * @cssprop {<color>} --pf-c-label--m-gold--BackgroundColor               {@default `#fdf7e7`}
  * @cssprop {<color>} --pf-c-label--m-gold__content--before--BorderColor  {@default `#f9e0a2`}
  * @cssprop {<color>} --pf-c-label--m-outline--m-gold__content--Color     {@default `#795600`}
-
  * @cssprop {<color>} --pf-c-label--m-blue__icon--Color {@default `#06c`}
  * @cssprop {<color>} --pf-c-label--m-cyan__icon--Color {@default `#009596`}
  * @cssprop {<color>} --pf-c-label--m-green__icon--Color {@default `#3e8635`}
  * @cssprop {<color>} --pf-c-label--m-orange__icon--Color {@default `#ec7a08`}
  * @cssprop {<color>} --pf-c-label--m-red__icon--Color {@default `#c9190b`}
  * @cssprop {<color>} --pf-c-label--m-gold__icon--Color {@default `#f0ab00`}
- *
  * @csspart icon - container for the label icon
  * @csspart close-button - container for removable labels' close button
- *
  * @slot icon
  *       Contains the labels's icon, e.g. web-icon-alert-success.
- *
  * @slot
  *       Must contain the text for the label.
- *
  * @cssprop {<length>} --pf-c-label--m-compact--PaddingTop     {@default `0`}
  * @cssprop {<length>} --pf-c-label--m-compact--PaddingRight   {@default `0.5rem`}
  * @cssprop {<length>} --pf-c-label--m-compact--PaddingBottom  {@default `0`}
@@ -138,7 +118,10 @@ let PfLabel = class PfLabel extends BaseLabel {
     }
 };
 PfLabel.styles = [...BaseLabel.styles, styles];
-PfLabel.shadowRootOptions = { ...BaseLabel.shadowRootOptions, delegatesFocus: true };
+PfLabel.shadowRootOptions = {
+    ...BaseLabel.shadowRootOptions,
+    delegatesFocus: true,
+};
 __decorate([
     property()
 ], PfLabel.prototype, "variant", void 0);