@patternfly/elements 2.0.0-rc.4 → 2.0.0-rc.6

package/pf-icon/icons/fas/wine-glass-empty.js

@@ -1 +1 @@
-const t = document.createElement('template');t.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" data-icon-name="wine-glass-empty" height="512" width="320" viewBox="0 0 320 512"><path d="M64 0C47.4 0 33.5 12.8 32.1 29.3l-14 168.4c-6 72 42.5 135.2 109.9 150.6V448H80c-17.7 0-32 14.3-32 32s14.3 32 32 32h80 80c17.7 0 32-14.3 32-32s-14.3-32-32-32H192V348.4c67.4-15.4 115.9-78.6 109.9-150.6l-14-168.4C286.5 12.8 272.6 0 256 0H64zM81.9 203.1L93.4 64H226.6l11.6 139.1C242 248.8 205.9 288 160 288s-82-39.2-78.1-84.9z" /></svg>`;export default t.content.cloneNode(true);
+const t = document.createElement('template');t.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" data-icon-name="wine-glass-empty" height="512" width="320" viewBox="0 0 320 512"><path d="M47 0C30.4 0 16.5 12.8 15.1 29.3L1.1 197.8c-6 72 42.5 135.2 109.9 150.6V448H63c-17.7 0-32 14.3-32 32s14.3 32 32 32h80 80c17.7 0 32-14.3 32-32s-14.3-32-32-32H175V348.4c67.4-15.4 115.9-78.6 109.9-150.6l-14-168.4C269.5 12.8 255.6 0 239 0H47zM64.9 203.1L76.4 64H209.6l11.6 139.1C225 248.8 188.9 288 143 288s-82-39.2-78.1-84.9z" /></svg>`;export default t.content.cloneNode(true);

package/pf-icon/icons/fas/wine-glass.js

@@ -1 +1 @@
-const t = document.createElement('template');t.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" data-icon-name="wine-glass" height="512" width="320" viewBox="0 0 320 512"><path d="M64 0C47.4 0 33.5 12.8 32.1 29.3l-14 168.4c-6 72 42.5 135.2 109.9 150.6V448H80c-17.7 0-32 14.3-32 32s14.3 32 32 32h80 80c17.7 0 32-14.3 32-32s-14.3-32-32-32H192V348.4c67.4-15.4 115.9-78.6 109.9-150.6l-14-168.4C286.5 12.8 272.6 0 256 0H64zM88.1 128l5.3-64H226.6l5.3 64H88.1z" /></svg>`;export default t.content.cloneNode(true);
+const t = document.createElement('template');t.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" data-icon-name="wine-glass" height="512" width="320" viewBox="0 0 320 512"><path d="M47 0C30.4 0 16.5 12.8 15.1 29.3L1.1 197.8c-6 72 42.5 135.2 109.9 150.6V448H63c-17.7 0-32 14.3-32 32s14.3 32 32 32h80 80c17.7 0 32-14.3 32-32s-14.3-32-32-32H175V348.4c67.4-15.4 115.9-78.6 109.9-150.6l-14-168.4C269.5 12.8 255.6 0 239 0H47zM71.1 128l5.3-64H209.6l5.3 64H71.1z" /></svg>`;export default t.content.cloneNode(true);

package/pf-icon/icons/fas/worm.js

@@ -1 +1 @@
-const t = document.createElement('template');t.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" data-icon-name="worm" height="512" width="448" viewBox="0 0 448 512"><path d="M224 96c0-53 43-96 96-96h38.4C407.9 0 448 40.1 448 89.6V176v16V376c0 75.1-60.9 136-136 136s-136-60.9-136-136V296c0-22.1-17.9-40-40-40s-40 17.9-40 40V464c0 26.5-21.5 48-48 48s-48-21.5-48-48V296c0-75.1 60.9-136 136-136s136 60.9 136 136v80c0 22.1 17.9 40 40 40s40-17.9 40-40V192H320c-53 0-96-43-96-96zm144-8c0-13.3-10.7-24-24-24s-24 10.7-24 24s10.7 24 24 24s24-10.7 24-24z" /></svg>`;export default t.content.cloneNode(true);
+const t = document.createElement('template');t.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" data-icon-name="worm" height="512" width="448" viewBox="0 0 448 512"><path d="M224 96c0-53 43-96 96-96h38.4C407.9 0 448 40.1 448 89.6V176v16V376c0 75.1-60.9 136-136 136s-136-60.9-136-136V296c0-22.1-17.9-40-40-40s-40 17.9-40 40V464c0 26.5-21.5 48-48 48s-48-21.5-48-48V296c0-75.1 60.9-136 136-136s136 60.9 136 136v80c0 22.1 17.9 40 40 40s40-17.9 40-40V192H320c-53 0-96-43-96-96zm144-8a24 24 0 1 0 -48 0 24 24 0 1 0 48 0z" /></svg>`;export default t.content.cloneNode(true);

package/pf-icon/icons/fas/wrench.js

@@ -1 +1 @@
-const t = document.createElement('template');t.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" data-icon-name="wrench" height="512" width="512" viewBox="0 0 512 512"><path d="M352 320c88.4 0 160-71.6 160-160c0-15.3-2.2-30.1-6.2-44.2c-3.1-10.8-16.4-13.2-24.3-5.3l-76.8 76.8c-3 3-7.1 4.7-11.3 4.7H336c-8.8 0-16-7.2-16-16V118.6c0-4.2 1.7-8.3 4.7-11.3l76.8-76.8c7.9-7.9 5.4-21.2-5.3-24.3C382.1 2.2 367.3 0 352 0C263.6 0 192 71.6 192 160c0 19.1 3.4 37.5 9.5 54.5L19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L297.5 310.5c17 6.2 35.4 9.5 54.5 9.5zM80 456c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24z" /></svg>`;export default t.content.cloneNode(true);
+const t = document.createElement('template');t.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" data-icon-name="wrench" height="512" width="512" viewBox="0 0 512 512"><path d="M352 320c88.4 0 160-71.6 160-160c0-15.3-2.2-30.1-6.2-44.2c-3.1-10.8-16.4-13.2-24.3-5.3l-76.8 76.8c-3 3-7.1 4.7-11.3 4.7H336c-8.8 0-16-7.2-16-16V118.6c0-4.2 1.7-8.3 4.7-11.3l76.8-76.8c7.9-7.9 5.4-21.2-5.3-24.3C382.1 2.2 367.3 0 352 0C263.6 0 192 71.6 192 160c0 19.1 3.4 37.5 9.5 54.5L19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L297.5 310.5c17 6.2 35.4 9.5 54.5 9.5zM80 408a24 24 0 1 1 0 48 24 24 0 1 1 0-48z" /></svg>`;export default t.content.cloneNode(true);

package/pf-icon/icons/fas/x-ray.js

@@ -1 +1 @@
-const t = document.createElement('template');t.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" data-icon-name="x-ray" height="512" width="512" viewBox="0 0 512 512"><path d="M0 64C0 46.3 14.3 32 32 32H480c17.7 0 32 14.3 32 32s-14.3 32-32 32V416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32V96C14.3 96 0 81.7 0 64zM256 96c-8.8 0-16 7.2-16 16v16H144c-8.8 0-16 7.2-16 16s7.2 16 16 16h96v32H112c-8.8 0-16 7.2-16 16s7.2 16 16 16H240v32H144c-8.8 0-16 7.2-16 16s7.2 16 16 16h96v32H152c-8.9 0-17 4.9-21.2 12.7s-3.7 17.3 1.2 24.6l32 48C168.5 412 176 416 184 416H328c8 0 15.5-4 20-10.7l32-48c4.9-7.4 5.4-16.8 1.2-24.6S368.9 320 360 320H272V288h96c8.8 0 16-7.2 16-16s-7.2-16-16-16H272V224H400c8.8 0 16-7.2 16-16s-7.2-16-16-16H272V160h96c8.8 0 16-7.2 16-16s-7.2-16-16-16H272V112c0-8.8-7.2-16-16-16zM208 384c-8.8 0-16-7.2-16-16s7.2-16 16-16s16 7.2 16 16s-7.2 16-16 16zm112-16c0 8.8-7.2 16-16 16s-16-7.2-16-16s7.2-16 16-16s16 7.2 16 16z" /></svg>`;export default t.content.cloneNode(true);
+const t = document.createElement('template');t.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" data-icon-name="x-ray" height="512" width="512" viewBox="0 0 512 512"><path d="M0 64C0 46.3 14.3 32 32 32H480c17.7 0 32 14.3 32 32s-14.3 32-32 32V416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32V96C14.3 96 0 81.7 0 64zM256 96c-8.8 0-16 7.2-16 16v32H160c-8.8 0-16 7.2-16 16s7.2 16 16 16h80v48H128c-8.8 0-16 7.2-16 16s7.2 16 16 16H240v70.6L189.1 307c-5.2-2-10.6-3-16.2-3h-2.1c-23.6 0-42.8 19.2-42.8 42.8c0 9.6 3.2 18.9 9.1 26.4l18.2 23.2c9.7 12.4 24.6 19.6 40.3 19.6H316.4c15.7 0 30.6-7.2 40.3-19.6l18.2-23.2c5.9-7.5 9.1-16.8 9.1-26.4c0-23.6-19.2-42.8-42.8-42.8H339c-5.5 0-11 1-16.2 3L272 326.6V256H384c8.8 0 16-7.2 16-16s-7.2-16-16-16H272V176h80c8.8 0 16-7.2 16-16s-7.2-16-16-16H272V112c0-8.8-7.2-16-16-16zM208 352a16 16 0 1 1 0 32 16 16 0 1 1 0-32zm80 16a16 16 0 1 1 32 0 16 16 0 1 1 -32 0z" /></svg>`;export default t.content.cloneNode(true);

package/pf-icon/icons/fas/yin-yang.js

@@ -1 +1 @@
-const t = document.createElement('template');t.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" data-icon-name="yin-yang" height="512" width="512" viewBox="0 0 512 512"><path d="M256 64c53 0 96 43 96 96s-43 96-96 96s-96 43-96 96s43 96 96 96C150 448 64 362 64 256S150 64 256 64zm0 448c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm32-352c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32zm0 192c0 17.7-14.3 32-32 32s-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32z" /></svg>`;export default t.content.cloneNode(true);
+const t = document.createElement('template');t.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" data-icon-name="yin-yang" height="512" width="512" viewBox="0 0 512 512"><path d="M256 64c53 0 96 43 96 96s-43 96-96 96s-96 43-96 96s43 96 96 96C150 448 64 362 64 256S150 64 256 64zm0 448A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm32-352a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" /></svg>`;export default t.content.cloneNode(true);

package/pf-icon/icons/patternfly/data-processor.js

@@ -0,0 +1 @@
+const t = document.createElement('template');t.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" data-icon-name="data-processor" height="1024" width="1024" viewBox="0 0 1024 1024"><path d="M879.0474,64.5 L1024.3914,224.5 L879.0474,384.5 L832.4324,341.094 L909.276499,256.5 L180.1341,256.5 C148.0811,257.327 118.0301,271.052 95.4831,295.334 C72.8821,319.674 60.4361,351.806 60.4361,385.811 L60.4361,386.471 C60.4361,420.381 72.7991,452.159 95.2501,475.95 C117.7211,499.761 147.6961,512.5 179.6531,512.5 L323.373499,512.5 L512.4992,367.3227 L701.624499,512.5 L845.5586,512.5 C892.8806,512.5 937.36031,531.51296 970.971417,566.572676 L971.9866,567.64 C1005.8506,603.526 1024.4996,651.43 1024.4996,702.529 L1024.4996,703.189 C1024.4996,754.188 1005.8886,802.318 972.0946,838.711 C938.5136,874.875 893.7406,895.395 846.0236,896.492 L845.6746,896.5 L31.2476,896.5 C14.7556,896.466 0.4686,881.3 0.499549646,863.652 C0.5316,846.026 14.7836,832.5 31.2476,832.5 L845.0776,832.5 C877.1296,831.673 907.1816,817.948 929.7276,793.666 C952.3286,769.326 964.7756,737.194 964.7756,703.189 L964.7756,702.529 C964.7756,668.619 952.4116,636.841 929.9606,613.05 C907.4896,589.239 877.5156,576.5 845.5586,576.5 L703.333499,576.5 L512.4992,720.9647 L321.665499,576.5 L179.6531,576.5 C132.33011,576.5 87.8513702,557.48704 54.240283,522.427324 L53.2251,521.36 C19.3611,485.474 0.7111,437.57 0.7111,386.471 L0.7111,385.811 C0.7111,334.812 19.3221,286.682 53.1161,250.289 C86.6971,214.125 131.4701,193.605 179.1871,192.508 L179.5371,192.5 L909.276499,192.5 L832.4324,107.906 L879.0474,64.5 Z M512.4992,450.3267 L389.4332,544.7967 L512.4992,637.9607 L635.5662,544.7967 L512.4992,450.3267 Z" /></svg>`;export default t.content.cloneNode(true);

package/pf-icon/pf-icon.js

@@ -1,8 +1,9 @@
 import { __decorate } from "tslib";
 import { BaseIcon } from './BaseIcon.js';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
 import { css } from "lit";
-const style = css `:host([size=sm]) #container { --_size: var(--pf-global--icon--FontSize--sm, 10px); }\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-icon/pf-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-icon.js","sourceRoot":"","sources":["pf-icon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;;;AAI5D;;;;;;;GAOG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,QAAQ;IAA7B;;QAKL,uBAAuB;QACM,SAAI,GAAwB,IAAI,CAAC;IAChE,CAAC;;AANwB,aAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAE9C,qBAAc,GAAG,KAAK,CAAC;AAGR;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAAkC;AANnD,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAOlB;SAPY,MAAM","sourcesContent":["import { BaseIcon } from './BaseIcon.js';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport style from './pf-icon.css';\n\n/**\n * PatternFly Icon component lazy-loads icons and allows custom icon sets\n *\n * @slot - Slotted content is used as a fallback in case the icon doesn't load\n * @fires load - Fired when an icon is loaded and rendered\n * @fires error - Fired when an icon fails to load\n * @csspart fallback - Container for the fallback (i.e. slotted) content\n */\n@customElement('pf-icon')\nexport class PfIcon extends BaseIcon {\n  public static readonly styles = [...BaseIcon.styles, style];\n\n  public static defaultIconSet = 'fas';\n\n  /** Size of the icon */\n  @property({ reflect: true }) size: 'sm'|'md'|'lg'|'xl' = 'sm';\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-icon': PfIcon;\n  }\n}\n"]}
+{"version":3,"file":"pf-icon.js","sourceRoot":"","sources":["pf-icon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAItD;;;;;;;GAOG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,QAAQ;IAA7B;;QAKL,uBAAuB;QACM,SAAI,GAAwB,IAAI,CAAC;IAChE,CAAC;;AANwB,aAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAE9C,qBAAc,GAAG,KAAK,CAAC;AAGR;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAAkC;AANnD,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAOlB;SAPY,MAAM","sourcesContent":["import { BaseIcon } from './BaseIcon.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport style from './pf-icon.css';\n\n/**\n * PatternFly Icon component lazy-loads icons and allows custom icon sets\n *\n * @slot - Slotted content is used as a fallback in case the icon doesn't load\n * @fires load - Fired when an icon is loaded and rendered\n * @fires error - Fired when an icon fails to load\n * @csspart fallback - Container for the fallback (i.e. slotted) content\n */\n@customElement('pf-icon')\nexport class PfIcon extends BaseIcon {\n  public static readonly styles = [...BaseIcon.styles, style];\n\n  public static defaultIconSet = 'fas';\n\n  /** Size of the icon */\n  @property({ reflect: true }) size: 'sm'|'md'|'lg'|'xl' = 'sm';\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-icon': PfIcon;\n  }\n}\n"]}

package/pf-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

@@ -1,11 +1,13 @@
 var _PfJumpLinksItem_instances, _PfJumpLinksItem_internals, _PfJumpLinksItem_onClick, _PfJumpLinksItem_onFocus;
 import { __classPrivateFieldGet, __decorate } from "tslib";
 import { html, LitElement } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { query } from 'lit/decorators/query.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-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-jump-links-item.js","sourceRoot":"","sources":["pf-jump-links-item.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;;;AAI/F,OAAO,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;AAEvE;;;;;;;GAOG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;;QAKuC,WAAM,GAAG,KAAK,CAAC;QAI3D,qCAAa,IAAI,mBAAmB,CAAC,IAAI,EAAE;YACzC,IAAI,EAAE,UAAU;SACjB,CAAC,EAAC;IA+BL,CAAC;IA7BU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;iBACE,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,uBAAA,IAAI,4DAAS,aAAa,uBAAA,IAAI,4DAAS;;;;KAIpF,CAAC;IACJ,CAAC;IAED,KAAK;QACH,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;IACpB,CAAC;IAEO,aAAa;QACnB,uBAAA,IAAI,kCAAW,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC;IAChE,CAAC;;;IAGC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;AAC7D,CAAC;IAGC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;AAC5D,CAAC;AAxCe,sBAAM,GAAG,CAAC,KAAK,CAAC,CAAC;AAErB;IAAX,KAAK,CAAC,GAAG,CAAC;6CAAyB;AAEQ;IAD3C,QAAQ,CAAC,eAAe,CAAC;IACzB,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAgB;AAE9B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAe;AAPhC,eAAe;IAD3B,aAAa,CAAC,oBAAoB,CAAC;GACvB,eAAe,CA0C3B;SA1CY,eAAe","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport style from './pf-jump-links-item.css';\n\nimport { observed } from '@patternfly/pfe-core/decorators/observed.js';\n\n/**\n * @cssprop --pf-c-jump-links__link--PaddingTop -- padding around the link\n * @cssprop --pf-c-jump-links__link--PaddingRight\n * @cssprop --pf-c-jump-links__link--PaddingBottom\n * @cssprop --pf-c-jump-links__link--PaddingLeft\n * @cssprop --pf-c-jump-links__link--OutlineOffset\n * @cssprop --pf-c-jump-links__link-text--Color\n */\n@customElement('pf-jump-links-item')\nexport class PfJumpLinksItem extends LitElement {\n  static readonly styles = [style];\n\n  @query('a') link!:HTMLAnchorElement;\n  @observed('activeChanged')\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  @property({ reflect: true }) href?: string;\n\n  #internals = new InternalsController(this, {\n    role: 'listitem'\n  });\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.activeChanged();\n  }\n\n  render() {\n    return html`\n      <a href=\"${ifDefined(this.href)}\" @focus=\"${this.#onFocus}\" @click=\"${this.#onClick}\">\n        <slot></slot>\n      </a>\n      <slot name=\"subsection\"></slot>\n    `;\n  }\n\n  focus(): void {\n    this.link.focus();\n  }\n\n  private activeChanged() {\n    this.#internals.ariaCurrent = this.active ? 'location' : null;\n  }\n\n  #onClick() {\n    this.dispatchEvent(new Event('select', { bubbles: true }));\n  }\n\n  #onFocus() {\n    this.dispatchEvent(new Event('focus', { bubbles: true }));\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-jump-links-item': PfJumpLinksItem;\n  }\n}\n"]}
+{"version":3,"file":"pf-jump-links-item.js","sourceRoot":"","sources":["pf-jump-links-item.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;;;AAI/F,OAAO,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;AAEvE;;;;;;;GAOG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;;QAKuC,WAAM,GAAG,KAAK,CAAC;QAI3D,qCAAa,IAAI,mBAAmB,CAAC,IAAI,EAAE;YACzC,IAAI,EAAE,UAAU;SACjB,CAAC,EAAC;IA+BL,CAAC;IA7BU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;iBACE,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,uBAAA,IAAI,4DAAS,aAAa,uBAAA,IAAI,4DAAS;;;;KAIpF,CAAC;IACJ,CAAC;IAED,KAAK;QACH,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;IACpB,CAAC;IAEO,aAAa;QACnB,uBAAA,IAAI,kCAAW,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC;IAChE,CAAC;;;IAGC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;AAC7D,CAAC;IAGC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;AAC5D,CAAC;AAxCe,sBAAM,GAAG,CAAC,KAAK,CAAC,CAAC;AAErB;IAAX,KAAK,CAAC,GAAG,CAAC;6CAAyB;AAEQ;IAD3C,QAAQ,CAAC,eAAe,CAAC;IACzB,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAgB;AAE9B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAe;AAPhC,eAAe;IAD3B,aAAa,CAAC,oBAAoB,CAAC;GACvB,eAAe,CA0C3B;SA1CY,eAAe","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\n\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport style from './pf-jump-links-item.css';\n\nimport { observed } from '@patternfly/pfe-core/decorators/observed.js';\n\n/**\n * @cssprop --pf-c-jump-links__link--PaddingTop -- padding around the link\n * @cssprop --pf-c-jump-links__link--PaddingRight\n * @cssprop --pf-c-jump-links__link--PaddingBottom\n * @cssprop --pf-c-jump-links__link--PaddingLeft\n * @cssprop --pf-c-jump-links__link--OutlineOffset\n * @cssprop --pf-c-jump-links__link-text--Color\n */\n@customElement('pf-jump-links-item')\nexport class PfJumpLinksItem extends LitElement {\n  static readonly styles = [style];\n\n  @query('a') link!:HTMLAnchorElement;\n  @observed('activeChanged')\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  @property({ reflect: true }) href?: string;\n\n  #internals = new InternalsController(this, {\n    role: 'listitem'\n  });\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.activeChanged();\n  }\n\n  render() {\n    return html`\n      <a href=\"${ifDefined(this.href)}\" @focus=\"${this.#onFocus}\" @click=\"${this.#onClick}\">\n        <slot></slot>\n      </a>\n      <slot name=\"subsection\"></slot>\n    `;\n  }\n\n  focus(): void {\n    this.link.focus();\n  }\n\n  private activeChanged() {\n    this.#internals.ariaCurrent = this.active ? 'location' : null;\n  }\n\n  #onClick() {\n    this.dispatchEvent(new Event('select', { bubbles: true }));\n  }\n\n  #onFocus() {\n    this.dispatchEvent(new Event('focus', { bubbles: true }));\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-jump-links-item': PfJumpLinksItem;\n  }\n}\n"]}

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

@@ -1,8 +1,8 @@
 import { __decorate } from "tslib";
 import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement } from 'lit/decorators/custom-element.js';
 import { css } from "lit";
-const style = css `:host {\n  display: block;\n}\n\n#container {\n  display: contents;\n  --pf-c-jump-links__list--PaddingTop: 0;\n  --pf-c-jump-links__list--PaddingBottom: 0;\n  --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop,\n    var(--pf-global--spacer--sm, 0.5rem));\n  --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom,\n    var(--pf-global--spacer--sm, 0.5rem));\n  --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft,\n    var(--pf-global--spacer--lg, 1.5rem));\n}\n`;
+const style = css `:host{display:block}#container{display:contents;--pf-c-jump-links__list--PaddingTop:0;--pf-c-jump-links__list--PaddingBottom:0;--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-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-jump-links-list.js","sourceRoot":"","sources":["pf-jump-links-list.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;;;AAIlD;;;;GAIG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAG7C,MAAM;QACJ,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AARe,sBAAM,GAAG,CAAC,KAAK,CAAC,CAAC;AADtB,eAAe;IAD3B,aAAa,CAAC,oBAAoB,CAAC;GACvB,eAAe,CAU3B;SAVY,eAAe","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\nimport style from './pf-jump-links-list.css';\n\n/**\n * @cssprop --pf-c-jump-links__list__list__link--PaddingTop -- padding around each link\n * @cssprop --pf-c-jump-links__list__list__link--PaddingBottom\n * @cssprop --pf-c-jump-links__list__list__link--PaddingLeft\n */\n@customElement('pf-jump-links-list')\nexport class PfJumpLinksList extends LitElement {\n  static readonly styles = [style];\n\n  render() {\n    return html`\n      <div id=\"container\" role=\"listbox\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-jump-links-list': PfJumpLinksList;\n  }\n}\n"]}
+{"version":3,"file":"pf-jump-links-list.js","sourceRoot":"","sources":["pf-jump-links-list.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;;;AAIjE;;;;GAIG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAG7C,MAAM;QACJ,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AARe,sBAAM,GAAG,CAAC,KAAK,CAAC,CAAC;AADtB,eAAe;IAD3B,aAAa,CAAC,oBAAoB,CAAC;GACvB,eAAe,CAU3B;SAVY,eAAe","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport style from './pf-jump-links-list.css';\n\n/**\n * @cssprop --pf-c-jump-links__list__list__link--PaddingTop -- padding around each link\n * @cssprop --pf-c-jump-links__list__list__link--PaddingBottom\n * @cssprop --pf-c-jump-links__list__list__link--PaddingLeft\n */\n@customElement('pf-jump-links-list')\nexport class PfJumpLinksList extends LitElement {\n  static readonly styles = [style];\n\n  render() {\n    return html`\n      <div id=\"container\" role=\"listbox\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-jump-links-list': PfJumpLinksList;\n  }\n}\n"]}

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

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

package/pf-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

@@ -1,12 +1,13 @@
 import { __decorate } from "tslib";
 import { html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
 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-label/pf-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-label.js","sourceRoot":"","sources":["pf-label.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,6CAA6C,CAAC;;;AAoBrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkFG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,SAAS;IAA/B;;QAKL;;;;WAIG;QACS,YAAO,GAAiB,QAAQ,CAAC;QAE7C;;WAEG;QACS,UAAK,GAAe,MAAM,CAAC;QAKvC,2CAA2C;QACd,YAAO,GAAG,KAAK,CAAC;QAE7C,yDAAyD;QAC5B,cAAS,GAAG,KAAK,CAAC;QAE/C,6CAA6C;QAChB,cAAS,GAAG,KAAK,CAAC;IA+BjD,CAAC;IA1BU,MAAM;QACb,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QACpC,OAAO,IAAI,CAAA;uCACwB,QAAQ,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,KAAK,KAAK,CAAC,MAAM,EAAE;KACrF,CAAC;IACJ,CAAC;IAEkB,iBAAiB;QAClC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;uBACV,IAAI,CAAC,IAAI;KAC3B,CAAC;IACJ,CAAC;IAEkB,YAAY;QAC7B,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;0CACI,CAAC,IAAI,CAAC,SAAS;;8BAE3B,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,aAAa,CAAC,OAAO,CAAC,CAAC;6BACrD,IAAI,CAAC,gBAAgB,IAAI,QAAQ;;;;;;KAMzD,CAAC;IACJ,CAAC;;AAxDe,cAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEvC,yBAAiB,GAAmB,EAAE,GAAG,SAAS,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC;AAOjG;IAAX,QAAQ,EAAE;wCAAkC;AAKjC;IAAX,QAAQ,EAAE;sCAA4B;AAG3B;IAAX,QAAQ,EAAE;qCAAe;AAGG;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAiB;AAGhB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAmB;AAGlB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAmB;AAGA;IAA9C,QAAQ,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;iDAA2B;AA9B9D,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA0DnB;SA1DY,OAAO","sourcesContent":["import { html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { ComposedEvent } from '@patternfly/pfe-core';\n\nimport { BaseLabel } from './BaseLabel.js';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\n\nimport styles from './pf-label.css';\n\nexport type LabelVariant = (\n  | 'filled'\n  | 'outline'\n);\n\nexport type LabelColor = (\n  | 'blue'\n  | 'cyan'\n  | 'green'\n  | 'orange'\n  | 'purple'\n  | 'red'\n  | 'grey'\n  | 'gold'\n)\n\n/**\n * Labels allow users to display meta data in a stylized form.\n *\n * @summary Allows users to display meta data in a stylized form.\n *\n * @fires close - when a removable label's close button is clicked\n *\n * @cssprop {<length>} --pf-c-label--FontSize   {@default `0.875em`}\n *\n * @cssprop {<length>} --pf-c-label--PaddingTop     {@default `0.25rem`}\n * @cssprop {<length>} --pf-c-label--PaddingRight   {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-label--PaddingBottom  {@default `0.25rem`}\n * @cssprop {<length>} --pf-c-label--PaddingLeft    {@default `0.5rem`}\n *\n * @cssprop {<color>} --pf-c-label--Color           {@default `#151515`}\n * @cssprop {<color>} --pf-c-label--BackgroundColor {@default `#f5f5f5`}\n *\n * @cssprop {<length>} --pf-c-label--BorderRadius {@default `30em`}\n *\n * @cssprop {<length>} --pf-c-label__content--MaxWidth            {@default `100%`}\n * @cssprop {<color>} --pf-c-label__content--Color                {@default `#151515`}\n * @cssprop {<length>} --pf-c-label__content--before--BorderWidth {@default `1px`}\n * @cssprop {<color>} --pf-c-label__content--before--BorderColor  {@default `#d2d2d2`}\n *\n * @cssprop {<color>} --pf-c-label--m-outline__content--Color  {@default `#151515`}\n * @cssprop {<color>} --pf-c-label--m-outline--BackgroundColor {@default `#ffffff`}\n *\n * @cssprop {<color>} --pf-c-label--m-blue__content--Color                {@default `#002952`}\n * @cssprop {<color>} --pf-c-label--m-blue--BackgroundColor               {@default `#e7f1fa`}\n * @cssprop {<color>} --pf-c-label--m-blue__content--before--BorderColor  {@default `#bee1f4`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-blue__content--Color      {@default `#06c`}\n *\n * @cssprop {<color>} --pf-c-label--m-cyan__content--Color                {@default `#3b1f00`}\n * @cssprop {<color>} --pf-c-label--m-cyan--BackgroundColor               {@default `#f2f9f9`}\n * @cssprop {<color>} --pf-c-label--m-cyan__content--before--BorderColor  {@default `#a2d9d9`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-cyan__content--Color      {@default `#005f60`}\n *\n * @cssprop {<color>} --pf-c-label--m-green__content--Color                {@default `#1e4f18`}\n * @cssprop {<color>} --pf-c-label--m-green--BackgroundColor               {@default `#f3faf2`}\n * @cssprop {<color>} --pf-c-label--m-green__content--before--BorderColor  {@default `#bde5b8`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-green__content--Color     {@default `#3e8635`}\n *\n * @cssprop {<color>} --pf-c-label--m-orange__content--Color                {@default `#003737`}\n * @cssprop {<color>} --pf-c-label--m-orange--BackgroundColor               {@default `#fff6ec`}\n * @cssprop {<color>} --pf-c-label--m-orange__content--before--BorderColor  {@default `#f4b678`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-orange__content--Color     {@default `#8f4700`}\n *\n * @cssprop {<color>} --pf-c-label--m-purple__content--Color                {@default `#1f0066`}\n * @cssprop {<color>} --pf-c-label--m-purple--BackgroundColor               {@default `#f2f0fc`}\n * @cssprop {<color>} --pf-c-label--m-purple__content--before--BorderColor  {@default `#cbc1ff`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-purple__content--Color     {@default `#6753ac`}\n *\n * @cssprop {<color>} --pf-c-label--m-red__content--Color                {@default `#7d1007`}\n * @cssprop {<color>} --pf-c-label--m-red--BackgroundColor               {@default `#faeae8`}\n * @cssprop {<color>} --pf-c-label--m-red__content--before--BorderColor  {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-red__content--Color     {@default `#c9190b`}\n *\n * @cssprop {<color>} --pf-c-label--m-gold__content--Color                {@default `#3d2c00`}\n * @cssprop {<color>} --pf-c-label--m-gold--BackgroundColor               {@default `#fdf7e7`}\n * @cssprop {<color>} --pf-c-label--m-gold__content--before--BorderColor  {@default `#f9e0a2`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-gold__content--Color     {@default `#795600`}\n\n * @cssprop {<color>} --pf-c-label--m-blue__icon--Color {@default `#06c`}\n * @cssprop {<color>} --pf-c-label--m-cyan__icon--Color {@default `#009596`}\n * @cssprop {<color>} --pf-c-label--m-green__icon--Color {@default `#3e8635`}\n * @cssprop {<color>} --pf-c-label--m-orange__icon--Color {@default `#ec7a08`}\n * @cssprop {<color>} --pf-c-label--m-red__icon--Color {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-label--m-gold__icon--Color {@default `#f0ab00`}\n *\n * @csspart icon - container for the label icon\n * @csspart close-button - container for removable labels' close button\n *\n * @slot icon\n *       Contains the labels's icon, e.g. web-icon-alert-success.\n *\n * @slot\n *       Must contain the text for the label.\n *\n * @cssprop {<length>} --pf-c-label--m-compact--PaddingTop     {@default `0`}\n * @cssprop {<length>} --pf-c-label--m-compact--PaddingRight   {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-label--m-compact--PaddingBottom  {@default `0`}\n * @cssprop {<length>} --pf-c-label--m-compact--PaddingLeft    {@default `0.5rem`}\n */\n@customElement('pf-label')\nexport class PfLabel extends BaseLabel {\n  static readonly styles = [...BaseLabel.styles, styles];\n\n  static readonly shadowRootOptions: ShadowRootInit = { ...BaseLabel.shadowRootOptions, delegatesFocus: true };\n\n  /**\n   * Changes the style of the label.\n   * - Filled: Colored background with colored border.\n   * - Outline: White background with colored border.\n   */\n  @property() variant: LabelVariant = 'filled';\n\n  /**\n   * Changes the color of the label\n   */\n  @property() color: LabelColor = 'grey';\n\n  /** Shorthand for the `icon` slot, the value is icon name */\n  @property() icon?: string;\n\n  /** Flag indicating the label is compact */\n  @property({ type: Boolean }) compact = false;\n\n  /** Flag indicating the label text should be truncated */\n  @property({ type: Boolean }) truncated = false;\n\n  /** Flag indicating the label is removable */\n  @property({ type: Boolean }) removable = false;\n\n  /** Text label for a removable label's close button */\n  @property({ attribute: 'close-button-label' }) closeButtonLabel?: string;\n\n  override render() {\n    const { compact, truncated } = this;\n    return html`\n      <span id=\"pf-container\" class=\"${classMap({ compact, truncated })}\">${super.render()}</span>\n    `;\n  }\n\n  protected override renderDefaultIcon() {\n    return !this.icon ? '' : html`\n      <pf-icon icon=\"${this.icon}\" size=\"sm\"></pf-icon>\n    `;\n  }\n\n  protected override renderSuffix() {\n    return !this.removable ? '' : html`\n      <span part=\"close-button\" ?hidden=${!this.removable}>\n        <pf-button plain\n                    @click=\"${() => this.dispatchEvent(new ComposedEvent('close'))}\"\n                    label=\"${this.closeButtonLabel ?? 'remove'}\">\n          <svg viewBox=\"0 0 352 512\">\n            <path d=\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\"/>\n          </svg>\n        </pf-button>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-label': PfLabel;\n  }\n}\n"]}
+{"version":3,"file":"pf-label.js","sourceRoot":"","sources":["pf-label.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,6CAA6C,CAAC;;;AAoBrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkFG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,SAAS;IAA/B;;QAKL;;;;WAIG;QACS,YAAO,GAAiB,QAAQ,CAAC;QAE7C;;WAEG;QACS,UAAK,GAAe,MAAM,CAAC;QAKvC,2CAA2C;QACd,YAAO,GAAG,KAAK,CAAC;QAE7C,yDAAyD;QAC5B,cAAS,GAAG,KAAK,CAAC;QAE/C,6CAA6C;QAChB,cAAS,GAAG,KAAK,CAAC;IA+BjD,CAAC;IA1BU,MAAM;QACb,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QACpC,OAAO,IAAI,CAAA;uCACwB,QAAQ,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,KAAK,KAAK,CAAC,MAAM,EAAE;KACrF,CAAC;IACJ,CAAC;IAEkB,iBAAiB;QAClC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;uBACV,IAAI,CAAC,IAAI;KAC3B,CAAC;IACJ,CAAC;IAEkB,YAAY;QAC7B,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;0CACI,CAAC,IAAI,CAAC,SAAS;;8BAE3B,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,aAAa,CAAC,OAAO,CAAC,CAAC;6BACrD,IAAI,CAAC,gBAAgB,IAAI,QAAQ;;;;;;KAMzD,CAAC;IACJ,CAAC;;AAxDe,cAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEvC,yBAAiB,GAAmB,EAAE,GAAG,SAAS,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC;AAOjG;IAAX,QAAQ,EAAE;wCAAkC;AAKjC;IAAX,QAAQ,EAAE;sCAA4B;AAG3B;IAAX,QAAQ,EAAE;qCAAe;AAGG;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAiB;AAGhB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAmB;AAGlB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAmB;AAGA;IAA9C,QAAQ,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;iDAA2B;AA9B9D,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA0DnB;SA1DY,OAAO","sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { ComposedEvent } from '@patternfly/pfe-core';\n\nimport { BaseLabel } from './BaseLabel.js';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\n\nimport styles from './pf-label.css';\n\nexport type LabelVariant = (\n  | 'filled'\n  | 'outline'\n);\n\nexport type LabelColor = (\n  | 'blue'\n  | 'cyan'\n  | 'green'\n  | 'orange'\n  | 'purple'\n  | 'red'\n  | 'grey'\n  | 'gold'\n)\n\n/**\n * Labels allow users to display meta data in a stylized form.\n *\n * @summary Allows users to display meta data in a stylized form.\n *\n * @fires close - when a removable label's close button is clicked\n *\n * @cssprop {<length>} --pf-c-label--FontSize   {@default `0.875em`}\n *\n * @cssprop {<length>} --pf-c-label--PaddingTop     {@default `0.25rem`}\n * @cssprop {<length>} --pf-c-label--PaddingRight   {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-label--PaddingBottom  {@default `0.25rem`}\n * @cssprop {<length>} --pf-c-label--PaddingLeft    {@default `0.5rem`}\n *\n * @cssprop {<color>} --pf-c-label--Color           {@default `#151515`}\n * @cssprop {<color>} --pf-c-label--BackgroundColor {@default `#f5f5f5`}\n *\n * @cssprop {<length>} --pf-c-label--BorderRadius {@default `30em`}\n *\n * @cssprop {<length>} --pf-c-label__content--MaxWidth            {@default `100%`}\n * @cssprop {<color>} --pf-c-label__content--Color                {@default `#151515`}\n * @cssprop {<length>} --pf-c-label__content--before--BorderWidth {@default `1px`}\n * @cssprop {<color>} --pf-c-label__content--before--BorderColor  {@default `#d2d2d2`}\n *\n * @cssprop {<color>} --pf-c-label--m-outline__content--Color  {@default `#151515`}\n * @cssprop {<color>} --pf-c-label--m-outline--BackgroundColor {@default `#ffffff`}\n *\n * @cssprop {<color>} --pf-c-label--m-blue__content--Color                {@default `#002952`}\n * @cssprop {<color>} --pf-c-label--m-blue--BackgroundColor               {@default `#e7f1fa`}\n * @cssprop {<color>} --pf-c-label--m-blue__content--before--BorderColor  {@default `#bee1f4`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-blue__content--Color      {@default `#06c`}\n *\n * @cssprop {<color>} --pf-c-label--m-cyan__content--Color                {@default `#3b1f00`}\n * @cssprop {<color>} --pf-c-label--m-cyan--BackgroundColor               {@default `#f2f9f9`}\n * @cssprop {<color>} --pf-c-label--m-cyan__content--before--BorderColor  {@default `#a2d9d9`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-cyan__content--Color      {@default `#005f60`}\n *\n * @cssprop {<color>} --pf-c-label--m-green__content--Color                {@default `#1e4f18`}\n * @cssprop {<color>} --pf-c-label--m-green--BackgroundColor               {@default `#f3faf2`}\n * @cssprop {<color>} --pf-c-label--m-green__content--before--BorderColor  {@default `#bde5b8`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-green__content--Color     {@default `#3e8635`}\n *\n * @cssprop {<color>} --pf-c-label--m-orange__content--Color                {@default `#003737`}\n * @cssprop {<color>} --pf-c-label--m-orange--BackgroundColor               {@default `#fff6ec`}\n * @cssprop {<color>} --pf-c-label--m-orange__content--before--BorderColor  {@default `#f4b678`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-orange__content--Color     {@default `#8f4700`}\n *\n * @cssprop {<color>} --pf-c-label--m-purple__content--Color                {@default `#1f0066`}\n * @cssprop {<color>} --pf-c-label--m-purple--BackgroundColor               {@default `#f2f0fc`}\n * @cssprop {<color>} --pf-c-label--m-purple__content--before--BorderColor  {@default `#cbc1ff`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-purple__content--Color     {@default `#6753ac`}\n *\n * @cssprop {<color>} --pf-c-label--m-red__content--Color                {@default `#7d1007`}\n * @cssprop {<color>} --pf-c-label--m-red--BackgroundColor               {@default `#faeae8`}\n * @cssprop {<color>} --pf-c-label--m-red__content--before--BorderColor  {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-red__content--Color     {@default `#c9190b`}\n *\n * @cssprop {<color>} --pf-c-label--m-gold__content--Color                {@default `#3d2c00`}\n * @cssprop {<color>} --pf-c-label--m-gold--BackgroundColor               {@default `#fdf7e7`}\n * @cssprop {<color>} --pf-c-label--m-gold__content--before--BorderColor  {@default `#f9e0a2`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-gold__content--Color     {@default `#795600`}\n\n * @cssprop {<color>} --pf-c-label--m-blue__icon--Color {@default `#06c`}\n * @cssprop {<color>} --pf-c-label--m-cyan__icon--Color {@default `#009596`}\n * @cssprop {<color>} --pf-c-label--m-green__icon--Color {@default `#3e8635`}\n * @cssprop {<color>} --pf-c-label--m-orange__icon--Color {@default `#ec7a08`}\n * @cssprop {<color>} --pf-c-label--m-red__icon--Color {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-label--m-gold__icon--Color {@default `#f0ab00`}\n *\n * @csspart icon - container for the label icon\n * @csspart close-button - container for removable labels' close button\n *\n * @slot icon\n *       Contains the labels's icon, e.g. web-icon-alert-success.\n *\n * @slot\n *       Must contain the text for the label.\n *\n * @cssprop {<length>} --pf-c-label--m-compact--PaddingTop     {@default `0`}\n * @cssprop {<length>} --pf-c-label--m-compact--PaddingRight   {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-label--m-compact--PaddingBottom  {@default `0`}\n * @cssprop {<length>} --pf-c-label--m-compact--PaddingLeft    {@default `0.5rem`}\n */\n@customElement('pf-label')\nexport class PfLabel extends BaseLabel {\n  static readonly styles = [...BaseLabel.styles, styles];\n\n  static readonly shadowRootOptions: ShadowRootInit = { ...BaseLabel.shadowRootOptions, delegatesFocus: true };\n\n  /**\n   * Changes the style of the label.\n   * - Filled: Colored background with colored border.\n   * - Outline: White background with colored border.\n   */\n  @property() variant: LabelVariant = 'filled';\n\n  /**\n   * Changes the color of the label\n   */\n  @property() color: LabelColor = 'grey';\n\n  /** Shorthand for the `icon` slot, the value is icon name */\n  @property() icon?: string;\n\n  /** Flag indicating the label is compact */\n  @property({ type: Boolean }) compact = false;\n\n  /** Flag indicating the label text should be truncated */\n  @property({ type: Boolean }) truncated = false;\n\n  /** Flag indicating the label is removable */\n  @property({ type: Boolean }) removable = false;\n\n  /** Text label for a removable label's close button */\n  @property({ attribute: 'close-button-label' }) closeButtonLabel?: string;\n\n  override render() {\n    const { compact, truncated } = this;\n    return html`\n      <span id=\"pf-container\" class=\"${classMap({ compact, truncated })}\">${super.render()}</span>\n    `;\n  }\n\n  protected override renderDefaultIcon() {\n    return !this.icon ? '' : html`\n      <pf-icon icon=\"${this.icon}\" size=\"sm\"></pf-icon>\n    `;\n  }\n\n  protected override renderSuffix() {\n    return !this.removable ? '' : html`\n      <span part=\"close-button\" ?hidden=${!this.removable}>\n        <pf-button plain\n                    @click=\"${() => this.dispatchEvent(new ComposedEvent('close'))}\"\n                    label=\"${this.closeButtonLabel ?? 'remove'}\">\n          <svg viewBox=\"0 0 352 512\">\n            <path d=\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\"/>\n          </svg>\n        </pf-button>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-label': PfLabel;\n  }\n}\n"]}

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);
+```
+

package/pf-modal/pf-modal.js

@@ -2,7 +2,9 @@ var _PfModal_headerId, _PfModal_triggerElement, _PfModal_header, _PfModal_body,
 var PfModal_1;
 import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
 import { LitElement, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { query } from 'lit/decorators/query.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ComposedEvent } from '@patternfly/pfe-core';
@@ -10,7 +12,7 @@ import { bound, deprecation, initializer, observed } from '@patternfly/pfe-core/
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 import { css } from "lit";
-const style = css `:host {\n\tdisplay: block;\n\tposition: relative;\n  --_spacer-align-top: var(--pf-c-modal-box--m-align-top--spacer,\n    var(--pf-global--spacer--sm, 0.5rem));\n  --_height-offset: min(var(--_spacer-align-top), var(--pf-global--spacer--2xl, 3rem));\n}\n\n[hidden] {\n  display: none !important;\n}\n\nsection {\n  display: flex;\n  position: fixed;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  left: 0;\n  align-items: center;\n  justify-content: center;\n  z-index: var(--pf-c-modal-box--ZIndex,\n    var(--pf-global--ZIndex--xl,\n      500));\n}\n\n#container {\n  position: relative;\n  max-height: inherit;\n}\n\n[part=overlay] {\n  position: fixed;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  left: 0;\n  background-color: var(--pf-c-backdrop--BackgroundColor,\n      var(--pf-global--BackgroundColor--dark-transparent-100,\n        rgba(3, 3, 3, 0.62)));\n}\n\n[part=dialog] {\n  position: relative;\n  margin: 0 auto;\n\n  width: var(--pf-c-modal-box--Width,\n    calc(100% - var(--pf-global--spacer--xl,2rem)));\n\n  max-width: var(--pf-c-modal-box--MaxWidth,\n    calc(100% - var(--pf-global--spacer--xl,2rem)));\n\n  max-height: var(--pf-c-modal-box--MaxHeight,\n    calc(100% - var(--pf-global--spacer--2xl,3rem)));\n\n  box-shadow: var(--pf-c-modal-box--BoxShadow,\n    var(--pf-global--BoxShadow--xl,\n      0 1rem 2rem 0 rgba(3, 3, 3, 0.16),\n      0 0 0.5rem 0 rgba(3, 3, 3, 0.1)));\n\n\tbackground-color: var(--pf-c-modal-box--BackgroundColor,\n    var(--pf-global--BackgroundColor--100,\n      var(--pf-global--BackgroundColor--100, #fff)));\n\n  padding: var(--pf-global--spacer--lg, 1.5rem);\n  margin-inline: var(--pf-global--spacer--md, 1rem);\n}\n\n:host([width]) [part=dialog],\n:host([variant]) [part=dialog] {\n  margin-inline: 0;\n}\n\n:host([width="small"]) [part=dialog],\n:host([variant="small"]) [part=dialog] {\n  --pf-c-modal-box--Width: var(--pf-c-modal-box--m-sm--sm--MaxWidth, 35rem);\n}\n\n:host([width="medium"]) [part=dialog],\n:host([variant="medium"]) [part=dialog] {\n  --pf-c-modal-box--Width: var(--pf-c-modal-box--m-md--Width, 52.5rem);\n}\n\n:host([width="large"]) [part=dialog],\n:host([variant="large"]) [part=dialog] {\n  --pf-c-modal-box--Width: var(--pf-c-modal-box--m-lg--lg--MaxWidth, 70rem);\n}\n\n[part=content] {\n  overflow-y: auto;\n  overscroll-behavior: contain;\n\n  max-height: var(--pf-c-modal-box--MaxHeight,\n    calc(100vh - var(--pf-global--spacer--2xl,\n      3rem)));\n\n  box-sizing: border-box;\n}\n\n[part=content] ::slotted([slot="header"]) {\n  margin-top: 0 !important;\n}\n\nheader {\n  position: sticky;\n  top: 0;\n\tbackground-color: var(--pf-c-modal-box--BackgroundColor,\n    var(--pf-global--BackgroundColor--100,\n      var(--pf-global--BackgroundColor--100,\n        #fff)));\n}\n\nheader ::slotted(:is(h1,h2,h3,h4,h5,h6)[slot="header"]) {\n  font-size: var(--pf-c-modal-box__title--FontSize,\n    var(--pf-global--FontSize--2xl,\n      1.5rem));\n  font-weight: var(--pf-global--FontWeight--normal, 400);\n  font-family: var(--pf-c-modal-box__title--FontFamily,\n    var(--pf-global--FontFamily--heading--sans-serif,\n      var(--pf-global--FontFamily--redhat-updated--heading--sans-serif,\n        "RedHatDisplayUpdated", "Overpass", overpass, helvetica, arial, sans-serif)));\n}\n\n[part=close-button] {\n  background-color: transparent;\n  border: none;\n  margin: 0;\n  padding: 0;\n  text-align: left;\n\n  position: absolute;\n  cursor: pointer;\n  line-height: 24px;\n  padding-block:\n    var(--pf-c-button--PaddingTop,\n      var(--pf-global--spacer--form-element, 0.375rem));\n  padding-inline:\n    var(--pf-c-button--PaddingRight,\n      var(--pf-global--spacer--md, 1rem));\n  top: 0;\n  right: calc(var(--pf-global--spacer--lg, 1.5rem) / -3);\n  color: var(--pf-c-button--m-plain--Color,\n    var(--pf-global--Color--200,\n      #6a6e73));\n  font-size: var(--pf-c-button--FontSize,\n    var(--pf-global--FontSize--md,\n      1rem));\n}\n\n[part=close-button]:is(:focus-within, :focus-visible, :hover) {\n  color: var(--pf-c-button--m-plain--focus--Color, var(--pf-global--Color--100, #151515));\n}\n\n[part=close-button] > svg {\n  font-size: 16px;\n  width: var(--pf-global--spacer--md, 1rem);\n  aspect-ratio: 1/1;\n}\n\n:host([position="top"]) #dialog {\n  align-self: start;\n\n  margin-block: var(--pf-c-modal-box--m-align-top--MarginTop,\n    var(--pf-c-modal-box--m-align-top--spacer,\n      2rem));\n\n  margin-inline: var(--pf-global--spacer--md, 1rem);\n\n  width: 100%;\n\n  max-width: var(--pf-c-modal-box--m-align-top--MaxWidth,\n    calc(100% - min(\n      var(--pf-c-modal-box--m-align-top--spacer, 2rem) * 2,\n      var(--pf-global--spacer--xl, 2rem))));\n\n  max-height: var(--pf-c-modal-box--m-align-top--MaxHeight,\n    calc(100% - var(--_height-offset) - var(--_spacer-align-top)));\n}\n\nfooter {\n  display: flex;\n  align-items: center;\n  gap: var(--pf-global--spacer--xl, 0.5rem);\n}\n`;
+const style = css `:host{display:block;position:relative;--_spacer-align-top:var(--pf-c-modal-box--m-align-top--spacer,\n    var(--pf-global--spacer--sm, 0.5rem));--_height-offset:min(var(--_spacer-align-top), var(--pf-global--spacer--2xl, 3rem))}[hidden]{display:none!important}section{display:flex;position:fixed;height:100%;width:100%;top:0;left:0;align-items:center;justify-content:center;z-index:var(--pf-c-modal-box--ZIndex,var(--pf-global--ZIndex--xl,500))}#container{position:relative;max-height:inherit}[part=overlay]{position:fixed;height:100%;width:100%;top:0;left:0;background-color:var(--pf-c-backdrop--BackgroundColor,var(--pf-global--BackgroundColor--dark-transparent-100,rgba(3,3,3,.62)))}[part=dialog]{position:relative;margin:0 auto;width:var(--pf-c-modal-box--Width,calc(100% - var(--pf-global--spacer--xl,2rem)));max-width:var(--pf-c-modal-box--MaxWidth,calc(100% - var(--pf-global--spacer--xl,2rem)));max-height:var(--pf-c-modal-box--MaxHeight,calc(100% - var(--pf-global--spacer--2xl,3rem)));box-shadow:var(--pf-c-modal-box--BoxShadow,var(--pf-global--BoxShadow--xl,0 1rem 2rem 0 rgba(3,3,3,.16),0 0 .5rem 0 rgba(3,3,3,.1)));background-color:var(--pf-c-modal-box--BackgroundColor,var(--pf-global--BackgroundColor--100,var(--pf-global--BackgroundColor--100,#fff)));padding:var(--pf-global--spacer--lg,1.5rem);margin-inline:var(--pf-global--spacer--md,1rem)}:host([variant]) [part=dialog],:host([width]) [part=dialog]{margin-inline:0}:host([variant=small]) [part=dialog],:host([width=small]) [part=dialog]{--pf-c-modal-box--Width:var(--pf-c-modal-box--m-sm--sm--MaxWidth, 35rem)}:host([variant=medium]) [part=dialog],:host([width=medium]) [part=dialog]{--pf-c-modal-box--Width:var(--pf-c-modal-box--m-md--Width, 52.5rem)}:host([variant=large]) [part=dialog],:host([width=large]) [part=dialog]{--pf-c-modal-box--Width:var(--pf-c-modal-box--m-lg--lg--MaxWidth, 70rem)}[part=content]{overflow-y:auto;overscroll-behavior:contain;max-height:var(--pf-c-modal-box--MaxHeight,calc(100vh - var(--pf-global--spacer--2xl,3rem)));box-sizing:border-box}[part=content] ::slotted([slot=header]){margin-top:0!important}header{position:sticky;top:0;background-color:var(--pf-c-modal-box--BackgroundColor,var(--pf-global--BackgroundColor--100,var(--pf-global--BackgroundColor--100,#fff)))}header ::slotted(:is(h1,h2,h3,h4,h5,h6)[slot=header]){font-size:var(--pf-c-modal-box__title--FontSize,\n    var(--pf-global--FontSize--2xl,\n      1.5rem));font-weight:var(--pf-global--FontWeight--normal,400);font-family:var(--pf-c-modal-box__title--FontFamily,\n    var(--pf-global--FontFamily--heading--sans-serif,\n      var(--pf-global--FontFamily--redhat-updated--heading--sans-serif,\n        "RedHatDisplayUpdated", "Overpass", overpass, helvetica, arial, sans-serif)))}[part=close-button]{background-color:transparent;border:none;margin:0;padding:0;text-align:left;position:absolute;cursor:pointer;line-height:24px;padding-block:var(--pf-c-button--PaddingTop,var(--pf-global--spacer--form-element,0.375rem));padding-inline:var(--pf-c-button--PaddingRight,var(--pf-global--spacer--md,1rem));top:0;right:calc(var(--pf-global--spacer--lg,1.5rem)/ -3);color:var(--pf-c-button--m-plain--Color,var(--pf-global--Color--200,#6a6e73));font-size:var(--pf-c-button--FontSize,\n    var(--pf-global--FontSize--md,\n      1rem))}[part=close-button]:is(:focus-within,:focus-visible,:hover){color:var(--pf-c-button--m-plain--focus--Color,var(--pf-global--Color--100,#151515))}[part=close-button]>svg{font-size:16px;width:var(--pf-global--spacer--md,1rem);aspect-ratio:1/1}:host([position=top]) #dialog{align-self:start;margin-block:var(--pf-c-modal-box--m-align-top--MarginTop,var(--pf-c-modal-box--m-align-top--spacer,2rem));margin-inline:var(--pf-global--spacer--md,1rem);width:100%;max-width:var(--pf-c-modal-box--m-align-top--MaxWidth,calc(100% - min(var(--pf-c-modal-box--m-align-top--spacer,2rem) * 2,var(--pf-global--spacer--xl,2rem))));max-height:var(--pf-c-modal-box--m-align-top--MaxHeight,calc(100% - var(--_height-offset) - var(--_spacer-align-top)))}footer{display:flex;align-items:center;gap:var(--pf-global--spacer--xl,.5rem)}`;
 export class ModalCancelEvent extends ComposedEvent {
     constructor() {
         super('cancel');