@patternfly/elements 3.0.0 → 3.0.1

package/pf-tile/pf-tile.d.ts

@@ -6,43 +6,31 @@ export type StackedSize = ('md' | 'lg');
  * [selectable card](../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.
- *
  * @slot icon           - Icon expects a `<pf-icon>` or `<svg>`
  * @slot title          - the title of the tile should be a heading
  * @slot                - The content should be a paragraph
- *
  * @csspart icon        - container for the icon
  * @csspart title       - container for the title
  * @csspart body        - container for the body content
- *
  * @attr {'boolean'} selected       - selected variant
  * @attr {'md'|'lg'|null} stacked   - stacked variant
- *
  * @cssprop   {<length>} --pf-c-tile--PaddingTop      {@default `1.5rem`}
  * @cssprop   {<length>} --pf-c-tile--PaddingRight    {@default `1.5rem`}
  * @cssprop   {<length>} --pf-c-tile--PaddingBottom   {@default `1.5rem`}
  * @cssprop   {<length>} --pf-c-tile--PaddingLeft     {@default `1.5rem`}
- *
  * @cssprop   {<color>} --pf-c-tile--BackgroundColor  {@default `#FFFFFF`}
- *
  * @cssprop   --pf-c-tile--Transition {@default `none`}
  * @cssprop   --pf-c-tile--TranslateY {@default `0`}
- *
  * @cssprop   {<length>} --pf-c-tile--before--BorderWidth {@default `1px`}
  * @cssprop   {<color>} --pf-c-tile--before--BorderColor  {@default `#444548`}
- *
  * @cssprop   {<length>} --pf-c-tile--after--Height {@default `3px`}
  * @cssprop   {<color>} --pf-c-tile--after--BackgroundColor {@default `transparent`}
- *
  * @cssprop   --pf-c-tile--after--Transition {@default `none`}
  * @cssprop   --pf-c-tile--after--ScaleY {@default `1`}
- *
  * @cssprop   {<color>} --pf-c-tile__title--Color {@default `#06c`}
  * @cssprop   {<color>} --pf-c-tile__icon--Color {@default `#06c`}
- *
  * @cssprop   {<length>} --pf-c-tile__icon--MarginRight {@default `0`}
  * @cssprop   {<length>} --pf-c-tile__icon--FontSize {@default `1.5rem`}
- *
  * @cssprop   {<lenght>} --pf-c-tile__header--m-stacked__icon--MarginBottom {@default `0.25rem`}
  */
 export declare class PfTile extends BaseTile {

package/pf-tile/pf-tile.js

@@ -10,43 +10,31 @@ const styles = css `:host {\n  position: relative;\n  display: inline-grid;\n  p
  * [selectable card](../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.
- *
  * @slot icon           - Icon expects a `<pf-icon>` or `<svg>`
  * @slot title          - the title of the tile should be a heading
  * @slot                - The content should be a paragraph
- *
  * @csspart icon        - container for the icon
  * @csspart title       - container for the title
  * @csspart body        - container for the body content
- *
  * @attr {'boolean'} selected       - selected variant
  * @attr {'md'|'lg'|null} stacked   - stacked variant
- *
  * @cssprop   {<length>} --pf-c-tile--PaddingTop      {@default `1.5rem`}
  * @cssprop   {<length>} --pf-c-tile--PaddingRight    {@default `1.5rem`}
  * @cssprop   {<length>} --pf-c-tile--PaddingBottom   {@default `1.5rem`}
  * @cssprop   {<length>} --pf-c-tile--PaddingLeft     {@default `1.5rem`}
- *
  * @cssprop   {<color>} --pf-c-tile--BackgroundColor  {@default `#FFFFFF`}
- *
  * @cssprop   --pf-c-tile--Transition {@default `none`}
  * @cssprop   --pf-c-tile--TranslateY {@default `0`}
- *
  * @cssprop   {<length>} --pf-c-tile--before--BorderWidth {@default `1px`}
  * @cssprop   {<color>} --pf-c-tile--before--BorderColor  {@default `#444548`}
- *
  * @cssprop   {<length>} --pf-c-tile--after--Height {@default `3px`}
  * @cssprop   {<color>} --pf-c-tile--after--BackgroundColor {@default `transparent`}
- *
  * @cssprop   --pf-c-tile--after--Transition {@default `none`}
  * @cssprop   --pf-c-tile--after--ScaleY {@default `1`}
- *
  * @cssprop   {<color>} --pf-c-tile__title--Color {@default `#06c`}
  * @cssprop   {<color>} --pf-c-tile__icon--Color {@default `#06c`}
- *
  * @cssprop   {<length>} --pf-c-tile__icon--MarginRight {@default `0`}
  * @cssprop   {<length>} --pf-c-tile__icon--FontSize {@default `1.5rem`}
- *
  * @cssprop   {<lenght>} --pf-c-tile__header--m-stacked__icon--MarginBottom {@default `0.25rem`}
  */
 let PfTile = class PfTile extends BaseTile {

package/pf-tile/pf-tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-tile.js","sourceRoot":"","sources":["pf-tile.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;;;AASzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,QAAQ;IAA7B;;QAGuC,aAAQ,GAAG,KAAK,CAAC;IAG/D,CAAC;;AALiB,aAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAEU;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAkB;AAEhC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAuB;AALxC,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAMlB","sourcesContent":["\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { BaseTile } from './BaseTile.js';\n\nimport styles from './pf-tile.css';\n\nexport type StackedSize = (\n  | 'md'\n  | 'lg'\n)\n\n/**\n * A **tile** component is a form of selection that can be used in place of a\n * radio button and is commonly used in forms. A tile appears visually similar to a\n * [selectable card](../card/). However, tiles are used specifically when the user is selecting\n * a static option, whereas a selectable card triggers an action or opens a quickstart\n * or sidebar to provide additional information.\n *\n * @slot icon           - Icon expects a `<pf-icon>` or `<svg>`\n * @slot title          - the title of the tile should be a heading\n * @slot                - The content should be a paragraph\n *\n * @csspart icon        - container for the icon\n * @csspart title       - container for the title\n * @csspart body        - container for the body content\n *\n * @attr {'boolean'} selected       - selected variant\n * @attr {'md'|'lg'|null} stacked   - stacked variant\n *\n * @cssprop   {<length>} --pf-c-tile--PaddingTop      {@default `1.5rem`}\n * @cssprop   {<length>} --pf-c-tile--PaddingRight    {@default `1.5rem`}\n * @cssprop   {<length>} --pf-c-tile--PaddingBottom   {@default `1.5rem`}\n * @cssprop   {<length>} --pf-c-tile--PaddingLeft     {@default `1.5rem`}\n *\n * @cssprop   {<color>} --pf-c-tile--BackgroundColor  {@default `#FFFFFF`}\n *\n * @cssprop   --pf-c-tile--Transition {@default `none`}\n * @cssprop   --pf-c-tile--TranslateY {@default `0`}\n *\n * @cssprop   {<length>} --pf-c-tile--before--BorderWidth {@default `1px`}\n * @cssprop   {<color>} --pf-c-tile--before--BorderColor  {@default `#444548`}\n *\n * @cssprop   {<length>} --pf-c-tile--after--Height {@default `3px`}\n * @cssprop   {<color>} --pf-c-tile--after--BackgroundColor {@default `transparent`}\n *\n * @cssprop   --pf-c-tile--after--Transition {@default `none`}\n * @cssprop   --pf-c-tile--after--ScaleY {@default `1`}\n *\n * @cssprop   {<color>} --pf-c-tile__title--Color {@default `#06c`}\n * @cssprop   {<color>} --pf-c-tile__icon--Color {@default `#06c`}\n *\n * @cssprop   {<length>} --pf-c-tile__icon--MarginRight {@default `0`}\n * @cssprop   {<length>} --pf-c-tile__icon--FontSize {@default `1.5rem`}\n *\n * @cssprop   {<lenght>} --pf-c-tile__header--m-stacked__icon--MarginBottom {@default `0.25rem`}\n */\n@customElement('pf-tile')\nexport class PfTile extends BaseTile {\n  static readonly styles = [styles];\n\n  @property({ reflect: true, type: Boolean }) selected = false;\n\n  @property({ reflect: true }) stacked?: StackedSize;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tile': PfTile;\n}\n}\n"]}
+{"version":3,"file":"pf-tile.js","sourceRoot":"","sources":["pf-tile.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;;;AASzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,QAAQ;IAA7B;;QAGuC,aAAQ,GAAG,KAAK,CAAC;IAG/D,CAAC;;AALiB,aAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAEU;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAkB;AAEhC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAuB;AALxC,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAMlB","sourcesContent":["\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { BaseTile } from './BaseTile.js';\n\nimport styles from './pf-tile.css';\n\nexport type StackedSize = (\n  | 'md'\n  | 'lg'\n);\n\n/**\n * A **tile** component is a form of selection that can be used in place of a\n * radio button and is commonly used in forms. A tile appears visually similar to a\n * [selectable card](../card/). However, tiles are used specifically when the user is selecting\n * a static option, whereas a selectable card triggers an action or opens a quickstart\n * or sidebar to provide additional information.\n * @slot icon           - Icon expects a `<pf-icon>` or `<svg>`\n * @slot title          - the title of the tile should be a heading\n * @slot                - The content should be a paragraph\n * @csspart icon        - container for the icon\n * @csspart title       - container for the title\n * @csspart body        - container for the body content\n * @attr {'boolean'} selected       - selected variant\n * @attr {'md'|'lg'|null} stacked   - stacked variant\n * @cssprop   {<length>} --pf-c-tile--PaddingTop      {@default `1.5rem`}\n * @cssprop   {<length>} --pf-c-tile--PaddingRight    {@default `1.5rem`}\n * @cssprop   {<length>} --pf-c-tile--PaddingBottom   {@default `1.5rem`}\n * @cssprop   {<length>} --pf-c-tile--PaddingLeft     {@default `1.5rem`}\n * @cssprop   {<color>} --pf-c-tile--BackgroundColor  {@default `#FFFFFF`}\n * @cssprop   --pf-c-tile--Transition {@default `none`}\n * @cssprop   --pf-c-tile--TranslateY {@default `0`}\n * @cssprop   {<length>} --pf-c-tile--before--BorderWidth {@default `1px`}\n * @cssprop   {<color>} --pf-c-tile--before--BorderColor  {@default `#444548`}\n * @cssprop   {<length>} --pf-c-tile--after--Height {@default `3px`}\n * @cssprop   {<color>} --pf-c-tile--after--BackgroundColor {@default `transparent`}\n * @cssprop   --pf-c-tile--after--Transition {@default `none`}\n * @cssprop   --pf-c-tile--after--ScaleY {@default `1`}\n * @cssprop   {<color>} --pf-c-tile__title--Color {@default `#06c`}\n * @cssprop   {<color>} --pf-c-tile__icon--Color {@default `#06c`}\n * @cssprop   {<length>} --pf-c-tile__icon--MarginRight {@default `0`}\n * @cssprop   {<length>} --pf-c-tile__icon--FontSize {@default `1.5rem`}\n * @cssprop   {<lenght>} --pf-c-tile__header--m-stacked__icon--MarginBottom {@default `0.25rem`}\n */\n@customElement('pf-tile')\nexport class PfTile extends BaseTile {\n  static readonly styles = [styles];\n\n  @property({ reflect: true, type: Boolean }) selected = false;\n\n  @property({ reflect: true }) stacked?: StackedSize;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tile': PfTile;\n  }\n}\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-tile.e2e.js","sourceRoot":"","sources":["pf-tile.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,SAAS,CAAC;AAE1B,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-tile';\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-tile/test/pf-tile.spec.d.ts

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

package/pf-tile/test/pf-tile.spec.js

@@ -0,0 +1,54 @@
+import { expect, html, nextFrame } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { PfTile } from '@patternfly/elements/pf-tile/pf-tile.js';
+const TEMPLATE = html `
+  <pf-tile>
+    <pf-icon slot="icon" set="fas" icon="bell" size="md" loading="idle"></pf-icon>
+    Default Content
+    <div slot="body">Subtext goes here</div>
+  </pf-tile>
+`;
+describe('<pf-tile>', function () {
+    it('imperatively instantiates', function () {
+        expect(document.createElement('pf-tile')).to.be.an.instanceof(PfTile);
+    });
+    it('should upgrade', async function () {
+        const el = await createFixture(TEMPLATE);
+        const klass = customElements.get('pf-tile');
+        expect(el)
+            .to.be.an.instanceOf(klass)
+            .and
+            .to.be.an.instanceOf(PfTile);
+    });
+    it('should have a selected styles when selected', async function () {
+        const el = await createFixture(TEMPLATE);
+        el.selected = true;
+        await nextFrame();
+        const { height } = getComputedStyle(el, ':after');
+        expect(height).to.equal('3px');
+        const { backgroundColor } = getComputedStyle(el, ':after');
+        expect(backgroundColor).to.equal('rgb(0, 102, 204)');
+        // TODO: don't test shadowroots
+        const { color } = getComputedStyle(el.shadowRoot.querySelector('[part="icon"]'));
+        expect(color).to.be.equal('rgb(0, 102, 204)');
+    });
+    it('should be flex direction column if stacked', async function () {
+        const el = await createFixture(TEMPLATE);
+        el.stacked = 'md';
+        await nextFrame();
+        // TODO: don't test shadowroots
+        const { flexDirection } = getComputedStyle(el.shadowRoot.querySelector('[part="header"]'));
+        expect(flexDirection).to.equal('column');
+    });
+    it('should have disabled styles when disabled', async function () {
+        const el = await createFixture(TEMPLATE);
+        el.setAttribute('disabled', '');
+        await nextFrame();
+        const { backgroundColor } = getComputedStyle(el);
+        expect(backgroundColor).to.equal('rgb(240, 240, 240)');
+        // TODO: don't test shadowroots
+        const { color } = getComputedStyle(el.shadowRoot.querySelector('[part="title"]'));
+        expect(color).to.equal('rgb(106, 110, 115)');
+    });
+});
+//# sourceMappingURL=pf-tile.spec.js.map

package/pf-tile/test/pf-tile.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-tile.spec.js","sourceRoot":"","sources":["pf-tile.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, html, nextFrame } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { PfTile } from '@patternfly/elements/pf-tile/pf-tile.js';\n\nconst TEMPLATE = html`\n  <pf-tile>\n    <pf-icon slot=\"icon\" set=\"fas\" icon=\"bell\" size=\"md\" loading=\"idle\"></pf-icon>\n    Default Content\n    <div slot=\"body\">Subtext goes here</div>\n  </pf-tile>\n`;\n\n\ndescribe('<pf-tile>', function() {\n  it('imperatively instantiates', function() {\n    expect(document.createElement('pf-tile')).to.be.an.instanceof(PfTile);\n  });\n\n  it('should upgrade', async function() {\n    const el = await createFixture <PfTile>(TEMPLATE);\n    const klass = customElements.get('pf-tile');\n    expect(el)\n        .to.be.an.instanceOf(klass)\n        .and\n        .to.be.an.instanceOf(PfTile);\n  });\n\n  it('should have a selected styles when selected', async function() {\n    const el = await createFixture <PfTile>(TEMPLATE);\n    el.selected = true;\n    await nextFrame();\n    const { height } = getComputedStyle(el, ':after');\n    expect(height).to.equal('3px');\n    const { backgroundColor } = getComputedStyle(el, ':after');\n    expect(backgroundColor).to.equal('rgb(0, 102, 204)');\n    // TODO: don't test shadowroots\n    const { color } = getComputedStyle(el.shadowRoot!.querySelector('[part=\"icon\"]')!);\n    expect(color).to.be.equal('rgb(0, 102, 204)');\n  });\n\n  it('should be flex direction column if stacked', async function() {\n    const el = await createFixture <PfTile>(TEMPLATE);\n    el.stacked = 'md';\n    await nextFrame();\n    // TODO: don't test shadowroots\n    const { flexDirection } = getComputedStyle(el.shadowRoot!.querySelector('[part=\"header\"]')!);\n    expect(flexDirection).to.equal('column');\n  });\n\n  it('should have disabled styles when disabled', async function() {\n    const el = await createFixture <PfTile>(TEMPLATE);\n    el.setAttribute('disabled', '');\n    await nextFrame();\n    const { backgroundColor } = getComputedStyle(el);\n    expect(backgroundColor).to.equal('rgb(240, 240, 240)');\n    // TODO: don't test shadowroots\n    const { color } = getComputedStyle(el.shadowRoot!.querySelector('[part=\"title\"]')!);\n    expect(color).to.equal('rgb(106, 110, 115)');\n  });\n});\n"]}

package/pf-timestamp/pf-timestamp.d.ts

@@ -21,7 +21,7 @@ export declare class PfTimestamp extends LitElement {
     get time(): string;
     connectedCallback(): void;
     willUpdate(changedProperties: PropertyValues<this>): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-timestamp/pf-timestamp.js

@@ -72,7 +72,11 @@ __decorate([
     property({ reflect: true, type: Boolean })
 ], PfTimestamp.prototype, "utc", void 0);
 __decorate([
-    property({ reflect: true, attribute: 'hour-12', converter: BooleanStringConverter })
+    property({
+        reflect: true,
+        attribute: 'hour-12',
+        converter: BooleanStringConverter,
+    })
 ], PfTimestamp.prototype, "hour12", void 0);
 __decorate([
     property({ reflect: true })

package/pf-timestamp/pf-timestamp.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-timestamp.js","sourceRoot":"","sources":["pf-timestamp.ts"],"names":[],"mappings":";;AAEA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EACL,mBAAmB,GAEpB,MAAM,0DAA0D,CAAC;;;AAIlE,MAAM,sBAAsB,GAA8B;IACxD,aAAa,CAAC,KAAK;QACjB,OAAO,CAAC,KAAK,IAAI,KAAK,KAAK,MAAM,CAAC;IACpC,CAAC;CACF,CAAC;AAEF;;GAEG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAoCL,iCAAa,IAAI,mBAAmB,CAAC,IAAI,CAAC,EAAC;IAoB7C,CAAC;IApCC,IAAI,IAAI;QACN,OAAO,uBAAA,IAAI,8BAAW,CAAC,YAAY,CAAC;IACtC,CAAC;IAED,IAAI,IAAI,CAAC,MAAM;QACb,uBAAA,IAAI,8BAAW,CAAC,IAAI,GAAG,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC;IAC1C,CAAC;IAED,IAAI,SAAS;QACX,OAAO,uBAAA,IAAI,8BAAW,CAAC,SAAS,CAAC;IACnC,CAAC;IAED,IAAI,IAAI;QACN,OAAO,uBAAA,IAAI,8BAAW,CAAC,IAAI,CAAC;IAC9B,CAAC;IAID,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;YAC9B,uBAAA,IAAI,8BAAW,CAAC,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAE,CAAC,CAAC;QAC9D,CAAC;IACH,CAAC;IAED,UAAU,CAAC,iBAAuC;QAChD,KAAK,MAAM,CAAC,IAAI,CAAC,IAAI,iBAAiB,EAAE,CAAC;YACvC,uBAAA,IAAI,8BAAW,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,IAAkB,CAAC,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;wBACS,uBAAA,IAAI,8BAAW,CAAC,SAAS,KAAK,uBAAA,IAAI,8BAAW,CAAC,IAAI;KACrE,CAAC;IACJ,CAAC;;;AAtDe,kBAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;AAEsB;IAAtD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CAA6B;AAE5B;IAAtD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CAA6B;AAEnD;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;iDAAuB;AAEI;IAAzD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;kDAAwB;AAEpD;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAiB;AAED;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAoB;AAEnB;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAe;AAE4B;IAArF,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,sBAAsB,EAAE,CAAC;2CAAkB;AAGvG;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAG3B;AAtBU,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAwDvB","sourcesContent":["import type { ComplexAttributeConverter, PropertyValues } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport {\n  TimestampController,\n  type DateTimeFormat,\n} from '@patternfly/pfe-core/controllers/timestamp-controller.js';\n\nimport style from './pf-timestamp.css';\n\nconst BooleanStringConverter: ComplexAttributeConverter = {\n  fromAttribute(value) {\n    return !value || value === 'true';\n  },\n};\n\n/**\n * A **timestamp** provides consistent formats for displaying date and time values.\n */\n@customElement('pf-timestamp')\nexport class PfTimestamp extends LitElement {\n  static readonly styles = [style];\n\n  @property({ reflect: true, attribute: 'date-format' }) dateFormat?: DateTimeFormat;\n\n  @property({ reflect: true, attribute: 'time-format' }) timeFormat?: DateTimeFormat;\n\n  @property({ attribute: false }) customFormat?: object;\n\n  @property({ reflect: true, attribute: 'display-suffix' }) displaySuffix?: string;\n\n  @property({ reflect: true }) locale?: string;\n\n  @property({ reflect: true, type: Boolean }) relative?: boolean;\n\n  @property({ reflect: true, type: Boolean }) utc?: boolean;\n\n  @property({ reflect: true, attribute: 'hour-12', converter: BooleanStringConverter }) hour12?: boolean;\n\n  @property({ reflect: true })\n  get date() {\n    return this.#timestamp.localeString;\n  }\n\n  set date(string) {\n    this.#timestamp.date = new Date(string);\n  }\n\n  get isoString() {\n    return this.#timestamp.isoString;\n  }\n\n  get time() {\n    return this.#timestamp.time;\n  }\n\n  #timestamp = new TimestampController(this);\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (this.hasAttribute('date')) {\n      this.#timestamp.date = new Date(this.getAttribute('date')!);\n    }\n  }\n\n  willUpdate(changedProperties: PropertyValues<this>) {\n    for (const [prop] of changedProperties) {\n      this.#timestamp.set(prop, this[prop as keyof this]);\n    }\n  }\n\n  render() {\n    return html`\n      <time datetime=\"${this.#timestamp.isoString}\">${this.#timestamp.time}</time>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-timestamp': PfTimestamp;\n  }\n}\n"]}
+{"version":3,"file":"pf-timestamp.js","sourceRoot":"","sources":["pf-timestamp.ts"],"names":[],"mappings":";;AAEA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EACL,mBAAmB,GAEpB,MAAM,0DAA0D,CAAC;;;AAIlE,MAAM,sBAAsB,GAA8B;IACxD,aAAa,CAAC,KAAK;QACjB,OAAO,CAAC,KAAK,IAAI,KAAK,KAAK,MAAM,CAAC;IACpC,CAAC;CACF,CAAC;AAEF;;GAEG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAwCL,iCAAa,IAAI,mBAAmB,CAAC,IAAI,CAAC,EAAC;IAoB7C,CAAC;IApCC,IAAI,IAAI;QACN,OAAO,uBAAA,IAAI,8BAAW,CAAC,YAAY,CAAC;IACtC,CAAC;IAED,IAAI,IAAI,CAAC,MAAM;QACb,uBAAA,IAAI,8BAAW,CAAC,IAAI,GAAG,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC;IAC1C,CAAC;IAED,IAAI,SAAS;QACX,OAAO,uBAAA,IAAI,8BAAW,CAAC,SAAS,CAAC;IACnC,CAAC;IAED,IAAI,IAAI;QACN,OAAO,uBAAA,IAAI,8BAAW,CAAC,IAAI,CAAC;IAC9B,CAAC;IAID,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;YAC9B,uBAAA,IAAI,8BAAW,CAAC,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAE,CAAC,CAAC;QAC9D,CAAC;IACH,CAAC;IAED,UAAU,CAAC,iBAAuC;QAChD,KAAK,MAAM,CAAC,IAAI,CAAC,IAAI,iBAAiB,EAAE,CAAC;YACvC,uBAAA,IAAI,8BAAW,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,IAAkB,CAAC,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;wBACS,uBAAA,IAAI,8BAAW,CAAC,SAAS,KAAK,uBAAA,IAAI,8BAAW,CAAC,IAAI;KACrE,CAAC;IACJ,CAAC;;;AA1De,kBAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;AAEsB;IAAtD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CAA6B;AAE5B;IAAtD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CAA6B;AAEnD;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;iDAAuB;AAEI;IAAzD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;kDAAwB;AAEpD;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAiB;AAED;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAoB;AAEnB;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAe;AAMvD;IAJF,QAAQ,CAAC;QACR,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,SAAS;QACpB,SAAS,EAAE,sBAAsB;KAClC,CAAC;2CAAkB;AAGpB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAG3B;AA1BU,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA4DvB","sourcesContent":["import type { ComplexAttributeConverter, PropertyValues } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport {\n  TimestampController,\n  type DateTimeFormat,\n} from '@patternfly/pfe-core/controllers/timestamp-controller.js';\n\nimport style from './pf-timestamp.css';\n\nconst BooleanStringConverter: ComplexAttributeConverter = {\n  fromAttribute(value) {\n    return !value || value === 'true';\n  },\n};\n\n/**\n * A **timestamp** provides consistent formats for displaying date and time values.\n */\n@customElement('pf-timestamp')\nexport class PfTimestamp extends LitElement {\n  static readonly styles = [style];\n\n  @property({ reflect: true, attribute: 'date-format' }) dateFormat?: DateTimeFormat;\n\n  @property({ reflect: true, attribute: 'time-format' }) timeFormat?: DateTimeFormat;\n\n  @property({ attribute: false }) customFormat?: object;\n\n  @property({ reflect: true, attribute: 'display-suffix' }) displaySuffix?: string;\n\n  @property({ reflect: true }) locale?: string;\n\n  @property({ reflect: true, type: Boolean }) relative?: boolean;\n\n  @property({ reflect: true, type: Boolean }) utc?: boolean;\n\n  @property({\n    reflect: true,\n    attribute: 'hour-12',\n    converter: BooleanStringConverter,\n  }) hour12?: boolean;\n\n  @property({ reflect: true })\n  get date() {\n    return this.#timestamp.localeString;\n  }\n\n  set date(string) {\n    this.#timestamp.date = new Date(string);\n  }\n\n  get isoString() {\n    return this.#timestamp.isoString;\n  }\n\n  get time() {\n    return this.#timestamp.time;\n  }\n\n  #timestamp = new TimestampController(this);\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (this.hasAttribute('date')) {\n      this.#timestamp.date = new Date(this.getAttribute('date')!);\n    }\n  }\n\n  willUpdate(changedProperties: PropertyValues<this>) {\n    for (const [prop] of changedProperties) {\n      this.#timestamp.set(prop, this[prop as keyof this]);\n    }\n  }\n\n  render() {\n    return html`\n      <time datetime=\"${this.#timestamp.isoString}\">${this.#timestamp.time}</time>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-timestamp': PfTimestamp;\n  }\n}\n"]}

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

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

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

@@ -0,0 +1,12 @@
+import { test } from '@playwright/test';
+import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+const tagName = 'pf-timestamp';
+test.describe(tagName, () => {
+    test('snapshot', async ({ page }) => {
+        const componentPage = new PfeDemoPage(page, tagName);
+        await componentPage.navigate();
+        await page.$eval('#realtime', el => el.closest('section')?.remove());
+        await componentPage.snapshot();
+    });
+});
+//# sourceMappingURL=pf-timestamp.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-timestamp.e2e.js","sourceRoot":"","sources":["pf-timestamp.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,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;QACrE,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-timestamp';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await page.$eval('#realtime', el => el.closest('section')?.remove());\n    await componentPage.snapshot();\n  });\n});\n"]}

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

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

package/pf-timestamp/test/pf-timestamp.spec.js

@@ -0,0 +1,156 @@
+import { expect, html } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { PfTimestamp } from '@patternfly/elements/pf-timestamp/pf-timestamp.js';
+describe('<pf-timestamp>', function () {
+    it('imperatively instantiates', function () {
+        expect(document.createElement('pf-timestamp')).to.be.an.instanceof(PfTimestamp);
+    });
+    it('should upgrade', async function () {
+        const element = await createFixture(html `<pf-timestamp></pf-timestamp>`);
+        expect(element, 'the <pf-timestamp> should be an instance of PfTimestamp')
+            .to.be.an.instanceof(customElements.get('pf-timestamp'))
+            .and
+            .to.be.an.instanceof(PfTimestamp);
+    });
+    it('should show the current date by default with default formatting', async function () {
+        const element = await createFixture(html `
+      <pf-timestamp></pf-timestamp>
+    `);
+        const expected = new Date().toLocaleString();
+        expect(element.time).to.equal(expected);
+    });
+    it('should set the correct ISO date on the datetime attribute in the time element', async function () {
+        const date = new Date('Sat Jan 01 2022 00:00:00');
+        const dateString = date.toString();
+        const expected = date.toISOString();
+        const element = await createFixture(html `
+      <pf-timestamp date="${dateString}"></pf-timestamp>
+    `);
+        expect(element.isoString).to.equal(expected);
+    });
+    it('should show a passed in date with default formatting', async function () {
+        const dateString = 'Sat Jan 01 2022 00:00:00';
+        const element = await createFixture(html `
+      <pf-timestamp date="${dateString}"></pf-timestamp>
+    `);
+        expect(element.time).to.equal(new Date(dateString).toLocaleString());
+    });
+    it('should show custom formatting when date-format and time-format are passed in', async function () {
+        const dateString = 'Sat Jan 01 2022 00:00:00';
+        const expected = new Date(dateString).toLocaleString('en-US', { dateStyle: 'full', timeStyle: 'short' });
+        const element = await createFixture(html `
+      <pf-timestamp date="${dateString}" date-format="full" time-format="short"></pf-timestamp>
+    `);
+        expect(element.time).to.equal(expected);
+    });
+    it('should show only a date when date-format is passed in', async function () {
+        const dateString = 'Sat Jan 01 2022 00:00:00';
+        const expected = new Date(dateString).toLocaleString('en-US', { dateStyle: 'full' });
+        const element = await createFixture(html `
+      <pf-timestamp date="${dateString}" date-format="full"></pf-timestamp>
+    `);
+        expect(element.time).to.equal(expected);
+    });
+    it('should show only time when time-format is passed in', async function () {
+        const dateString = 'Sat Jan 01 2022 00:00:00';
+        const expected = new Date(dateString).toLocaleString('en-US', { timeStyle: 'short' });
+        const element = await createFixture(html `
+      <pf-timestamp date="${dateString}" time-format="short"></pf-timestamp>
+    `);
+        expect(element.time).to.equal(expected);
+    });
+    it('should show custom formatting when customFormat is passed in', async function () {
+        const dateString = 'Sat Jan 01 2022 00:00:00';
+        const options = {
+            year: '2-digit',
+            month: 'short',
+            weekday: 'short',
+            day: 'numeric',
+            hour: 'numeric',
+        };
+        const expected = new Date(dateString).toLocaleString('en-US', options);
+        const element = await createFixture(html `
+      <pf-timestamp date="Sat Jan 01 2022 00:00:00" .customFormat=${options}></pf-timestamp>
+    `);
+        expect(element.time).to.equal(expected);
+    });
+    it('should show a custom suffix when display-suffix is passed in', async function () {
+        const dateString = 'Sat Jan 01 2022 00:00:00';
+        const suffix = 'US Eastern';
+        const expected = `${new Date(dateString).toLocaleString('en-US')} ${suffix}`;
+        const element = await createFixture(html `
+      <pf-timestamp date="${dateString}" display-suffix="${suffix}"></pf-timestamp>
+    `);
+        expect(element.time).to.equal(expected);
+    });
+    it('should show a 12 hour time', async function () {
+        const dateString = 'Sat Jan 01 2022 13:00:00';
+        const expected = new Date(dateString).toLocaleString('en-US');
+        const element = await createFixture(html `
+      <pf-timestamp date="${dateString}"></pf-timestamp>
+    `);
+        expect(element.time).to.equal(expected);
+    });
+    it('should show a 24 hour time when hour-12 is set to false', async function () {
+        const dateString = 'Sat Jan 01 2022 13:00:00';
+        const expected = new Date(dateString).toLocaleString('en-US', { hour12: false });
+        const element = await createFixture(html `
+      <pf-timestamp date="${dateString}" hour-12="false"></pf-timestamp>
+    `);
+        expect(element.time).to.equal(expected);
+    });
+    it('should show with locale passed in', async function () {
+        const date = new Date(2022, 1, 1).toString();
+        const expected = new Date(date).toLocaleString('en-GB');
+        const element = await createFixture(html `
+      <pf-timestamp date="${date}" locale="en-GB"></pf-timestamp>
+    `);
+        expect(element.time).to.equal(expected);
+    });
+    it('should show a 12 hour time by default for US locale', async function () {
+        const date = new Date(2022, 1, 1, 13, 0).toString();
+        const expected = new Date(date).toLocaleString('en-US');
+        const element = await createFixture(html `
+      <pf-timestamp date="${date}" locale="en-US"></pf-timestamp>
+    `);
+        expect(element.time).to.equal(expected);
+    });
+    it('should show a 24 hour time for US locale when hour-12 is false', async function () {
+        const date = new Date(2022, 1, 1, 13, 0).toString();
+        const expected = new Date(date).toLocaleString('en-US', { hour12: false });
+        const element = await createFixture(html `
+      <pf-timestamp date="${date}" locale="en-US" hour-12="false"></pf-timestamp>
+    `);
+        expect(element.time).to.equal(expected);
+    });
+    it('should show a 12 hour time for a 24 hour locale when hour-12 is passed', async function () {
+        const date = new Date(2022, 1, 1, 13, 0).toString();
+        const expected = new Date(date).toLocaleString('en-GB', { hour12: true });
+        const element = await createFixture(html `
+      <pf-timestamp date="${date}" locale="en-GB" hour-12></pf-timestamp>
+    `);
+        expect(element.time).to.equal(expected);
+    });
+    it('should show relative time of the moment', async function () {
+        const date = new Date();
+        const element = await createFixture(html `
+      <pf-timestamp date="${date.toString()}" relative></pf-timestamp>
+    `);
+        expect(element.time).to.match(/just now/);
+    });
+    it('should show relative time in the past', async function () {
+        const date = new Date(2015, 7, 9, 14, 57, 0);
+        const element = await createFixture(html `
+      <pf-timestamp date="${date.toString()}" relative></pf-timestamp>
+    `);
+        expect(element.time).to.match(/\d+ years ago/);
+    });
+    it('should show relative time in the future', async function () {
+        const date = new Date(2099, 7, 9, 14, 57, 0);
+        const element = await createFixture(html `
+      <pf-timestamp date="${date.toString()}" relative></pf-timestamp>
+    `);
+        expect(element.time).to.match(/in \d+ years/);
+    });
+});
+//# sourceMappingURL=pf-timestamp.spec.js.map

package/pf-timestamp/test/pf-timestamp.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-timestamp.spec.js","sourceRoot":"","sources":["pf-timestamp.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, html } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { PfTimestamp } from '@patternfly/elements/pf-timestamp/pf-timestamp.js';\n\ndescribe('<pf-timestamp>', function() {\n  it('imperatively instantiates', function() {\n    expect(document.createElement('pf-timestamp')).to.be.an.instanceof(PfTimestamp);\n  });\n\n  it('should upgrade', async function() {\n    const element = await createFixture<PfTimestamp>(html`<pf-timestamp></pf-timestamp>`);\n    expect(element, 'the <pf-timestamp> should be an instance of PfTimestamp')\n        .to.be.an.instanceof(customElements.get('pf-timestamp'))\n        .and\n        .to.be.an.instanceof(PfTimestamp);\n  });\n\n  it('should show the current date by default with default formatting', async function() {\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp></pf-timestamp>\n    `);\n\n    const expected = new Date().toLocaleString();\n\n    expect(element.time).to.equal(expected);\n  });\n\n  it('should set the correct ISO date on the datetime attribute in the time element', async function() {\n    const date = new Date('Sat Jan 01 2022 00:00:00');\n    const dateString = date.toString();\n    const expected = date.toISOString();\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp date=\"${dateString}\"></pf-timestamp>\n    `);\n\n    expect(element.isoString).to.equal(expected);\n  });\n\n  it('should show a passed in date with default formatting', async function() {\n    const dateString = 'Sat Jan 01 2022 00:00:00';\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp date=\"${dateString}\"></pf-timestamp>\n    `);\n\n    expect(element.time).to.equal(new Date(dateString).toLocaleString());\n  });\n\n  it('should show custom formatting when date-format and time-format are passed in', async function() {\n    const dateString = 'Sat Jan 01 2022 00:00:00';\n    const expected = new Date(dateString).toLocaleString('en-US', { dateStyle: 'full', timeStyle: 'short' });\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp date=\"${dateString}\" date-format=\"full\" time-format=\"short\"></pf-timestamp>\n    `);\n\n    expect(element.time).to.equal(expected);\n  });\n\n  it('should show only a date when date-format is passed in', async function() {\n    const dateString = 'Sat Jan 01 2022 00:00:00';\n    const expected = new Date(dateString).toLocaleString('en-US', { dateStyle: 'full' });\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp date=\"${dateString}\" date-format=\"full\"></pf-timestamp>\n    `);\n\n    expect(element.time).to.equal(expected);\n  });\n\n  it('should show only time when time-format is passed in', async function() {\n    const dateString = 'Sat Jan 01 2022 00:00:00';\n    const expected = new Date(dateString).toLocaleString('en-US', { timeStyle: 'short' });\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp date=\"${dateString}\" time-format=\"short\"></pf-timestamp>\n    `);\n\n    expect(element.time).to.equal(expected);\n  });\n\n  it('should show custom formatting when customFormat is passed in', async function() {\n    const dateString = 'Sat Jan 01 2022 00:00:00';\n    const options: Intl.DateTimeFormatOptions = {\n      year: '2-digit',\n      month: 'short',\n      weekday: 'short',\n      day: 'numeric',\n      hour: 'numeric',\n    };\n    const expected = new Date(dateString).toLocaleString('en-US', options);\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp date=\"Sat Jan 01 2022 00:00:00\" .customFormat=${options}></pf-timestamp>\n    `);\n    expect(element.time).to.equal(expected);\n  });\n\n  it('should show a custom suffix when display-suffix is passed in', async function() {\n    const dateString = 'Sat Jan 01 2022 00:00:00';\n    const suffix = 'US Eastern';\n    const expected = `${new Date(dateString).toLocaleString('en-US')} ${suffix}`;\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp date=\"${dateString}\" display-suffix=\"${suffix}\"></pf-timestamp>\n    `);\n\n    expect(element.time).to.equal(expected);\n  });\n\n  it('should show a 12 hour time', async function() {\n    const dateString = 'Sat Jan 01 2022 13:00:00';\n    const expected = new Date(dateString).toLocaleString('en-US');\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp date=\"${dateString}\"></pf-timestamp>\n    `);\n\n    expect(element.time).to.equal(expected);\n  });\n\n  it('should show a 24 hour time when hour-12 is set to false', async function() {\n    const dateString = 'Sat Jan 01 2022 13:00:00';\n    const expected = new Date(dateString).toLocaleString('en-US', { hour12: false });\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp date=\"${dateString}\" hour-12=\"false\"></pf-timestamp>\n    `);\n\n    expect(element.time).to.equal(expected);\n  });\n\n  it('should show with locale passed in', async function() {\n    const date = new Date(2022, 1, 1).toString();\n    const expected = new Date(date).toLocaleString('en-GB');\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp date=\"${date}\" locale=\"en-GB\"></pf-timestamp>\n    `);\n\n    expect(element.time).to.equal(expected);\n  });\n\n  it('should show a 12 hour time by default for US locale', async function() {\n    const date = new Date(2022, 1, 1, 13, 0).toString();\n    const expected = new Date(date).toLocaleString('en-US');\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp date=\"${date}\" locale=\"en-US\"></pf-timestamp>\n    `);\n\n    expect(element.time).to.equal(expected);\n  });\n\n  it('should show a 24 hour time for US locale when hour-12 is false', async function() {\n    const date = new Date(2022, 1, 1, 13, 0).toString();\n    const expected = new Date(date).toLocaleString('en-US', { hour12: false });\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp date=\"${date}\" locale=\"en-US\" hour-12=\"false\"></pf-timestamp>\n    `);\n\n    expect(element.time).to.equal(expected);\n  });\n\n  it('should show a 12 hour time for a 24 hour locale when hour-12 is passed', async function() {\n    const date = new Date(2022, 1, 1, 13, 0).toString();\n    const expected = new Date(date).toLocaleString('en-GB', { hour12: true });\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp date=\"${date}\" locale=\"en-GB\" hour-12></pf-timestamp>\n    `);\n\n    expect(element.time).to.equal(expected);\n  });\n\n  it('should show relative time of the moment', async function() {\n    const date = new Date();\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp date=\"${date.toString()}\" relative></pf-timestamp>\n    `);\n\n    expect(element.time).to.match(/just now/);\n  });\n\n  it('should show relative time in the past', async function() {\n    const date = new Date(2015, 7, 9, 14, 57, 0);\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp date=\"${date.toString()}\" relative></pf-timestamp>\n    `);\n\n    expect(element.time).to.match(/\\d+ years ago/);\n  });\n\n  it('should show relative time in the future', async function() {\n    const date = new Date(2099, 7, 9, 14, 57, 0);\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp date=\"${date.toString()}\" relative></pf-timestamp>\n    `);\n\n    expect(element.time).to.match(/in \\d+ years/);\n  });\n});\n"]}

package/pf-tooltip/BaseTooltip.d.ts

@@ -12,5 +12,5 @@ export declare abstract class BaseTooltip extends LitElement {
     connectedCallback(): void;
     show(): Promise<void>;
     hide(): Promise<void>;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }

package/pf-tooltip/pf-tooltip.d.ts

@@ -4,9 +4,7 @@ import { type Placement } from '@patternfly/pfe-core/controllers/floating-dom-co
 /**
  * A **tooltip** is in-app messaging used to identify elements on a page with short,
  * clarifying text.
- *
  * @summary Toggle the visibility of helpful or contextual information.
- *
  * @slot
  *       This slot wraps around the element that should be used to invoke the tooltip content to display.
  *       Typically this would be an icon, button, or other small sized element.
@@ -14,7 +12,6 @@ import { type Placement } from '@patternfly/pfe-core/controllers/floating-dom-co
  *       This slot renders the content that will be displayed inside of the tooltip.
  *       Typically this would include a string of text without any additional elements.
  *       This element is wrapped with a div inside of the component to give it the stylings and background colors.
- *
  * @cssprop     {<color>} --pf-c-tooltip__content--BackgroundColor
  *              Sets the background color for the tooltip content.
  *              {@default `#1b1d21`}
@@ -111,7 +108,7 @@ export declare class PfTooltip extends LitElement {
      * them to the new trigger element.
      */
     willUpdate(changed: PropertyValues<this>): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     show(): Promise<void>;
     hide(): Promise<void>;
 }

package/pf-tooltip/pf-tooltip.js

@@ -15,9 +15,7 @@ const ExitEvents = ['focusout', 'blur', 'mouseleave'];
 /**
  * A **tooltip** is in-app messaging used to identify elements on a page with short,
  * clarifying text.
- *
  * @summary Toggle the visibility of helpful or contextual information.
- *
  * @slot
  *       This slot wraps around the element that should be used to invoke the tooltip content to display.
  *       Typically this would be an icon, button, or other small sized element.
@@ -25,7 +23,6 @@ const ExitEvents = ['focusout', 'blur', 'mouseleave'];
  *       This slot renders the content that will be displayed inside of the tooltip.
  *       Typically this would include a string of text without any additional elements.
  *       This element is wrapped with a div inside of the component to give it the stylings and background colors.
- *
  * @cssprop     {<color>} --pf-c-tooltip__content--BackgroundColor
  *              Sets the background color for the tooltip content.
  *              {@default `#1b1d21`}
@@ -114,7 +111,8 @@ let PfTooltip = class PfTooltip extends LitElement {
                 if (__classPrivateFieldGet(this, _PfTooltip_referenceTrigger, "f")) {
                     return __classPrivateFieldGet(this, _PfTooltip_referenceTrigger, "f");
                 }
-                else if (__classPrivateFieldGet(this, _PfTooltip_instances, "a", _PfTooltip_invoker_get) instanceof HTMLSlotElement && __classPrivateFieldGet(this, _PfTooltip_instances, "a", _PfTooltip_invoker_get).assignedElements().length > 0) {
+                else if (__classPrivateFieldGet(this, _PfTooltip_instances, "a", _PfTooltip_invoker_get) instanceof HTMLSlotElement
+                    && __classPrivateFieldGet(this, _PfTooltip_instances, "a", _PfTooltip_invoker_get).assignedElements().length > 0) {
                     return __classPrivateFieldGet(this, _PfTooltip_instances, "a", _PfTooltip_invoker_get).assignedElements().at(0);
                 }
                 else {
@@ -139,8 +137,8 @@ let PfTooltip = class PfTooltip extends LitElement {
     }
     render() {
         const { alignment, anchor, open, styles } = __classPrivateFieldGet(this, _PfTooltip_float, "f");
-        const blockInvoker = __classPrivateFieldGet(this, _PfTooltip_instances, "a", _PfTooltip_invoker_get)?.assignedElements().length === 0 &&
-            __classPrivateFieldGet(this, _PfTooltip_instances, "a", _PfTooltip_invoker_get)?.assignedNodes().length > 0;
+        const blockInvoker = __classPrivateFieldGet(this, _PfTooltip_instances, "a", _PfTooltip_invoker_get)?.assignedElements().length === 0
+            && __classPrivateFieldGet(this, _PfTooltip_instances, "a", _PfTooltip_invoker_get)?.assignedNodes().length > 0;
         const display = blockInvoker ? 'block' : 'contents';
         return html `
       <div id="container"
@@ -188,7 +186,8 @@ _PfTooltip_invokerChanged = function _PfTooltip_invokerChanged() {
     this.requestUpdate();
 };
 _PfTooltip_getReferenceTrigger = function _PfTooltip_getReferenceTrigger() {
-    return this.getRootNode().getElementById(this.trigger?.normalize() ?? '');
+    return this.getRootNode()
+        .getElementById(this.trigger?.normalize() ?? '');
 };
 _PfTooltip_updateTrigger = function _PfTooltip_updateTrigger() {
     const oldReferenceTrigger = __classPrivateFieldGet(this, _PfTooltip_referenceTrigger, "f");