@patternfly/elements 2.0.0-rc.3 → 2.0.0-rc.5

package/pf-card/pf-card.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { customElement, property } from 'lit/decorators.js';
 import { css } from "lit";
-const style = css `:host {\n  background-color: var(--pf-c-card--BackgroundColor, var(--pf-global--BackgroundColor--100, #ffffff));\n  box-shadow: var(--pf-c-card--BoxShadow, var(--pf-global--BoxShadow--sm, 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)));\n}\n\n:host([size="compact"]) {\n  --_pf-c-card__body--FontSize: var(--pf-c-card--size-compact__body--FontSize, var(--pf-global--FontSize--sm, .875rem));\n  --_pf-c-card__footer--FontSize: var(--pf-c-card--size-compact__footer--FontSize, var(--pf-global--spacer--md, 1rem));\n  --_pf-c-card--first-child--PaddingTop: var(--pf-c-card--size-compact--first-child--PaddingTop, var(--pf-global--spacer--lg, 1.5rem));\n  --_pf-c-card--child--PaddingRight: var(--pf-c-card--size-compact--child--PaddingRight, var(--pf-global--spacer--md, 1rem));\n  --_pf-c-card--child--PaddingBottom: var(--pf-c-card--size-compact--child--PaddingBottom, var(--pf-global--spacer--md, 1rem));\n  --_pf-c-card--child--PaddingLeft: var(--pf-c-card--size-compact--child--PaddingLeft, var(--pf-global--spacer--md, 1rem));\n  --_pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--size-compact__title--not--last-child--PaddingBottom, var(--pf-global--spacer--sm, .5rem));\n}\n\n:host([size="large"]) {\n  --pf-c-card__title--FontSize: var(--pf-c-card--size-large__title--FontSize, var(--pf-global--FontSize--xl, 1.25rem));\n  --_pf-c-card--first-child--PaddingTop: var(--pf-c-card--size-large--first-child--PaddingTop, var(--pf-global--spacer--xl, 2rem));\n  --_pf-c-card--child--PaddingRight: var(--pf-c-card--size-large--child--PaddingRight, var(--pf-global--spacer--xl, 2rem));\n  --_pf-c-card--child--PaddingBottom: var(--pf-c-card--size-large--child--PaddingBottom, var(--pf-global--spacer--xl, 2rem));\n  --_pf-c-card--child--PaddingLeft: var(--pf-c-card--size-large--child--PaddingLeft, var(--pf-global--spacer--xl, 2rem));\n  --_pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--size-large__title--not--last-child--PaddingBottom, var(--pf-global--spacer--lg, 1.5rem));\n}\n\n:host([flat]) {\n  --pf-c-card--BoxShadow: none;\n  border: var(--pf-c-card--m-flat--BorderWidth, var(--pf-global--BorderWidth--sm, 1px)) solid var(--pf-c-card--m-flat--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2));\n}\n\n:host([plain]) {\n  --pf-c-card--BoxShadow: var(--pf-c-card--m-plain--BoxShadow, none);\n  --pf-c-card--BackgroundColor: var(--pf-c-card--m-plain--BackgroundColor, transparent);\n}\n\n:host([rounded]) {\n  border-radius: var(--pf-c-card--m-rounded--BorderRadius, var(--pf-global--BorderRadius--sm, 3px));\n}\n\n:host([full-height]) {\n  height: var(--pf-c-card--m-full-height--Height, 100%);\n  --_pf-c-card__body--FullHeight--Flex: 1 1 auto;\n}\n\n[part="header"],\n[part="body"],\n[part="footer"] {\n  padding-inline-start: var(--_pf-c-card--child--PaddingLeft, var(--pf-global--spacer--lg, 1.5rem));\n  padding-inline-end: var(--_pf-c-card--child--PaddingRight, var(--pf-global--spacer--lg, 1.5rem));\n  padding-block-end: var(--_pf-c-card--child--PaddingBottom, var(--pf-global--spacer--lg, 1.5rem));\n}\n\n[part="body"] {\n  font-size: var(--_pf-c-card__body--FontSize, var(--pf-global--FontSize--md, 1rem));\n  flex: var(--_pf-c-card__body--FullHeight--Flex, initial);\n}\n\nheader {\n  padding-block-start: var(--_pf-c-card--first-child--PaddingTop, var(--pf-global--spacer--lg, 1.5rem));\n  padding-block-end: var(--_pf-c-card__title--not--last-child--PaddingBottom, var(--pf-global--spacer--md, 1rem));\n}\n\nheader ::slotted(*) {\n  font-family: var(--pf-c-card__title--FontFamily, var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplayUpdated", helvetica, arial, sans-serif));\n  font-size: var(--pf-c-card__title--FontSize, var(--pf-global--FontSize--md, 1rem));\n  font-weight: var(--pf-c-card__title--FontWeight, var(--pf-global--FontWeight--bold, 700));\n  margin-block: 0;\n}\n\n[part="footer"] {\n  font-size: var(--_pf-c-card__footer--FontSize, var(--pf-global--FontSize--md, 1rem));\n  margin-block-start: auto;\n}\n\n`;
+const style = css `:host{background-color:var(--pf-c-card--BackgroundColor,var(--pf-global--BackgroundColor--100,#fff));box-shadow:var(--pf-c-card--BoxShadow,var(--pf-global--BoxShadow--sm,0 .0625rem .125rem 0 rgba(3,3,3,.12),0 0 .125rem 0 rgba(3,3,3,.06)))}:host([size=compact]){--_pf-c-card__body--FontSize:var(--pf-c-card--size-compact__body--FontSize, var(--pf-global--FontSize--sm, .875rem));--_pf-c-card__footer--FontSize:var(--pf-c-card--size-compact__footer--FontSize, var(--pf-global--spacer--md, 1rem));--_pf-c-card--first-child--PaddingTop:var(--pf-c-card--size-compact--first-child--PaddingTop, var(--pf-global--spacer--lg, 1.5rem));--_pf-c-card--child--PaddingRight:var(--pf-c-card--size-compact--child--PaddingRight, var(--pf-global--spacer--md, 1rem));--_pf-c-card--child--PaddingBottom:var(--pf-c-card--size-compact--child--PaddingBottom, var(--pf-global--spacer--md, 1rem));--_pf-c-card--child--PaddingLeft:var(--pf-c-card--size-compact--child--PaddingLeft, var(--pf-global--spacer--md, 1rem));--_pf-c-card__title--not--last-child--PaddingBottom:var(--pf-c-card--size-compact__title--not--last-child--PaddingBottom, var(--pf-global--spacer--sm, .5rem))}:host([size=large]){--pf-c-card__title--FontSize:var(--pf-c-card--size-large__title--FontSize, var(--pf-global--FontSize--xl, 1.25rem));--_pf-c-card--first-child--PaddingTop:var(--pf-c-card--size-large--first-child--PaddingTop, var(--pf-global--spacer--xl, 2rem));--_pf-c-card--child--PaddingRight:var(--pf-c-card--size-large--child--PaddingRight, var(--pf-global--spacer--xl, 2rem));--_pf-c-card--child--PaddingBottom:var(--pf-c-card--size-large--child--PaddingBottom, var(--pf-global--spacer--xl, 2rem));--_pf-c-card--child--PaddingLeft:var(--pf-c-card--size-large--child--PaddingLeft, var(--pf-global--spacer--xl, 2rem));--_pf-c-card__title--not--last-child--PaddingBottom:var(--pf-c-card--size-large__title--not--last-child--PaddingBottom, var(--pf-global--spacer--lg, 1.5rem))}:host([flat]){--pf-c-card--BoxShadow:none;border:var(--pf-c-card--m-flat--BorderWidth,var(--pf-global--BorderWidth--sm,1px)) solid var(--pf-c-card--m-flat--BorderColor,var(--pf-global--BorderColor--100,#d2d2d2))}:host([plain]){--pf-c-card--BoxShadow:var(--pf-c-card--m-plain--BoxShadow, none);--pf-c-card--BackgroundColor:var(--pf-c-card--m-plain--BackgroundColor, transparent)}:host([rounded]){border-radius:var(--pf-c-card--m-rounded--BorderRadius,var(--pf-global--BorderRadius--sm,3px))}:host([full-height]){height:var(--pf-c-card--m-full-height--Height,100%);--_pf-c-card__body--FullHeight--Flex:1 1 auto}[part=body],[part=footer],[part=header]{padding-inline-start:var(--_pf-c-card--child--PaddingLeft,var(--pf-global--spacer--lg,1.5rem));padding-inline-end:var(--_pf-c-card--child--PaddingRight,var(--pf-global--spacer--lg,1.5rem));padding-block-end:var(--_pf-c-card--child--PaddingBottom,var(--pf-global--spacer--lg,1.5rem))}[part=body]{font-size:var(--_pf-c-card__body--FontSize, var(--pf-global--FontSize--md, 1rem));flex:var(--_pf-c-card__body--FullHeight--Flex,initial)}header{padding-block-start:var(--_pf-c-card--first-child--PaddingTop,var(--pf-global--spacer--lg,1.5rem));padding-block-end:var(--_pf-c-card__title--not--last-child--PaddingBottom,var(--pf-global--spacer--md,1rem))}header ::slotted(*){font-family:var(--pf-c-card__title--FontFamily, var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplayUpdated", helvetica, arial, sans-serif));font-size:var(--pf-c-card__title--FontSize, var(--pf-global--FontSize--md, 1rem));font-weight:var(--pf-c-card__title--FontWeight,var(--pf-global--FontWeight--bold,700));margin-block:0}[part=footer]{font-size:var(--_pf-c-card__footer--FontSize, var(--pf-global--FontSize--md, 1rem));margin-block-start:auto}`;
 import { BaseCard } from './BaseCard.js';
 /**
  * This element creates a header, body, and footer region in which to place

package/pf-clipboard-copy/BaseClipboardCopy.js

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
 import { ComposedEvent } from '@patternfly/pfe-core';
 import { css } from "lit";
-const styles = css `[hidden],\n[inert],\n[inert]::slotted(*) {\n  display: none !important;\n}\n\n`;
+const styles = css `[hidden],[inert],[inert]::slotted(*){display:none!important}`;
 export class ClipboardCopyCopiedEvent extends ComposedEvent {
     constructor(text) {
         super('copy');

package/pf-clipboard-copy/README.md

@@ -0,0 +1,8 @@
+# Clipboard Copy
+Copy-to-clipboard widget
+
+## Usage
+
+```html
+<pf-clipboard-copy>Content to copy</pf-clipboard-copy>
+```

package/pf-clipboard-copy/pf-clipboard-copy.js

@@ -6,7 +6,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { BaseClipboardCopy } from './BaseClipboardCopy.js';
 import { css } from "lit";
-const styles = css `.container {\n  display: flex;\n  flex-direction: column;\n}\n\n#input-group {\n  display: flex;\n}\n\npf-tooltip::part(invoker) {\n  display: flex;\n  height: 100%;\n}\n\n#input-group > * + * {\n  margin-left: -1px;\n}\n\ninput {\n  color: var(--pf-c-form-control--Color,\n    var(--pf-global--Color--100, var(--pf-global--Color--dark-100, #151515)));\n  width: var(--pf-c-form-control--Width);\n  padding:\n    var(--pf-c-form-control--PaddingTop, calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px)))\n    var(--pf-c-form-control--PaddingRight, var(--pf-c-form-control--inset--base, var(--pf-global--spacer--sm, 0.5rem)))\n    var(--pf-c-form-control--PaddingBottom, calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px)))\n    var(--pf-c-form-control--PaddingLeft, var(--pf-c-form-control--inset--base, var(--pf-global--spacer--sm, 0.5rem)));\n  font-size: var(--pf-c-form-control--FontSize);\n  line-height: var(--pf-c-form-control--LineHeight);\n  background-color: var(--pf-c-form-control--BackgroundColor);\n  background-repeat: no-repeat;\n  border: var(--pf-c-form-control--BorderWidth, var(--pf-global--BorderWidth--sm, 1px)) solid;\n  border-color:\n    var(--pf-c-form-control--BorderTopColor, var(--pf-global--BorderColor--300, #f0f0f0))\n    var(--pf-c-form-control--BorderRightColor, var(--pf-global--BorderColor--300, #f0f0f0))\n    var(--pf-c-form-control--BorderBottomColor, var(--pf-global--BorderColor--200, #8a8d90))\n    var(--pf-c-form-control--BorderLeftColor, var(--pf-global--BorderColor--300, #f0f0f0));\n  border-radius: var(--pf-c-form-control--BorderRadius, 0);\n  margin: 0;\n  appearance: none;\n  height: var(--pf-c-form-control--Height, calc(var(--pf-c-form-control--FontSize) * var(--pf-c-form-control--LineHeight) + var(--pf-c-form-control--BorderWidth) * 2 + var(--pf-c-form-control--PaddingTop) + var(--pf-c-form-control--PaddingBottom)), 36px);\n  text-overflow: ellipsis;\n  flex: 1 1 auto;\n}\n\ninput[disabled] {\n  background-color: var(--pf-c-form-control--readonly--BackgroundColor,\n    var(--pf-global--disabled-color--300, #f0f0f0));\n}\n\ntextarea {\n  display: flex;\n  flex: 1 1 auto;\n  padding:\n    var(--pf-c-clipboard-copy__expandable-content--PaddingTop,\n      var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-clipboard-copy__expandable-content--PaddingRight,\n      var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-clipboard-copy__expandable-content--PaddingBottom,\n      var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-clipboard-copy__expandable-content--PaddingLeft,\n      var(--pf-global--spacer--md, 1rem));\n  word-wrap: break-word;\n  background-color: var(--pf-c-clipboard-copy__expandable-content--BackgroundColor, var(--pf-global--BackgroundColor--light-100, #fff));\n  background-clip: padding-box;\n  border: solid var(--pf-c-clipboard-copy__expandable-content--BorderColor,\n    var(--pf-global--BorderColor--100, #d2d2d2));\n  border-width:\n    var(--pf-c-clipboard-copy__expandable-content--BorderTopWidth, 0)\n    var(--pf-c-clipboard-copy__expandable-content--BorderRightWidth,\n      var(--pf-global--BorderWidth--sm, 1px))\n    var(--pf-c-clipboard-copy__expandable-content--BorderBottomWidth,\n      var(--pf-global--BorderWidth--sm, 1px))\n    var(--pf-c-clipboard-copy__expandable-content--BorderLeftWidth,\n      var(--pf-global--BorderWidth--sm, 1px));\n  box-shadow: var(--pf-c-clipboard-copy__expandable-content--BoxShadow);\n  margin: 0;\n  color: inherit;\n  font-family: inherit;\n}\n\n.container.code textarea {\n  font-family: var(--pf-global--FontFamily--monospace,\n    var(--pf-global--FontFamily--redhat--monospace,\n      "RedHatMono",\n      "Liberation Mono",\n      consolas,\n      "SFMono-Regular",\n      menlo,\n      monaco,\n      "Courier New",\n      monospace));\n}\n\n.container.expanded #expand-button pf-icon {\n  rotate: 90deg;\n}\n\n.container.inline {\n  display: inline;\n  background-color: var(--pf-c-clipboard-copy--m-inline--BackgroundColor,\n    var(--pf-global--BackgroundColor--200, #f0f0f0));\n  padding-block-start: var(--pf-c-clipboard-copy--m-inline--PaddingTop, 0px);\n  padding-block-end: var(--pf-c-clipboard-copy--m-inline--PaddingBottom, 0px);\n  padding-inline-start: var(--pf-c-clipboard-copy--m-inline--PaddingLeft,\n    var(--pf-global--spacer--xs, 0.25rem));\n  word-break: break-word;\n  white-space: normal;\n}\n\n.container:is(.compact, .inline) #input-group {\n  display: contents;\n}\n\n.container:is(.compact, .inline) pf-tooltip,\n.container:is(.compact, .inline) pf-tooltip::part(invoker) {\n  display: inline-flex;\n}\n\n.container:is(.compact, .inline) #input-group {\n  background-color: var(--pf-c-button--m-plain--BackgroundColor,\n    var(--pf-global--BackgroundColor--200, #f0f0f0));\n}\n\n.container.compact.block {\n  display: block;\n  background-color: var(--pf-c-clipboard-copy--m-inline--BackgroundColor,\n    var(--pf-global--BackgroundColor--200, #f0f0f0));\n}\n\n.container:is(.compact, .inline) #copy-button,\n.container:is(.compact, .inline) slot[name="actions"]::slotted(*) {\n  --pf-c-button--PaddingTop: var(--pf-c-clipboard-copy__actions-item--button--PaddingTop,\n    var(--pf-global--spacer--xs, 0.25rem));\n  --pf-c-button--PaddingRight: var(--pf-c-clipboard-copy__actions-item--button--PaddingRight,\n    var(--pf-global--spacer--xs, 0.25rem));\n  --pf-c-button--PaddingBottom: var(--pf-c-clipboard-copy__actions-item--button--PaddingBottom,\n    var(--pf-global--spacer--xs, 0.25rem));\n  --pf-c-button--PaddingLeft: var(--pf-c-clipboard-copy__actions-item--button--PaddingLeft,\n    var(--pf-global--spacer--sm, 0.5rem));\n  margin-block-start: calc(-1 * var(--pf-c-button--PaddingTop));\n  margin-block-end: calc(-1 * var(--pf-c-button--PaddingBottom));\n}\n\n`;
+const styles = css `.container{display:flex;flex-direction:column}#input-group{display:flex}pf-tooltip::part(invoker){display:flex;height:100%}#input-group>*+*{margin-left:-1px}input{color:var(--pf-c-form-control--Color,var(--pf-global--Color--100,var(--pf-global--Color--dark-100,#151515)));width:var(--pf-c-form-control--Width);padding:var(--pf-c-form-control--PaddingTop,calc(var(--pf-global--spacer--form-element,.375rem) - var(--pf-global--BorderWidth--sm,1px))) var(--pf-c-form-control--PaddingRight,var(--pf-c-form-control--inset--base,var(--pf-global--spacer--sm,.5rem))) var(--pf-c-form-control--PaddingBottom,calc(var(--pf-global--spacer--form-element,.375rem) - var(--pf-global--BorderWidth--sm,1px))) var(--pf-c-form-control--PaddingLeft,var(--pf-c-form-control--inset--base,var(--pf-global--spacer--sm,.5rem)));font-size:var(--pf-c-form-control--FontSize);line-height:var(--pf-c-form-control--LineHeight);background-color:var(--pf-c-form-control--BackgroundColor);background-repeat:no-repeat;border:var(--pf-c-form-control--BorderWidth,var(--pf-global--BorderWidth--sm,1px)) solid;border-color:var(--pf-c-form-control--BorderTopColor,var(--pf-global--BorderColor--300,#f0f0f0)) var(--pf-c-form-control--BorderRightColor,var(--pf-global--BorderColor--300,#f0f0f0)) var(--pf-c-form-control--BorderBottomColor,var(--pf-global--BorderColor--200,#8a8d90)) var(--pf-c-form-control--BorderLeftColor,var(--pf-global--BorderColor--300,#f0f0f0));border-radius:var(--pf-c-form-control--BorderRadius,0);margin:0;appearance:none;height:var(--pf-c-form-control--Height,calc(var(--pf-c-form-control--FontSize) * var(--pf-c-form-control--LineHeight) + var(--pf-c-form-control--BorderWidth) * 2 + var(--pf-c-form-control--PaddingTop) + var(--pf-c-form-control--PaddingBottom)),36px);text-overflow:ellipsis;flex:1 1 auto}input[disabled]{background-color:var(--pf-c-form-control--readonly--BackgroundColor,var(--pf-global--disabled-color--300,#f0f0f0))}textarea{display:flex;flex:1 1 auto;padding:var(--pf-c-clipboard-copy__expandable-content--PaddingTop,var(--pf-global--spacer--md,1rem)) var(--pf-c-clipboard-copy__expandable-content--PaddingRight,var(--pf-global--spacer--md,1rem)) var(--pf-c-clipboard-copy__expandable-content--PaddingBottom,var(--pf-global--spacer--md,1rem)) var(--pf-c-clipboard-copy__expandable-content--PaddingLeft,var(--pf-global--spacer--md,1rem));word-wrap:break-word;background-color:var(--pf-c-clipboard-copy__expandable-content--BackgroundColor,var(--pf-global--BackgroundColor--light-100,#fff));background-clip:padding-box;border:solid var(--pf-c-clipboard-copy__expandable-content--BorderColor,var(--pf-global--BorderColor--100,#d2d2d2));border-width:var(--pf-c-clipboard-copy__expandable-content--BorderTopWidth,0) var(--pf-c-clipboard-copy__expandable-content--BorderRightWidth,var(--pf-global--BorderWidth--sm,1px)) var(--pf-c-clipboard-copy__expandable-content--BorderBottomWidth,var(--pf-global--BorderWidth--sm,1px)) var(--pf-c-clipboard-copy__expandable-content--BorderLeftWidth,var(--pf-global--BorderWidth--sm,1px));box-shadow:var(--pf-c-clipboard-copy__expandable-content--BoxShadow);margin:0;color:inherit;font-family:inherit}.container.code textarea{font-family:var(--pf-global--FontFamily--monospace,\n    var(--pf-global--FontFamily--redhat--monospace,\n      "RedHatMono",\n      "Liberation Mono",\n      consolas,\n      "SFMono-Regular",\n      menlo,\n      monaco,\n      "Courier New",\n      monospace))}.container.expanded #expand-button pf-icon{rotate:90deg}.container.inline{display:inline;background-color:var(--pf-c-clipboard-copy--m-inline--BackgroundColor,var(--pf-global--BackgroundColor--200,#f0f0f0));padding-block-start:var(--pf-c-clipboard-copy--m-inline--PaddingTop,0px);padding-block-end:var(--pf-c-clipboard-copy--m-inline--PaddingBottom,0px);padding-inline-start:var(--pf-c-clipboard-copy--m-inline--PaddingLeft,var(--pf-global--spacer--xs,0.25rem));word-break:break-word;white-space:normal}.container:is(.compact,.inline) #input-group{display:contents}.container:is(.compact,.inline) pf-tooltip,.container:is(.compact,.inline) pf-tooltip::part(invoker){display:inline-flex}.container:is(.compact,.inline) #input-group{background-color:var(--pf-c-button--m-plain--BackgroundColor,var(--pf-global--BackgroundColor--200,#f0f0f0))}.container.compact.block{display:block;background-color:var(--pf-c-clipboard-copy--m-inline--BackgroundColor,var(--pf-global--BackgroundColor--200,#f0f0f0))}.container:is(.compact,.inline) #copy-button,.container:is(.compact,.inline) slot[name=actions]::slotted(*){--pf-c-button--PaddingTop:var(--pf-c-clipboard-copy__actions-item--button--PaddingTop,\n    var(--pf-global--spacer--xs, 0.25rem));--pf-c-button--PaddingRight:var(--pf-c-clipboard-copy__actions-item--button--PaddingRight,\n    var(--pf-global--spacer--xs, 0.25rem));--pf-c-button--PaddingBottom:var(--pf-c-clipboard-copy__actions-item--button--PaddingBottom,\n    var(--pf-global--spacer--xs, 0.25rem));--pf-c-button--PaddingLeft:var(--pf-c-clipboard-copy__actions-item--button--PaddingLeft,\n    var(--pf-global--spacer--sm, 0.5rem));margin-block-start:calc(-1 * var(--pf-c-button--PaddingTop));margin-block-end:calc(-1 * var(--pf-c-button--PaddingBottom))}`;
 import '@patternfly/elements/pf-button/pf-button.js';
 import '@patternfly/elements/pf-icon/pf-icon.js';
 import '@patternfly/elements/pf-tooltip/pf-tooltip.js';

package/pf-code-block/BaseCodeBlock.js

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 import { css } from "lit";
-const styles = css `:host {\n  display: block;\n}\n\n[hidden] {\n  display: none !important;\n}\n`;
+const styles = css `:host{display:block}[hidden]{display:none!important}`;
 export class BaseCodeBlock extends LitElement {
     get content() {
         const script = this.querySelector('script[type]');

package/pf-code-block/README.md

@@ -0,0 +1,77 @@
+# PatternFly Elements Code Block
+`<pf-code-block>` is a component that contains two or more lines of ready-only 
+code. The code in a code block can be copied to the clipboard.
+
+Read more about Code Block in the [PatternFly Elements Code Block 
+documentation](https://patternflyelements.org/components/code-block)
+
+##  Installation
+
+Load `<pf-code-block>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-code-block/pf-code-block.js"></script>
+```
+
+Or, if you are using [NPM](https://npm.im), install it
+
+```bash
+npm install @patternfly/pf-code-block
+```
+
+Then once installed, import it to your application:
+
+```js
+import '@patternfly/pf-code-block';
+```
+
+## Usage
+### Basic
+
+Place your code in a `script` tag with a [non-javascript mimetype][mime].
+JavaScript snippets **must** use the `text/javascript-sample` script type. 
+Script text content will be automatically dedented.
+
+
+To add copy-to-clipboard functionality, be sure to import 
+`@patternfly/pf-clipboard` and add the `pf-clipboard` to the `action` slot.
+
+```html
+<pf-code-block>
+  <script type="application/openshift">
+    apiVersion: helm.openshift.io/v1beta1/
+    kind: HelmChartRepository
+    metadata:
+    name: azure-sample-repo0oooo00ooo
+    spec:
+    connectionConfig:
+    url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
+  </script>
+</pf-code-block>
+```
+
+### Expandable
+
+If a block of code is long and you'd like to hide some of the code to take up 
+less height on the page, place the code you'd like to hide in a `script` with 
+`data-expand` attribute present.
+
+It is important that you place the span right next to the first `script`, 
+because of how the whitespace will be handled. Failing to do this can result in 
+unwanted line breaks. 
+
+```html
+<pf-code-block id="expandable-code">
+  <script type="application/openshift">
+    apiVersion: helm.openshift.io/v1beta1/
+    kind: HelmChartRepository
+    metadata:
+    name: azure-sample-repo</script><script type="application/openshift" 
+    data-expand>
+    spec:
+    connectionConfig:
+    url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
+  </script>
+  <pf-clipboard slot="actions" copy-from="#expandable-code"></pf-clipboard>
+</pf-code-block>
+```

package/pf-code-block/pf-code-block.js

@@ -5,7 +5,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { BaseCodeBlock } from './BaseCodeBlock.js';
 import { css } from "lit";
-const styles = css `:host {\n  background-color: var(--pf-c-code-block--BackgroundColor, #f0f0f0);\n  font-size: var(--pf-c-code-block__pre--FontSize, 0.875rem);\n  font-family: var(--pf-c-code-block__pre--FontFamily, "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace);\n}\n\n#container {\n  padding-top: var(--pf-c-code-block__content--PaddingTop, 1rem);\n  padding-right: var(--pf-c-code-block__content--PaddingRight, 1rem);\n  padding-bottom: var(--pf-c-code-block__content--PaddingBottom, 1rem);\n  padding-left: var(--pf-c-code-block__content--PaddingLeft, 1rem);\n}\n\n#header {\n  border-bottom: var(--pf-c-code-block__header--BorderBottomWidth, 1px) solid var(--pf-c-code-block__header--BorderBottomColor, #d2d2d2);\n}\n\n#container {\n  margin: 0;\n}\n\npre {\n  margin: 0;\n}\n\nslot[name="actions"] {\n  display: flex;\n  justify-content: end;\n}\n\n#expanded {\n  display: inline;\n}\n\nbutton {\n  display: flex;\n  background: none;\n  border: none;\n  padding: 6px 16px 6px 0;\n  color: #06c;\n  cursor: pointer;\n  font-size: 16px;\n}\n\nbutton svg {\n  color: #151515;\n  margin-right: 12px;\n  transition: .2s ease-in 0s;\n}\n\n.expanded button svg {\n  transform: rotate(-90deg);\n}\n`;
+const styles = css `:host{background-color:var(--pf-c-code-block--BackgroundColor,#f0f0f0);font-size:var(--pf-c-code-block__pre--FontSize, .875rem);font-family:var(--pf-c-code-block__pre--FontFamily, "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace)}#container{padding-top:var(--pf-c-code-block__content--PaddingTop,1rem);padding-right:var(--pf-c-code-block__content--PaddingRight,1rem);padding-bottom:var(--pf-c-code-block__content--PaddingBottom,1rem);padding-left:var(--pf-c-code-block__content--PaddingLeft,1rem)}#header{border-bottom:var(--pf-c-code-block__header--BorderBottomWidth,1px) solid var(--pf-c-code-block__header--BorderBottomColor,#d2d2d2)}#container{margin:0}pre{margin:0}slot[name=actions]{display:flex;justify-content:end}#expanded{display:inline}button{display:flex;background:0 0;border:none;padding:6px 16px 6px 0;color:#06c;cursor:pointer;font-size:16px}button svg{color:#151515;margin-right:12px;transition:.2s ease-in 0s}.expanded button svg{transform:rotate(-90deg)}`;
 /**
  * @slot code
  *       The slot to put the code in

package/pf-icon/BaseIcon.js

@@ -4,7 +4,7 @@ import { LitElement, html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 import { css } from "lit";
-const style = css `:host {\n  position: relative;\n  display:  inline-block;\n  line-height:  0;\n  height: fit-content !important;\n  width: fit-content !important;\n}\n\n#container {\n  display: grid;\n  grid-template: 1fr / 1fr;\n  place-content: center;\n}\n\n#container.content ::slotted(*) {\n  display: none;\n}\n\nsvg {\n  fill: currentcolor;\n}\n\n`;
+const style = css `:host{position:relative;display:inline-block;line-height:0;height:fit-content!important;width:fit-content!important}#container{display:grid;grid-template:1fr/1fr;place-content:center}#container.content ::slotted(*){display:none}svg{fill:currentcolor}`;
 /** requestIdleCallback when available, requestAnimationFrame when not */
 const ric = window.requestIdleCallback ?? window.requestAnimationFrame;
 /** Fired when an icon fails to load */

package/pf-icon/README.md

@@ -0,0 +1,86 @@
+# PatternFly Elements Icon
+     
+Read more about Icon in the [PatternFly Elements Icon documentation][docs]
+
+##  Installation
+
+Load `<pf-icon>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-icon/pf-icon.js"></script>
+```
+
+Or, if you are using [NPM](https://npm.im/@patternfly/elements/), install it
+
+```bash
+npm install @patternfly/elements
+```
+
+Then once installed, import it to your application:
+
+```js
+import '@patternfly/elements/pf-icon/pf-icon.js';
+```
+
+## Usage
+
+Place the icon element on the page and give it an icon name from the [default icon set][icon-sets].
+In most cases, the icon should be labelled using `aria-label` or `aria-labelledby`, or removed from
+the accessibility tree with `aria-hidden="true"` or `role="presentation"`, if its content is merely
+presentational and expressed using accessible text copy elsewhere.
+
+```html
+<pf-icon icon="award" aria-label="Awards"></pf-icon>
+```
+
+### Fallback Content
+
+If you wish to display some content while the icon loads (or while JS is disabled),
+you can slot it into `<pf-icon>`. For instance, when using a checkmark icon in a 
+server status table, you may wish to display a checkmark emoji if JS is disabled.
+
+```html
+<pf-icon icon="check">✅</pf-icon>
+```
+
+### Icon Sets
+
+Icon comes with three built-in icon sets:
+
+1. `fas`: Font Awesome Free Solid icons (the default set)
+1. `far`: Font Awesome Free Regular icons
+1. `patternfly`: PatternFly icons
+
+Use the `set` attribute to pick an alternative icon set.
+```html
+<pf-icon icon="star"    set="far"></pf-icon>
+<pf-icon icon="redhat"  set="fab"></pf-icon>
+<pf-icon icon="package" set="patternfly"></pf-icon>
+```
+
+It is possible to add custom icon sets or override the default sets.
+Icon sets are defined in detail in [the docs][icon-sets].
+
+### Bundling
+
+When bundling PfIcon with other modules, the default icon imports will be
+relative to the bundle, not the source file, so be sure to either register all
+the icon sets you'll need, or override the default getter.
+
+```js
+// Workaround for bundled pf-icon: make icon imports absolute, instead of 
+relative to the bundle
+import { PfIcon } from '/pfe.min.js';
+PfIcon.getIconUrl = (set, icon) =>
+  new URL(`/assets/icons/${set}/${icon}.js`, import.meta.url);
+  // default: new URL(`./icons/${set}/${icon}.js`, import.meta.url);
+```
+
+## Loading
+
+Icons load _lazily_ by default, meaning that the browser will not attempt to fetch and render the
+icon until it scrolls into view. You can change this with the `loading` attribute;
+see the [docs][docs] for more info.
+
+[docs]: https://patternflyelements.org/components/icon/
+[icon-sets]: https://patternflyelements.org/components/icon/#icon-sets

package/pf-icon/pf-icon.js

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { BaseIcon } from './BaseIcon.js';
 import { customElement, property } from 'lit/decorators.js';
 import { css } from "lit";
-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`;
+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))}`;
 /**
  * PatternFly Icon component lazy-loads icons and allows custom icon sets
  *

package/pf-jump-links/README.md

@@ -0,0 +1,27 @@
+# Jump Links
+
+**Jump links** allow users to navigate to sections within a page.
+
+Read more about Jump Links in the [documentation][docs].
+
+##  Installation
+
+Load `<pf-jump-links>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-jump-links/pf-jump-links.js"></script>
+```
+
+Or, if you are using [NPM](https://npm.im), install it
+
+```bash
+npm install @patternfly/elements
+```
+
+Then once installed, import it to your application:
+
+```js
+import '@patternfly/elements/pf-jump-links/pf-jump-links.js';
+```
+
+[docs]: https://patternflyelements.org/components/jump-links

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

@@ -5,7 +5,7 @@ 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`;
+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))}`;
 import { observed } from '@patternfly/pfe-core/decorators/observed.js';
 /**
  * @cssprop --pf-c-jump-links__link--PaddingTop -- padding around the link

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.js';
 import { css } from "lit";
-const style = css `:host {\n  display: block;\n}\n\n#container {\n  display: contents;\n  --pf-c-jump-links__list--PaddingTop: 0;\n  --pf-c-jump-links__list--PaddingBottom: 0;\n  --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop,\n    var(--pf-global--spacer--sm, 0.5rem));\n  --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom,\n    var(--pf-global--spacer--sm, 0.5rem));\n  --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft,\n    var(--pf-global--spacer--lg, 1.5rem));\n}\n`;
+const style = css `:host{display:block}#container{display:contents;--pf-c-jump-links__list--PaddingTop:0;--pf-c-jump-links__list--PaddingBottom:0;--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))}`;
 /**
  * @cssprop --pf-c-jump-links__list__list__link--PaddingTop -- padding around each link
  * @cssprop --pf-c-jump-links__list__list__link--PaddingBottom

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

@@ -7,7 +7,7 @@ import { RovingTabindexController } from '@patternfly/pfe-core/controllers/rovin
 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`;
+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;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,\n    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\n    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, \n    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,\n    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,\n      calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))\n    ) + 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,.375rem)) var(--pf-c-button--PaddingRight,var(--pf-global--spacer--md,1rem)) var(--pf-c-button--PaddingBottom,var(--pf-global--spacer--form-element,.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,\n    var(--pf-global--Transition, all 250ms cubic-bezier(.42, 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,\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)));--pf-c-jump-links__toggle-icon--Rotate:var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate,\n    90deg);--pf-c-jump-links__toggle-icon--Color:var(--pf-c-jump-links--m-expanded__toggle-icon--Color,\n    var(--pf-global--Color--100, #151515));--pf-c-jump-links__toggle-icon--Rotate:90deg}`;
 import { PfJumpLinksItem } from './pf-jump-links-item.js';
 /**
  * **Jump links** allow users to navigate to sections within a page.

package/pf-label/BaseLabel.js

@@ -2,7 +2,7 @@ import { LitElement, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 import { css } from "lit";
-const styles = css `:host {\n  position: relative;\n  white-space: nowrap;\n  border: 0;\n}\n\npf-icon, ::slotted(pf-icon) {\n  color: currentColor;\n}\n\n:host,\n#container {\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n}\n\n#container {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  border-width: 0;\n}\n\n#container::before {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  pointer-events: none;\n  content: "";\n}\n\n[part=icon] {\n  display: none;\n  pointer-events: none;\n}\n\n.hasIcon [part=icon] {\n  display: inline-flex;\n  width: 1em;\n}\n\n`;
+const styles = css `:host{position:relative;white-space:nowrap;border:0}::slotted(pf-icon),pf-icon{color:currentColor}#container,:host{display:inline-flex;align-items:center;vertical-align:middle}#container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-width:0}#container::before{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;content:""}[part=icon]{display:none;pointer-events:none}.hasIcon [part=icon]{display:inline-flex;width:1em}`;
 /**
  * Base label class
 */

package/pf-label/README.md

@@ -0,0 +1,61 @@
+# Label
+An inline-block element component that provides a distinct visual style for 
+metadata in a UI.  Commonly used as visual representations for tags, labels can 
+include an optional pf-icon and are available in a solid and outline style 
+variant. 
+
+Read more about Label in the [PatternFly Elements Label documentation](https://patternflyelements.org/components/label)
+
+##  Installation
+
+Load `<pf-label>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-label/pf-label.js"></script>
+```
+
+Or, if you are using [NPM](https://npm.im), install it
+
+```bash
+npm install @patternfly/elements
+```
+
+Then once installed, import it to your application:
+
+```js
+import '@patternfly/elements/pf-label/pf-label.js';
+```
+
+## Usage
+
+Default
+```html
+<p>Some Text <pf-label>Your label text here</pf-label></p>
+```
+
+Color Options: `grey (default), blue ,green, orange, red, purple, cyan`
+```html
+<p>Some Text <pf-label color="red">Your label text here</pf-label></p>
+```
+
+With and Icon:
+```html
+<p>Some Text <pf-label icon="web-icon-globe">Your label text here</pf-label></p>
+```
+
+Outline variant:
+```html
+<p>Some Text <pf-label outline>Your label text here</pf-label></p>
+```
+
+> ### Conveying meaning to assistive technologies
+> Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that
+> information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text 
+> hidden with the a class.
+
+
+```html
+<pf-label color="red">
+ Some text <span class="visually-hidden-class">Some additional info</span>
+</pf-label>
+```

package/pf-label/pf-label.js

@@ -6,7 +6,7 @@ import { ComposedEvent } from '@patternfly/pfe-core';
 import { BaseLabel } from './BaseLabel.js';
 import '@patternfly/elements/pf-button/pf-button.js';
 import { css } from "lit";
-const styles = css `#pf-container {\n  display: contents;\n}\n\n#container {\n  --pf-global--icon--FontSize--sm: 14px;\n\n  padding-top: var(--pf-c-label--PaddingTop, var(--pf-global--spacer--xs, 0.25rem));\n  padding-left: var(--pf-c-label--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));\n  padding-bottom: var(--pf-c-label--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem));\n  padding-right: var(--pf-c-label--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));\n  font-size: var(--pf-c-label--FontSize, 0.875em);\n  color: var(--pf-c-label--Color, var(--pf-global--Color--100, #151515));\n  background-color: var(--pf-c-label--BackgroundColor, var(--pf-global--palette--black-150, #f5f5f5));\n  border-radius: var(--pf-c-label--BorderRadius, 30em);\n  max-width: var(--pf-c-label__content--MaxWidth, 100%);\n  color: var(--pf-c-label__content--Color, var(--pf-global--Color--100, #151515));\n}\n\n#container::before {\n  border-radius: var(--pf-c-label--BorderRadius, 30em);\n  border: var(--pf-c-label__content--before--BorderWidth, 1px) solid var(--pf-c-label__content--before--BorderColor, var(--pf-global--palette--black-300, #d2d2d2));\n}\n\n.compact {\n  --pf-c-label--PaddingTop: var(--pf-c-label--m-compact--PaddingTop, 0);\n  --pf-c-label--PaddingRight: var(--pf-c-label--m-compact--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));\n  --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom, 0);\n  --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));\n  --pf-global--icon--FontSize--sm: 12px;\n}\n\n\n.blue {\n  --pf-c-label__content--Color: var(--pf-c-label--m-blue__content--Color, var(--pf-global--info-color--200, #002952));\n  --pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor, var(--pf-global--palette--blue-50, #e7f1fa));\n  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor, var(--pf-global--palette--blue-100, #bee1f4));\n}\n\n.blue.outline {\n  --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)));\n}\n\n.cyan {\n  --pf-c-label__content--Color: var(--pf-c-label--m-cyan__content--Color, var(--pf-global--default-color--300, #003737));\n  --pf-c-label--BackgroundColor: var(--pf-c-label--m-cyan--BackgroundColor, var(--pf-global--palette--cyan-50, #f2f9f9));\n  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor, var(--pf-global--palette--cyan-100, #a2d9d9));\n}\n\n.cyan.outline {\n  --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)))\n}\n\n.green {\n  --pf-c-label__content--Color: var(--pf-c-label--m-green__content--Color,var(--pf-global--success-color--200, #1e4f18));\n  --pf-c-label--BackgroundColor: var(--pf-c-label--m-green--BackgroundColor, var(--pf-global--palette--green-50, #f3faf2));\n  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor, var(--pf-global--palette--green-100, #bde5b8));\n}\n\n.green.outline{\n  --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)))\n}\n\n.orange {\n  --pf-c-label__content--Color: var(--pf-c-label--m-orange__content--Color, var(--pf-global--palette--orange-700, #3b1f00));\n  --pf-c-label--BackgroundColor: var(--pf-c-label--m-orange--BackgroundColor, var(--pf-global--palette--orange-50, #fff6ec));\n  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor, var(--pf-global--palette--orange-100, #f4b678));\n}\n\n.orange.outline {\n  --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)))\n}\n\n.purple {\n  --pf-c-label__content--Color: var(--pf-c-label--m-purple__content--Color, var(--pf-global--palette--purple-700, #1f0066));\n  --pf-c-label--BackgroundColor: var(--pf-c-label--m-purple--BackgroundColor, var(--pf-global--palette--purple-50, #f2f0fc));\n  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor, var(--pf-global--palette--purple-100, #cbc1ff));\n}\n\n.purple.outline {\n  --pf-c-label__content--Color: var(--pf-c-label--m-purple__content--Color, var(--pf-global--palette--purple-500, #6753ac));\n  --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)))\n}\n\n.red {\n  --pf-c-label__content--Color: var(--pf-c-label--m-red__content--Color, var(--pf-global--palette--red-300, #7d1007));\n  --pf-c-label--BackgroundColor: var(--pf-c-label--m-red--BackgroundColor, var(--pf-global--palette--red-50, #faeae8));\n  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor, var(--pf-global--palette--red-100, #c9190b));\n}\n\n.red.outline {\n  --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)))\n}\n\n.gold {\n  --pf-c-label__content--Color: var(--pf-c-label--m-gold__content--Color, var(--pf-global--palette--gold-700, #3d2c00));\n  --pf-c-label--BackgroundColor: var(--pf-c-label--m-gold--BackgroundColor, var(--pf-global--palette--gold-50, #fdf7e7));\n  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor, var(--pf-global--palette--gold-100, #f9e0a2));\n}\n\n.gold.outline {\n  --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)))\n}\n\n.outline {\n  --pf-c-label--BackgroundColor: var(--pf-c-label--m-outline--BackgroundColor, #ffffff);\n  --pf-c-label__content--before--BorderColor: var(--pf-global--palette--black-300, #d2d2d2);\n}\n\n.hasIcon [part=icon] {\n  left: var(--pf-c-label--PaddingLeft, var(--pf-global--spacer--md, 1rem));\n  margin-inline-end: var(--pf-c-label__icon--MarginRight, var(--pf-global--spacer--xs, 0.25rem));\n}\n\n.blue .hasIcon [part=icon] {\n  color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-blue__icon--Color, var(--pf-global--primary-color--100, #06c)));\n}\n\n.cyan .hasIcon [part=icon] {\n  color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-cyan__icon--Color, var(--pf-global--default-color--200, #009596)));\n}\n\n.green .hasIcon [part=icon] {\n  color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-green__icon--Color, var(--pf-global--success-color--100, #3e8635)));\n}\n\n.orange .hasIcon [part=icon] {\n  color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-orange__icon--Color, var(--pf-global--palette--orange-300, #ec7a08)));\n}\n\n.purple .hasIcon [part=icon] {\n  color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-purple__icon--Color, var(--pf-global--palette--purple-500, #6753ac)));\n}\n\n.red .hasIcon [part=icon] {\n  color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-red__icon--Color, var(--pf-global--danger-color--100, #c9190b)));\n}\n\n.gold .hasIcon [part=icon] {\n  color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-gold__icon--Color, var(--pf-global--palette--gold-400, #f0ab00)));\n}\n\npf-button {\n  --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize,\n    var(--pf-global--FontSize--xs, 0.75rem));\n  --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop,\n    var(--pf-global--spacer--xs, 0.25rem));\n  --pf-c-button--PaddingRight: var(--pf-c-label__c-button--PaddingRight,\n    var(--pf-global--spacer--sm, 0.5rem));\n  --pf-c-button--PaddingBottom: var(--pf-c-label__c-button--PaddingBottom,\n    var(--pf-global--spacer--xs, 0.25rem));\n  --pf-c-button--PaddingLeft: var(--pf-c-label__c-button--PaddingLeft,\n    var(--pf-global--spacer--sm, 0.5rem));\n    margin-top: var(--pf-c-label__c-button--MarginTop, -0.5rem);\n    margin-right: var(--pf-c-label__c-button--MarginRight, -0.5rem);\n    margin-bottom: var(--pf-c-label__c-button--MarginBottom, -0.5rem);\n    margin-left: var(--pf-c-label__c-button--MarginLeft, 0.25rem);\n}\n\nsvg {\n  vertical-align:-0.125em;\n  fill: currentColor;\n  height: 1em;\n  width: 1em;\n}\n`;
+const styles = css `#pf-container{display:contents}#container{--pf-global--icon--FontSize--sm:14px;padding-top:var(--pf-c-label--PaddingTop,var(--pf-global--spacer--xs,.25rem));padding-left:var(--pf-c-label--PaddingLeft,var(--pf-global--spacer--sm,.5rem));padding-bottom:var(--pf-c-label--PaddingBottom,var(--pf-global--spacer--xs,.25rem));padding-right:var(--pf-c-label--PaddingRight,var(--pf-global--spacer--sm,.5rem));font-size:var(--pf-c-label--FontSize, .875em);color:var(--pf-c-label--Color,var(--pf-global--Color--100,#151515));background-color:var(--pf-c-label--BackgroundColor,var(--pf-global--palette--black-150,#f5f5f5));border-radius:var(--pf-c-label--BorderRadius,30em);max-width:var(--pf-c-label__content--MaxWidth,100%);color:var(--pf-c-label__content--Color,var(--pf-global--Color--100,#151515))}#container::before{border-radius:var(--pf-c-label--BorderRadius,30em);border:var(--pf-c-label__content--before--BorderWidth,1px) solid var(--pf-c-label__content--before--BorderColor,var(--pf-global--palette--black-300,#d2d2d2))}.compact{--pf-c-label--PaddingTop:var(--pf-c-label--m-compact--PaddingTop, 0);--pf-c-label--PaddingRight:var(--pf-c-label--m-compact--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));--pf-c-label--PaddingBottom:var(--pf-c-label--m-compact--PaddingBottom, 0);--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{--pf-c-label__content--Color:var(--pf-c-label--m-blue__content--Color, var(--pf-global--info-color--200, #002952));--pf-c-label--BackgroundColor:var(--pf-c-label--m-blue--BackgroundColor, var(--pf-global--palette--blue-50, #e7f1fa));--pf-c-label__content--before--BorderColor:var(--pf-c-label--m-blue__content--before--BorderColor, var(--pf-global--palette--blue-100, #bee1f4))}.blue.outline{--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{--pf-c-label__content--Color:var(--pf-c-label--m-cyan__content--Color, var(--pf-global--default-color--300, #003737));--pf-c-label--BackgroundColor:var(--pf-c-label--m-cyan--BackgroundColor, var(--pf-global--palette--cyan-50, #f2f9f9));--pf-c-label__content--before--BorderColor:var(--pf-c-label--m-cyan__content--before--BorderColor, var(--pf-global--palette--cyan-100, #a2d9d9))}.cyan.outline{--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{--pf-c-label__content--Color:var(--pf-c-label--m-green__content--Color,var(--pf-global--success-color--200, #1e4f18));--pf-c-label--BackgroundColor:var(--pf-c-label--m-green--BackgroundColor, var(--pf-global--palette--green-50, #f3faf2));--pf-c-label__content--before--BorderColor:var(--pf-c-label--m-green__content--before--BorderColor, var(--pf-global--palette--green-100, #bde5b8))}.green.outline{--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{--pf-c-label__content--Color:var(--pf-c-label--m-orange__content--Color, var(--pf-global--palette--orange-700, #3b1f00));--pf-c-label--BackgroundColor:var(--pf-c-label--m-orange--BackgroundColor, var(--pf-global--palette--orange-50, #fff6ec));--pf-c-label__content--before--BorderColor:var(--pf-c-label--m-orange__content--before--BorderColor, var(--pf-global--palette--orange-100, #f4b678))}.orange.outline{--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{--pf-c-label__content--Color:var(--pf-c-label--m-purple__content--Color, var(--pf-global--palette--purple-700, #1f0066));--pf-c-label--BackgroundColor:var(--pf-c-label--m-purple--BackgroundColor, var(--pf-global--palette--purple-50, #f2f0fc));--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));--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{--pf-c-label__content--Color:var(--pf-c-label--m-red__content--Color, var(--pf-global--palette--red-300, #7d1007));--pf-c-label--BackgroundColor:var(--pf-c-label--m-red--BackgroundColor, var(--pf-global--palette--red-50, #faeae8));--pf-c-label__content--before--BorderColor:var(--pf-c-label--m-red__content--before--BorderColor, var(--pf-global--palette--red-100, #c9190b))}.red.outline{--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{--pf-c-label__content--Color:var(--pf-c-label--m-gold__content--Color, var(--pf-global--palette--gold-700, #3d2c00));--pf-c-label--BackgroundColor:var(--pf-c-label--m-gold--BackgroundColor, var(--pf-global--palette--gold-50, #fdf7e7));--pf-c-label__content--before--BorderColor:var(--pf-c-label--m-gold__content--before--BorderColor, var(--pf-global--palette--gold-100, #f9e0a2))}.gold.outline{--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{--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)}.hasIcon [part=icon]{left:var(--pf-c-label--PaddingLeft,var(--pf-global--spacer--md,1rem));margin-inline-end:var(--pf-c-label__icon--MarginRight,var(--pf-global--spacer--xs,.25rem))}.blue .hasIcon [part=icon]{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]{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]{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]{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]{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]{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]{color:var(--pf-c-label__icon--Color,var(--pf-c-label--m-gold__icon--Color,var(--pf-global--palette--gold-400,#f0ab00)))}pf-button{--pf-c-button--FontSize:var(--pf-c-label__c-button--FontSize,\n    var(--pf-global--FontSize--xs, 0.75rem));--pf-c-button--PaddingTop:var(--pf-c-label__c-button--PaddingTop,\n    var(--pf-global--spacer--xs, 0.25rem));--pf-c-button--PaddingRight:var(--pf-c-label__c-button--PaddingRight,\n    var(--pf-global--spacer--sm, 0.5rem));--pf-c-button--PaddingBottom:var(--pf-c-label__c-button--PaddingBottom,\n    var(--pf-global--spacer--xs, 0.25rem));--pf-c-button--PaddingLeft:var(--pf-c-label__c-button--PaddingLeft,\n    var(--pf-global--spacer--sm, 0.5rem));margin-top:var(--pf-c-label__c-button--MarginTop,-.5rem);margin-right:var(--pf-c-label__c-button--MarginRight,-.5rem);margin-bottom:var(--pf-c-label__c-button--MarginBottom,-.5rem);margin-left:var(--pf-c-label__c-button--MarginLeft,.25rem)}svg{vertical-align:-.125em;fill:currentColor;height:1em;width:1em}`;
 /**
  * Labels allow users to display meta data in a stylized form.
  *

package/pf-modal/README.md

@@ -0,0 +1,63 @@
+# PatternFly Elements Modal
+     
+`pf-modal` is a self-contained modal window that is hidden on page load and (when activated) restricts the user from interacting with content in the main window.
+
+Read more about Modal in the [PatternFly Elements Modal documentation](https://patternflyelements.org/components/modal)
+
+##  Installation
+
+Load `<pf-modal>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-modal/pf-modal.js"></script>
+```
+
+Or, if you are using [NPM](https://npm.im), install it
+
+```bash
+npm install @patternfly/elements
+```
+
+Then once installed, import it to your application:
+
+```js
+import '@patternfly/elements/pf-modal/pf-modal.js';
+```
+
+## Usage
+
+Open a modal dialog with the `showModal()` method, or by setting the `open` boolean attribute.
+
+```html
+<pf-modal>
+  <h2 slot="header">Modal with a header</h2>
+  <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  <a slot="footer" href="#bar">Learn more</a>
+</pf-modal>
+
+<script>
+document.querySelector('pf-modal').showModal();
+</script>
+```
+
+### With a trigger
+
+You may assign a button-like trigger element to the modal by setting the modal element's `trigger` attribute to the trigger's ID.
+
+```html
+<pf-modal trigger="trigger-button">
+  <h2 slot="header">Modal with a header</h2>
+  <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  <a slot="footer" href="#bar">Learn more</a>
+</pf-modal>
+
+<button id="trigger-button">Open modal</button>
+```
+
+You may also imperatively set the trigger element with the `setTrigger()` method:
+```js
+const modal = document.querySelector('pf-modal');
+const trigger = document.querySelector('button#my-trigger');
+modal.setTrigger(trigger);
+```
+