@patternfly/elements 1.0.0

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

@@ -0,0 +1,66 @@
+var _PfJumpLinksItem_instances, _PfJumpLinksItem_internals, _PfJumpLinksItem_onClick, _PfJumpLinksItem_onFocus;
+import { __classPrivateFieldGet, __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.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`;
+import { observed } from '@patternfly/pfe-core/decorators/observed.js';
+/**
+ * @cssprop --pf-c-jump-links__link--PaddingTop -- padding around the link
+ * @cssprop --pf-c-jump-links__link--PaddingRight
+ * @cssprop --pf-c-jump-links__link--PaddingBottom
+ * @cssprop --pf-c-jump-links__link--PaddingLeft
+ * @cssprop --pf-c-jump-links__link--OutlineOffset
+ * @cssprop --pf-c-jump-links__link-text--Color
+ */
+let PfJumpLinksItem = class PfJumpLinksItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        _PfJumpLinksItem_instances.add(this);
+        this.active = false;
+        _PfJumpLinksItem_internals.set(this, new InternalsController(this, {
+            role: 'listitem'
+        }));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.activeChanged();
+    }
+    render() {
+        return html `
+      <a href="${ifDefined(this.href)}" @focus="${__classPrivateFieldGet(this, _PfJumpLinksItem_instances, "m", _PfJumpLinksItem_onFocus)}" @click="${__classPrivateFieldGet(this, _PfJumpLinksItem_instances, "m", _PfJumpLinksItem_onClick)}">
+        <slot></slot>
+      </a>
+      <slot name="subsection"></slot>
+    `;
+    }
+    focus() {
+        this.link.focus();
+    }
+    activeChanged() {
+        __classPrivateFieldGet(this, _PfJumpLinksItem_internals, "f").ariaCurrent = this.active ? 'location' : null;
+    }
+};
+_PfJumpLinksItem_internals = new WeakMap(), _PfJumpLinksItem_instances = new WeakSet(), _PfJumpLinksItem_onClick = function _PfJumpLinksItem_onClick() {
+    this.dispatchEvent(new Event('select', { bubbles: true }));
+}, _PfJumpLinksItem_onFocus = function _PfJumpLinksItem_onFocus() {
+    this.dispatchEvent(new Event('focus', { bubbles: true }));
+};
+PfJumpLinksItem.styles = [style];
+__decorate([
+    query('a')
+], PfJumpLinksItem.prototype, "link", void 0);
+__decorate([
+    observed('activeChanged'),
+    property({ type: Boolean, reflect: true })
+], PfJumpLinksItem.prototype, "active", void 0);
+__decorate([
+    property({ reflect: true })
+], PfJumpLinksItem.prototype, "href", void 0);
+PfJumpLinksItem = __decorate([
+    customElement('pf-jump-links-item')
+], PfJumpLinksItem);
+export { PfJumpLinksItem };
+//# sourceMappingURL=pf-jump-links-item.js.map

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

@@ -0,0 +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,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,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;;;QAKuC,WAAM,GAAG,KAAK,CAAC;QAI3D,qCAAa,IAAI,mBAAmB,CAAC,IAAI,EAAE;YACzC,IAAI,EAAE,UAAU;SACjB,CAAC,EAAC;IA+BL,CAAC;IA7BU,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;IAED,KAAK;QACH,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;IACpB,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,CAAC;AAErB;IAAX,KAAK,CAAC,GAAG,CAAC;6CAAyB;AAEQ;IAD3C,QAAQ,CAAC,eAAe,CAAC;IACzB,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAgB;AAE9B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAe;AAPhC,eAAe;IAD3B,aAAa,CAAC,oBAAoB,CAAC;GACvB,eAAe,CA0C3B;SA1CY,eAAe","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.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  @query('a') link!:HTMLAnchorElement;\n  @observed('activeChanged')\n  @property({ type: Boolean, reflect: true }) active = false;\n\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  focus(): void {\n    this.link.focus();\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.css

@@ -0,0 +1,15 @@
+: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,
+    var(--pf-global--spacer--sm, 0.5rem));
+  --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom,
+    var(--pf-global--spacer--sm, 0.5rem));
+  --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

@@ -0,0 +1,15 @@
+import { LitElement } 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: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pf-jump-links-list': PfJumpLinksList;
+    }
+}

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

@@ -0,0 +1,25 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { css } from "lit";
+const style = css `:host {\n  display: block;\n}\n\n#container {\n  display: contents;\n  --pf-c-jump-links__list--PaddingTop: 0;\n  --pf-c-jump-links__list--PaddingBottom: 0;\n  --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop,\n    var(--pf-global--spacer--sm, 0.5rem));\n  --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom,\n    var(--pf-global--spacer--sm, 0.5rem));\n  --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft,\n    var(--pf-global--spacer--lg, 1.5rem));\n}\n`;
+/**
+ * @cssprop --pf-c-jump-links__list__list__link--PaddingTop -- padding around each link
+ * @cssprop --pf-c-jump-links__list__list__link--PaddingBottom
+ * @cssprop --pf-c-jump-links__list__list__link--PaddingLeft
+ */
+let PfJumpLinksList = class PfJumpLinksList extends LitElement {
+    render() {
+        return html `
+      <div id="container" role="listbox">
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+PfJumpLinksList.styles = [style];
+PfJumpLinksList = __decorate([
+    customElement('pf-jump-links-list')
+], PfJumpLinksList);
+export { PfJumpLinksList };
+//# sourceMappingURL=pf-jump-links-list.js.map

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

@@ -0,0 +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,mBAAmB,CAAC;;;AAIlD;;;;GAIG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAG7C,MAAM;QACJ,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AARe,sBAAM,GAAG,CAAC,KAAK,CAAC,CAAC;AADtB,eAAe;IAD3B,aAAa,CAAC,oBAAoB,CAAC;GACvB,eAAe,CAU3B;SAVY,eAAe","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.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"]}

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

@@ -0,0 +1,128 @@
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  display: block;
+}
+
+#container {
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif);
+  font-size: var(--pf-global--FontSize--md, 16px);
+  font-weight: var(--pf-global--FontWeight--normal, 400);
+}
+
+slot {
+  position: relative;
+  display: var(--pf-c-jump-links__list--Display, flex);
+  flex-direction: var(--pf-c-jump-links__list--FlexDirection, row);
+  padding-block-start: var(--pf-c-jump-links__list--PaddingTop, 0);
+  padding-inline-end: var(--pf-c-jump-links__list--PaddingRight,
+    var(--pf-global--spacer--md, 1rem));
+  padding-block-end: var(--pf-c-jump-links__list--PaddingBottom, 0);
+  padding-inline-start: var(--pf-c-jump-links__list--PaddingLeft,
+    var(--pf-global--spacer--md, 1rem));
+  visibility: var(--pf-c-jump-links__list--Visibility, visible);
+}
+
+slot::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  content: "";
+  border: solid var(--pf-c-jump-links__list--before--BorderColor,
+    var(--pf-global--BorderColor--100, #d2d2d2));
+  border-width:
+    var(--pf-c-jump-links__list--before--BorderTopWidth,
+      var(--pf-global--BorderWidth--sm, 1px))
+    var(--pf-c-jump-links__list--before--BorderRightWidth, 0)
+    var(--pf-c-jump-links__list--before--BorderBottomWidth, 0)
+    var(--pf-c-jump-links__list--before--BorderLeftWidth, 0);
+}
+
+:host([vertical]) #container {
+  --pf-c-jump-links__list--PaddingTop: var(--pf-c-jump-links--m-vertical__list--PaddingTop,
+    var(--pf-global--spacer--md, 1rem));
+  --pf-c-jump-links__list--PaddingRight: var(--pf-c-jump-links--m-vertical__list--PaddingRight, 0);
+  --pf-c-jump-links__list--PaddingBottom: var(--pf-c-jump-links--m-vertical__list--PaddingBottom
+    var(--pf-global--spacer--md, 1rem));
+  --pf-c-jump-links__list--PaddingLeft: var(--pf-c-jump-links--m-vertical__list--PaddingLeft, 0);
+  --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth, 0);
+  --pf-c-jump-links__list--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth, 
+    var(--pf-global--BorderWidth--sm, 1px));
+  --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth, 0);
+  --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));
+  --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection, column);
+}
+
+:host([centered]) #container {
+  justify-content: center;
+}
+
+:host([centered]) #label {
+  text-align: center;
+}
+
+:host(:not([expandable])) #label {
+  display: block;
+  width: 100%;
+  margin-block-end: var(--pf-c-jump-links__label--MarginBottom,
+    var(--pf-global--spacer--md, 1rem));
+}
+
+:host([expandable]) {
+  --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));
+}
+
+summary {
+  display: block;
+  margin-block-start: var(--pf-c-jump-links__toggle--MarginTop,
+    calc(-1 * var(--pf-global--spacer--form-element, 0.375rem)));
+  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))));
+  margin-inline-start: var(--pf-c-jump-links__toggle--MarginLeft);
+  color: var(--pf-c-jump-links__toggle-text--Color,
+    var(--pf-global--Color--100, #151515));
+  padding:
+    var(--pf-c-button--PaddingTop,
+      var(--pf-global--spacer--form-element, 0.375rem))
+    var(--pf-c-button--PaddingRight,
+      var(--pf-global--spacer--md, 1rem))
+    var(--pf-c-button--PaddingBottom,
+      var(--pf-global--spacer--form-element, 0.375rem))
+    var(--pf-c-button--PaddingLeft,
+      var(--pf-global--spacer--md, 1rem));
+}
+
+summary pf-icon {
+  rotate: var(--pf-c-jump-links__toggle-icon--Rotate, 0);
+  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 {
+  margin-inline-start: var(--pf-c-jump-links__toggle-text--MarginLeft,
+    var(--pf-global--spacer--md, 1rem));
+}
+
+:host([expanded]) #container {
+  --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)));
+  --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate,
+    90deg);
+  --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;
+}

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

@@ -0,0 +1,70 @@
+import { LitElement } from 'lit';
+import './pf-jump-links-item.js';
+import '@patternfly/elements/pf-icon/pf-icon.js';
+import { PfJumpLinksItem } from './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
+ * @cssprop --pf-c-jump-links__list--PaddingRight
+ * @cssprop --pf-c-jump-links__list--PaddingBottom
+ * @cssprop --pf-c-jump-links__list--PaddingLeft
+ * @cssprop --pf-c-jump-links__list--Visibility
+ * @cssprop --pf-c-jump-links__list--before--BorderColor
+ * @cssprop --pf-c-jump-links__list--before--BorderTopWidth
+ * @cssprop --pf-c-jump-links__list--before--BorderRightWidth
+ * @cssprop --pf-c-jump-links__list--before--BorderBottomWidth
+ * @cssprop --pf-c-jump-links__list--before--BorderLeftWidth
+ * @cssprop --pf-c-jump-links__toggle--MarginBottom--base
+ *
+ * @cssprop --pf-c-jump-links__toggle--MarginTop -- padding around the expandable jump links disclosure widget.
+ * @cssprop --pf-c-jump-links__toggle--MarginBottom
+ * @cssprop --pf-c-jump-links__toggle--MarginBottom--base
+ * @cssprop --pf-c-jump-links__toggle--MarginLeft
+ * @cssprop --pf-c-jump-links__toggle-text--Color
+ * @cssprop --pf-c-button--PaddingTop -- padding around the expandable jump links disclosure widget.
+ * @cssprop --pf-c-button--PaddingRight
+ * @cssprop --pf-c-button--PaddingBottom
+ * @cssprop --pf-c-button--PaddingLeft
+ *
+ * @cssprop --pf-c-jump-links__toggle-icon--Rotate
+ * @cssprop --pf-c-jump-links__toggle-icon--Transition
+ * @cssprop --pf-c-jump-links__toggle-text--MarginLeft
+ *
+ * @cssprop --pf-c-jump-links--m-expanded__toggle--MarginBottom
+ * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Rotate
+ * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Color
+ *
+ * @cssprop --pf-c-jump-links--m-vertical__list--PaddingTop
+ * @cssprop --pf-c-jump-links--m-vertical__list--PaddingRight
+ * @cssprop --pf-c-jump-links--m-vertical__list--PaddingBottom
+ * @cssprop --pf-c-jump-links--m-vertical__list--PaddingLeft
+ * @cssprop --pf-c-jump-links--m-vertical__list--before--BorderTopWidth
+ * @cssprop --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth
+ * @cssprop --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth
+ * @cssprop --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth
+ * @cssprop --pf-c-jump-links--m-vertical__list--FlexDirection
+ */
+export declare class PfJumpLinks extends LitElement {
+    #private;
+    static readonly styles: import("lit").CSSResult[];
+    _items: PfJumpLinksItem[];
+    expandable: boolean;
+    expanded: boolean;
+    vertical: boolean;
+    centered: boolean;
+    offset: number;
+    label?: string;
+    connectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pf-jump-links': PfJumpLinks;
+    }
+}

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

@@ -0,0 +1,145 @@
+var _PfJumpLinks_instances, _PfJumpLinks_items, _PfJumpLinks_init, _PfJumpLinks_rovingTabindexController, _PfJumpLinks_spy, _PfJumpLinks_onSlotchange, _PfJumpLinks_onSelect, _PfJumpLinks_onToggle;
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
+import { ScrollSpyController } from '@patternfly/pfe-core/controllers/scroll-spy-controller.js';
+import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';
+import './pf-jump-links-item.js';
+import '@patternfly/elements/pf-icon/pf-icon.js';
+import { css } from "lit";
+const style = css `[hidden] {\n  display: none !important;\n}\n\n:host {\n  display: block;\n}\n\n#container {\n  display: flex;\n  flex-wrap: wrap;\n  font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif);\n  font-size: var(--pf-global--FontSize--md, 16px);\n  font-weight: var(--pf-global--FontWeight--normal, 400);\n}\n\nslot {\n  position: relative;\n  display: var(--pf-c-jump-links__list--Display, flex);\n  flex-direction: var(--pf-c-jump-links__list--FlexDirection, row);\n  padding-block-start: var(--pf-c-jump-links__list--PaddingTop, 0);\n  padding-inline-end: var(--pf-c-jump-links__list--PaddingRight,\n    var(--pf-global--spacer--md, 1rem));\n  padding-block-end: var(--pf-c-jump-links__list--PaddingBottom, 0);\n  padding-inline-start: var(--pf-c-jump-links__list--PaddingLeft,\n    var(--pf-global--spacer--md, 1rem));\n  visibility: var(--pf-c-jump-links__list--Visibility, visible);\n}\n\nslot::before {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  pointer-events: none;\n  content: "";\n  border: solid var(--pf-c-jump-links__list--before--BorderColor,\n    var(--pf-global--BorderColor--100, #d2d2d2));\n  border-width:\n    var(--pf-c-jump-links__list--before--BorderTopWidth,\n      var(--pf-global--BorderWidth--sm, 1px))\n    var(--pf-c-jump-links__list--before--BorderRightWidth, 0)\n    var(--pf-c-jump-links__list--before--BorderBottomWidth, 0)\n    var(--pf-c-jump-links__list--before--BorderLeftWidth, 0);\n}\n\n:host([vertical]) #container {\n  --pf-c-jump-links__list--PaddingTop: var(--pf-c-jump-links--m-vertical__list--PaddingTop,\n    var(--pf-global--spacer--md, 1rem));\n  --pf-c-jump-links__list--PaddingRight: var(--pf-c-jump-links--m-vertical__list--PaddingRight, 0);\n  --pf-c-jump-links__list--PaddingBottom: var(--pf-c-jump-links--m-vertical__list--PaddingBottom\n    var(--pf-global--spacer--md, 1rem));\n  --pf-c-jump-links__list--PaddingLeft: var(--pf-c-jump-links--m-vertical__list--PaddingLeft, 0);\n  --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth, 0);\n  --pf-c-jump-links__list--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth, \n    var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth, 0);\n  --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth,\n    var(--pf-global--BorderWidth--lg, 3px));\n  --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection, column);\n}\n\n:host([centered]) #container {\n  justify-content: center;\n}\n\n:host([centered]) #label {\n  text-align: center;\n}\n\n:host(:not([expandable])) #label {\n  display: block;\n  width: 100%;\n  margin-block-end: var(--pf-c-jump-links__label--MarginBottom,\n    var(--pf-global--spacer--md, 1rem));\n}\n\n:host([expandable]) {\n  --pf-c-jump-links--m-expanded__toggle--MarginBottom:\n    calc(var(--pf-c-jump-links__toggle--MarginBottom--base,\n      calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))\n    ) + var(--pf-global--spacer--md, 1rem));\n}\n\nsummary {\n  display: block;\n  margin-block-start: var(--pf-c-jump-links__toggle--MarginTop,\n    calc(-1 * var(--pf-global--spacer--form-element, 0.375rem)));\n  margin-block-end: var(--pf-c-jump-links__toggle--MarginBottom,\n    var(--pf-c-jump-links__toggle--MarginBottom--base,\n      calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))));\n  margin-inline-start: var(--pf-c-jump-links__toggle--MarginLeft);\n  color: var(--pf-c-jump-links__toggle-text--Color,\n    var(--pf-global--Color--100, #151515));\n  padding:\n    var(--pf-c-button--PaddingTop,\n      var(--pf-global--spacer--form-element, 0.375rem))\n    var(--pf-c-button--PaddingRight,\n      var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-button--PaddingBottom,\n      var(--pf-global--spacer--form-element, 0.375rem))\n    var(--pf-c-button--PaddingLeft,\n      var(--pf-global--spacer--md, 1rem));\n}\n\nsummary pf-icon {\n  rotate: var(--pf-c-jump-links__toggle-icon--Rotate, 0);\n  transition: var(--pf-c-jump-links__toggle-icon--Transition,\n    var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1)));\n}\n\nsummary span {\n  margin-inline-start: var(--pf-c-jump-links__toggle-text--MarginLeft,\n    var(--pf-global--spacer--md, 1rem));\n}\n\n:host([expanded]) #container {\n  --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom,\n    calc(var(--pf-c-jump-links__toggle--MarginBottom--base,\n      calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))) +\n      var(--pf-global--spacer--md, 1rem)));\n  --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate,\n    90deg);\n  --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color,\n    var(--pf-global--Color--100, #151515));\n  --pf-c-jump-links__toggle-icon--Rotate: 90deg;\n}\n`;
+import { PfJumpLinksItem } from './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
+ * @cssprop --pf-c-jump-links__list--PaddingRight
+ * @cssprop --pf-c-jump-links__list--PaddingBottom
+ * @cssprop --pf-c-jump-links__list--PaddingLeft
+ * @cssprop --pf-c-jump-links__list--Visibility
+ * @cssprop --pf-c-jump-links__list--before--BorderColor
+ * @cssprop --pf-c-jump-links__list--before--BorderTopWidth
+ * @cssprop --pf-c-jump-links__list--before--BorderRightWidth
+ * @cssprop --pf-c-jump-links__list--before--BorderBottomWidth
+ * @cssprop --pf-c-jump-links__list--before--BorderLeftWidth
+ * @cssprop --pf-c-jump-links__toggle--MarginBottom--base
+ *
+ * @cssprop --pf-c-jump-links__toggle--MarginTop -- padding around the expandable jump links disclosure widget.
+ * @cssprop --pf-c-jump-links__toggle--MarginBottom
+ * @cssprop --pf-c-jump-links__toggle--MarginBottom--base
+ * @cssprop --pf-c-jump-links__toggle--MarginLeft
+ * @cssprop --pf-c-jump-links__toggle-text--Color
+ * @cssprop --pf-c-button--PaddingTop -- padding around the expandable jump links disclosure widget.
+ * @cssprop --pf-c-button--PaddingRight
+ * @cssprop --pf-c-button--PaddingBottom
+ * @cssprop --pf-c-button--PaddingLeft
+ *
+ * @cssprop --pf-c-jump-links__toggle-icon--Rotate
+ * @cssprop --pf-c-jump-links__toggle-icon--Transition
+ * @cssprop --pf-c-jump-links__toggle-text--MarginLeft
+ *
+ * @cssprop --pf-c-jump-links--m-expanded__toggle--MarginBottom
+ * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Rotate
+ * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Color
+ *
+ * @cssprop --pf-c-jump-links--m-vertical__list--PaddingTop
+ * @cssprop --pf-c-jump-links--m-vertical__list--PaddingRight
+ * @cssprop --pf-c-jump-links--m-vertical__list--PaddingBottom
+ * @cssprop --pf-c-jump-links--m-vertical__list--PaddingLeft
+ * @cssprop --pf-c-jump-links--m-vertical__list--before--BorderTopWidth
+ * @cssprop --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth
+ * @cssprop --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth
+ * @cssprop --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth
+ * @cssprop --pf-c-jump-links--m-vertical__list--FlexDirection
+ */
+let PfJumpLinks = class PfJumpLinks extends LitElement {
+    constructor() {
+        super(...arguments);
+        _PfJumpLinks_instances.add(this);
+        this.expandable = false;
+        this.expanded = false;
+        this.vertical = false;
+        this.centered = false;
+        this.offset = 0;
+        _PfJumpLinks_items.set(this, void 0);
+        _PfJumpLinks_init.set(this, false);
+        _PfJumpLinks_rovingTabindexController.set(this, new RovingTabindexController(this));
+        _PfJumpLinks_spy.set(this, new ScrollSpyController(this, {
+            rootMargin: `${this.offset}px 0px 0px 0px`,
+            tagNames: ['pf-jump-links-item'],
+        }));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('select', __classPrivateFieldGet(this, _PfJumpLinks_instances, "m", _PfJumpLinks_onSelect));
+    }
+    updated(changed) {
+        if (changed.has('offset')) {
+            __classPrivateFieldGet(this, _PfJumpLinks_spy, "f").rootMargin = `${this.offset ?? 0}px 0px 0px 0px`;
+        }
+    }
+    render() {
+        return html `
+      <nav id="container">${this.expandable ? html `
+        <details ?open="${this.expanded}" @toggle="${__classPrivateFieldGet(this, _PfJumpLinks_instances, "m", _PfJumpLinks_onToggle)}">
+          <summary>
+            <pf-icon icon="chevron-right"></pf-icon>
+            <span id="label">${this.label}</span>
+          </summary>
+          <slot role="listbox" @slotchange="${__classPrivateFieldGet(this, _PfJumpLinks_instances, "m", _PfJumpLinks_onSlotchange)}"></slot>
+        </details>` : html `
+        <span id="label">${this.label}</span>
+        <slot role="listbox" @slotchange="${__classPrivateFieldGet(this, _PfJumpLinks_instances, "m", _PfJumpLinks_onSlotchange)}"></slot>`}
+      </nav>
+    `;
+    }
+};
+_PfJumpLinks_items = new WeakMap(), _PfJumpLinks_init = new WeakMap(), _PfJumpLinks_rovingTabindexController = new WeakMap(), _PfJumpLinks_spy = new WeakMap(), _PfJumpLinks_instances = new WeakSet(), _PfJumpLinks_onSlotchange = function _PfJumpLinks_onSlotchange() {
+    __classPrivateFieldSet(this, _PfJumpLinks_items, this._items, "f");
+    const items = __classPrivateFieldGet(this, _PfJumpLinks_items, "f")?.map(item => item.link);
+    if (__classPrivateFieldGet(this, _PfJumpLinks_init, "f")) {
+        __classPrivateFieldGet(this, _PfJumpLinks_rovingTabindexController, "f").updateItems(items);
+    }
+    else {
+        __classPrivateFieldGet(this, _PfJumpLinks_rovingTabindexController, "f").initItems(items);
+        __classPrivateFieldSet(this, _PfJumpLinks_init, true, "f");
+    }
+}, _PfJumpLinks_onSelect = async function _PfJumpLinks_onSelect(event) {
+    __classPrivateFieldGet(this, _PfJumpLinks_spy, "f").setActive(event.target);
+}, _PfJumpLinks_onToggle = function _PfJumpLinks_onToggle(event) {
+    if (event.target instanceof HTMLDetailsElement) {
+        this.expanded = event.target.open;
+    }
+    this.dispatchEvent(new Event('toggle'));
+};
+PfJumpLinks.styles = [style];
+__decorate([
+    queryAssignedElements()
+], PfJumpLinks.prototype, "_items", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], PfJumpLinks.prototype, "expandable", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], PfJumpLinks.prototype, "expanded", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], PfJumpLinks.prototype, "vertical", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], PfJumpLinks.prototype, "centered", void 0);
+__decorate([
+    property({ type: Number })
+], PfJumpLinks.prototype, "offset", void 0);
+__decorate([
+    property()
+], PfJumpLinks.prototype, "label", void 0);
+PfJumpLinks = __decorate([
+    customElement('pf-jump-links')
+], PfJumpLinks);
+export { PfJumpLinks };
+//# sourceMappingURL=pf-jump-links.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-jump-links.js","sourceRoot":"","sources":["pf-jump-links.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\n\nimport { ScrollSpyController } from '@patternfly/pfe-core/controllers/scroll-spy-controller.js';\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\n\nimport './pf-jump-links-item.js';\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nimport style from './pf-jump-links.css';\nimport { PfJumpLinksItem } from './pf-jump-links-item.js';\n\n/**\n * **Jump links** allow users to navigate to sections within a page.\n * @fires toggle - when the `expanded` disclosure widget is toggled\n * @slot - Place pf-jump-links-items here\n *\n * @cssprop --pf-c-jump-links__list--Display\n * @cssprop --pf-c-jump-links__list--FlexDirection\n * @cssprop --pf-c-jump-links__list--PaddingTop -- padding around the list of links\n * @cssprop --pf-c-jump-links__list--PaddingRight\n * @cssprop --pf-c-jump-links__list--PaddingBottom\n * @cssprop --pf-c-jump-links__list--PaddingLeft\n * @cssprop --pf-c-jump-links__list--Visibility\n * @cssprop --pf-c-jump-links__list--before--BorderColor\n * @cssprop --pf-c-jump-links__list--before--BorderTopWidth\n * @cssprop --pf-c-jump-links__list--before--BorderRightWidth\n * @cssprop --pf-c-jump-links__list--before--BorderBottomWidth\n * @cssprop --pf-c-jump-links__list--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links__toggle--MarginBottom--base\n *\n * @cssprop --pf-c-jump-links__toggle--MarginTop -- padding around the expandable jump links disclosure widget.\n * @cssprop --pf-c-jump-links__toggle--MarginBottom\n * @cssprop --pf-c-jump-links__toggle--MarginBottom--base\n * @cssprop --pf-c-jump-links__toggle--MarginLeft\n * @cssprop --pf-c-jump-links__toggle-text--Color\n * @cssprop --pf-c-button--PaddingTop -- padding around the expandable jump links disclosure widget.\n * @cssprop --pf-c-button--PaddingRight\n * @cssprop --pf-c-button--PaddingBottom\n * @cssprop --pf-c-button--PaddingLeft\n *\n * @cssprop --pf-c-jump-links__toggle-icon--Rotate\n * @cssprop --pf-c-jump-links__toggle-icon--Transition\n * @cssprop --pf-c-jump-links__toggle-text--MarginLeft\n *\n * @cssprop --pf-c-jump-links--m-expanded__toggle--MarginBottom\n * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Rotate\n * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Color\n *\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingTop\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingRight\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingBottom\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingLeft\n * @cssprop --pf-c-jump-links--m-vertical__list--before--BorderTopWidth\n * @cssprop --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth\n * @cssprop --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links--m-vertical__list--FlexDirection\n */\n@customElement('pf-jump-links')\nexport class PfJumpLinks extends LitElement {\n  static readonly styles = [style];\n\n  @queryAssignedElements() _items!:PfJumpLinksItem[];\n\n  @property({ reflect: true, type: Boolean }) expandable = false;\n\n  @property({ reflect: true, type: Boolean }) expanded = false;\n\n  @property({ reflect: true, type: Boolean }) vertical = false;\n\n  @property({ reflect: true, type: Boolean }) centered = false;\n\n  @property({ type: Number }) offset = 0;\n\n  @property() label?: string;\n\n  #items!:PfJumpLinksItem[];\n  #init = false;\n  #rovingTabindexController = new RovingTabindexController(this);\n\n  #spy = new ScrollSpyController(this, {\n    rootMargin: `${this.offset}px 0px 0px 0px`,\n    tagNames: ['pf-jump-links-item'],\n  });\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('select', this.#onSelect);\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('offset')) {\n      this.#spy.rootMargin = `${this.offset ?? 0}px 0px 0px 0px`;\n    }\n  }\n\n  render() {\n    return html`\n      <nav id=\"container\">${this.expandable ? html`\n        <details ?open=\"${this.expanded}\" @toggle=\"${this.#onToggle}\">\n          <summary>\n            <pf-icon icon=\"chevron-right\"></pf-icon>\n            <span id=\"label\">${this.label}</span>\n          </summary>\n          <slot role=\"listbox\" @slotchange=\"${this.#onSlotchange}\"></slot>\n        </details>` : html`\n        <span id=\"label\">${this.label}</span>\n        <slot role=\"listbox\" @slotchange=\"${this.#onSlotchange}\"></slot>`}\n      </nav>\n    `;\n  }\n\n  #onSlotchange() {\n    this.#items = this._items;\n    const items = this.#items?.map(item=>item.link);\n    if (this.#init) {\n      this.#rovingTabindexController.updateItems(items);\n    } else {\n      this.#rovingTabindexController.initItems(items);\n      this.#init = true;\n    }\n  }\n\n  async #onSelect(event: Event) {\n    this.#spy.setActive(event.target);\n  }\n\n  #onToggle(event: Event) {\n    if (event.target instanceof HTMLDetailsElement) {\n      this.expanded = event.target.open;\n    }\n    this.dispatchEvent(new Event('toggle'));\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-jump-links': PfJumpLinks;\n  }\n}\n"]}

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

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

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

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

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

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

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

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

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

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

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

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