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

package/pf-tabs/pf-tabs.js

@@ -5,7 +5,7 @@ import { BaseTabs } from './BaseTabs.js';
 import { PfTab } from './pf-tab.js';
 import { PfTabPanel } from './pf-tab-panel.js';
 import { css } from "lit";
-const styles = css `[part="tabs-container"] {\n  width: var(--pf-c-tabs--Width, auto);\n  padding-inline-end: var(--pf-c-tabs--inset, 0);\n  padding-inline-start: var(--pf-c-tabs--inset, 0);\n}\n\n[part="tabs-container"]::before {\n  border-color: var(--pf-c-tabs--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2));\n  border-block-start-width: var(--pf-c-tabs--before--BorderTopWidth, 0);\n  border-inline-end-width: var(--pf-c-tabs--before--BorderRightWidth, 0);\n  border-block-end-width:  var(--pf-c-tabs--before--BorderBottomWidth, var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));\n  border-inline-start-width: var(--pf-c-tabs--before--BorderLeftWidth, 0);\n}\n\n/* workaround to disable scroll right button when last tab is aria-disabled */\n:host(:not([vertical])) ::slotted(pf-tab[aria-disabled=true]:last-of-type) {\n  translate: calc(-1 * var(--pf-c-tabs__link--disabled--before--BorderRightWidth, 1px)) 0;\n}\n\n/* workaround to disable scroll left button when first tab is aria-disabled */\n:host(:not([vertical])) ::slotted(pf-tab[aria-disabled=true]:first-of-type) {\n  translate: var(--pf-c-tabs__link--disabled--before--BorderRightWidth, 1px) 0;\n}\n\n:host([box]) [part="tabs-container"] {\n  --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs--m-box__link--BackgroundColor, var(--pf-global--BackgroundColor--200, #f0f0f0));\n  --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-box__link--disabled--BackgroundColor, var(--pf-global--disabled-color--200, #d2d2d2));\n  --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-tabs__link--disabled--before--BorderRightWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-tabs__link--after--Top: 0;\n  --pf-c-tabs__link--after--Bottom: auto;\n}\n\n:host([box]) ::slotted(pf-tab:last-of-type) {\n  --pf-c-tabs__link--before--BorderRightWidth: 0;\n}\n\n:host([box]) button:nth-of-type(2)::before {\n  left: calc(var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)) * -1);\n}\n\n:host([box]) pf-tab[aria-selected="true"] + pf-tab {\n  --pf-c-tabs__link--before--Left: 0;\n}\n\n:host([box="light"]) [part="tabs-container"] {\n  --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--BackgroundColor, transparent);\n  --pf-c-tabs__item--m-current__link--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__item--m-current__link--BackgroundColor, var(--pf-global--BackgroundColor--light-300, #f0f0f0));\n  --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor, var(--pf-global--palette--black-150, #f5f5f5));\n}\n\n:host([vertical]) [part="tabs-container"] {\n  --pf-c-tabs--Width: var(--pf-c-tabs--m-vertical--Width, 100%);\n  --pf-c-tabs--inset: var(--pf-c-tabs--m-vertical--inset, var(--pf-global--spacer--lg, 1.5rem));\n  --pf-c-tabs--before--BorderBottomWidth: 0;  /* *override user setting* border bottom should always be 0 for vertical tabs */\n  --pf-c-tabs__link--PaddingTop: var(--pf-c-tabs--m-vertical__link--PaddingTop, var(--pf-global--spacer--md, 1rem));\n  --pf-c-tabs__link--PaddingBottom: var(--pf-c-tabs--m-vertical__link--PaddingBottom, var(--pf-global--spacer--md, 1rem));\n  --pf-c-tabs__link--before--Left: 0;\n  --pf-c-tabs__link--disabled--before--BorderBottomWidth: 0; /* *override user setting* border bottom for disabled should always be 0 for vertical tabs */\n  --pf-c-tabs__link--disabled--before--BorderLeftWidth: var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-tabs__link--after--Top: 0;\n  --pf-c-tabs__link--after--Right: auto;\n\n  display: inline-flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 0;\n  overflow: visible;\n}\n\n:host([vertical]) [part="tabs"] {\n  position: relative;\n  flex-direction: column;\n  flex-grow: 1;\n  max-width: var(--pf-c-tabs--m-vertical--MaxWidth, 15.625rem);\n}\n\n:host([vertical]) [part="tabs"]::before {\n  position: absolute;\n  right: auto;\n  border-style: solid;\n  border-color: var(--pf-c-tabs--m-vertical__list--before--BorderColor, var(--pf-c-tabs--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2)));\n  border-block-start-width: var(--pf-c-tabs--m-vertical__list--before--BorderTopWidth, 0);\n  border-inline-end-width: var(--pf-c-tabs--m-vertical__list--before--BorderRightWidth, 0);\n  border-block-end-width: var(--pf-c-tabs--m-vertical__list--before--BorderBottomWidth, 0);\n  border-inline-start-width: var(--pf-c-tabs--m-vertical__list--before--BorderLeftWidth, var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));\n}\n\n:host([vertical]) ::slotted(pf-tab:first-of-type) {\n  margin-block-start: var(--pf-c-tabs--inset, 0);\n}\n\n:host([vertical]) ::slotted(pf-tab:last-of-type) {\n  margin-block-end: var(--pf-c-tabs--inset, 0);\n}\n\n:host([box][vertical]) [part="tabs-container"] {\n  --pf-c-tabs--inset: var(--pf-c-tabs--m-vertical--m-box--inset, var(--pf-global--spacer--xl, 2rem));\n  --pf-c-tabs--m-vertical__list--before--BorderLeftWidth: 0; /* *override user setting* border left should be 0 for vertical box; */\n  --pf-c-tabs--m-vertical__list--before--BorderRightWidth: var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-tabs__link--disabled--before--BorderRightWidth: var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  /* --pf-c-tabs__link--disabled--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)); */\n  --pf-c-tabs__link--disabled--before--BorderLeftWidth: 0; /* *override user setting* border left should be 0 for disabled ; */\n}\n\n:host([box][vertical]) [part="tabs"]::before {\n  right: 0;\n  left: auto;\n}\n\n:host([box][vertical]) ::slotted(pf-tab:last-of-type) {\n  --pf-c-tabs__link--before--BorderBottomWidth: 0;\n  --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n}\n\n:host([box][vertical]) ::slotted(pf-tab[aria-selected="true"]) {\n  --pf-c-tabs__link--before--BorderRightColor: var(--pf-c-tabs__item--m-current__link--BackgroundColor, var(--pf-global--BackgroundColor--100, #ffffff));\n  --pf-c-tabs__link--before--BorderBottomColor: var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2));\n  --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n}\n\n:host([box][vertical]) ::slotted(pf-tab[aria-selected="true"]:first-of-type) {\n  --pf-c-tabs__link--before--BorderTopWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n}\n\n[part="tabs"] {\n  display: var(--pf-c-tabs__list--Display, flex);\n}\n\nbutton {\n  width: var(--pf-c-tabs__scroll-button--Width, var(--pf-global--spacer--2xl, 3rem));\n  color: var(--pf-c-tabs__scroll-button--Color, var(--pf-global--Color--100, #151515));\n  background-color: var(--pf-c-tabs__scroll-button--BackgroundColor, var(--pf-global--BackgroundColor--100, #ffffff));\n  outline-offset: var(--pf-c-tabs__scroll-button--OutlineOffset, calc(-1 * var(--pf-global--spacer--xs, 0.25rem)));\n  transition:\n    margin var(--pf-c-tabs__scroll-button--TransitionDuration--margin, .125s),\n    translate var(--pf-c-tabs__scroll-button--TransitionDuration--transform, .125s), opacity var(--pf-c-tabs__scroll-button--TransitionDuration--opacity, .125s);\n}\n\nbutton:hover {\n  --pf-c-tabs__scroll-button--Color: var(--pf-c-tabs__scroll-button--hover--Color, var(--pf-global--active-color--100, #06c));\n}\n\nbutton::before {\n  border-color: var(--pf-c-tabs__scroll-button--before--BorderColor, var(--pf-c-tabs--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2)));\n  border-inline-end-width: var(--pf-c-tabs__scroll-button--before--BorderRightWidth, 0);\n  border-block-end-width: var(--pf-c-tabs__scroll-button--before--BorderBottomWidth, var(--pf-c-tabs__scroll-button--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));\n  border-inline-start-width: var(--pf-c-tabs__scroll-button--before--BorderLeftWidth, 0);\n}\n\nbutton:nth-of-type(1) {\n  --pf-c-tabs__scroll-button--before--BorderRightWidth: var(--pf-c-tabs__scroll-button--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  margin-inline-end: calc(var(--pf-c-tabs__scroll-button--Width, var(--pf-global--spacer--2xl, 3rem)) * -1);\n}\n\nbutton:nth-of-type(2) {\n  --pf-c-tabs__scroll-button--before--BorderLeftWidth: var(--pf-c-tabs__scroll-button--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  margin-inline-start: calc(var(--pf-c-tabs__scroll-button--Width, var(--pf-global--spacer--2xl, 3rem)) * -1);\n}\n\nbutton:disabled {\n  --pf-c-tabs__scroll-button--Color: var(--pf-c-tabs__scroll-button--disabled--Color, var(--pf-global--disabled-color--200, #d2d2d2));\n}\n\n:host(:not[vertical]) [part="tabs-container"] {\n  --pf-c-tabs--inset: 0;\n  --pf-c-tabs--m-vertical--inset: 0;\n  --pf-c-tabs--m-vertical--m-box--inset: 0;\n}\n\n:host([fill]) [part="tabs"] {\n  flex-basis: 100%;\n}\n\n:host([fill]) ::slotted(pf-tab) {\n  flex-grow: 1;\n}\n\n:host([fill]) ::slotted(pf-tab:first-of-type) {\n  --pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth: 0;\n}\n\n:host([fill]) ::slotted(pf-tab:last-of-type) {\n  --pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth: 0;\n}\n\n:host([border-bottom="false"]) [part="tabs-container"] {\n  --pf-c-tabs--before--BorderBottomWidth: 0; /* *override user setting* when border-bottom is false border bottom styles should be 0; */\n  --pf-c-tabs__link--before--BorderBottomWidth: 0;\n}\n`;
+const styles = css `[part=tabs-container]{width:var(--pf-c-tabs--Width,auto);padding-inline-end:var(--pf-c-tabs--inset,0);padding-inline-start:var(--pf-c-tabs--inset,0)}[part=tabs-container]::before{border-color:var(--pf-c-tabs--before--BorderColor,var(--pf-global--BorderColor--100,#d2d2d2));border-block-start-width:var(--pf-c-tabs--before--BorderTopWidth,0);border-inline-end-width:var(--pf-c-tabs--before--BorderRightWidth,0);border-block-end-width:var(--pf-c-tabs--before--BorderBottomWidth,var(--pf-c-tabs--before--border-width--base,var(--pf-global--BorderWidth--sm,1px)));border-inline-start-width:var(--pf-c-tabs--before--BorderLeftWidth,0)}:host(:not([vertical])) ::slotted(pf-tab[aria-disabled=true]:last-of-type){translate:calc(-1 * var(--pf-c-tabs__link--disabled--before--BorderRightWidth,1px)) 0}:host(:not([vertical])) ::slotted(pf-tab[aria-disabled=true]:first-of-type){translate:var(--pf-c-tabs__link--disabled--before--BorderRightWidth,1px) 0}:host([box]) [part=tabs-container]{--pf-c-tabs__link--BackgroundColor:var(--pf-c-tabs--m-box__link--BackgroundColor, var(--pf-global--BackgroundColor--200, #f0f0f0));--pf-c-tabs__link--disabled--BackgroundColor:var(--pf-c-tabs--m-box__link--disabled--BackgroundColor, var(--pf-global--disabled-color--200, #d2d2d2));--pf-c-tabs__link--before--BorderBottomWidth:var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));--pf-c-tabs__link--before--BorderRightWidth:var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));--pf-c-tabs__link--disabled--before--BorderRightWidth:var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));--pf-c-tabs__link--after--Top:0;--pf-c-tabs__link--after--Bottom:auto}:host([box]) ::slotted(pf-tab:last-of-type){--pf-c-tabs__link--before--BorderRightWidth:0}:host([box]) button:nth-of-type(2)::before{left:calc(var(--pf-c-tabs__link--before--border-width--base,var(--pf-global--BorderWidth--sm,1px)) * -1)}:host([box]) pf-tab[aria-selected=true]+pf-tab{--pf-c-tabs__link--before--Left:0}:host([box=light]) [part=tabs-container]{--pf-c-tabs__link--BackgroundColor:var(--pf-c-tabs--m-color-scheme--light-300__link--BackgroundColor, transparent);--pf-c-tabs__item--m-current__link--BackgroundColor:var(--pf-c-tabs--m-color-scheme--light-300__item--m-current__link--BackgroundColor, var(--pf-global--BackgroundColor--light-300, #f0f0f0));--pf-c-tabs__link--disabled--BackgroundColor:var(--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor, var(--pf-global--palette--black-150, #f5f5f5))}:host([vertical]) [part=tabs-container]{--pf-c-tabs--Width:var(--pf-c-tabs--m-vertical--Width, 100%);--pf-c-tabs--inset:var(--pf-c-tabs--m-vertical--inset, var(--pf-global--spacer--lg, 1.5rem));--pf-c-tabs--before--BorderBottomWidth:0;--pf-c-tabs__link--PaddingTop:var(--pf-c-tabs--m-vertical__link--PaddingTop, var(--pf-global--spacer--md, 1rem));--pf-c-tabs__link--PaddingBottom:var(--pf-c-tabs--m-vertical__link--PaddingBottom, var(--pf-global--spacer--md, 1rem));--pf-c-tabs__link--before--Left:0;--pf-c-tabs__link--disabled--before--BorderBottomWidth:0;--pf-c-tabs__link--disabled--before--BorderLeftWidth:var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));--pf-c-tabs__link--after--Top:0;--pf-c-tabs__link--after--Right:auto;display:inline-flex;flex-direction:column;height:100%;padding:0;overflow:visible}:host([vertical]) [part=tabs]{position:relative;flex-direction:column;flex-grow:1;max-width:var(--pf-c-tabs--m-vertical--MaxWidth,15.625rem)}:host([vertical]) [part=tabs]::before{position:absolute;right:auto;border-style:solid;border-color:var(--pf-c-tabs--m-vertical__list--before--BorderColor,var(--pf-c-tabs--before--BorderColor,var(--pf-global--BorderColor--100,#d2d2d2)));border-block-start-width:var(--pf-c-tabs--m-vertical__list--before--BorderTopWidth,0);border-inline-end-width:var(--pf-c-tabs--m-vertical__list--before--BorderRightWidth,0);border-block-end-width:var(--pf-c-tabs--m-vertical__list--before--BorderBottomWidth,0);border-inline-start-width:var(--pf-c-tabs--m-vertical__list--before--BorderLeftWidth,var(--pf-c-tabs--before--border-width--base,var(--pf-global--BorderWidth--sm,1px)))}:host([vertical]) ::slotted(pf-tab:first-of-type){margin-block-start:var(--pf-c-tabs--inset,0)}:host([vertical]) ::slotted(pf-tab:last-of-type){margin-block-end:var(--pf-c-tabs--inset,0)}:host([box][vertical]) [part=tabs-container]{--pf-c-tabs--inset:var(--pf-c-tabs--m-vertical--m-box--inset, var(--pf-global--spacer--xl, 2rem));--pf-c-tabs--m-vertical__list--before--BorderLeftWidth:0;--pf-c-tabs--m-vertical__list--before--BorderRightWidth:var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));--pf-c-tabs__link--disabled--before--BorderRightWidth:var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));--pf-c-tabs__link--disabled--before--BorderLeftWidth:0}:host([box][vertical]) [part=tabs]::before{right:0;left:auto}:host([box][vertical]) ::slotted(pf-tab:last-of-type){--pf-c-tabs__link--before--BorderBottomWidth:0;--pf-c-tabs__link--before--BorderRightWidth:var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px))}:host([box][vertical]) ::slotted(pf-tab[aria-selected=true]){--pf-c-tabs__link--before--BorderRightColor:var(--pf-c-tabs__item--m-current__link--BackgroundColor, var(--pf-global--BackgroundColor--100, #ffffff));--pf-c-tabs__link--before--BorderBottomColor:var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2));--pf-c-tabs__link--before--BorderBottomWidth:var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px))}:host([box][vertical]) ::slotted(pf-tab[aria-selected=true]:first-of-type){--pf-c-tabs__link--before--BorderTopWidth:var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px))}[part=tabs]{display:var(--pf-c-tabs__list--Display,flex)}button{width:var(--pf-c-tabs__scroll-button--Width,var(--pf-global--spacer--2xl,3rem));color:var(--pf-c-tabs__scroll-button--Color,var(--pf-global--Color--100,#151515));background-color:var(--pf-c-tabs__scroll-button--BackgroundColor,var(--pf-global--BackgroundColor--100,#fff));outline-offset:var(--pf-c-tabs__scroll-button--OutlineOffset,calc(-1 * var(--pf-global--spacer--xs,0.25rem)));transition:margin var(--pf-c-tabs__scroll-button--TransitionDuration--margin, .125s),translate var(--pf-c-tabs__scroll-button--TransitionDuration--transform, .125s),opacity var(--pf-c-tabs__scroll-button--TransitionDuration--opacity, .125s)}button:hover{--pf-c-tabs__scroll-button--Color:var(--pf-c-tabs__scroll-button--hover--Color, var(--pf-global--active-color--100, #06c))}button::before{border-color:var(--pf-c-tabs__scroll-button--before--BorderColor,var(--pf-c-tabs--before--BorderColor,var(--pf-global--BorderColor--100,#d2d2d2)));border-inline-end-width:var(--pf-c-tabs__scroll-button--before--BorderRightWidth,0);border-block-end-width:var(--pf-c-tabs__scroll-button--before--BorderBottomWidth,var(--pf-c-tabs__scroll-button--before--border-width--base,var(--pf-global--BorderWidth--sm,1px)));border-inline-start-width:var(--pf-c-tabs__scroll-button--before--BorderLeftWidth,0)}button:first-of-type{--pf-c-tabs__scroll-button--before--BorderRightWidth:var(--pf-c-tabs__scroll-button--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));margin-inline-end:calc(var(--pf-c-tabs__scroll-button--Width,var(--pf-global--spacer--2xl,3rem)) * -1)}button:nth-of-type(2){--pf-c-tabs__scroll-button--before--BorderLeftWidth:var(--pf-c-tabs__scroll-button--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));margin-inline-start:calc(var(--pf-c-tabs__scroll-button--Width,var(--pf-global--spacer--2xl,3rem)) * -1)}button:disabled{--pf-c-tabs__scroll-button--Color:var(--pf-c-tabs__scroll-button--disabled--Color, var(--pf-global--disabled-color--200, #d2d2d2))}:host(:not[vertical]) [part=tabs-container]{--pf-c-tabs--inset:0;--pf-c-tabs--m-vertical--inset:0;--pf-c-tabs--m-vertical--m-box--inset:0}:host([fill]) [part=tabs]{flex-basis:100%}:host([fill]) ::slotted(pf-tab){flex-grow:1}:host([fill]) ::slotted(pf-tab:first-of-type){--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth:0}:host([fill]) ::slotted(pf-tab:last-of-type){--pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth:0}:host([border-bottom=false]) [part=tabs-container]{--pf-c-tabs--before--BorderBottomWidth:0;--pf-c-tabs__link--before--BorderBottomWidth:0}`;
 /**
  * Tabs allow users to navigate between views within the same page or context. Variants include
  * horizontal, vertical, inset, and filled. Most tab variations are available as open (default) or

package/pf-tile/README.md

@@ -0,0 +1,12 @@
+# Tile
+A **tile** component is a form of selection that can be used in place of a radio 
+button and is commonly used in forms. A tile appears visually similar to a 
+selectable card. However, tiles are used specifically when the user is selecting 
+a static option, whereas a selectable card triggers an action or opens a 
+quickstart or sidebar to provide additional information.
+
+```html
+<pf-tile>
+  <h3 slot="title">Default</h3>
+</pf-tile>
+```

package/pf-tile/pf-tile.js

@@ -3,7 +3,7 @@ import { customElement } from 'lit/decorators.js';
 import { property } from 'lit/decorators.js';
 import { BaseTile } from './BaseTile.js';
 import { css } from "lit";
-const styles = css `:host {\n  position: relative;\n  display: inline-grid;\n  padding: var(--pf-c-tile--PaddingTop, var(--pf-global--spacer--lg, 1.5rem))\n          var(--pf-c-tile--PaddingRight, var(--pf-global--spacer--lg, 1.5rem))\n          var(--pf-c-tile--PaddingBottom, var(--pf-global--spacer--lg, 1.5rem))\n          var(--pf-c-tile--PaddingLeft, var(--pf-global--spacer--lg, 1.5rem));\n  text-align: center;\n  cursor: pointer;\n  background-color: var(--pf-c-tile--BackgroundColor,\n                    var(--pf-global--BackgroundColor--100,\n                    var(--pf-global--BackgroundColor--light-100), #ffffff));\n  grid-template-rows: -webkit-min-content;\n  grid-template-rows: min-content;\n  transition: var(--pf-c-tile--Transition, none);\n  transform: translateY(var(--pf-c-tile--TranslateY, 0));\n}\n\n:host::before,\n:host::after {\n  position: absolute;\n  pointer-events: none;\n  content: "";\n}\n\n:host::before {\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border: var(--pf-c-tile--before--BorderWidth, var(--pf-global--BorderWidth--sm, 1px))\n          solid\n          var(--pf-c-tile--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2));\n}\n\n:host::after {\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: var(--pf-c-tile--after--Height, var(--pf-global--BorderWidth--lg, 3px));\n  background-color: var(--pf-c-tile--after--BackgroundColor, transparent);\n  transition: var(--pf-c-tile--after--Transition, none);\n  transform: scaleY(var(--pf-c-tile--after--ScaleY, 1)) translateY(var(--pf-c-tile--after--TranslateY, 0));\n}\n\n:host(:hover) {\n  --pf-c-tile__title--Color: var(--pf-c-tile--hover__title--Color, var(--pf-global--primary-color--100, #06c));\n  --pf-c-tile__icon--Color: var(--pf-c-tile--hover__icon--Color, var(--pf-global--primary-color--100, #06c));\n  --pf-c-tile--after--BackgroundColor: var(--pf-c-tile--hover--after--BackgroundColor, var(--pf-global--active-color--400, #73bcf7));\n}\n\n:host(:focus) {\n  --pf-c-tile__title--Color: var(--pf-c-tile--focus__title--Color, var(--pf-global--primary-color--100, #06c));\n  --pf-c-tile__icon--Color: var(--pf-c-tile--focus__icon--Color, var(--pf-global--primary-color--100, #06c));\n  --pf-c-tile--after--BackgroundColor: var(--pf-c-tile--focus--after--BackgroundColor, var(--pf-global--active-color--400, #73bcf7));\n}\n\n:host(:active),\n:host([selected]) {\n  --pf-c-tile__title--Color: var(--pf-c-tile--m-selected__title--Color, var(--pf-global--primary-color--100, #06c));\n  --pf-c-tile__icon--Color: var(--pf-c-tile--m-selected__icon--Color, var(--pf-global--primary-color--100, #06c));\n  --pf-c-tile--TranslateY: var(--pf-c-tile--m-selected--TranslateY,\n                            calc(-1 * var(--pf-c-tile--m-selected--after--ScaleY, 2) * var(--pf-c-tile--m-selected--after--Height,\n                            var(--pf-global--BorderWidth--lg, 3px))));\n  --pf-c-tile--Transition: var(--pf-c-tile--m-selected--Transition,\n                          var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1)));\n  --pf-c-tile--after--Height: var(--pf-c-tile--m-selected--after--Height, var(--pf-global--BorderWidth--lg, 3px));\n  --pf-c-tile--after--BackgroundColor: var(--pf-c-tile--m-selected--after--BackgroundColor, var(--pf-global--active-color--100, #06c));\n  --pf-c-tile--after--Transition: var(--pf-c-tile--m-selected--after--Transition,\n                          var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1)));\n  --pf-c-tile--after--ScaleY: var(--pf-c-tile--m-selected--after--ScaleY, 2);\n}\n\n:host([disabled]) {\n  --pf-c-tile--BackgroundColor: var(--pf-c-tile--m-disabled--BackgroundColor, var( --pf-global--disabled-color--300, #f0f0f0));\n  --pf-c-tile__title--Color: var(--pf-c-tile--m-disabled__title--Color, var(--pf-global--disabled-color--100, #6a6e73));\n  --pf-c-tile__body--Color: var(--pf-c-tile--m-disabled__body--Color,  var(--pf-global--disabled-color--100, #6a6e73));\n  --pf-c-tile--before--BorderWidth: 0;\n  --pf-c-tile__icon--Color: var(--pf-c-tile--m-disabled__icon--Color, var(--pf-global--disabled-color--100, #6a6e73));\n  pointer-events: none;\n}\n\n[part="header"] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n[part="title"] {\n  color: var(--pf-c-tile__title--Color, var(--pf-global--Color--100, var(--pf-global--Color--dark-100, #151515)));\n}\n\n[part="body"] {\n  font-size: var(--pf-c-tile__body--FontSize, var(--pf-global--FontSize--xs, 0.75rem));\n  color: var(--pf-c-tile__body--Color, var(--pf-global--Color--100, #151515));\n}\n\n[part="icon"] {\n  --_icon-size: var(--pf-c-tile__icon--FontSize: var(--pf-global--icon--FontSize--md, 1.125rem));\n  --pf-icon--size: var(--_icon-size);\n  margin-right: var(--pf-c-tile__icon--MarginRight, var(--pf-global--spacer--sm, 0.5rem));\n  font-size: var(--_icon-size);\n  color: var(--pf-c-tile__icon--Color, var(--pf-global--Color--100, #151515));\n}\n\n:host([stacked]) [part="header"] {\n  --pf-c-tile__icon--MarginRight: 0;\n  --_icon-size: var(--pf-c-tile__icon--FontSize, var(--pf-c-tile__header--m-stacked__icon--FontSize, var(--pf-global--icon--FontSize--lg, 1.5rem)));\n  flex-direction: column;\n  justify-content: initial;\n}\n\n:host([stacked="lg"]) [part="icon"] {\n  --_icon-size: var(--pf-c-tile__icon--FontSize, var(--pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize, var(--pf-global--icon--FontSize--xl, 3.375rem)));\n}\n\n:host([stacked]) [part="icon"] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: var(--pf-c-tile__header--m-stacked__icon--MarginBottom, var(--pf-global--spacer--xs, 0.25rem));\n}\n\n#body::slotted(:is(h1,h2,h3,h4,h5,h6,p)),\n#title::slotted(:is(h1,h2,h3,h4,h5,h6,p)) {\n  margin-block: 0;\n}\n\n`;
+const styles = css `:host{position:relative;display:inline-grid;padding:var(--pf-c-tile--PaddingTop,var(--pf-global--spacer--lg,1.5rem)) var(--pf-c-tile--PaddingRight,var(--pf-global--spacer--lg,1.5rem)) var(--pf-c-tile--PaddingBottom,var(--pf-global--spacer--lg,1.5rem)) var(--pf-c-tile--PaddingLeft,var(--pf-global--spacer--lg,1.5rem));text-align:center;cursor:pointer;background-color:var(--pf-c-tile--BackgroundColor,var(--pf-global--BackgroundColor--100,var(--pf-global--BackgroundColor--light-100),#fff));grid-template-rows:-webkit-min-content;grid-template-rows:min-content;transition:var(--pf-c-tile--Transition, none);transform:translateY(var(--pf-c-tile--TranslateY,0))}:host::after,:host::before{position:absolute;pointer-events:none;content:""}:host::before{top:0;right:0;bottom:0;left:0;border:var(--pf-c-tile--before--BorderWidth,var(--pf-global--BorderWidth--sm,1px)) solid var(--pf-c-tile--before--BorderColor,var(--pf-global--BorderColor--100,#d2d2d2))}:host::after{right:0;bottom:0;left:0;height:var(--pf-c-tile--after--Height,var(--pf-global--BorderWidth--lg,3px));background-color:var(--pf-c-tile--after--BackgroundColor,transparent);transition:var(--pf-c-tile--after--Transition, none);transform:scaleY(var(--pf-c-tile--after--ScaleY,1)) translateY(var(--pf-c-tile--after--TranslateY,0))}:host(:hover){--pf-c-tile__title--Color:var(--pf-c-tile--hover__title--Color, var(--pf-global--primary-color--100, #06c));--pf-c-tile__icon--Color:var(--pf-c-tile--hover__icon--Color, var(--pf-global--primary-color--100, #06c));--pf-c-tile--after--BackgroundColor:var(--pf-c-tile--hover--after--BackgroundColor, var(--pf-global--active-color--400, #73bcf7))}:host(:focus){--pf-c-tile__title--Color:var(--pf-c-tile--focus__title--Color, var(--pf-global--primary-color--100, #06c));--pf-c-tile__icon--Color:var(--pf-c-tile--focus__icon--Color, var(--pf-global--primary-color--100, #06c));--pf-c-tile--after--BackgroundColor:var(--pf-c-tile--focus--after--BackgroundColor, var(--pf-global--active-color--400, #73bcf7))}:host(:active),:host([selected]){--pf-c-tile__title--Color:var(--pf-c-tile--m-selected__title--Color, var(--pf-global--primary-color--100, #06c));--pf-c-tile__icon--Color:var(--pf-c-tile--m-selected__icon--Color, var(--pf-global--primary-color--100, #06c));--pf-c-tile--TranslateY:var(--pf-c-tile--m-selected--TranslateY,\n                            calc(-1 * var(--pf-c-tile--m-selected--after--ScaleY, 2) * var(--pf-c-tile--m-selected--after--Height,\n                            var(--pf-global--BorderWidth--lg, 3px))));--pf-c-tile--Transition:var(--pf-c-tile--m-selected--Transition,\n                          var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1)));--pf-c-tile--after--Height:var(--pf-c-tile--m-selected--after--Height, var(--pf-global--BorderWidth--lg, 3px));--pf-c-tile--after--BackgroundColor:var(--pf-c-tile--m-selected--after--BackgroundColor, var(--pf-global--active-color--100, #06c));--pf-c-tile--after--Transition:var(--pf-c-tile--m-selected--after--Transition,\n                          var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1)));--pf-c-tile--after--ScaleY:var(--pf-c-tile--m-selected--after--ScaleY, 2)}:host([disabled]){--pf-c-tile--BackgroundColor:var(--pf-c-tile--m-disabled--BackgroundColor, var( --pf-global--disabled-color--300, #f0f0f0));--pf-c-tile__title--Color:var(--pf-c-tile--m-disabled__title--Color, var(--pf-global--disabled-color--100, #6a6e73));--pf-c-tile__body--Color:var(--pf-c-tile--m-disabled__body--Color,  var(--pf-global--disabled-color--100, #6a6e73));--pf-c-tile--before--BorderWidth:0;--pf-c-tile__icon--Color:var(--pf-c-tile--m-disabled__icon--Color, var(--pf-global--disabled-color--100, #6a6e73));pointer-events:none}[part=header]{display:flex;align-items:center;justify-content:center}[part=title]{color:var(--pf-c-tile__title--Color,var(--pf-global--Color--100,var(--pf-global--Color--dark-100,#151515)))}[part=body]{font-size:var(--pf-c-tile__body--FontSize, var(--pf-global--FontSize--xs, .75rem));color:var(--pf-c-tile__body--Color,var(--pf-global--Color--100,#151515))}[part=icon]{--_icon-size:var(--pf-c-tile__icon--FontSize: var(--pf-global--icon--FontSize--md, 1.125rem));--pf-icon--size:var(--_icon-size);margin-right:var(--pf-c-tile__icon--MarginRight,var(--pf-global--spacer--sm,.5rem));font-size:var(--_icon-size);color:var(--pf-c-tile__icon--Color,var(--pf-global--Color--100,#151515))}:host([stacked]) [part=header]{--pf-c-tile__icon--MarginRight:0;--_icon-size:var(--pf-c-tile__icon--FontSize, var(--pf-c-tile__header--m-stacked__icon--FontSize, var(--pf-global--icon--FontSize--lg, 1.5rem)));flex-direction:column;justify-content:initial}:host([stacked=lg]) [part=icon]{--_icon-size:var(--pf-c-tile__icon--FontSize, var(--pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize, var(--pf-global--icon--FontSize--xl, 3.375rem)))}:host([stacked]) [part=icon]{display:flex;align-items:center;justify-content:center;margin-bottom:var(--pf-c-tile__header--m-stacked__icon--MarginBottom,var(--pf-global--spacer--xs,.25rem))}#body::slotted(:is(h1,h2,h3,h4,h5,h6,p)),#title::slotted(:is(h1,h2,h3,h4,h5,h6,p)){margin-block:0}`;
 /**
  * Tile
  *

package/pf-timestamp/README.md

@@ -0,0 +1,64 @@
+# PatternFly Elements Timestamp
+     
+A timestamp provides consistent formats for displaying date and time values.
+
+Read more about Datetime in the [PatternFly Elements Timestamp documentation](https://patternflyelements.org/components/timestamp)
+
+##  Installation
+
+Load `<pf-timestamp>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-timestamp/pf-timestamp.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-timestamp/pf-timestamp.js';
+```
+
+## Usage
+
+### Just the date: January 2, 2006
+```html
+<pf-timestamp
+  date="Mon Jan 2 15:04:05 EST 2006"
+  date-format="long">
+</pf-timestamp>
+```
+
+### With time: Monday, January 2, 2006 at 3:04:05 PM EST
+```html
+<pf-timestamp
+  date="Mon Jan 2 15:04:05 EST 2006"
+  date-format="full"
+  time-format="long">
+</pf-timestamp>
+```
+
+### With an en-GB locale: Monday, 2 January 2006 at 15:04:05 GMT-5
+You can use any locale here.
+```html
+<pf-timestamp
+  date="Mon Jan 2 15:04:05 EST 2006"
+  date-format="full"
+  time-format="long"
+  locale="en-GB">
+</pf-timestamp>
+```
+
+### Relative time: 17 years ago
+```html
+<pf-timestamp
+  date="Mon Jan 2 15:04:05 EST 2006"
+  relative>
+</pf-timestamp>
+```
+

package/pf-timestamp/pf-timestamp.js

@@ -3,7 +3,7 @@ import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tsli
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { css } from "lit";
-const style = css `:host {\n  display: inline;\n}\n\ntime {\n  text-decoration: var(--_timestamp-text-decoration, none);\n  text-underline-offset: var(--_timestamp-text-underline-offset, initial);\n}\n`;
+const style = css `:host{display:inline}time{text-decoration:var(--_timestamp-text-decoration,none);text-underline-offset:var(--_timestamp-text-underline-offset,initial)}`;
 const BooleanStringConverter = {
     fromAttribute(value) {
         return !value || value === 'true';

package/pf-tooltip/BaseTooltip.js

@@ -5,7 +5,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
 import { css } from "lit";
-const style = css `:host {\n  display: inline;\n}\n\n\n#container {\n  display: inline-flex;\n  position: relative;\n  --_floating-arrow-size: 0.5rem;\n}\n\n#invoker {\n  display: inline-block;\n  position: relative;\n}\n\n#tooltip,\n#tooltip::after {\n  position: absolute;\n}\n\n#tooltip {\n  display: block;\n  opacity: 0;\n  pointer-events: none;\n  z-index: 10000;\n  transition: opacity 300ms cubic-bezier(0.54, 1.5, 0.38, 1.11) 0s;\n  text-align: center;\n  word-break: break-word;\n  translate: var(--_floating-content-translate);\n  max-width: calc(100vw - 10px);\n  width: max-content;\n  top: 0;\n  left: 0;\n  will-change: opacity;\n}\n\n#tooltip::after {\n  display: block;\n  content: '';\n  rotate: 45deg;\n  width: var(--_floating-arrow-size);\n  height: var(--_floating-arrow-size);\n  will-change: left top right bottom;\n}\n\n.open #tooltip {\n  opacity: 1;\n}\n\n/* LEFT */\n.left #tooltip::after          { right: calc(-0.5 * var(--_floating-arrow-size)); }\n.left.center #tooltip::after   { top: calc(50% - 0.5 * var(--_floating-arrow-size)); }\n.left.start #tooltip::after    { top: var(--_floating-arrow-size); }\n.left.end #tooltip::after      { bottom: var(--_floating-arrow-size); }\n\n/* TOP */\n.top #tooltip::after           { top: calc(100% - 0.5 * var(--_floating-arrow-size)); }\n.top.center #tooltip::after    { right: calc(50% - 0.5 * var(--_floating-arrow-size)); }\n.top.start #tooltip::after     { left: var(--_floating-arrow-size); }\n.top.end #tooltip::after       { right: var(--_floating-arrow-size); }\n\n/* RIGHT */\n.right #tooltip::after         { right: calc(100% - 0.5 * var(--_floating-arrow-size)); }\n.right.center #tooltip::after  { top: calc(50% - 0.5 * var(--_floating-arrow-size)); }\n.right.start #tooltip::after   { top: var(--_floating-arrow-size); }\n.right.end #tooltip::after     { bottom: var(--_floating-arrow-size); }\n\n/* BOTTOM */\n.bottom #tooltip::after        { bottom: calc(100% - 0.5 * var(--_floating-arrow-size)); }\n.bottom.center #tooltip::after { right: calc(50% - 0.5 * var(--_floating-arrow-size)); }\n.bottom.start #tooltip::after  { left: var(--_floating-arrow-size); }\n.bottom.end #tooltip::after    { right: var(--_floating-arrow-size); }\n\n`;
+const style = css `:host{display:inline}#container{display:inline-flex;position:relative;--_floating-arrow-size:0.5rem}#invoker{display:inline-block;position:relative}#tooltip,#tooltip::after{position:absolute}#tooltip{display:block;opacity:0;pointer-events:none;z-index:10000;transition:opacity .3s cubic-bezier(.54, 1.5, .38, 1.11) 0s;text-align:center;word-break:break-word;translate:var(--_floating-content-translate);max-width:calc(100vw - 10px);width:max-content;top:0;left:0;will-change:opacity}#tooltip::after{display:block;content:'';rotate:45deg;width:var(--_floating-arrow-size);height:var(--_floating-arrow-size);will-change:left top right bottom}.open #tooltip{opacity:1}.left #tooltip::after{right:calc(-.5 * var(--_floating-arrow-size))}.left.center #tooltip::after{top:calc(50% - .5 * var(--_floating-arrow-size))}.left.start #tooltip::after{top:var(--_floating-arrow-size)}.left.end #tooltip::after{bottom:var(--_floating-arrow-size)}.top #tooltip::after{top:calc(100% - .5 * var(--_floating-arrow-size))}.top.center #tooltip::after{right:calc(50% - .5 * var(--_floating-arrow-size))}.top.start #tooltip::after{left:var(--_floating-arrow-size)}.top.end #tooltip::after{right:var(--_floating-arrow-size)}.right #tooltip::after{right:calc(100% - .5 * var(--_floating-arrow-size))}.right.center #tooltip::after{top:calc(50% - .5 * var(--_floating-arrow-size))}.right.start #tooltip::after{top:var(--_floating-arrow-size)}.right.end #tooltip::after{bottom:var(--_floating-arrow-size)}.bottom #tooltip::after{bottom:calc(100% - .5 * var(--_floating-arrow-size))}.bottom.center #tooltip::after{right:calc(50% - .5 * var(--_floating-arrow-size))}.bottom.start #tooltip::after{left:var(--_floating-arrow-size)}.bottom.end #tooltip::after{right:var(--_floating-arrow-size)}`;
 const enterEvents = ['focusin', 'tap', 'click', 'mouseenter'];
 const exitEvents = ['focusout', 'blur', 'mouseleave'];
 export class BaseTooltip extends LitElement {

package/pf-tooltip/README.md

@@ -0,0 +1,64 @@
+# Tooltip
+A tooltip is a floating text area triggered by a user that provides helpful or contextual information.
+
+## Usage
+A tooltip is used by wrapping an html element in the pf-tooltip element along with contextual information to be displayed alongside of the element.  
+
+Read more about tooltips in the [PatternFly Elements Tooltip documentation](https://patternflyelements.org/components/tooltip)
+
+##  Installation
+
+Load `<pf-tooltip>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-tooltip/pf-tooltip.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-tooltip/pf-tooltip.js';
+```
+
+## Usage
+
+
+### Basic Tooltip 
+```html
+<pf-tooltip> This is An Element
+  <div slot="content">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
+    incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et 
+    ultrices.
+  </div>
+</pf-tooltip>
+```
+
+### Tooltip With Left Positioning (also available: top, right, bottom)
+```html
+<pf-tooltip position="left"> This is An Element
+  <div slot="content">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
+    incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et 
+    ultrices.
+  </div>
+</pf-tooltip>
+```
+
+### Tooltip With Left Positioning And Offset
+```html
+<pf-tooltip position="left" offset="10, 10">
+    <div>
+        This is An Element 
+    </div>
+    <div slot="content">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.
+    </div>
+</pf-tooltip>
+```

package/pf-tooltip/pf-tooltip.js

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { customElement, property } from 'lit/decorators.js';
 import { BaseTooltip } from './BaseTooltip.js';
 import { css } from "lit";
-const styles = css `:host {\n  --_timestamp-text-decoration: underline dashed 1px;\n  --_timestamp-text-underline-offset: 4px;\n}\n\n#tooltip {\n  --_timestamp-text-decoration: none;\n  --_timestamp-text-underline-offset: initial;\n  line-height: var(--pf-c-tooltip--line-height, 1.5);\n  max-width: var(--pf-c-tooltip--MaxWidth, 18.75rem);\n  box-shadow: var(--pf-c-tooltip--BoxShadow,\n    var(--pf-global--BoxShadow--md,\n      0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12),\n      0 0 0.25rem 0 rgba(3, 3, 3, 0.06)));\n  padding:\n    var(--pf-c-tooltip__content--PaddingTop,\n      var(--pf-global--spacer--sm, 0.5rem))\n    var(--pf-c-tooltip__content--PaddingRight,\n      var(--pf-global--spacer--sm, 0.5rem))\n    var(--pf-c-tooltip__content--PaddingBottom,\n      var(--pf-global--spacer--sm, 0.5rem))\n    var(--pf-c-tooltip__content--PaddingLeft,\n      var(--pf-global--spacer--sm, 0.5rem));\n  font-size: var(--pf-c-tooltip__content--FontSize,\n    var(--pf-global--FontSize--sm, 0.875rem));\n  color: var(--pf-c-tooltip__content--Color,\n    var(--pf-global--Color--light-100, #ffffff));\n  background-color: var(--pf-c-tooltip__content--BackgroundColor,\n    var(--pf-global--BackgroundColor--dark-100, #151515));\n}\n\n#container {\n  --_floating-arrow-size: var(--pf-c-tooltip__arrow--Width, 0.5rem);\n}\n\n#tooltip::after {\n  background-color: var(--pf-c-tooltip__content--BackgroundColor,\n    var(--pf-global--BackgroundColor--dark-100, #151515));\n}\n\n`;
+const styles = css `:host{--_timestamp-text-decoration:underline dashed 1px;--_timestamp-text-underline-offset:4px}#tooltip{--_timestamp-text-decoration:none;--_timestamp-text-underline-offset:initial;line-height:var(--pf-c-tooltip--line-height, 1.5);max-width:var(--pf-c-tooltip--MaxWidth,18.75rem);box-shadow:var(--pf-c-tooltip--BoxShadow,var(--pf-global--BoxShadow--md,0 .25rem .5rem 0 rgba(3,3,3,.12),0 0 .25rem 0 rgba(3,3,3,.06)));padding:var(--pf-c-tooltip__content--PaddingTop,var(--pf-global--spacer--sm,.5rem)) var(--pf-c-tooltip__content--PaddingRight,var(--pf-global--spacer--sm,.5rem)) var(--pf-c-tooltip__content--PaddingBottom,var(--pf-global--spacer--sm,.5rem)) var(--pf-c-tooltip__content--PaddingLeft,var(--pf-global--spacer--sm,.5rem));font-size:var(--pf-c-tooltip__content--FontSize,\n    var(--pf-global--FontSize--sm, .875rem));color:var(--pf-c-tooltip__content--Color,var(--pf-global--Color--light-100,#fff));background-color:var(--pf-c-tooltip__content--BackgroundColor,var(--pf-global--BackgroundColor--dark-100,#151515))}#container{--_floating-arrow-size:var(--pf-c-tooltip__arrow--Width, 0.5rem)}#tooltip::after{background-color:var(--pf-c-tooltip__content--BackgroundColor,var(--pf-global--BackgroundColor--dark-100,#151515))}`;
 /**
  * Patternfly tooltip
  *

package/pf-accordion/demo/demo.css

@@ -1,9 +0,0 @@
-article {
-  margin-inline: 4em;
-}
-
-article header {
-  display: flex;
-  align-items: center;
-  gap: 1em;
-}

package/pf-accordion/demo/pf-accordion.js

@@ -1,10 +0,0 @@
-import '@patternfly/elements/pf-accordion/pf-accordion.js';
-import '@patternfly/elements/pf-button/pf-button.js';
-import '@patternfly/elements/pf-switch/pf-switch.js';
-
-const bordered = document.getElementById('bordered-example');
-const isLarge = document.getElementById('toggle-size');
-
-isLarge.addEventListener('change', function() {
-  bordered.toggleAttribute('large', isLarge.checked);
-});

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

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

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

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

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

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

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

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