@patternfly/elements 2.4.0 → 3.0.1

package/pf-icon/BaseIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseIcon.js","sourceRoot":"","sources":["BaseIcon.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport style from './BaseIcon.css';\n\nexport type URLGetter = (set: string, icon: string) => URL | string;\n\n/** requestIdleCallback when available, requestAnimationFrame when not */\nconst ric = window.requestIdleCallback ?? window.requestAnimationFrame;\n\n/** Fired when an icon fails to load */\nclass IconLoadError extends ErrorEvent {\n  constructor(\n    pathname: string,\n    /** The original error when importing the icon module */\n    public originalError: Error\n  ) {\n    super('error', { message: `Could not load icon at ${pathname}` });\n  }\n}\n\n/**\n * Icon component lazy-loads icons and allows custom icon sets\n *\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 */\nexport abstract class BaseIcon extends LitElement {\n  public static readonly styles = [style];\n\n  public static addIconSet(setName: string, getter: typeof BaseIcon['getIconUrl']) {\n    if (typeof getter !== 'function') {\n      Logger.warn(`[${this.name}.addIconSet(setName, getter)]: getter must be a function`);\n    } else {\n      this.getters.set(setName, getter);\n      for (const instance of this.instances) {\n        instance.load();\n      }\n    }\n  }\n\n  public static getIconUrl: URLGetter = (set: string, icon: string) =>\n    new URL(`./icons/${set}/${icon}.js`, import.meta.url);\n\n  private static onIntersect: IntersectionObserverCallback = records =>\n    records.forEach(({ isIntersecting, target }) => {\n      const icon = target as BaseIcon;\n      icon.#intersecting = isIntersecting;\n      ric(() => {\n        if (icon.#intersecting) {\n          icon.load();\n        }\n      });\n    });\n\n  private static io = new IntersectionObserver(this.onIntersect);\n\n  private static getters = new Map<string, URLGetter>();\n\n  private static instances = new Set<BaseIcon>();\n\n  declare public static defaultIconSet: string;\n\n  /** Icon set */\n  @property() set = this.#class.defaultIconSet;\n\n  /** Icon name */\n  @property({ reflect: true }) icon = '';\n\n  /** Size of the icon */\n  abstract size: string;\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  get #class(): typeof BaseIcon {\n    return this.constructor as typeof BaseIcon;\n  }\n\n  #lazyLoad() {\n    this.#class.io.observe(this);\n    if (this.#intersecting) {\n      this.load();\n    }\n  }\n\n  #iconChanged() {\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  connectedCallback() {\n    super.connectedCallback();\n    this.#class.instances.add(this);\n  }\n\n  willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('icon')) {\n      this.#iconChanged();\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#class.instances.delete(this);\n  }\n\n  render() {\n    const content = this.content ?? ''; /* eslint-disable indent */\n    return html`\n      <div id=\"container\" aria-hidden=\"true\">${content\n       }<span part=\"fallback\" ?hidden=${!!content}>\n          <slot></slot>\n        </span>\n      </div>\n    `;/* eslint-enable indent */\n  }\n\n  protected async load() {\n    const { set, icon, } = this;\n    const getter = this.#class.getters.get(set) ?? this.#class.getIconUrl;\n    let spec = 'UNKNOWN ICON';\n    if (set && icon) {\n      try {\n        const gotten = getter(set, icon);\n        if (gotten instanceof URL) {\n          spec = gotten.pathname;\n        } else {\n          spec = gotten;\n        }\n        const mod = await import(spec);\n        this.content = mod.default instanceof Node ? mod.default.cloneNode(true) : mod.default;\n        await this.updateComplete;\n        this.dispatchEvent(new Event('load', { bubbles: true }));\n      } catch (error: unknown) {\n        const event = new IconLoadError(spec, error as Error);\n        this.#logger.error((error as IconLoadError).message);\n        this.dispatchEvent(event);\n      }\n    }\n  }\n}\n"]}
+{"version":3,"file":"BaseIcon.js","sourceRoot":"","sources":["BaseIcon.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport style from './BaseIcon.css';\n\nexport type URLGetter = (set: string, icon: string) => URL | string;\n\n/** requestIdleCallback when available, requestAnimationFrame when not */\nconst ric = window.requestIdleCallback ?? window.requestAnimationFrame;\n\n/** Fired when an icon fails to load */\nclass IconLoadError extends ErrorEvent {\n  constructor(\n    pathname: string,\n    /** The original error when importing the icon module */\n    public originalError: Error\n  ) {\n    super('error', { message: `Could not load icon at ${pathname}` });\n  }\n}\n\n/**\n * Icon component lazy-loads icons and allows custom icon sets\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 */\nexport abstract class BaseIcon extends LitElement {\n  public static readonly styles = [style];\n\n  public static addIconSet(setName: string, getter: typeof BaseIcon['getIconUrl']) {\n    if (typeof getter !== 'function') {\n      Logger.warn(`[${this.name}.addIconSet(setName, getter)]: getter must be a function`);\n    } else {\n      this.getters.set(setName, getter);\n      for (const instance of this.instances) {\n        instance.load();\n      }\n    }\n  }\n\n  public static getIconUrl: URLGetter = (set: string, icon: string) =>\n    `@patternfly/icons/${set}/${icon}.js`;\n\n  private static onIntersect: IntersectionObserverCallback = records =>\n    records.forEach(({ isIntersecting, target }) => {\n      const icon = target as BaseIcon;\n      icon.#intersecting = isIntersecting;\n      ric(() => {\n        if (icon.#intersecting) {\n          icon.load();\n        }\n      });\n    });\n\n  private static io = new IntersectionObserver(this.onIntersect);\n\n  private static getters = new Map<string, URLGetter>();\n\n  private static instances = new Set<BaseIcon>();\n\n  declare public static defaultIconSet: string;\n\n  /** Icon set */\n  @property() set = this.#class.defaultIconSet;\n\n  /** Icon name */\n  @property({ reflect: true }) icon = '';\n\n  /** Size of the icon */\n  abstract size: string;\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  get #class(): typeof BaseIcon {\n    return this.constructor as typeof BaseIcon;\n  }\n\n  #lazyLoad() {\n    this.#class.io.observe(this);\n    if (this.#intersecting) {\n      this.load();\n    }\n  }\n\n  #iconChanged() {\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  connectedCallback() {\n    super.connectedCallback();\n    this.#class.instances.add(this);\n  }\n\n  willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('icon')) {\n      this.#iconChanged();\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#class.instances.delete(this);\n  }\n\n  render() {\n    const content = this.content ?? '';\n    return html`\n      <div id=\"container\" aria-hidden=\"true\">${content\n}<span part=\"fallback\" ?hidden=${!!content}>\n          <slot></slot>\n        </span>\n      </div>\n    `;\n  }\n\n  protected async load() {\n    const { set, icon } = this;\n    const getter = this.#class.getters.get(set) ?? this.#class.getIconUrl;\n    let spec = 'UNKNOWN ICON';\n    if (set && icon) {\n      try {\n        const gotten = getter(set, icon);\n        if (gotten instanceof URL) {\n          spec = gotten.pathname;\n        } else {\n          spec = gotten;\n        }\n        const mod = await import(spec);\n        this.content = mod.default instanceof Node ? mod.default.cloneNode(true) : mod.default;\n        await this.updateComplete;\n        this.dispatchEvent(new Event('load', { bubbles: true }));\n      } catch (error: unknown) {\n        const event = new IconLoadError(spec, error as Error);\n        this.#logger.error((error as IconLoadError).message);\n        this.dispatchEvent(event);\n      }\n    }\n  }\n}\n"]}

package/pf-icon/demo/icons/rh/boba-tea.js

@@ -0,0 +1,5 @@
+const t = document.createElement('template');t.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
+  <path d="M13 14.62h10c.35 0 .62-.28.62-.62s-.28-.62-.62-.62H13c-.35 0-.62.28-.62.62s.28.62.62.62Z"/>
+  <path d="M28 8.38h-2.25l.69-3.25c.04-.18 0-.38-.13-.52s-.3-.23-.49-.23h-3a.63.63 0 0 0-.61.5l-.74 3.5H8c-.35 0-.62.28-.62.62s.28.62.62.62h.38V13c0 .17.07.33.18.44l.86.86 2.97 16.81c.05.3.31.52.62.52h10c.3 0 .56-.22.62-.52L26.6 14.3l.86-.86a.62.62 0 0 0 .18-.44V9.62h.38c.35 0 .62-.28.62-.62s-.28-.62-.62-.62Zm-4.66-2.75h1.72l-.58 2.75h-1.72l.58-2.75Zm3.04 7.12-.82.82c-.09.09-.15.21-.17.33l-2.91 16.48h-8.96L10.61 13.9a.585.585 0 0 0-.17-.33l-.82-.82V9.63h16.76v3.12Z"/>
+  <path d="M16 25.38a1.62 1.62 0 1 0 0 3.24 1.62 1.62 0 0 0 0-3.24Zm0 2a.38.38 0 1 1 0-.76.38.38 0 0 1 0 .76Zm4-4a1.62 1.62 0 1 0 0 3.24 1.62 1.62 0 0 0 0-3.24Zm0 2a.38.38 0 1 1 0-.76.38.38 0 0 1 0 .76Zm-4-5a1.62 1.62 0 1 0 0 3.24 1.62 1.62 0 0 0 0-3.24Zm0 2a.38.38 0 1 1 0-.76.38.38 0 0 1 0 .76Z"/>
+</svg>`;export default t.content.cloneNode(true);

package/pf-icon/demo/icons/rh/lifecycle.js

@@ -0,0 +1,3 @@
+const t = document.createElement('template');t.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
+  <path d="m25.32 10.66-2.88-.13a.63.63 0 0 0-.06 1.25l4.2.19a.59.59 0 0 0 .42-.17.62.62 0 0 0 .2-.43l.19-4.2a.63.63 0 0 0-1.25 0l-.11 2.5A11.61 11.61 0 0 0 14.24 7a3.12 3.12 0 0 0-5.86 1.5c.11 4.3 6.52 4 6.22-.27a10.3 10.3 0 0 1 10.72 2.43Zm-12.49-.83a1.88 1.88 0 0 1-2.66-2.66 1.88 1.88 0 0 1 2.66 2.66Zm-.33 14.55a3.05 3.05 0 0 0-2 .74A10.25 10.25 0 0 1 8 15.17l1.3 2.59a.62.62 0 0 0 1.11-.56l-1.85-3.76a.63.63 0 0 0-.84-.28L4 15a.63.63 0 0 0 .56 1.12L6.76 15a11.55 11.55 0 0 0 3 11.08 3.12 3.12 0 1 0 2.79-1.74Zm1.33 4.45a1.88 1.88 0 0 1-2.66-2.66 1.88 1.88 0 0 1 2.66 2.66ZM31.62 17a3.12 3.12 0 1 0-3.48 3.09A10.34 10.34 0 0 1 20 28.18l1.73-2.32a.63.63 0 0 0-1-.75l-2.5 3.38a.63.63 0 0 0-.12.46.6.6 0 0 0 .25.41l3.37 2.51a.63.63 0 0 0 .75-1l-2-1.49a11.6 11.6 0 0 0 9-9.4A3.09 3.09 0 0 0 31.62 17Zm-1.79 1.33a1.88 1.88 0 0 1-2.66-2.66 1.88 1.88 0 0 1 2.66 2.66Z"/>
+</svg>`;export default t.content.cloneNode(true);

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

@@ -9,7 +9,7 @@ import { BaseIcon } from './BaseIcon.js';
  * @csspart fallback - Container for the fallback (i.e. slotted) content
  */
 export declare class PfIcon extends BaseIcon {
-    static readonly styles: import("lit").CSSResult[];
+    static readonly styles: CSSStyleSheet[];
     static defaultIconSet: string;
     /** Size of the icon */
     size: 'sm' | 'md' | 'lg' | 'xl';

package/pf-icon/pf-icon.js

@@ -3,7 +3,7 @@ import { BaseIcon } from './BaseIcon.js';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { css } from "lit";
-const style = css `: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{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))}`;
+const style = css `: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`;
 /**
  * An **icon** component is a container that allows for icons of varying dimensions to
  * seamlessly replace each other without shifting surrounding content.

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

@@ -1 +1 @@
-{"version":3,"file":"pf-icon.js","sourceRoot":"","sources":["pf-icon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAItD;;;;;;;;GAQG;AAEH,IAAa,MAAM,GAAnB,MAAa,MAAO,SAAQ,QAAQ;IAApC;;QAKE,uBAAuB;QACM,SAAI,GAA8B,IAAI,CAAC;IACtE,CAAC;;AANwB,aAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,AAA9B,CAA+B;AAE9C,qBAAc,GAAG,KAAK,AAAR,CAAS;AAGR;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAAwC;AANzD,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAOlB;SAPY,MAAM","sourcesContent":["import { BaseIcon } from './BaseIcon.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport style from './pf-icon.css';\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 *\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 */\n@customElement('pf-icon')\nexport class PfIcon extends BaseIcon {\n  public static readonly styles = [...BaseIcon.styles, style];\n\n  public static defaultIconSet = 'fas';\n\n  /** Size of the icon */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'sm';\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,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAItD;;;;;;;;GAQG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,QAAQ;IAA7B;;QAKL,uBAAuB;QACM,SAAI,GAA8B,IAAI,CAAC;IACtE,CAAC;;AANwB,aAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,AAA9B,CAA+B;AAE9C,qBAAc,GAAG,KAAK,AAAR,CAAS;AAGR;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAAwC;AANzD,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAOlB","sourcesContent":["import { BaseIcon } from './BaseIcon.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport style from './pf-icon.css';\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 *\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 */\n@customElement('pf-icon')\nexport class PfIcon extends BaseIcon {\n  public static readonly styles = [...BaseIcon.styles, style];\n\n  public static defaultIconSet = 'fas';\n\n  /** Size of the icon */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-icon': PfIcon;\n  }\n}\n"]}

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

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

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

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

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

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

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

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

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

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

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

@@ -9,8 +9,14 @@ import { LitElement } from 'lit';
  */
 export declare class PfJumpLinksItem extends LitElement {
     #private;
-    static readonly styles: import("lit").CSSResult[];
-    static readonly shadowRootOptions: ShadowRootInit;
+    static readonly styles: CSSStyleSheet[];
+    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 */

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

@@ -6,7 +6,7 @@ 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{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;padding-block-start:var(--pf-c-jump-links__link--PaddingTop,var(--pf-global--spacer--md,1rem));padding-inline-end:var(--pf-c-jump-links__link--PaddingRight,var(--pf-global--spacer--md,1rem));padding-block-end:var(--pf-c-jump-links__link--PaddingBottom,var(--pf-global--spacer--md,1rem));padding-inline-start:var(--pf-c-jump-links__link--PaddingLeft,var(--pf-global--spacer--md,1rem));text-decoration:none;outline-offset:var(--pf-c-jump-links__link--OutlineOffset,calc(-1 * var(--pf-global--spacer--sm,0.5rem)));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,\n    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,\n    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,\n    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,\n    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,\n    pfvar(--pf-global--Color--100, #151515))}`;
+const style = css `:host {\n  display: block;\n}\n\n#container {\n  display: contents;\n}\n\nslot:not([name]) {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--pf-global--spacer--md, 1rem);\n}\n\na {\n  position: relative;\n  display: flex;\n  cursor: pointer;\n  flex: 1;\n  padding-block-start: var(--pf-c-jump-links__link--PaddingTop,\n    var(--pf-global--spacer--md, 1rem));\n  padding-inline-end: var(--pf-c-jump-links__link--PaddingRight,\n    var(--pf-global--spacer--md, 1rem));\n  padding-block-end: var(--pf-c-jump-links__link--PaddingBottom,\n    var(--pf-global--spacer--md, 1rem));\n  padding-inline-start: var(--pf-c-jump-links__link--PaddingLeft,\n    var(--pf-global--spacer--md, 1rem));\n  text-decoration: none;\n  outline-offset: var(--pf-c-jump-links__link--OutlineOffset,\n    calc(-1 * var(--pf-global--spacer--sm, 0.5rem)));\n  color: var(--pf-c-jump-links__link-text--Color,\n    var(--pf-global--Color--200, #6a6e73));\n}\n\na::before {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  content: "";\n  border-color: var(--pf-c-jump-links__link--before--BorderColor, transparent);\n  border-style: solid;\n  border-width:\n    var(--pf-c-jump-links__link--before--BorderTopWidth,\n      var(--pf-c-jump-links__list--before--BorderTopWidth,\n        var(--pf-global--BorderWidth--sm, 1px)))\n    var(--pf-c-jump-links__link--before--BorderRightWidth, 0)\n    var(--pf-c-jump-links__link--before--BorderBottomWidth, 0)\n    var(--pf-c-jump-links__link--before--BorderLeftWidth, 0);\n}\n\na:hover {\n  --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--hover__link-text--Color,\n    var(--pf-global--Color--100, #151515));\n}\n\na:focus {\n  --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--focus__link-text--Color,\n    var(--pf-global--Color--100, #151515));\n}\n\n:host([active]) {\n  --pf-c-jump-links__link--before--BorderTopWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth,\n    var(--pf-global--BorderWidth--lg, 3px));\n  --pf-c-jump-links__link--before--BorderLeftWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth, 0);\n  --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor,\n    var(--pf-global--primary-color--100, #06c));\n  --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color,\n    pfvar(--pf-global--Color--100, #151515));\n}\n`;
 import { observed } from '@patternfly/pfe-core/decorators/observed.js';
 /**
  * @cssprop --pf-c-jump-links__link--PaddingTop -- padding around the link
@@ -22,9 +22,7 @@ let PfJumpLinksItem = class PfJumpLinksItem extends LitElement {
         _PfJumpLinksItem_instances.add(this);
         /** Whether this item is active. */
         this.active = false;
-        _PfJumpLinksItem_internals.set(this, new InternalsController(this, {
-            role: 'listitem'
-        }));
+        _PfJumpLinksItem_internals.set(this, InternalsController.of(this, { role: 'listitem' }));
     }
     connectedCallback() {
         super.connectedCallback();
@@ -51,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;AAEH,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,UAAU;IAA/C;;;QAKE,mCAAmC;QAES,WAAM,GAAG,KAAK,CAAC;QAK3D,qCAAa,IAAI,mBAAmB,CAAC,IAAI,EAAE;YACzC,IAAI,EAAE,UAAU;SACjB,CAAC,EAAC;IA2BL,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;AAvCe,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,CAyC3B;SAzCY,eAAe","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 = new InternalsController(this, {\n    role: 'listitem'\n  });\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

@@ -5,7 +5,7 @@ import { LitElement } from 'lit';
  * @cssprop --pf-c-jump-links__list__list__link--PaddingLeft
  */
 export declare class PfJumpLinksList extends LitElement {
-    static readonly styles: import("lit").CSSResult[];
+    static readonly styles: CSSStyleSheet[];
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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

@@ -2,7 +2,7 @@ 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{display:block}#container{display:contents;--pf-c-jump-links__list--PaddingTop:0;--pf-c-jump-links__list--PaddingBottom:0;--pf-c-jump-links__link--PaddingTop:var(--pf-c-jump-links__list__list__link--PaddingTop,\n    var(--pf-global--spacer--sm, 0.5rem));--pf-c-jump-links__link--PaddingBottom:var(--pf-c-jump-links__list__list__link--PaddingBottom,\n    var(--pf-global--spacer--sm, 0.5rem));--pf-c-jump-links__link--PaddingLeft:var(--pf-c-jump-links__list__list__link--PaddingLeft,\n    var(--pf-global--spacer--lg, 1.5rem))}`;
+const style = css `:host {\n  display: block;\n}\n\n#container {\n  display: contents;\n  --pf-c-jump-links__list--PaddingTop: 0;\n  --pf-c-jump-links__list--PaddingBottom: 0;\n  --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop,\n    var(--pf-global--spacer--sm, 0.5rem));\n  --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom,\n    var(--pf-global--spacer--sm, 0.5rem));\n  --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft,\n    var(--pf-global--spacer--lg, 1.5rem));\n}\n`;
 /**
  * @cssprop --pf-c-jump-links__list__list__link--PaddingTop -- padding around each link
  * @cssprop --pf-c-jump-links__list__list__link--PaddingBottom
@@ -10,11 +10,9 @@ const style = css `:host{display:block}#container{display:contents;--pf-c-jump-l
  */
 let PfJumpLinksList = class PfJumpLinksList extends LitElement {
     render() {
-        return html `
-      <div id="container" role="listbox">
-        <slot></slot>
-      </div>
-    `;
+        // TODO: add label
+        // eslint-disable-next-line lit-a11y/accessible-name
+        return html `<div id="container" role="listbox"><slot></slot></div>`;
     }
 };
 PfJumpLinksList.styles = [style];

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

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

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

@@ -1,12 +1,9 @@
 import { LitElement } from 'lit';
 import '@patternfly/elements/pf-icon/pf-icon.js';
-import './pf-jump-links-item.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
@@ -20,7 +17,6 @@ import './pf-jump-links-item.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
@@ -30,15 +26,12 @@ import './pf-jump-links-item.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
@@ -51,7 +44,7 @@ import './pf-jump-links-item.js';
  */
 export declare class PfJumpLinks extends LitElement {
     #private;
-    static readonly styles: import("lit").CSSResult[];
+    static readonly styles: CSSStyleSheet[];
     /** Whether the element features a disclosure widget around the nav items */
     expandable: boolean;
     /** Whether the expandable element's disclosure widget is expanded */
@@ -64,7 +57,9 @@ export declare class PfJumpLinks extends LitElement {
     offset: number;
     /** Label to add to nav element. */
     label?: string;
+    protected getUpdateComplete(): Promise<boolean>;
     connectedCallback(): void;
+    firstUpdated(): void;
     updated(changed: Map<string, unknown>): void;
     render(): import("lit-html").TemplateResult<1>;
 }