@patternfly/elements 4.1.0 → 4.3.0

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

@@ -0,0 +1,87 @@
+import { expect, html } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { PfHint } from '@patternfly/elements/pf-hint/pf-hint.js';
+import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+describe('<pf-hint>', function () {
+    describe('simply instantiating', function () {
+        it('imperatively instantiates', function () {
+            expect(document.createElement('pf-hint')).to.be.an.instanceof(PfHint);
+        });
+        it('should upgrade', async function () {
+            const el = await createFixture(html `
+        <pf-hint>Basic hint</pf-hint>
+      `);
+            const klass = customElements.get('pf-hint');
+            expect(el)
+                .to.be.an.instanceOf(klass)
+                .and
+                .to.be.an.instanceOf(PfHint);
+        });
+    });
+    describe('basic hint', function () {
+        let element;
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-hint>Welcome to the new documentation experience.</pf-hint>
+      `);
+        });
+        it('should render body content, and not title footer, or actions', async function () {
+            const snap = await a11ySnapshot();
+            expect(snap.children?.length).to.equal(1);
+        });
+    });
+    describe('hint with title', function () {
+        let element;
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-hint>
+          <span slot="title">Do more with Find it Fix it capabilities</span>
+          Upgrade to Red Hat Smart Management.
+        </pf-hint>
+      `);
+            await element.updateComplete;
+        });
+        it('should render title and body content', async function () {
+            const snap = await a11ySnapshot();
+            expect(snap.children?.length).to.equal(2);
+        });
+    });
+    describe('hint with footer', function () {
+        let element;
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-hint>
+          <span slot="title">Do more with Find it Fix it capabilities</span>
+          Upgrade to Red Hat Smart Management.
+          <a slot="footer" href="#">Try it for 90 days</a>
+        </pf-hint>
+      `);
+            await element.updateComplete;
+        });
+        it('should render footer', function () {
+            const footer = element.shadowRoot.querySelector('#footer');
+            expect(footer).to.exist;
+        });
+    });
+    describe('hint with actions', function () {
+        let element;
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-hint>
+          <button slot="actions" aria-label="Actions">⋮</button>
+          <span slot="title">Do more with Find it Fix it capabilities</span>
+          Upgrade to Red Hat Smart Management.
+        </pf-hint>
+      `);
+            await element.updateComplete;
+        });
+        it('should render title, body, and actions', async function () {
+            const { children: [actions, title, body, ...rest] = [] } = await a11ySnapshot();
+            expect(actions.role).to.equal('button');
+            expect(title.role).to.equal('text');
+            expect(body.role).to.equal('text');
+            expect(rest.length).to.equal(0);
+        });
+    });
+});
+//# sourceMappingURL=pf-hint.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-hint.spec.js","sourceRoot":"","sources":["pf-hint.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, html } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { PfHint } from '@patternfly/elements/pf-hint/pf-hint.js';\nimport { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';\n\ndescribe('<pf-hint>', function() {\n  describe('simply instantiating', function() {\n    it('imperatively instantiates', function() {\n      expect(document.createElement('pf-hint')).to.be.an.instanceof(PfHint);\n    });\n\n    it('should upgrade', async function() {\n      const el = await createFixture<PfHint>(html`\n        <pf-hint>Basic hint</pf-hint>\n      `);\n      const klass = customElements.get('pf-hint');\n      expect(el)\n          .to.be.an.instanceOf(klass)\n          .and\n          .to.be.an.instanceOf(PfHint);\n    });\n  });\n\n  describe('basic hint', function() {\n    let element: PfHint;\n    beforeEach(async function() {\n      element = await createFixture<PfHint>(html`\n        <pf-hint>Welcome to the new documentation experience.</pf-hint>\n      `);\n    });\n\n    it('should render body content, and not title footer, or actions', async function() {\n      const snap = await a11ySnapshot();\n      expect(snap.children?.length).to.equal(1);\n    });\n  });\n\n  describe('hint with title', function() {\n    let element: PfHint;\n    beforeEach(async function() {\n      element = await createFixture<PfHint>(html`\n        <pf-hint>\n          <span slot=\"title\">Do more with Find it Fix it capabilities</span>\n          Upgrade to Red Hat Smart Management.\n        </pf-hint>\n      `);\n      await element.updateComplete;\n    });\n\n    it('should render title and body content', async function() {\n      const snap = await a11ySnapshot();\n      expect(snap.children?.length).to.equal(2);\n    });\n  });\n\n  describe('hint with footer', function() {\n    let element: PfHint;\n    beforeEach(async function() {\n      element = await createFixture<PfHint>(html`\n        <pf-hint>\n          <span slot=\"title\">Do more with Find it Fix it capabilities</span>\n          Upgrade to Red Hat Smart Management.\n          <a slot=\"footer\" href=\"#\">Try it for 90 days</a>\n        </pf-hint>\n      `);\n      await element.updateComplete;\n    });\n\n    it('should render footer', function() {\n      const footer = element.shadowRoot!.querySelector('#footer');\n      expect(footer).to.exist;\n    });\n  });\n\n  describe('hint with actions', function() {\n    let element: PfHint;\n    beforeEach(async function() {\n      element = await createFixture<PfHint>(html`\n        <pf-hint>\n          <button slot=\"actions\" aria-label=\"Actions\">⋮</button>\n          <span slot=\"title\">Do more with Find it Fix it capabilities</span>\n          Upgrade to Red Hat Smart Management.\n        </pf-hint>\n      `);\n      await element.updateComplete;\n    });\n\n    it('should render title, body, and actions', async function() {\n      const { children: [actions, title, body, ...rest] = [] } = await a11ySnapshot();\n      expect(actions.role).to.equal('button');\n      expect(title.role).to.equal('text');\n      expect(body.role).to.equal('text');\n      expect(rest.length).to.equal(0);\n    });\n  });\n});\n"]}

package/pf-icon/pf-icon.css

@@ -26,6 +26,7 @@ svg {
 :host([size=xl]) #container { --_size: var(--pf-global--icon--FontSize--xl, 54px); }
 
 #container, svg {
+  /** size of the icon */
   width: var(--pf-icon--size, var(--_size));
   height: var(--pf-icon--size, var(--_size));
   min-width: var(--pf-icon--size, var(--_size));

package/pf-icon/pf-icon.d.ts

@@ -12,11 +12,9 @@ export declare class IconResolveError extends ErrorEvent {
 /**
  * An **icon** component is a container that allows for icons of varying dimensions to
  * seamlessly replace each other without shifting surrounding content.
- * @slot - Slotted content is used as a fallback in case the icon doesn't load
+ * @alias Icon
  * @fires load - Fired when an icon is loaded and rendered
  * @fires error - Fired when an icon fails to load
- * @csspart fallback - Container for the fallback (i.e. slotted) content
- * @cssprop {<length>} --pf-icon--size - size of the icon
  */
 export declare class PfIcon extends LitElement {
     #private;

package/pf-icon/pf-icon.js

@@ -6,7 +6,42 @@ import { property } from 'lit/decorators/property.js';
 import { state } from 'lit/decorators/state.js';
 import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 import { css } from "lit";
-const style = css `:host {\n  position: relative;\n  display:  inline-block;\n  line-height:  0;\n  height: fit-content !important;\n  width: fit-content !important;\n}\n\n#container {\n  display: grid;\n  grid-template: 1fr / 1fr;\n  place-content: center;\n}\n\n#container.content ::slotted(*) {\n  display: none;\n}\n\nsvg {\n  fill: currentcolor;\n}\n\n:host([size=sm]) #container { --_size: var(--pf-global--icon--FontSize--sm, 10px); }\n:host([size=md]) #container { --_size: var(--pf-global--icon--FontSize--md, 18px); }\n:host([size=lg]) #container { --_size: var(--pf-global--icon--FontSize--lg, 24px); }\n:host([size=xl]) #container { --_size: var(--pf-global--icon--FontSize--xl, 54px); }\n\n#container, svg {\n  width: var(--pf-icon--size, var(--_size));\n  height: var(--pf-icon--size, var(--_size));\n  min-width: var(--pf-icon--size, var(--_size));\n  min-height: var(--pf-icon--size, var(--_size));\n}\n\n`;
+const style = css `:host {
+  position: relative;
+  display:  inline-block;
+  line-height:  0;
+  height: fit-content !important;
+  width: fit-content !important;
+}
+
+#container {
+  display: grid;
+  grid-template: 1fr / 1fr;
+  place-content: center;
+}
+
+#container.content ::slotted(*) {
+  display: none;
+}
+
+svg {
+  fill: currentcolor;
+}
+
+:host([size=sm]) #container { --_size: var(--pf-global--icon--FontSize--sm, 10px); }
+:host([size=md]) #container { --_size: var(--pf-global--icon--FontSize--md, 18px); }
+:host([size=lg]) #container { --_size: var(--pf-global--icon--FontSize--lg, 24px); }
+:host([size=xl]) #container { --_size: var(--pf-global--icon--FontSize--xl, 54px); }
+
+#container, svg {
+  /** size of the icon */
+  width: var(--pf-icon--size, var(--_size));
+  height: var(--pf-icon--size, var(--_size));
+  min-width: var(--pf-icon--size, var(--_size));
+  min-height: var(--pf-icon--size, var(--_size));
+}
+
+`;
 /**
  * requestIdleCallback when available, requestAnimationFrame when not
  * @param f callback
@@ -94,8 +129,13 @@ let PfIcon = _a = class PfIcon extends LitElement {
     render() {
         const content = this.content ?? '';
         return html `
-      <div id="container" aria-hidden="true">${content}<span part="fallback"
-          ?hidden=${!!content}><slot></slot>
+      <div id="container" aria-hidden="true">${content}<!--
+         summary: Container for the fallback (i.e. slotted) content
+        -->
+        <span part="fallback"
+          ?hidden=${!!content}><!--
+           summary: Slotted content is used as a fallback in case the icon doesn't load
+        --><slot></slot>
         </span>
       </div>
     `;
@@ -187,7 +227,7 @@ PfIcon.instances = new Set();
  *          ```
  */
 PfIcon.resolve = PfIcon.defaultResolve;
-PfIcon.version = "4.1.0";
+PfIcon.version = "4.3.0";
 __decorate([
     property()
 ], PfIcon.prototype, "set", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"pf-icon.js","sourceRoot":"","sources":["pf-icon.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type PropertyValues, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\n\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport style from './pf-icon.css';\n\ntype Renderable = unknown;\n\nexport type IconResolverFunction = (set: string, icon: string) =>\n  Renderable | Promise<Renderable>;\n\n/**\n * requestIdleCallback when available, requestAnimationFrame when not\n * @param f callback\n */\nconst ric: typeof globalThis.requestIdleCallback =\n     globalThis.requestIdleCallback\n  ?? globalThis.requestAnimationFrame\n  ?? (async (f: () => void) => Promise.resolve().then(f));\n\n/** Fired when an icon fails to load */\nexport class IconResolveError extends ErrorEvent {\n  constructor(\n    set: string,\n    icon: string,\n    /** The original error when importing the icon module */\n    public originalError: Error\n  ) {\n    super('error', { message: `Could not load icon \"${icon}\" from set \"${set}\".` });\n  }\n}\n\n/**\n * An **icon** component is a container that allows for icons of varying dimensions to\n * seamlessly replace each other without shifting surrounding content.\n * @slot - Slotted content is used as a fallback in case the icon doesn't load\n * @fires load - Fired when an icon is loaded and rendered\n * @fires error - Fired when an icon fails to load\n * @csspart fallback - Container for the fallback (i.e. slotted) content\n * @cssprop {<length>} --pf-icon--size - size of the icon\n */\n@customElement('pf-icon')\nexport class PfIcon extends LitElement {\n  public static readonly styles: CSSStyleSheet[] = [style];\n\n  private static onIntersect: IntersectionObserverCallback = records =>\n    records.forEach(({ isIntersecting, target }) => {\n      const icon = target as PfIcon;\n      icon.#intersecting = isIntersecting;\n      ric(() => {\n        if (icon.#intersecting) {\n          icon.#load();\n        }\n      });\n    });\n\n  private static defaultResolve: IconResolverFunction = (set: string, icon: string): Renderable =>\n    import(`@patternfly/icons/${set}/${icon}.js`)\n        .then(mod => mod.default.cloneNode(true));\n\n  private static io = new IntersectionObserver(PfIcon.onIntersect);\n\n  private static resolvers = new Map<string, IconResolverFunction>();\n\n  private static instances = new Set<PfIcon>();\n\n  /**\n   * Register a new icon set\n   * @param setName - The name of the icon set\n   * @param resolver - A function that returns the URL of an icon\n   * @example returning a URL object\n   *          ```js\n   *          PfIcon.addIconSet('rh', (set, icon) =>\n   *            new URL(`./icons/${set}/${icon}.js`, import.meta.url));\n   *          ```\n   * @example returning a string\n   *          ```js\n   *          PfIcon.addIconSet('rh', (set, icon) =>\n   *            `/assets/icons/${set}/${icon}.js`);\n   *          ```\n   */\n  public static addIconSet(setName: string, resolver: IconResolverFunction): void {\n    if (typeof setName !== 'string') {\n      Logger.warn(`[${this.name}]: the first argument to addIconSet must be a string.`);\n    } else if (typeof resolver !== 'function') {\n      Logger.warn(`[${this.name}]: the second argument to addIconSet must be a function.`);\n    } else {\n      this.resolvers.set(setName, resolver);\n      for (const instance of this.instances) {\n        instance.#load();\n      }\n    }\n  }\n\n  /** Removes all added icon sets and resets resolve function */\n  public static reset(): void {\n    this.resolvers.clear();\n    this.resolve = this.defaultResolve;\n  }\n\n  /**\n   * Gets a renderable icon. Override this to customize how icons are resolved.\n   * @param set - The name of the icon set\n   * @param icon - The name of the icon\n   * @returns The icon content, a node or anything else which lit-html can render\n   * @example resolving an icon node from an icon module\n   *          ```js\n   *          PfIcon.resolve = (set, icon) =>\n   *            import(`/assets/icons/${set}/${icon}.js`)\n   *              .then(mod => mod.default.cloneNode(true));\n   *          ```\n   * @example resolving a named export from an icon collection module\n   *          ```js\n   *          PfIcon.resolve = (set, icon) =>\n   *            import(`/assets/icons.js`)\n   *              .then(module => module[icon]?.cloneNode(true));\n   *          ```\n   * @example resolving a new node from an svg file\n   *          ```js\n   *          const iconCacne = new Map();\n   *          function getCachedIconOrNewNode(set, icon, svg) {\n   *            const key = `${set}_${icon}`;\n   *            if (!iconCache.has(key)) {\n   *              const template = document.createElement('template');\n   *                    template.innerHTML = svg;\n   *              iconCache.set(key, template);\n   *            }\n   *            return iconCache.get(key);\n   *          }\n   *          PfIcon.resolve = (set, icon) =>\n   *            fetch(`/assets/icons/${set}/${icon}.svg`)\n   *              .then(response => response.text())\n   *              .then(svg => getCachedIconOrNewNode(set, icon, svg))\n   *              .then(node => node.content.cloneNode(true));\n   *          ```\n   */\n  public static resolve: IconResolverFunction = PfIcon.defaultResolve;\n\n  /** Icon set */\n  @property() set = 'fas';\n\n  /** Icon name */\n  @property({ reflect: true }) icon = '';\n\n  /** Size of the icon */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /**\n   * Controls how eager the element will be to load the icon data\n   * - `eager`: eagerly load the icon, blocking the main thread\n   * - `idle`: wait for the browser to attain an idle state before loading\n   * - `lazy` (default): wait for the element to enter the viewport before loading\n   */\n  @property() loading?: 'idle' | 'lazy' | 'eager' = 'lazy';\n\n  /** Icon content. Any value that lit can render */\n  @state() private content?: unknown;\n\n  #intersecting = false;\n\n  #logger = new Logger(this);\n\n  #lazyLoad() {\n    PfIcon.io.observe(this);\n    if (this.#intersecting) {\n      this.load();\n    }\n  }\n\n  #load() {\n    switch (this.loading) {\n      case 'idle': return void ric(() => this.load());\n      case 'lazy': return void this.#lazyLoad();\n      case 'eager': return void this.load();\n    }\n  }\n\n  async #contentChanged() {\n    await this.updateComplete;\n    this.dispatchEvent?.(new Event('load', { bubbles: true }));\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    PfIcon.instances.add(this);\n  }\n\n  willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('icon')) {\n      this.#load();\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    PfIcon.io.unobserve(this);\n    PfIcon.instances.delete(this);\n  }\n\n  render(): TemplateResult<1> {\n    const content = this.content ?? '';\n    return html`\n      <div id=\"container\" aria-hidden=\"true\">${content}<span part=\"fallback\"\n          ?hidden=${!!content}><slot></slot>\n        </span>\n      </div>\n    `;\n  }\n\n  protected async load(): Promise<void> {\n    const { set, icon } = this;\n    const resolver = PfIcon.resolvers.get(set) ?? PfIcon.resolve;\n    if (set && icon && typeof resolver === 'function') {\n      try {\n        this.content = await resolver(set, icon);\n        this.#contentChanged();\n      } catch (error: unknown) {\n        this.#logger.error((error as IconResolveError).message);\n        this.dispatchEvent?.(new IconResolveError(set, icon, error as Error));\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-icon': PfIcon;\n  }\n}\n"]}
+{"version":3,"file":"pf-icon.js","sourceRoot":"","sources":["pf-icon.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAA4C,MAAM,KAAK,CAAC;AACjF,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,4CAA4C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASpE;;;GAGG;AACH,MAAM,GAAG,GACJ,UAAU,CAAC,mBAAmB;OAC9B,UAAU,CAAC,qBAAqB;OAChC,CAAC,KAAK,EAAE,CAAa,EAAE,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;AAE1D,uCAAuC;AACvC,MAAM,OAAO,gBAAiB,SAAQ,UAAU;IAC9C,YACE,GAAW,EACX,IAAY;IACZ,wDAAwD;IACjD,aAAoB;QAE3B,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,wBAAwB,IAAI,eAAe,GAAG,IAAI,EAAE,CAAC,CAAC;QAFzE,kBAAa,GAAb,aAAa,CAAO;IAG7B,CAAC;CACF;AAUM,IAAM,MAAM,QAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;;QAgGL,eAAe;QACH,QAAG,GAAG,KAAK,CAAC;QAExB,gBAAgB;QACa,SAAI,GAAG,EAAE,CAAC;QAEvC,uBAAuB;QACM,SAAI,GAA8B,IAAI,CAAC;QAEpE;;;;;WAKG;QACS,YAAO,GAA+B,MAAM,CAAC;QAKzD,+BAAgB,KAAK,EAAC;QAEtB,yBAAU,IAAI,MAAM,CAAC,IAAI,CAAC,EAAC;;IA9F3B;;;;;;;;;;;;;;OAcG;IACI,MAAM,CAAC,UAAU,CAAC,OAAe,EAAE,QAA8B;QACtE,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;YAChC,MAAM,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,uDAAuD,CAAC,CAAC;QACpF,CAAC;aAAM,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;YAC1C,MAAM,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,0DAA0D,CAAC,CAAC;QACvF,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;YACtC,KAAK,MAAM,QAAQ,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBACtC,uBAAA,QAAQ,uCAAM,MAAd,QAAQ,CAAQ,CAAC;YACnB,CAAC;QACH,CAAC;IACH,CAAC;IAED,8DAA8D;IACvD,MAAM,CAAC,KAAK;QACjB,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;QACvB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;IACrC,CAAC;IAoFD,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAED,UAAU,CAAC,OAA6B;QACtC,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACxB,uBAAA,IAAI,uCAAM,MAAV,IAAI,CAAQ,CAAC;QACf,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,MAAM,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QAC1B,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAC;QACnC,OAAO,IAAI,CAAA;+CACgC,OAAO;;;;oBAIlC,CAAC,CAAC,OAAO;;;;;KAKxB,CAAC;IACJ,CAAC;IAES,KAAK,CAAC,IAAI;QAClB,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QAC3B,MAAM,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC;QAC7D,IAAI,GAAG,IAAI,IAAI,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;YAClD,IAAI,CAAC;gBACH,IAAI,CAAC,OAAO,GAAG,MAAM,QAAQ,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;gBACzC,uBAAA,IAAI,iDAAgB,MAApB,IAAI,CAAkB,CAAC;YACzB,CAAC;YAAC,OAAO,KAAc,EAAE,CAAC;gBACxB,uBAAA,IAAI,sBAAQ,CAAC,KAAK,CAAE,KAA0B,CAAC,OAAO,CAAC,CAAC;gBACxD,IAAI,CAAC,aAAa,EAAE,CAAC,IAAI,gBAAgB,CAAC,GAAG,EAAE,IAAI,EAAE,KAAc,CAAC,CAAC,CAAC;YACxE,CAAC;QACH,CAAC;IACH,CAAC;;;;;;IA/DC,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACxB,IAAI,uBAAA,IAAI,4BAAc,EAAE,CAAC;QACvB,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;AACH,CAAC;;IAGC,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;QACrB,KAAK,MAAM,CAAC,CAAC,OAAO,KAAK,GAAG,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAChD,KAAK,MAAM,CAAC,CAAC,OAAO,KAAK,uBAAA,IAAI,2CAAU,MAAd,IAAI,CAAY,CAAC;QAC1C,KAAK,OAAO,CAAC,CAAC,OAAO,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;IACxC,CAAC;AACH,CAAC;yBAED,KAAK;IACH,MAAM,IAAI,CAAC,cAAc,CAAC;IAC1B,IAAI,CAAC,aAAa,EAAE,CAAC,IAAI,KAAK,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;AAC7D,CAAC;AAzIsB,aAAM,GAAoB,CAAC,KAAK,CAAC,AAA3B,CAA4B;AAE1C,kBAAW,GAAiC,OAAO,CAAC,EAAE,CACnE,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,cAAc,EAAE,MAAM,EAAE,EAAE,EAAE;IAC7C,MAAM,IAAI,GAAG,MAAgB,CAAC;IAC9B,uBAAA,IAAI,wBAAiB,cAAc,MAAA,CAAC;IACpC,GAAG,CAAC,GAAG,EAAE;QACP,IAAI,uBAAA,IAAI,4BAAc,EAAE,CAAC;YACvB,uBAAA,IAAI,uCAAM,MAAV,IAAI,CAAQ,CAAC;QACf,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,AATsB,CASrB;AAEU,qBAAc,GAAyB,CAAC,GAAW,EAAE,IAAY,EAAc,EAAE,CAC9F,MAAM,CAAC,qBAAqB,GAAG,IAAI,IAAI,KAAK,CAAC;KACxC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,AAFlB,CAEmB;AAEjC,SAAE,GAAG,IAAI,oBAAoB,CAAC,MAAM,CAAC,WAAW,CAAC,AAA/C,CAAgD;AAElD,gBAAS,GAAG,IAAI,GAAG,EAAgC,AAA1C,CAA2C;AAEpD,gBAAS,GAAG,IAAI,GAAG,EAAU,AAApB,CAAqB;AAoC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACW,cAAO,GAAyB,MAAM,CAAC,cAAc,AAA9C,CAA+C;;AAGxD;IAAX,QAAQ,EAAE;mCAAa;AAGK;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAAW;AAGV;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAAwC;AAQxD;IAAX,QAAQ,EAAE;uCAA8C;AAGxC;IAAhB,KAAK,EAAE;uCAA2B;AAlHxB,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM","sourcesContent":["import { LitElement, html, type PropertyValues, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\n\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport style from './pf-icon.css';\n\ntype Renderable = unknown;\n\nexport type IconResolverFunction = (set: string, icon: string) =>\n  Renderable | Promise<Renderable>;\n\n/**\n * requestIdleCallback when available, requestAnimationFrame when not\n * @param f callback\n */\nconst ric: typeof globalThis.requestIdleCallback =\n     globalThis.requestIdleCallback\n  ?? globalThis.requestAnimationFrame\n  ?? (async (f: () => void) => Promise.resolve().then(f));\n\n/** Fired when an icon fails to load */\nexport class IconResolveError extends ErrorEvent {\n  constructor(\n    set: string,\n    icon: string,\n    /** The original error when importing the icon module */\n    public originalError: Error\n  ) {\n    super('error', { message: `Could not load icon \"${icon}\" from set \"${set}\".` });\n  }\n}\n\n/**\n * An **icon** component is a container that allows for icons of varying dimensions to\n * seamlessly replace each other without shifting surrounding content.\n * @alias Icon\n * @fires load - Fired when an icon is loaded and rendered\n * @fires error - Fired when an icon fails to load\n */\n@customElement('pf-icon')\nexport class PfIcon extends LitElement {\n  public static readonly styles: CSSStyleSheet[] = [style];\n\n  private static onIntersect: IntersectionObserverCallback = records =>\n    records.forEach(({ isIntersecting, target }) => {\n      const icon = target as PfIcon;\n      icon.#intersecting = isIntersecting;\n      ric(() => {\n        if (icon.#intersecting) {\n          icon.#load();\n        }\n      });\n    });\n\n  private static defaultResolve: IconResolverFunction = (set: string, icon: string): Renderable =>\n    import(`@patternfly/icons/${set}/${icon}.js`)\n        .then(mod => mod.default.cloneNode(true));\n\n  private static io = new IntersectionObserver(PfIcon.onIntersect);\n\n  private static resolvers = new Map<string, IconResolverFunction>();\n\n  private static instances = new Set<PfIcon>();\n\n  /**\n   * Register a new icon set\n   * @param setName - The name of the icon set\n   * @param resolver - A function that returns the URL of an icon\n   * @example returning a URL object\n   *          ```js\n   *          PfIcon.addIconSet('rh', (set, icon) =>\n   *            new URL(`./icons/${set}/${icon}.js`, import.meta.url));\n   *          ```\n   * @example returning a string\n   *          ```js\n   *          PfIcon.addIconSet('rh', (set, icon) =>\n   *            `/assets/icons/${set}/${icon}.js`);\n   *          ```\n   */\n  public static addIconSet(setName: string, resolver: IconResolverFunction): void {\n    if (typeof setName !== 'string') {\n      Logger.warn(`[${this.name}]: the first argument to addIconSet must be a string.`);\n    } else if (typeof resolver !== 'function') {\n      Logger.warn(`[${this.name}]: the second argument to addIconSet must be a function.`);\n    } else {\n      this.resolvers.set(setName, resolver);\n      for (const instance of this.instances) {\n        instance.#load();\n      }\n    }\n  }\n\n  /** Removes all added icon sets and resets resolve function */\n  public static reset(): void {\n    this.resolvers.clear();\n    this.resolve = this.defaultResolve;\n  }\n\n  /**\n   * Gets a renderable icon. Override this to customize how icons are resolved.\n   * @param set - The name of the icon set\n   * @param icon - The name of the icon\n   * @returns The icon content, a node or anything else which lit-html can render\n   * @example resolving an icon node from an icon module\n   *          ```js\n   *          PfIcon.resolve = (set, icon) =>\n   *            import(`/assets/icons/${set}/${icon}.js`)\n   *              .then(mod => mod.default.cloneNode(true));\n   *          ```\n   * @example resolving a named export from an icon collection module\n   *          ```js\n   *          PfIcon.resolve = (set, icon) =>\n   *            import(`/assets/icons.js`)\n   *              .then(module => module[icon]?.cloneNode(true));\n   *          ```\n   * @example resolving a new node from an svg file\n   *          ```js\n   *          const iconCacne = new Map();\n   *          function getCachedIconOrNewNode(set, icon, svg) {\n   *            const key = `${set}_${icon}`;\n   *            if (!iconCache.has(key)) {\n   *              const template = document.createElement('template');\n   *                    template.innerHTML = svg;\n   *              iconCache.set(key, template);\n   *            }\n   *            return iconCache.get(key);\n   *          }\n   *          PfIcon.resolve = (set, icon) =>\n   *            fetch(`/assets/icons/${set}/${icon}.svg`)\n   *              .then(response => response.text())\n   *              .then(svg => getCachedIconOrNewNode(set, icon, svg))\n   *              .then(node => node.content.cloneNode(true));\n   *          ```\n   */\n  public static resolve: IconResolverFunction = PfIcon.defaultResolve;\n\n  /** Icon set */\n  @property() set = 'fas';\n\n  /** Icon name */\n  @property({ reflect: true }) icon = '';\n\n  /** Size of the icon */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /**\n   * Controls how eager the element will be to load the icon data\n   * - `eager`: eagerly load the icon, blocking the main thread\n   * - `idle`: wait for the browser to attain an idle state before loading\n   * - `lazy` (default): wait for the element to enter the viewport before loading\n   */\n  @property() loading?: 'idle' | 'lazy' | 'eager' = 'lazy';\n\n  /** Icon content. Any value that lit can render */\n  @state() private content?: unknown;\n\n  #intersecting = false;\n\n  #logger = new Logger(this);\n\n  #lazyLoad() {\n    PfIcon.io.observe(this);\n    if (this.#intersecting) {\n      this.load();\n    }\n  }\n\n  #load() {\n    switch (this.loading) {\n      case 'idle': return void ric(() => this.load());\n      case 'lazy': return void this.#lazyLoad();\n      case 'eager': return void this.load();\n    }\n  }\n\n  async #contentChanged() {\n    await this.updateComplete;\n    this.dispatchEvent?.(new Event('load', { bubbles: true }));\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    PfIcon.instances.add(this);\n  }\n\n  willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('icon')) {\n      this.#load();\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    PfIcon.io.unobserve(this);\n    PfIcon.instances.delete(this);\n  }\n\n  render(): TemplateResult<1> {\n    const content = this.content ?? '';\n    return html`\n      <div id=\"container\" aria-hidden=\"true\">${content}<!--\n         summary: Container for the fallback (i.e. slotted) content\n        -->\n        <span part=\"fallback\"\n          ?hidden=${!!content}><!--\n           summary: Slotted content is used as a fallback in case the icon doesn't load\n        --><slot></slot>\n        </span>\n      </div>\n    `;\n  }\n\n  protected async load(): Promise<void> {\n    const { set, icon } = this;\n    const resolver = PfIcon.resolvers.get(set) ?? PfIcon.resolve;\n    if (set && icon && typeof resolver === 'function') {\n      try {\n        this.content = await resolver(set, icon);\n        this.#contentChanged();\n      } catch (error: unknown) {\n        this.#logger.error((error as IconResolveError).message);\n        this.dispatchEvent?.(new IconResolveError(set, icon, error as Error));\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-icon': PfIcon;\n  }\n}\n"]}

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

@@ -17,17 +17,23 @@ a {
   display: flex;
   cursor: pointer;
   flex: 1;
+  /** Top padding around the link */
   padding-block-start: var(--pf-c-jump-links__link--PaddingTop,
     var(--pf-global--spacer--md, 1rem));
+  /** Right padding around the link */
   padding-inline-end: var(--pf-c-jump-links__link--PaddingRight,
     var(--pf-global--spacer--md, 1rem));
+  /** Bottom padding around the link */
   padding-block-end: var(--pf-c-jump-links__link--PaddingBottom,
     var(--pf-global--spacer--md, 1rem));
+  /** Left padding around the link */
   padding-inline-start: var(--pf-c-jump-links__link--PaddingLeft,
     var(--pf-global--spacer--md, 1rem));
   text-decoration: none;
+  /** Outline offset for jump links link */
   outline-offset: var(--pf-c-jump-links__link--OutlineOffset,
     calc(-1 * var(--pf-global--spacer--sm, 0.5rem)));
+  /** Color for jump links link text */
   color: var(--pf-c-jump-links__link-text--Color,
     var(--pf-global--Color--200, #6a6e73));
 }
@@ -65,5 +71,5 @@ a:focus {
   --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor,
     var(--pf-global--primary-color--100, #06c));
   --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color,
-    pfvar(--pf-global--Color--100, #151515));
+    var(--pf-global--Color--100, #151515));
 }

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

@@ -1,12 +1,4 @@
 import { LitElement, type TemplateResult } from 'lit';
-/**
- * @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
- */
 export declare class PfJumpLinksItem extends LitElement {
     #private;
     static readonly styles: CSSStyleSheet[];

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

@@ -6,7 +6,82 @@ import { property } from 'lit/decorators/property.js';
 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`;
+const style = css `:host {
+  display: block;
+}
+
+#container {
+  display: contents;
+}
+
+slot:not([name]) {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--pf-global--spacer--md, 1rem);
+}
+
+a {
+  position: relative;
+  display: flex;
+  cursor: pointer;
+  flex: 1;
+  /** Top padding around the link */
+  padding-block-start: var(--pf-c-jump-links__link--PaddingTop,
+    var(--pf-global--spacer--md, 1rem));
+  /** Right padding around the link */
+  padding-inline-end: var(--pf-c-jump-links__link--PaddingRight,
+    var(--pf-global--spacer--md, 1rem));
+  /** Bottom padding around the link */
+  padding-block-end: var(--pf-c-jump-links__link--PaddingBottom,
+    var(--pf-global--spacer--md, 1rem));
+  /** Left padding around the link */
+  padding-inline-start: var(--pf-c-jump-links__link--PaddingLeft,
+    var(--pf-global--spacer--md, 1rem));
+  text-decoration: none;
+  /** Outline offset for jump links link */
+  outline-offset: var(--pf-c-jump-links__link--OutlineOffset,
+    calc(-1 * var(--pf-global--spacer--sm, 0.5rem)));
+  /** Color for jump links link text */
+  color: var(--pf-c-jump-links__link-text--Color,
+    var(--pf-global--Color--200, #6a6e73));
+}
+
+a::before {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  border-color: var(--pf-c-jump-links__link--before--BorderColor, transparent);
+  border-style: solid;
+  border-width:
+    var(--pf-c-jump-links__link--before--BorderTopWidth,
+      var(--pf-c-jump-links__list--before--BorderTopWidth,
+        var(--pf-global--BorderWidth--sm, 1px)))
+    var(--pf-c-jump-links__link--before--BorderRightWidth, 0)
+    var(--pf-c-jump-links__link--before--BorderBottomWidth, 0)
+    var(--pf-c-jump-links__link--before--BorderLeftWidth, 0);
+}
+
+a:hover {
+  --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--hover__link-text--Color,
+    var(--pf-global--Color--100, #151515));
+}
+
+a:focus {
+  --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--focus__link-text--Color,
+    var(--pf-global--Color--100, #151515));
+}
+
+:host([active]) {
+  --pf-c-jump-links__link--before--BorderTopWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth,
+    var(--pf-global--BorderWidth--lg, 3px));
+  --pf-c-jump-links__link--before--BorderLeftWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth, 0);
+  --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor,
+    var(--pf-global--primary-color--100, #06c));
+  --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color,
+    var(--pf-global--Color--100, #151515));
+}
+`;
 import { observes } from '@patternfly/pfe-core/decorators/observes.js';
 let PfJumpLinksItem = class PfJumpLinksItem extends LitElement {
     constructor() {
@@ -43,7 +118,7 @@ PfJumpLinksItem.shadowRootOptions = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
 };
-PfJumpLinksItem.version = "4.1.0";
+PfJumpLinksItem.version = "4.3.0";
 __decorate([
     property({ type: Boolean, reflect: true })
 ], PfJumpLinksItem.prototype, "active", void 0);

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,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"]}
+{"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;AAGhE,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@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.css

@@ -6,10 +6,13 @@
   display: contents;
   --pf-c-jump-links__list--PaddingTop: 0;
   --pf-c-jump-links__list--PaddingBottom: 0;
+  /** Top padding around each link */
   --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop,
     var(--pf-global--spacer--sm, 0.5rem));
+  /** Bottom padding around each link */
   --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom,
     var(--pf-global--spacer--sm, 0.5rem));
+  /** Left padding around each link */
   --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft,
     var(--pf-global--spacer--lg, 1.5rem));
 }

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

@@ -1,9 +1,4 @@
 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
- * @cssprop --pf-c-jump-links__list__list__link--PaddingLeft
- */
 export declare class PfJumpLinksList extends LitElement {
     static readonly styles: CSSStyleSheet[];
     render(): TemplateResult<1>;

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

@@ -2,7 +2,25 @@ import { __decorate } from "tslib";
 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`;
+const style = css `:host {
+  display: block;
+}
+
+#container {
+  display: contents;
+  --pf-c-jump-links__list--PaddingTop: 0;
+  --pf-c-jump-links__list--PaddingBottom: 0;
+  /** Top padding around each link */
+  --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop,
+    var(--pf-global--spacer--sm, 0.5rem));
+  /** Bottom padding around each link */
+  --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom,
+    var(--pf-global--spacer--sm, 0.5rem));
+  /** Left padding around each link */
+  --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft,
+    var(--pf-global--spacer--lg, 1.5rem));
+}
+`;
 let PfJumpLinksList = class PfJumpLinksList extends LitElement {
     render() {
         // TODO: add label
@@ -11,7 +29,7 @@ let PfJumpLinksList = class PfJumpLinksList extends LitElement {
     }
 };
 PfJumpLinksList.styles = [style];
-PfJumpLinksList.version = "4.1.0";
+PfJumpLinksList.version = "4.3.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,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"]}
+{"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;;;;;;;;;;;;;;;;;;;;;AAK1D,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@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.css

@@ -16,14 +16,21 @@
 
 slot {
   position: relative;
+  /** Controls the display type of the list container */
   display: var(--pf-c-jump-links__list--Display, flex);
+  /** Controls the direction of items in the list */
   flex-direction: var(--pf-c-jump-links__list--FlexDirection, row);
+  /** Padding around the list of links */
   padding-block-start: var(--pf-c-jump-links__list--PaddingTop, 0);
+  /** Right padding for the list */
   padding-inline-end: var(--pf-c-jump-links__list--PaddingRight,
     var(--pf-global--spacer--md, 1rem));
+  /** Bottom padding for the list */
   padding-block-end: var(--pf-c-jump-links__list--PaddingBottom, 0);
+  /** Left padding for the list */
   padding-inline-start: var(--pf-c-jump-links__list--PaddingLeft,
     var(--pf-global--spacer--md, 1rem));
+  /** Controls visibility of the list */
   visibility: var(--pf-c-jump-links__list--Visibility, visible);
 }
 
@@ -35,40 +42,54 @@ slot::before {
   left: 0;
   pointer-events: none;
   content: "";
+  /** Border color for the list pseudo-element */
   border: solid var(--pf-c-jump-links__list--before--BorderColor,
     var(--pf-global--BorderColor--100, #d2d2d2));
   border-width:
+    /** Top border width for the list pseudo-element */
     var(--pf-c-jump-links__list--before--BorderTopWidth,
       var(--pf-global--BorderWidth--sm, 1px))
+    /** Right border width for the list pseudo-element */
     var(--pf-c-jump-links__list--before--BorderRightWidth, 0)
+    /** Bottom border width for the list pseudo-element */
     var(--pf-c-jump-links__list--before--BorderBottomWidth, 0)
+    /** Left border width for the list pseudo-element */
     var(--pf-c-jump-links__list--before--BorderLeftWidth, 0);
 }
 
 :host([vertical]) #container {
+  /** Top padding for vertical layout */
   --pf-c-jump-links__list--PaddingTop:
     var(--pf-c-jump-links--m-vertical__list--PaddingTop,
       var(--pf-global--spacer--md, 1rem)
     );
+  /** Right padding for vertical layout */
   --pf-c-jump-links__list--PaddingRight:
     var(--pf-c-jump-links--m-vertical__list--PaddingRight,0);
+  /** Bottom padding for vertical layout */
   --pf-c-jump-links__list--PaddingBottom:
     var(--pf-c-jump-links--m-vertical__list--PaddingBottom,
       var(--pf-global--spacer--md, 1rem)
     );
+  /** Left padding for vertical layout */
   --pf-c-jump-links__list--PaddingLeft:
     var(--pf-c-jump-links--m-vertical__list--PaddingLeft, 0);
+  /** Top border width for vertical layout */
   --pf-c-jump-links__list--before--BorderTopWidth:
     var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth, 0);
+  /** Left border width for vertical layout */
   --pf-c-jump-links__list--before--BorderLeftWidth:
     var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth,
     var(--pf-global--BorderWidth--sm, 1px));
+  /** Top border width for current item in vertical layout */
   --pf-c-jump-links__item--m-current__link--before--BorderTopWidth:
     var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth, 0);
+  /** Left border width for current item in vertical layout */
   --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth:
     var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth,
       var(--pf-global--BorderWidth--lg, 3px)
     );
+  /** Flex direction for vertical layout */
   --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection, column);
 }
 
@@ -88,6 +109,7 @@ slot::before {
 }
 
 :host([expandable]) {
+  /** Base margin for the toggle button */
   --pf-c-jump-links--m-expanded__toggle--MarginBottom:
     calc(var(--pf-c-jump-links__toggle--MarginBottom--base,
       calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))
@@ -96,43 +118,57 @@ slot::before {
 
 summary {
   display: block;
+  /** Padding around the expandable jump links disclosure widget. */
   margin-block-start: var(--pf-c-jump-links__toggle--MarginTop,
     calc(-1 * var(--pf-global--spacer--form-element, 0.375rem)));
+  /** Bottom margin for the toggle */
   margin-block-end: var(--pf-c-jump-links__toggle--MarginBottom,
     var(--pf-c-jump-links__toggle--MarginBottom--base,
       calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))));
+  /** Left margin for the toggle */
   margin-inline-start: var(--pf-c-jump-links__toggle--MarginLeft);
+  /** Color of the toggle text */
   color: var(--pf-c-jump-links__toggle-text--Color,
     var(--pf-global--Color--100, #151515));
+  /** Padding around the expandable jump links disclosure widget. */
   padding:
     var(--pf-c-button--PaddingTop,
       var(--pf-global--spacer--form-element, 0.375rem))
+    /** Right padding for the button */
     var(--pf-c-button--PaddingRight,
       var(--pf-global--spacer--md, 1rem))
+    /** Bottom padding for the button */
     var(--pf-c-button--PaddingBottom,
       var(--pf-global--spacer--form-element, 0.375rem))
+    /** Left padding for the button */
     var(--pf-c-button--PaddingLeft,
       var(--pf-global--spacer--md, 1rem));
 }
 
 summary pf-icon {
+  /** Rotation angle for the toggle icon */
   rotate: var(--pf-c-jump-links__toggle-icon--Rotate, 0);
+  /** Transition for the toggle icon */
   transition: var(--pf-c-jump-links__toggle-icon--Transition,
     var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1)));
 }
 
 summary span {
+  /** Left margin for the toggle text */
   margin-inline-start: var(--pf-c-jump-links__toggle-text--MarginLeft,
     var(--pf-global--spacer--md, 1rem));
 }
 
 :host([expanded]) #container {
+  /** Bottom margin for expanded toggle */
   --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom,
     calc(var(--pf-c-jump-links__toggle--MarginBottom--base,
       calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))) +
       var(--pf-global--spacer--md, 1rem)));
+  /** Rotation for expanded toggle icon */
   --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate,
     90deg);
+  /** Color for expanded toggle icon */
   --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color,
     var(--pf-global--Color--100, #151515));
   --pf-c-jump-links__toggle-icon--Rotate: 90deg;