@patternfly/elements 4.1.0 → 4.2.0

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

@@ -8,7 +8,182 @@ import { RovingTabindexController } from '@patternfly/pfe-core/controllers/rovin
 import { PfJumpLinksItem } from './pf-jump-links-item.js';
 import '@patternfly/elements/pf-icon/pf-icon.js';
 import { css } from "lit";
-const style = css `[hidden] {\n  display: none !important;\n}\n\n:host {\n  display: block;\n}\n\n#container {\n  display: flex;\n  flex-wrap: wrap;\n  font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif);\n  font-size: var(--pf-global--FontSize--md, 16px);\n  font-weight: var(--pf-global--FontWeight--normal, 400);\n}\n\nslot {\n  position: relative;\n  display: var(--pf-c-jump-links__list--Display, flex);\n  flex-direction: var(--pf-c-jump-links__list--FlexDirection, row);\n  padding-block-start: var(--pf-c-jump-links__list--PaddingTop, 0);\n  padding-inline-end: var(--pf-c-jump-links__list--PaddingRight,\n    var(--pf-global--spacer--md, 1rem));\n  padding-block-end: var(--pf-c-jump-links__list--PaddingBottom, 0);\n  padding-inline-start: var(--pf-c-jump-links__list--PaddingLeft,\n    var(--pf-global--spacer--md, 1rem));\n  visibility: var(--pf-c-jump-links__list--Visibility, visible);\n}\n\nslot::before {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  pointer-events: none;\n  content: "";\n  border: solid var(--pf-c-jump-links__list--before--BorderColor,\n    var(--pf-global--BorderColor--100, #d2d2d2));\n  border-width:\n    var(--pf-c-jump-links__list--before--BorderTopWidth,\n      var(--pf-global--BorderWidth--sm, 1px))\n    var(--pf-c-jump-links__list--before--BorderRightWidth, 0)\n    var(--pf-c-jump-links__list--before--BorderBottomWidth, 0)\n    var(--pf-c-jump-links__list--before--BorderLeftWidth, 0);\n}\n\n:host([vertical]) #container {\n  --pf-c-jump-links__list--PaddingTop:\n    var(--pf-c-jump-links--m-vertical__list--PaddingTop,\n      var(--pf-global--spacer--md, 1rem)\n    );\n  --pf-c-jump-links__list--PaddingRight:\n    var(--pf-c-jump-links--m-vertical__list--PaddingRight,0);\n  --pf-c-jump-links__list--PaddingBottom:\n    var(--pf-c-jump-links--m-vertical__list--PaddingBottom,\n      var(--pf-global--spacer--md, 1rem)\n    );\n  --pf-c-jump-links__list--PaddingLeft:\n    var(--pf-c-jump-links--m-vertical__list--PaddingLeft, 0);\n  --pf-c-jump-links__list--before--BorderTopWidth:\n    var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth, 0);\n  --pf-c-jump-links__list--before--BorderLeftWidth:\n    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:\n    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:\n    var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth,\n      var(--pf-global--BorderWidth--lg, 3px)\n    );\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`;
+const style = css `[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;
+  /** Controls the display type of the list container */
+  display: var(--pf-c-jump-links__list--Display, flex);
+  /** Controls the direction of items in the list */
+  flex-direction: var(--pf-c-jump-links__list--FlexDirection, row);
+  /** Padding around the list of links */
+  padding-block-start: var(--pf-c-jump-links__list--PaddingTop, 0);
+  /** Right padding for the list */
+  padding-inline-end: var(--pf-c-jump-links__list--PaddingRight,
+    var(--pf-global--spacer--md, 1rem));
+  /** Bottom padding for the list */
+  padding-block-end: var(--pf-c-jump-links__list--PaddingBottom, 0);
+  /** Left padding for the list */
+  padding-inline-start: var(--pf-c-jump-links__list--PaddingLeft,
+    var(--pf-global--spacer--md, 1rem));
+  /** Controls visibility of the list */
+  visibility: var(--pf-c-jump-links__list--Visibility, visible);
+}
+
+slot::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  content: "";
+  /** Border color for the list pseudo-element */
+  border: solid var(--pf-c-jump-links__list--before--BorderColor,
+    var(--pf-global--BorderColor--100, #d2d2d2));
+  border-width:
+    /** Top border width for the list pseudo-element */
+    var(--pf-c-jump-links__list--before--BorderTopWidth,
+      var(--pf-global--BorderWidth--sm, 1px))
+    /** Right border width for the list pseudo-element */
+    var(--pf-c-jump-links__list--before--BorderRightWidth, 0)
+    /** Bottom border width for the list pseudo-element */
+    var(--pf-c-jump-links__list--before--BorderBottomWidth, 0)
+    /** Left border width for the list pseudo-element */
+    var(--pf-c-jump-links__list--before--BorderLeftWidth, 0);
+}
+
+:host([vertical]) #container {
+  /** Top padding for vertical layout */
+  --pf-c-jump-links__list--PaddingTop:
+    var(--pf-c-jump-links--m-vertical__list--PaddingTop,
+      var(--pf-global--spacer--md, 1rem)
+    );
+  /** Right padding for vertical layout */
+  --pf-c-jump-links__list--PaddingRight:
+    var(--pf-c-jump-links--m-vertical__list--PaddingRight,0);
+  /** Bottom padding for vertical layout */
+  --pf-c-jump-links__list--PaddingBottom:
+    var(--pf-c-jump-links--m-vertical__list--PaddingBottom,
+      var(--pf-global--spacer--md, 1rem)
+    );
+  /** Left padding for vertical layout */
+  --pf-c-jump-links__list--PaddingLeft:
+    var(--pf-c-jump-links--m-vertical__list--PaddingLeft, 0);
+  /** Top border width for vertical layout */
+  --pf-c-jump-links__list--before--BorderTopWidth:
+    var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth, 0);
+  /** Left border width for vertical layout */
+  --pf-c-jump-links__list--before--BorderLeftWidth:
+    var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth,
+    var(--pf-global--BorderWidth--sm, 1px));
+  /** Top border width for current item in vertical layout */
+  --pf-c-jump-links__item--m-current__link--before--BorderTopWidth:
+    var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth, 0);
+  /** Left border width for current item in vertical layout */
+  --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth:
+    var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth,
+      var(--pf-global--BorderWidth--lg, 3px)
+    );
+  /** Flex direction for vertical layout */
+  --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection, column);
+}
+
+: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]) {
+  /** Base margin for the toggle button */
+  --pf-c-jump-links--m-expanded__toggle--MarginBottom:
+    calc(var(--pf-c-jump-links__toggle--MarginBottom--base,
+      calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))
+    ) + var(--pf-global--spacer--md, 1rem));
+}
+
+summary {
+  display: block;
+  /** Padding around the expandable jump links disclosure widget. */
+  margin-block-start: var(--pf-c-jump-links__toggle--MarginTop,
+    calc(-1 * var(--pf-global--spacer--form-element, 0.375rem)));
+  /** Bottom margin for the toggle */
+  margin-block-end: var(--pf-c-jump-links__toggle--MarginBottom,
+    var(--pf-c-jump-links__toggle--MarginBottom--base,
+      calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))));
+  /** Left margin for the toggle */
+  margin-inline-start: var(--pf-c-jump-links__toggle--MarginLeft);
+  /** Color of the toggle text */
+  color: var(--pf-c-jump-links__toggle-text--Color,
+    var(--pf-global--Color--100, #151515));
+  /** Padding around the expandable jump links disclosure widget. */
+  padding:
+    var(--pf-c-button--PaddingTop,
+      var(--pf-global--spacer--form-element, 0.375rem))
+    /** Right padding for the button */
+    var(--pf-c-button--PaddingRight,
+      var(--pf-global--spacer--md, 1rem))
+    /** Bottom padding for the button */
+    var(--pf-c-button--PaddingBottom,
+      var(--pf-global--spacer--form-element, 0.375rem))
+    /** Left padding for the button */
+    var(--pf-c-button--PaddingLeft,
+      var(--pf-global--spacer--md, 1rem));
+}
+
+summary pf-icon {
+  /** Rotation angle for the toggle icon */
+  rotate: var(--pf-c-jump-links__toggle-icon--Rotate, 0);
+  /** Transition for the toggle icon */
+  transition: var(--pf-c-jump-links__toggle-icon--Transition,
+    var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1)));
+}
+
+summary span {
+  /** Left margin for the toggle text */
+  margin-inline-start: var(--pf-c-jump-links__toggle-text--MarginLeft,
+    var(--pf-global--spacer--md, 1rem));
+}
+
+:host([expanded]) #container {
+  /** Bottom margin for expanded toggle */
+  --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom,
+    calc(var(--pf-c-jump-links__toggle--MarginBottom--base,
+      calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))) +
+      var(--pf-global--spacer--md, 1rem)));
+  /** Rotation for expanded toggle icon */
+  --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate,
+    90deg);
+  /** Color for expanded toggle icon */
+  --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color,
+    var(--pf-global--Color--100, #151515));
+  --pf-c-jump-links__toggle-icon--Rotate: 90deg;
+}
+`;
 let PfJumpLinks = class PfJumpLinks extends LitElement {
     constructor() {
         super(...arguments);
@@ -62,11 +237,13 @@ let PfJumpLinks = class PfJumpLinks extends LitElement {
             <span id="label">${this.label}</span>
           </summary>
           <div role="listbox" aria-labelledby="label">
+            <!-- Place pf-jump-links-items here -->
             <slot></slot>
           </div>
         </details>` : html `
         <span id="label">${this.label}</span>
         <div role="listbox" aria-labelledby="label">
+          <!-- Place pf-jump-links-items here -->
           <slot></slot>
         </div>`}
       </nav>
@@ -106,7 +283,7 @@ _PfJumpLinks_onToggle = function _PfJumpLinks_onToggle(event) {
     this.dispatchEvent(new Event('toggle'));
 };
 PfJumpLinks.styles = [style];
-PfJumpLinks.version = "4.1.0";
+PfJumpLinks.version = "4.2.0";
 __decorate([
     property({ reflect: true, type: Boolean })
 ], PfJumpLinks.prototype, "expandable", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"pf-jump-links.js","sourceRoot":"","sources":["pf-jump-links.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { ScrollSpyController } from '@patternfly/pfe-core/controllers/scroll-spy-controller.js';\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\n\nimport { PfJumpLinksItem } from './pf-jump-links-item.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nimport style from './pf-jump-links.css';\n\n/**\n * **Jump links** allow users to navigate to sections within a page.\n * @fires toggle - when the `expanded` disclosure widget is toggled\n * @slot - Place pf-jump-links-items here\n * @cssprop --pf-c-jump-links__list--Display\n * @cssprop --pf-c-jump-links__list--FlexDirection\n * @cssprop --pf-c-jump-links__list--PaddingTop -- padding around the list of links\n * @cssprop --pf-c-jump-links__list--PaddingRight\n * @cssprop --pf-c-jump-links__list--PaddingBottom\n * @cssprop --pf-c-jump-links__list--PaddingLeft\n * @cssprop --pf-c-jump-links__list--Visibility\n * @cssprop --pf-c-jump-links__list--before--BorderColor\n * @cssprop --pf-c-jump-links__list--before--BorderTopWidth\n * @cssprop --pf-c-jump-links__list--before--BorderRightWidth\n * @cssprop --pf-c-jump-links__list--before--BorderBottomWidth\n * @cssprop --pf-c-jump-links__list--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links__toggle--MarginBottom--base\n * @cssprop --pf-c-jump-links__toggle--MarginTop -- padding around the expandable jump links disclosure widget.\n * @cssprop --pf-c-jump-links__toggle--MarginBottom\n * @cssprop --pf-c-jump-links__toggle--MarginBottom--base\n * @cssprop --pf-c-jump-links__toggle--MarginLeft\n * @cssprop --pf-c-jump-links__toggle-text--Color\n * @cssprop --pf-c-button--PaddingTop -- padding around the expandable jump links disclosure widget.\n * @cssprop --pf-c-button--PaddingRight\n * @cssprop --pf-c-button--PaddingBottom\n * @cssprop --pf-c-button--PaddingLeft\n * @cssprop --pf-c-jump-links__toggle-icon--Rotate\n * @cssprop --pf-c-jump-links__toggle-icon--Transition\n * @cssprop --pf-c-jump-links__toggle-text--MarginLeft\n * @cssprop --pf-c-jump-links--m-expanded__toggle--MarginBottom\n * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Rotate\n * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Color\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingTop\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingRight\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingBottom\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingLeft\n * @cssprop --pf-c-jump-links--m-vertical__list--before--BorderTopWidth\n * @cssprop --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth\n * @cssprop --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links--m-vertical__list--FlexDirection\n */\n@customElement('pf-jump-links')\nexport class PfJumpLinks extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [style];\n\n  /** Whether the element features a disclosure widget around the nav items */\n  @property({ reflect: true, type: Boolean }) expandable = false;\n\n  /** Whether the expandable element's disclosure widget is expanded */\n  @property({ reflect: true, type: Boolean }) expanded = false;\n\n  /** Whether the layout of children is vertical or horizontal. */\n  @property({ reflect: true, type: Boolean }) vertical = false;\n\n  /** Whether to center children. */\n  @property({ reflect: true, type: Boolean }) centered = false;\n\n  /** Offset to add to the scroll position, potentially for a masthead which content scrolls under. */\n  @property({ type: Number }) offset = 0;\n\n  /** Label to add to nav element. */\n  @property() label?: string;\n\n  #kids = this.querySelectorAll?.<LitElement>(':is(pf-jump-links-item, pf-jump-links-list)');\n\n  get #items() {\n    return Array.from(this.#kids ?? [])\n        .flatMap(i => [\n          ...i.shadowRoot?.querySelectorAll?.('a') ?? [],\n          ...i.querySelectorAll?.('a') ?? [],\n        ]);\n  }\n\n  #tabindex = RovingTabindexController.of<HTMLAnchorElement>(this, {\n    getItems: () => this.#items,\n  });\n\n  #spy = new ScrollSpyController(this, {\n    rootMargin: `${this.offset}px 0px 0px 0px`,\n    tagNames: ['pf-jump-links-item'],\n  });\n\n  protected override async getUpdateComplete(): Promise<boolean> {\n    const here = await super.getUpdateComplete();\n    const ps = await Promise.all(Array.from(this.#kids, x => x.updateComplete));\n    return here && ps.every(x => !!x);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('slotchange', this.#onSlotChange);\n    this.addEventListener('select', this.#onSelect);\n  }\n\n  override firstUpdated(): void {\n    const active = this.querySelector?.<PfJumpLinksItem>('pf-jump-links-item[active]');\n    if (active) {\n      this.#setActiveItem(active);\n    }\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('offset')) {\n      this.#spy.rootMargin = `${this.offset ?? 0}px 0px 0px 0px`;\n    }\n  }\n\n  render(): TemplateResult<1> {\n    return html`\n      <nav id=\"container\">${this.expandable ? html`\n        <details ?open=\"${this.expanded}\" @toggle=\"${this.#onToggle}\">\n          <summary>\n            <pf-icon icon=\"chevron-right\"></pf-icon>\n            <span id=\"label\">${this.label}</span>\n          </summary>\n          <div role=\"listbox\" aria-labelledby=\"label\">\n            <slot></slot>\n          </div>\n        </details>` : html`\n        <span id=\"label\">${this.label}</span>\n        <div role=\"listbox\" aria-labelledby=\"label\">\n          <slot></slot>\n        </div>`}\n      </nav>\n    `;\n  }\n\n  #onSlotChange() {\n    this.#tabindex.items = this.#items;\n  }\n\n  #onSelect(event: Event) {\n    if (event.target instanceof PfJumpLinksItem) {\n      this.#setActiveItem(event.target);\n    }\n  }\n\n  #setActiveItem(item: PfJumpLinksItem) {\n    const itemLink = item.shadowRoot?.querySelector?.('a') ?? null;\n    if (itemLink) {\n      this.#tabindex.atFocusedItemIndex = this.#tabindex.items.indexOf(itemLink);\n      this.#spy.setActive(item);\n    }\n  }\n\n  #onToggle(event: Event) {\n    if (event.target instanceof HTMLDetailsElement) {\n      this.expanded = event.target.open;\n    }\n    this.dispatchEvent(new Event('toggle'));\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-jump-links': PfJumpLinks;\n  }\n}\n"]}
+{"version":3,"file":"pf-jump-links.js","sourceRoot":"","sources":["pf-jump-links.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { ScrollSpyController } from '@patternfly/pfe-core/controllers/scroll-spy-controller.js';\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\n\nimport { PfJumpLinksItem } from './pf-jump-links-item.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nimport style from './pf-jump-links.css';\n\n/**\n * **Jump links** allow users to navigate to sections within a page.\n * @alias Jump Links\n * @fires toggle - when the `expanded` disclosure widget is toggled\n */\n@customElement('pf-jump-links')\nexport class PfJumpLinks extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [style];\n\n  /** Whether the element features a disclosure widget around the nav items */\n  @property({ reflect: true, type: Boolean }) expandable = false;\n\n  /** Whether the expandable element's disclosure widget is expanded */\n  @property({ reflect: true, type: Boolean }) expanded = false;\n\n  /** Whether the layout of children is vertical or horizontal. */\n  @property({ reflect: true, type: Boolean }) vertical = false;\n\n  /** Whether to center children. */\n  @property({ reflect: true, type: Boolean }) centered = false;\n\n  /** Offset to add to the scroll position, potentially for a masthead which content scrolls under. */\n  @property({ type: Number }) offset = 0;\n\n  /** Label to add to nav element. */\n  @property() label?: string;\n\n  #kids = this.querySelectorAll?.<LitElement>(':is(pf-jump-links-item, pf-jump-links-list)');\n\n  get #items() {\n    return Array.from(this.#kids ?? [])\n        .flatMap(i => [\n          ...i.shadowRoot?.querySelectorAll?.('a') ?? [],\n          ...i.querySelectorAll?.('a') ?? [],\n        ]);\n  }\n\n  #tabindex = RovingTabindexController.of<HTMLAnchorElement>(this, {\n    getItems: () => this.#items,\n  });\n\n  #spy = new ScrollSpyController(this, {\n    rootMargin: `${this.offset}px 0px 0px 0px`,\n    tagNames: ['pf-jump-links-item'],\n  });\n\n  protected override async getUpdateComplete(): Promise<boolean> {\n    const here = await super.getUpdateComplete();\n    const ps = await Promise.all(Array.from(this.#kids, x => x.updateComplete));\n    return here && ps.every(x => !!x);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('slotchange', this.#onSlotChange);\n    this.addEventListener('select', this.#onSelect);\n  }\n\n  override firstUpdated(): void {\n    const active = this.querySelector?.<PfJumpLinksItem>('pf-jump-links-item[active]');\n    if (active) {\n      this.#setActiveItem(active);\n    }\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('offset')) {\n      this.#spy.rootMargin = `${this.offset ?? 0}px 0px 0px 0px`;\n    }\n  }\n\n  render(): TemplateResult<1> {\n    return html`\n      <nav id=\"container\">${this.expandable ? html`\n        <details ?open=\"${this.expanded}\" @toggle=\"${this.#onToggle}\">\n          <summary>\n            <pf-icon icon=\"chevron-right\"></pf-icon>\n            <span id=\"label\">${this.label}</span>\n          </summary>\n          <div role=\"listbox\" aria-labelledby=\"label\">\n            <!-- Place pf-jump-links-items here -->\n            <slot></slot>\n          </div>\n        </details>` : html`\n        <span id=\"label\">${this.label}</span>\n        <div role=\"listbox\" aria-labelledby=\"label\">\n          <!-- Place pf-jump-links-items here -->\n          <slot></slot>\n        </div>`}\n      </nav>\n    `;\n  }\n\n  #onSlotChange() {\n    this.#tabindex.items = this.#items;\n  }\n\n  #onSelect(event: Event) {\n    if (event.target instanceof PfJumpLinksItem) {\n      this.#setActiveItem(event.target);\n    }\n  }\n\n  #setActiveItem(item: PfJumpLinksItem) {\n    const itemLink = item.shadowRoot?.querySelector?.('a') ?? null;\n    if (itemLink) {\n      this.#tabindex.atFocusedItemIndex = this.#tabindex.items.indexOf(itemLink);\n      this.#spy.setActive(item);\n    }\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-label/pf-label.css

@@ -20,15 +20,25 @@ pf-icon, ::slotted(pf-icon) {
   text-overflow: ellipsis;
   white-space: nowrap;
   border-width: 0;
+  /** label top padding */
   padding-top: var(--pf-c-label--PaddingTop, var(--pf-global--spacer--xs, 0.25rem));
+  /** label left padding */
   padding-left: var(--pf-c-label--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));
+  /** label bottom padding */
   padding-bottom: var(--pf-c-label--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem));
+  /** label right padding */
   padding-right: var(--pf-c-label--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));
+  /** label font size */
   font-size: var(--pf-c-label--FontSize, var(--pf-global--FontSize--sm, 0.875rem));
+  /** label text color */
   color: var(--pf-c-label--Color, var(--pf-global--Color--100, #151515));
+  /** label background color */
   background-color: var(--pf-c-label--BackgroundColor, var(--pf-global--palette--black-150, #f5f5f5));
+  /** label border radius */
   border-radius: var(--pf-c-label--BorderRadius, 30em);
+  /** label content max width */
   max-width: var(--pf-c-label__content--MaxWidth, 100%);
+  /** label content text color */
   color: var(--pf-c-label__content--Color, var(--pf-global--Color--100, #151515));
 
   --pf-global--icon--FontSize--sm: 14px;
@@ -43,6 +53,7 @@ pf-icon, ::slotted(pf-icon) {
   pointer-events: none;
   content: "";
   border-radius: var(--pf-c-label--BorderRadius, 30em);
+  /** label content border width and color */
   border: var(--pf-c-label__content--before--BorderWidth, 1px) solid var(--pf-c-label__content--before--BorderColor, var(--pf-global--palette--black-300, #d2d2d2));
 }
 
@@ -57,85 +68,117 @@ pf-icon, ::slotted(pf-icon) {
 }
 
 .compact {
+  /** compact label top padding */
   --pf-c-label--PaddingTop: var(--pf-c-label--m-compact--PaddingTop, 0);
+  /** compact label right padding */
   --pf-c-label--PaddingRight: var(--pf-c-label--m-compact--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));
+  /** compact label bottom padding */
   --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom, 0);
+  /** compact label left padding */
   --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));
   --pf-global--icon--FontSize--sm: 12px;
 }
 
 .blue {
+  /** blue label content text color */
   --pf-c-label__content--Color: var(--pf-c-label--m-blue__content--Color, var(--pf-global--info-color--200, #002952));
+  /** blue label background color */
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor, var(--pf-global--palette--blue-50, #e7f1fa));
+  /** blue label content border color */
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor, var(--pf-global--palette--blue-100, #bee1f4));
 }
 
 .blue.outline {
+  /** outline blue label content text color */
   --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-blue__content--Color, var(--pf-global--primary-color--100, #06c)));
 }
 
 .cyan {
+  /** cyan label content text color */
   --pf-c-label__content--Color: var(--pf-c-label--m-cyan__content--Color, var(--pf-global--default-color--300, #003737));
+  /** cyan label background color */
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-cyan--BackgroundColor, var(--pf-global--palette--cyan-50, #f2f9f9));
+  /** cyan label content border color */
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor, var(--pf-global--palette--cyan-100, #a2d9d9));
 }
 
 .cyan.outline {
+  /** outline cyan label content text color */
   --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-cyan__content--Color, var(--pf-global--palette--cyan-400, #005f60)))
 }
 
 .green {
+  /** green label content text color */
   --pf-c-label__content--Color: var(--pf-c-label--m-green__content--Color,var(--pf-global--success-color--200, #1e4f18));
+  /** green label background color */
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-green--BackgroundColor, var(--pf-global--palette--green-50, #f3faf2));
+  /** green label content border color */
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor, var(--pf-global--palette--green-100, #bde5b8));
 }
 
 .green.outline{
+  /** outline green label content text color */
   --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-green__content--Color, var(--pf-global--success-color--100, #3e8635)))
 }
 
 .orange {
+  /** orange label content text color */
   --pf-c-label__content--Color: var(--pf-c-label--m-orange__content--Color, var(--pf-global--palette--orange-700, #3b1f00));
+  /** orange label background color */
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-orange--BackgroundColor, var(--pf-global--palette--orange-50, #fff6ec));
+  /** orange label content border color */
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor, var(--pf-global--palette--orange-100, #f4b678));
 }
 
 .orange.outline {
+  /** outline orange label content text color */
   --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-orange__content--Color, var(--pf-global--palette--orange-500, #8f4700)))
 }
 
 .purple {
+  /** purple label content text color */
   --pf-c-label__content--Color: var(--pf-c-label--m-purple__content--Color, var(--pf-global--palette--purple-700, #1f0066));
+  /** purple label background color */
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-purple--BackgroundColor, var(--pf-global--palette--purple-50, #f2f0fc));
+  /** purple label content border color */
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor, var(--pf-global--palette--purple-100, #cbc1ff));
 }
 
 .purple.outline {
-  --pf-c-label__content--Color: var(--pf-c-label--m-purple__content--Color, var(--pf-global--palette--purple-500, #6753ac));
+  /** outline purple label content text color */
   --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-purple__content--Color, var(--pf-global--palette--purple-500, #6753ac)))
 }
 
 .red {
+  /** red label content text color */
   --pf-c-label__content--Color: var(--pf-c-label--m-red__content--Color, var(--pf-global--palette--red-300, #7d1007));
+  /** red label background color */
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-red--BackgroundColor, var(--pf-global--palette--red-50, #faeae8));
+  /** red label content border color */
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor, var(--pf-global--palette--red-100, #c9190b));
 }
 
 .red.outline {
+  /** outline red label content text color */
   --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-red__content--Color, var(--pf-global--danger-color--100, #c9190b)))
 }
 
 .gold {
+  /** gold label content text color */
   --pf-c-label__content--Color: var(--pf-c-label--m-gold__content--Color, var(--pf-global--palette--gold-700, #3d2c00));
+  /** gold label background color */
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-gold--BackgroundColor, var(--pf-global--palette--gold-50, #fdf7e7));
+  /** gold label content border color */
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor, var(--pf-global--palette--gold-100, #f9e0a2));
 }
 
 .gold.outline {
+  /** outline gold label content text color */
   --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-gold__content--Color, var(--pf-global--palette--gold-600, #795600)))
 }
 
 .outline {
+  /** outline label background color */
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-outline--BackgroundColor, #ffffff);
   --pf-c-label__content--before--BorderColor: var(--pf-global--palette--black-300, #d2d2d2);
 }
@@ -146,30 +189,37 @@ pf-icon, ::slotted(pf-icon) {
 }
 
 .blue .hasIcon [part=icon] {
+  /** blue label icon color */
   color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-blue__icon--Color, var(--pf-global--primary-color--100, #06c)));
 }
 
 .cyan .hasIcon [part=icon] {
+  /** cyan label icon color */
   color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-cyan__icon--Color, var(--pf-global--default-color--200, #009596)));
 }
 
 .green .hasIcon [part=icon] {
+  /** green label icon color */
   color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-green__icon--Color, var(--pf-global--success-color--100, #3e8635)));
 }
 
 .orange .hasIcon [part=icon] {
+  /** orange label icon color */
   color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-orange__icon--Color, var(--pf-global--palette--orange-300, #ec7a08)));
 }
 
 .purple .hasIcon [part=icon] {
+  /** purple label icon color */
   color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-purple__icon--Color, var(--pf-global--palette--purple-500, #6753ac)));
 }
 
 .red .hasIcon [part=icon] {
+  /** red label icon color */
   color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-red__icon--Color, var(--pf-global--danger-color--100, #c9190b)));
 }
 
 .gold .hasIcon [part=icon] {
+  /** gold label icon color */
   color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-gold__icon--Color, var(--pf-global--palette--gold-400, #f0ab00)));
 }
 

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

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