@patternfly/elements 4.1.0 → 4.3.0

package/pf-helper-text/pf-helper-text.js

@@ -0,0 +1,107 @@
+var _PfHelperText_slots;
+import { __classPrivateFieldGet, __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
+import '@patternfly/elements/pf-icon/pf-icon.js';
+import { css } from "lit";
+const styles = css `:host {
+  display: flex;
+  align-items: center;
+  gap: var(--pf-c-helper-text--Gap, 0.25rem);
+  font-size: var(--pf-c-helper-text--FontSize, 0.875rem);
+  color: var(--pf-c-helper-text__item-text--Color, #151515);
+  line-height: 1.4;
+}
+
+/* Color variants */
+:host([variant='indeterminate']) {
+  color: var(--pf-c-helper-text__item-text--m-indeterminate--Color, #6a6e73);
+}
+
+:host([variant='warning']) {
+  color: var(--pf-c-helper-text__item-text--m-warning--Color, #795600);
+}
+
+:host([variant='success']) {
+  color: var(--pf-c-helper-text__item-text--m-success--Color, #1e4f18);
+}
+
+:host([variant='error']) {
+  color: var(--pf-c-helper-text__item-text--m-error--Color, #a30000);
+}
+
+::slotted(ul) {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+pf-icon {
+  fill: currentColor;
+}
+`;
+/** Map of status to default icons (Font Awesome solid set). */
+const StatusIconMap = {
+    success: 'check-circle',
+    warning: 'exclamation-triangle',
+    error: 'exclamation-circle',
+    indeterminate: 'info-circle',
+};
+let PfHelperText = class PfHelperText extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the helper text status and its corresponding color and icon.
+         */
+        this.variant = 'default';
+        _PfHelperText_slots.set(this, new SlotController(this, 'icon', null));
+    }
+    /**
+     * Determine the effective icon to display.
+     */
+    get _resolvedIcon() {
+        if (this.icon) {
+            return this.icon;
+        }
+        if (this.variant !== 'default') {
+            return StatusIconMap[this.variant];
+        }
+        return undefined;
+    }
+    render() {
+        const iconName = this._resolvedIcon;
+        const showIcon = !!this.icon || __classPrivateFieldGet(this, _PfHelperText_slots, "f").hasSlotted('icon');
+        return html `
+      <span id="icon" ?hidden="${!showIcon}">
+        <slot name="icon">
+          <pf-icon icon="${iconName}"
+                   set="${ifDefined(this.iconSet)}"
+                   role="presentation"></pf-icon>
+        </slot>
+      </span>
+      <span id="text" aria-live="polite">
+        <slot></slot>
+      </span>
+    `;
+    }
+};
+_PfHelperText_slots = new WeakMap();
+PfHelperText.styles = [styles];
+PfHelperText.version = "4.3.0";
+__decorate([
+    property({ reflect: true })
+], PfHelperText.prototype, "variant", void 0);
+__decorate([
+    property()
+], PfHelperText.prototype, "icon", void 0);
+__decorate([
+    property({ attribute: 'icon-set' })
+], PfHelperText.prototype, "iconSet", void 0);
+PfHelperText = __decorate([
+    customElement('pf-helper-text')
+], PfHelperText);
+export { PfHelperText };
+//# sourceMappingURL=pf-helper-text.js.map

package/pf-helper-text/pf-helper-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-helper-text.js","sourceRoot":"","sources":["pf-helper-text.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;AAErF,OAAO,yCAAyC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIjD,+DAA+D;AAC/D,MAAM,aAAa,GAAG;IACpB,OAAO,EAAE,cAAc;IACvB,OAAO,EAAE,sBAAsB;IAC/B,KAAK,EAAE,oBAAoB;IAC3B,aAAa,EAAE,aAAa;CAC7B,CAAC;AAeK,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAGL;;WAEG;QAC0B,YAAO,GAKhB,SAAS,CAAC;QAa9B,8BAAS,IAAI,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAC;;IAEhD;;OAEG;IACH,IAAY,aAAa;QACvB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,IAAI,CAAC,IAAI,CAAC;QACnB,CAAC;QACD,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YAC/B,OAAO,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACrC,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IAES,MAAM;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC;QACpC,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,uBAAA,IAAI,2BAAO,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QAE/D,OAAO,IAAI,CAAA;iCACkB,CAAC,QAAQ;;2BAEf,QAAQ;0BACT,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;;;;;;;KAO5C,CAAC;IACJ,CAAC;;;AAtDsB,mBAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AAK7B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAKE;AAMlB;IAAX,QAAQ,EAAE;0CAAe;AAKW;IAApC,QAAQ,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;6CAAkB;AAtB3C,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nimport styles from './pf-helper-text.css';\n\n/** Map of status to default icons (Font Awesome solid set). */\nconst StatusIconMap = {\n  success: 'check-circle',\n  warning: 'exclamation-triangle',\n  error: 'exclamation-circle',\n  indeterminate: 'info-circle',\n};\n\n/**\n * Displays contextual feedback for form fields with optional icon and status color.\n *\n * @slot icon - Optional custom icon to override the default icon.\n * @slot - Default slot for the helper text content.\n *\n * @fires icon-load - Fired when the icon successfully loads.\n * @fires icon-error - Fired if loading the icon fails.\n *\n * @csspart icon - The container for the icon.\n * @csspart text - The container for the text.\n */\n@customElement('pf-helper-text')\nexport class PfHelperText extends LitElement {\n  public static readonly styles: CSSStyleSheet[] = [styles];\n\n  /**\n   * Defines the helper text status and its corresponding color and icon.\n   */\n  @property({ reflect: true }) variant:\n  | 'default'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'indeterminate' = 'default';\n\n  /**\n   * Custom icon name to override the default icon.\n   * Requires `<pf-icon>` to be imported.\n   */\n  @property() icon?: string;\n\n  /**\n   * Icon set for custom icons (e.g., 'fas', 'patternfly').\n   */\n  @property({ attribute: 'icon-set' }) iconSet?: string;\n\n  #slots = new SlotController(this, 'icon', null);\n\n  /**\n   * Determine the effective icon to display.\n   */\n  private get _resolvedIcon(): string | undefined {\n    if (this.icon) {\n      return this.icon;\n    }\n    if (this.variant !== 'default') {\n      return StatusIconMap[this.variant];\n    }\n    return undefined;\n  }\n\n  protected render(): TemplateResult<1> {\n    const iconName = this._resolvedIcon;\n    const showIcon = !!this.icon || this.#slots.hasSlotted('icon');\n\n    return html`\n      <span id=\"icon\" ?hidden=\"${!showIcon}\">\n        <slot name=\"icon\">\n          <pf-icon icon=\"${iconName}\"\n                   set=\"${ifDefined(this.iconSet)}\"\n                   role=\"presentation\"></pf-icon>\n        </slot>\n      </span>\n      <span id=\"text\" aria-live=\"polite\">\n        <slot></slot>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-helper-text': PfHelperText;\n  }\n}\n"]}

package/pf-helper-text/test/pf-helper-text.e2e.d.ts

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

package/pf-helper-text/test/pf-helper-text.e2e.js

@@ -0,0 +1,23 @@
+import { test } from '@playwright/test';
+import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
+const tagName = 'pf-helper-text';
+test.describe(tagName, () => {
+    test('snapshot', async ({ page }) => {
+        const componentPage = new PfeDemoPage(page, tagName);
+        await componentPage.navigate();
+        await componentPage.snapshot();
+    });
+    test('ssr', async ({ browser }) => {
+        const fixture = new SSRPage({
+            tagName,
+            browser,
+            demoDir: new URL('../demo/', import.meta.url),
+            importSpecifiers: [
+                `@patternfly/elements/${tagName}/${tagName}.js`,
+            ],
+        });
+        await fixture.snapshots();
+    });
+});
+//# sourceMappingURL=pf-helper-text.e2e.js.map

package/pf-helper-text/test/pf-helper-text.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-helper-text.e2e.js","sourceRoot":"","sources":["pf-helper-text.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AACnF,OAAO,EAAE,OAAO,EAAE,MAAM,kDAAkD,CAAC;AAE3E,MAAM,OAAO,GAAG,gBAAgB,CAAC;AAEjC,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;IAEH,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;QAChC,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC;YAC1B,OAAO;YACP,OAAO;YACP,OAAO,EAAE,IAAI,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;YAC7C,gBAAgB,EAAE;gBAChB,wBAAwB,OAAO,IAAI,OAAO,KAAK;aAChD;SACF,CAAC,CAAC;QACH,MAAM,OAAO,CAAC,SAAS,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\nimport { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';\n\nconst tagName = 'pf-helper-text';\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  test('ssr', async ({ browser }) => {\n    const fixture = new SSRPage({\n      tagName,\n      browser,\n      demoDir: new URL('../demo/', import.meta.url),\n      importSpecifiers: [\n        `@patternfly/elements/${tagName}/${tagName}.js`,\n      ],\n    });\n    await fixture.snapshots();\n  });\n});\n"]}

package/pf-helper-text/test/pf-helper-text.spec.d.ts

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

package/pf-helper-text/test/pf-helper-text.spec.js

@@ -0,0 +1,57 @@
+import { expect, html } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { PfHelperText } from '@patternfly/elements/pf-helper-text/pf-helper-text.js';
+describe('<pf-helper-text>', function () {
+    describe('simply instantiating', function () {
+        let element;
+        it('imperatively instantiates', function () {
+            expect(document.createElement('pf-helper-text')).to.be.an.instanceof(PfHelperText);
+        });
+        it('should upgrade', async function () {
+            element = await createFixture(html `<pf-helper-text></pf-helper-text>`);
+            const klass = customElements.get('pf-helper-text');
+            expect(element)
+                .to.be.an.instanceOf(klass)
+                .and
+                .to.be.an.instanceOf(PfHelperText);
+        });
+    });
+    describe('variant property', function () {
+        it('should default to "default" variant', async function () {
+            const element = await createFixture(html `<pf-helper-text></pf-helper-text>`);
+            expect(element.variant).to.equal('default');
+        });
+        it('should reflect variant attribute', async function () {
+            const element = await createFixture(html `<pf-helper-text variant="success"></pf-helper-text>`);
+            expect(element.variant).to.equal('success');
+            expect(element.getAttribute('variant')).to.equal('success');
+        });
+    });
+    describe('icon display', function () {
+        it('should show icon when icon property is set', async function () {
+            const element = await createFixture(html `<pf-helper-text icon="check-circle">Success</pf-helper-text>`);
+            await element.updateComplete;
+            const iconContainer = element.shadowRoot?.querySelector('#icon');
+            expect(iconContainer?.hasAttribute('hidden')).to.be.false;
+        });
+        it('should hide icon when no icon or slotted icon is present', async function () {
+            const element = await createFixture(html `<pf-helper-text variant="default">Text</pf-helper-text>`);
+            await element.updateComplete;
+            const iconContainer = element.shadowRoot?.querySelector('#icon');
+            expect(iconContainer?.hasAttribute('hidden')).to.be.true;
+        });
+    });
+    describe('text content', function () {
+        it('should render text content in default slot', async function () {
+            const element = await createFixture(html `<pf-helper-text>Helper text content</pf-helper-text>`);
+            expect(element.textContent?.trim()).to.equal('Helper text content');
+        });
+        it('should have aria-live on text container', async function () {
+            const element = await createFixture(html `<pf-helper-text>Text</pf-helper-text>`);
+            await element.updateComplete;
+            const textContainer = element.shadowRoot?.querySelector('#text');
+            expect(textContainer?.getAttribute('aria-live')).to.equal('polite');
+        });
+    });
+});
+//# sourceMappingURL=pf-helper-text.spec.js.map

package/pf-helper-text/test/pf-helper-text.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-helper-text.spec.js","sourceRoot":"","sources":["pf-helper-text.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,uDAAuD,CAAC;AAErF,QAAQ,CAAC,kBAAkB,EAAE;IAC3B,QAAQ,CAAC,sBAAsB,EAAE;QAC/B,IAAI,OAAqB,CAAC;QAC1B,EAAE,CAAC,2BAA2B,EAAE;YAC9B,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;QACrF,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,gBAAgB,EAAE,KAAK;YACxB,OAAO,GAAG,MAAM,aAAa,CAAe,IAAI,CAAA,mCAAmC,CAAC,CAAC;YACrF,MAAM,KAAK,GAAG,cAAc,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;YACnD,MAAM,CAAC,OAAO,CAAC;iBACV,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC;iBAC1B,GAAG;iBACH,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;QACzC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,kBAAkB,EAAE;QAC3B,EAAE,CAAC,qCAAqC,EAAE,KAAK;YAC7C,MAAM,OAAO,GAAG,MAAM,aAAa,CAAe,IAAI,CAAA,mCAAmC,CAAC,CAAC;YAC3F,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAC9C,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK;YAC1C,MAAM,OAAO,GAAG,MAAM,aAAa,CAAe,IAAI,CAAA,qDAAqD,CAAC,CAAC;YAC7G,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;YAC5C,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAC9D,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,cAAc,EAAE;QACvB,EAAE,CAAC,4CAA4C,EAAE,KAAK;YACpD,MAAM,OAAO,GAAG,MAAM,aAAa,CAAe,IAAI,CAAA,8DAA8D,CAAC,CAAC;YACtH,MAAM,OAAO,CAAC,cAAc,CAAC;YAC7B,MAAM,aAAa,GAAG,OAAO,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;YACjE,MAAM,CAAC,aAAa,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QAC5D,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,0DAA0D,EAAE,KAAK;YAClE,MAAM,OAAO,GAAG,MAAM,aAAa,CAAe,IAAI,CAAA,yDAAyD,CAAC,CAAC;YACjH,MAAM,OAAO,CAAC,cAAc,CAAC;YAC7B,MAAM,aAAa,GAAG,OAAO,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;YACjE,MAAM,CAAC,aAAa,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QAC3D,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,cAAc,EAAE;QACvB,EAAE,CAAC,4CAA4C,EAAE,KAAK;YACpD,MAAM,OAAO,GAAG,MAAM,aAAa,CAAe,IAAI,CAAA,sDAAsD,CAAC,CAAC;YAC9G,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC;QACtE,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,yCAAyC,EAAE,KAAK;YACjD,MAAM,OAAO,GAAG,MAAM,aAAa,CAAe,IAAI,CAAA,uCAAuC,CAAC,CAAC;YAC/F,MAAM,OAAO,CAAC,cAAc,CAAC;YAC7B,MAAM,aAAa,GAAG,OAAO,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;YACjE,MAAM,CAAC,aAAa,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACtE,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect, html } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { PfHelperText } from '@patternfly/elements/pf-helper-text/pf-helper-text.js';\n\ndescribe('<pf-helper-text>', function() {\n  describe('simply instantiating', function() {\n    let element: PfHelperText;\n    it('imperatively instantiates', function() {\n      expect(document.createElement('pf-helper-text')).to.be.an.instanceof(PfHelperText);\n    });\n\n    it('should upgrade', async function() {\n      element = await createFixture<PfHelperText>(html`<pf-helper-text></pf-helper-text>`);\n      const klass = customElements.get('pf-helper-text');\n      expect(element)\n          .to.be.an.instanceOf(klass)\n          .and\n          .to.be.an.instanceOf(PfHelperText);\n    });\n  });\n\n  describe('variant property', function() {\n    it('should default to \"default\" variant', async function() {\n      const element = await createFixture<PfHelperText>(html`<pf-helper-text></pf-helper-text>`);\n      expect(element.variant).to.equal('default');\n    });\n\n    it('should reflect variant attribute', async function() {\n      const element = await createFixture<PfHelperText>(html`<pf-helper-text variant=\"success\"></pf-helper-text>`);\n      expect(element.variant).to.equal('success');\n      expect(element.getAttribute('variant')).to.equal('success');\n    });\n  });\n\n  describe('icon display', function() {\n    it('should show icon when icon property is set', async function() {\n      const element = await createFixture<PfHelperText>(html`<pf-helper-text icon=\"check-circle\">Success</pf-helper-text>`);\n      await element.updateComplete;\n      const iconContainer = element.shadowRoot?.querySelector('#icon');\n      expect(iconContainer?.hasAttribute('hidden')).to.be.false;\n    });\n\n    it('should hide icon when no icon or slotted icon is present', async function() {\n      const element = await createFixture<PfHelperText>(html`<pf-helper-text variant=\"default\">Text</pf-helper-text>`);\n      await element.updateComplete;\n      const iconContainer = element.shadowRoot?.querySelector('#icon');\n      expect(iconContainer?.hasAttribute('hidden')).to.be.true;\n    });\n  });\n\n  describe('text content', function() {\n    it('should render text content in default slot', async function() {\n      const element = await createFixture<PfHelperText>(html`<pf-helper-text>Helper text content</pf-helper-text>`);\n      expect(element.textContent?.trim()).to.equal('Helper text content');\n    });\n\n    it('should have aria-live on text container', async function() {\n      const element = await createFixture<PfHelperText>(html`<pf-helper-text>Text</pf-helper-text>`);\n      await element.updateComplete;\n      const textContainer = element.shadowRoot?.querySelector('#text');\n      expect(textContainer?.getAttribute('aria-live')).to.equal('polite');\n    });\n  });\n});\n"]}

package/pf-hint/pf-hint.css

@@ -0,0 +1,120 @@
+:host {
+  display: block;
+
+  /* Container */
+  --pf-c-hint--GridRowGap: var(--pf-global--spacer--md, 1rem);
+  --pf-c-hint--PaddingTop: var(--pf-global--spacer--lg, 1.5rem);
+  --pf-c-hint--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);
+  --pf-c-hint--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);
+  --pf-c-hint--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
+  --pf-c-hint--BackgroundColor: var(--pf-global--palette--blue-50, #e7f1fa);
+  --pf-c-hint--BorderColor: var(--pf-global--palette--blue-100, #bee1f4);
+  --pf-c-hint--BorderWidth: 1px;
+  --pf-c-hint--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
+  --pf-c-hint--BoxShadow: var(--pf-global--BoxShadow--sm, 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06));
+
+  /* Title */
+  --pf-c-hint__title--FontSize: 1.125rem;
+  --pf-c-hint__title--FontWeight: var(--pf-global--FontWeight--semi-bold, 700);
+  --pf-c-hint__title--Color: var(--pf-global--Color--100, #151515);
+  --pf-c-hint__title--LineHeight: var(--pf-global--LineHeight--md, 1.5);
+
+  /* Body */
+  --pf-c-hint__body--FontSize: 1rem;
+  --pf-c-hint__body--Color: var(--pf-global--Color--100, #151515);
+  --pf-c-hint__body--LineHeight: var(--pf-global--LineHeight--md, 1.5);
+
+  /* Footer */
+  --pf-c-hint__footer--MarginTop: 0;
+  --pf-c-hint__footer--child--MarginRight: 1rem;
+
+  /* Actions */
+  --pf-c-hint__actions--Top: var(--pf-global--spacer--lg, 1.5rem);
+  --pf-c-hint__actions--Right: var(--pf-global--spacer--lg, 1.5rem);
+  --pf-c-hint__actions--MarginLeft: 3rem;
+  --pf-c-hint__actions--c-dropdown--MarginTop: calc(0.375rem * -1);
+}
+
+#container {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: var(--pf-c-hint--GridRowGap);
+  padding:
+    var(--pf-c-hint--PaddingTop)
+    var(--pf-c-hint--PaddingRight)
+    var(--pf-c-hint--PaddingBottom)
+    var(--pf-c-hint--PaddingLeft);
+  background-color: var(--pf-c-hint--BackgroundColor);
+  border: var(--pf-c-hint--BorderWidth) solid var(--pf-c-hint--BorderColor);
+  border-radius: var(--pf-c-hint--BorderRadius);
+  box-shadow: var(--pf-c-hint--BoxShadow);
+  overflow: visible;
+}
+
+#container > * {
+  grid-column: 1;
+}
+
+#actions {
+  grid-column: 2;
+  grid-row: 1 / -1;
+  align-self: start;
+  position: relative;
+  z-index: 1000;
+}
+
+#actions ::slotted(pf-dropdown) {
+  margin-top: var(--pf-c-hint__actions--c-dropdown--MarginTop);
+  --pf-c-dropdown__menu--MinWidth: auto;
+  --pf-c-dropdown__menu--Left: auto;
+  --pf-c-dropdown__menu--Right: 0;
+}
+
+#title {
+  font-size: var(--pf-c-hint__title--FontSize);
+  font-weight: var(--pf-c-hint__title--FontWeight);
+  color: var(--pf-c-hint__title--Color);
+  line-height: var(--pf-c-hint__title--LineHeight);
+}
+
+#body {
+  font-size: var(--pf-c-hint__body--FontSize);
+  color: var(--pf-c-hint__body--Color);
+  line-height: var(--pf-c-hint__body--LineHeight);
+}
+
+#footer {
+  margin-top: var(--pf-c-hint__footer--MarginTop);
+  font-size: var(--pf-c-hint__body--FontSize);
+  line-height: var(--pf-c-hint__body--LineHeight);
+}
+
+#footer ::slotted(*) {
+  margin-right: var(--pf-c-hint__footer--child--MarginRight);
+}
+
+#footer ::slotted(*:last-child) {
+  margin-right: 0;
+}
+
+/* Hidden elements */
+[hidden] {
+  display: none !important;
+}
+
+/* Link styling within hint */
+::slotted(a) {
+  color: var(--pf-global--link--Color, #06c);
+  text-decoration: none;
+}
+
+::slotted(a:hover) {
+  color: var(--pf-global--link--Color--hover, #004080);
+  text-decoration: underline;
+}
+
+/* Button styling in footer */
+::slotted(pf-button) {
+  --pf-c-button--m-link--Color: var(--pf-global--link--Color, #06c);
+}

package/pf-hint/pf-hint.d.ts

@@ -0,0 +1,19 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * A **hint** is in-app messaging that provides a one-step reminder, explanation,
+ * or call to action for a page or modal. Hints provide information about an interaction
+ * or prerequisite step that might not be immediately obvious to the user.
+ *
+ * @summary Provides inline contextual help or information to users
+ * @alias Hint
+ */
+export declare class PfHint extends LitElement {
+    #private;
+    static readonly styles: CSSStyleSheet[];
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pf-hint': PfHint;
+    }
+}

package/pf-hint/pf-hint.js

@@ -0,0 +1,180 @@
+var _PfHint_slots;
+import { __classPrivateFieldGet, __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
+import { css } from "lit";
+const styles = css `:host {
+  display: block;
+
+  /* Container */
+  --pf-c-hint--GridRowGap: var(--pf-global--spacer--md, 1rem);
+  --pf-c-hint--PaddingTop: var(--pf-global--spacer--lg, 1.5rem);
+  --pf-c-hint--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);
+  --pf-c-hint--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);
+  --pf-c-hint--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
+  --pf-c-hint--BackgroundColor: var(--pf-global--palette--blue-50, #e7f1fa);
+  --pf-c-hint--BorderColor: var(--pf-global--palette--blue-100, #bee1f4);
+  --pf-c-hint--BorderWidth: 1px;
+  --pf-c-hint--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
+  --pf-c-hint--BoxShadow: var(--pf-global--BoxShadow--sm, 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06));
+
+  /* Title */
+  --pf-c-hint__title--FontSize: 1.125rem;
+  --pf-c-hint__title--FontWeight: var(--pf-global--FontWeight--semi-bold, 700);
+  --pf-c-hint__title--Color: var(--pf-global--Color--100, #151515);
+  --pf-c-hint__title--LineHeight: var(--pf-global--LineHeight--md, 1.5);
+
+  /* Body */
+  --pf-c-hint__body--FontSize: 1rem;
+  --pf-c-hint__body--Color: var(--pf-global--Color--100, #151515);
+  --pf-c-hint__body--LineHeight: var(--pf-global--LineHeight--md, 1.5);
+
+  /* Footer */
+  --pf-c-hint__footer--MarginTop: 0;
+  --pf-c-hint__footer--child--MarginRight: 1rem;
+
+  /* Actions */
+  --pf-c-hint__actions--Top: var(--pf-global--spacer--lg, 1.5rem);
+  --pf-c-hint__actions--Right: var(--pf-global--spacer--lg, 1.5rem);
+  --pf-c-hint__actions--MarginLeft: 3rem;
+  --pf-c-hint__actions--c-dropdown--MarginTop: calc(0.375rem * -1);
+}
+
+#container {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: var(--pf-c-hint--GridRowGap);
+  padding:
+    var(--pf-c-hint--PaddingTop)
+    var(--pf-c-hint--PaddingRight)
+    var(--pf-c-hint--PaddingBottom)
+    var(--pf-c-hint--PaddingLeft);
+  background-color: var(--pf-c-hint--BackgroundColor);
+  border: var(--pf-c-hint--BorderWidth) solid var(--pf-c-hint--BorderColor);
+  border-radius: var(--pf-c-hint--BorderRadius);
+  box-shadow: var(--pf-c-hint--BoxShadow);
+  overflow: visible;
+}
+
+#container > * {
+  grid-column: 1;
+}
+
+#actions {
+  grid-column: 2;
+  grid-row: 1 / -1;
+  align-self: start;
+  position: relative;
+  z-index: 1000;
+}
+
+#actions ::slotted(pf-dropdown) {
+  margin-top: var(--pf-c-hint__actions--c-dropdown--MarginTop);
+  --pf-c-dropdown__menu--MinWidth: auto;
+  --pf-c-dropdown__menu--Left: auto;
+  --pf-c-dropdown__menu--Right: 0;
+}
+
+#title {
+  font-size: var(--pf-c-hint__title--FontSize);
+  font-weight: var(--pf-c-hint__title--FontWeight);
+  color: var(--pf-c-hint__title--Color);
+  line-height: var(--pf-c-hint__title--LineHeight);
+}
+
+#body {
+  font-size: var(--pf-c-hint__body--FontSize);
+  color: var(--pf-c-hint__body--Color);
+  line-height: var(--pf-c-hint__body--LineHeight);
+}
+
+#footer {
+  margin-top: var(--pf-c-hint__footer--MarginTop);
+  font-size: var(--pf-c-hint__body--FontSize);
+  line-height: var(--pf-c-hint__body--LineHeight);
+}
+
+#footer ::slotted(*) {
+  margin-right: var(--pf-c-hint__footer--child--MarginRight);
+}
+
+#footer ::slotted(*:last-child) {
+  margin-right: 0;
+}
+
+/* Hidden elements */
+[hidden] {
+  display: none !important;
+}
+
+/* Link styling within hint */
+::slotted(a) {
+  color: var(--pf-global--link--Color, #06c);
+  text-decoration: none;
+}
+
+::slotted(a:hover) {
+  color: var(--pf-global--link--Color--hover, #004080);
+  text-decoration: underline;
+}
+
+/* Button styling in footer */
+::slotted(pf-button) {
+  --pf-c-button--m-link--Color: var(--pf-global--link--Color, #06c);
+}
+`;
+let PfHint = class PfHint extends LitElement {
+    constructor() {
+        super(...arguments);
+        _PfHint_slots.set(this, new SlotController(this, 'title', null, 'footer', 'actions'));
+    }
+    render() {
+        const hasActions = !__classPrivateFieldGet(this, _PfHint_slots, "f").isEmpty('actions');
+        return html `
+      <div id="container"
+           part="container"
+           class=${classMap({
+            'has-actions': hasActions,
+        })}>
+        <div id="actions"
+             part="actions"
+             class="pf-c-hint__actions"
+             ?hidden=${__classPrivateFieldGet(this, _PfHint_slots, "f").isEmpty('actions')}>
+          <!-- summary: Actions menu (e.g., kebab dropdown) -->
+          <slot name="actions"></slot>
+        </div>
+        <div id="title"
+             part="title"
+             class="pf-c-hint__title"
+             ?hidden=${__classPrivateFieldGet(this, _PfHint_slots, "f").isEmpty('title')}>
+          <!-- summary: Optional title for the hint -->
+          <slot name="title"></slot>
+        </div>
+        <div id="body"
+             part="body"
+             class="pf-c-hint__body">
+          <!-- summary: Body content of the hint. Main informational text. -->
+          <slot></slot>
+        </div>
+        <div id="footer"
+             part="footer"
+             class="pf-c-hint__footer"
+             ?hidden=${__classPrivateFieldGet(this, _PfHint_slots, "f").isEmpty('footer')}>
+          <!-- summary: Optional footer content, typically containing action links or buttons -->
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+_PfHint_slots = new WeakMap();
+PfHint.styles = [styles];
+PfHint.version = "4.3.0";
+PfHint = __decorate([
+    customElement('pf-hint')
+], PfHint);
+export { PfHint };
+//# sourceMappingURL=pf-hint.js.map

package/pf-hint/pf-hint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-hint.js","sourceRoot":"","sources":["pf-hint.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAa9E,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAGL,wBAAS,IAAI,cAAc,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,CAAC,EAAC;;IAEtE,MAAM;QACJ,MAAM,UAAU,GAAG,CAAC,uBAAA,IAAI,qBAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;QAEnD,OAAO,IAAI,CAAA;;;mBAGI,QAAQ,CAAC;YACf,aAAa,EAAE,UAAU;SAC1B,CAAC;;;;uBAIU,uBAAA,IAAI,qBAAO,CAAC,OAAO,CAAC,SAAS,CAAC;;;;;;;uBAO9B,uBAAA,IAAI,qBAAO,CAAC,OAAO,CAAC,OAAO,CAAC;;;;;;;;;;;;;uBAa5B,uBAAA,IAAI,qBAAO,CAAC,OAAO,CAAC,QAAQ,CAAC;;;;;KAK/C,CAAC;IACJ,CAAC;;;AA1Ce,aAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AADxC,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport styles from './pf-hint.css';\n\n/**\n * A **hint** is in-app messaging that provides a one-step reminder, explanation,\n * or call to action for a page or modal. Hints provide information about an interaction\n * or prerequisite step that might not be immediately obvious to the user.\n *\n * @summary Provides inline contextual help or information to users\n * @alias Hint\n */\n@customElement('pf-hint')\nexport class PfHint extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  #slots = new SlotController(this, 'title', null, 'footer', 'actions');\n\n  render(): TemplateResult<1> {\n    const hasActions = !this.#slots.isEmpty('actions');\n\n    return html`\n      <div id=\"container\"\n           part=\"container\"\n           class=${classMap({\n             'has-actions': hasActions,\n           })}>\n        <div id=\"actions\"\n             part=\"actions\"\n             class=\"pf-c-hint__actions\"\n             ?hidden=${this.#slots.isEmpty('actions')}>\n          <!-- summary: Actions menu (e.g., kebab dropdown) -->\n          <slot name=\"actions\"></slot>\n        </div>\n        <div id=\"title\"\n             part=\"title\"\n             class=\"pf-c-hint__title\"\n             ?hidden=${this.#slots.isEmpty('title')}>\n          <!-- summary: Optional title for the hint -->\n          <slot name=\"title\"></slot>\n        </div>\n        <div id=\"body\"\n             part=\"body\"\n             class=\"pf-c-hint__body\">\n          <!-- summary: Body content of the hint. Main informational text. -->\n          <slot></slot>\n        </div>\n        <div id=\"footer\"\n             part=\"footer\"\n             class=\"pf-c-hint__footer\"\n             ?hidden=${this.#slots.isEmpty('footer')}>\n          <!-- summary: Optional footer content, typically containing action links or buttons -->\n          <slot name=\"footer\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-hint': PfHint;\n  }\n}\n"]}

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

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

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

@@ -0,0 +1,23 @@
+import { test } from '@playwright/test';
+import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
+const tagName = 'pf-hint';
+test.describe(tagName, () => {
+    test('snapshot', async ({ page }) => {
+        const componentPage = new PfeDemoPage(page, tagName);
+        await componentPage.navigate();
+        await componentPage.snapshot();
+    });
+    test('ssr', async ({ browser }) => {
+        const fixture = new SSRPage({
+            tagName,
+            browser,
+            demoDir: new URL('../demo/', import.meta.url),
+            importSpecifiers: [
+                `@patternfly/elements/${tagName}/${tagName}.js`,
+            ],
+        });
+        await fixture.snapshots();
+    });
+});
+//# sourceMappingURL=pf-hint.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-hint.e2e.js","sourceRoot":"","sources":["pf-hint.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AACnF,OAAO,EAAE,OAAO,EAAE,MAAM,kDAAkD,CAAC;AAE3E,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;IAEH,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;QAChC,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC;YAC1B,OAAO;YACP,OAAO;YACP,OAAO,EAAE,IAAI,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;YAC7C,gBAAgB,EAAE;gBAChB,wBAAwB,OAAO,IAAI,OAAO,KAAK;aAChD;SACF,CAAC,CAAC;QACH,MAAM,OAAO,CAAC,SAAS,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\nimport { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';\n\nconst tagName = 'pf-hint';\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  test('ssr', async ({ browser }) => {\n    const fixture = new SSRPage({\n      tagName,\n      browser,\n      demoDir: new URL('../demo/', import.meta.url),\n      importSpecifiers: [\n        `@patternfly/elements/${tagName}/${tagName}.js`,\n      ],\n    });\n    await fixture.snapshots();\n  });\n});\n"]}

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

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