@patternfly/elements 3.0.1 → 4.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"pf-jump-links.js","sourceRoot":"","sources":["pf-jump-links.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { ScrollSpyController } from '@patternfly/pfe-core/controllers/scroll-spy-controller.js';\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\n\nimport { PfJumpLinksItem } from './pf-jump-links-item.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nimport style from './pf-jump-links.css';\n\n/**\n * **Jump links** allow users to navigate to sections within a page.\n * @fires toggle - when the `expanded` disclosure widget is toggled\n * @slot - Place pf-jump-links-items here\n * @cssprop --pf-c-jump-links__list--Display\n * @cssprop --pf-c-jump-links__list--FlexDirection\n * @cssprop --pf-c-jump-links__list--PaddingTop -- padding around the list of links\n * @cssprop --pf-c-jump-links__list--PaddingRight\n * @cssprop --pf-c-jump-links__list--PaddingBottom\n * @cssprop --pf-c-jump-links__list--PaddingLeft\n * @cssprop --pf-c-jump-links__list--Visibility\n * @cssprop --pf-c-jump-links__list--before--BorderColor\n * @cssprop --pf-c-jump-links__list--before--BorderTopWidth\n * @cssprop --pf-c-jump-links__list--before--BorderRightWidth\n * @cssprop --pf-c-jump-links__list--before--BorderBottomWidth\n * @cssprop --pf-c-jump-links__list--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links__toggle--MarginBottom--base\n * @cssprop --pf-c-jump-links__toggle--MarginTop -- padding around the expandable jump links disclosure widget.\n * @cssprop --pf-c-jump-links__toggle--MarginBottom\n * @cssprop --pf-c-jump-links__toggle--MarginBottom--base\n * @cssprop --pf-c-jump-links__toggle--MarginLeft\n * @cssprop --pf-c-jump-links__toggle-text--Color\n * @cssprop --pf-c-button--PaddingTop -- padding around the expandable jump links disclosure widget.\n * @cssprop --pf-c-button--PaddingRight\n * @cssprop --pf-c-button--PaddingBottom\n * @cssprop --pf-c-button--PaddingLeft\n * @cssprop --pf-c-jump-links__toggle-icon--Rotate\n * @cssprop --pf-c-jump-links__toggle-icon--Transition\n * @cssprop --pf-c-jump-links__toggle-text--MarginLeft\n * @cssprop --pf-c-jump-links--m-expanded__toggle--MarginBottom\n * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Rotate\n * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Color\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingTop\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingRight\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingBottom\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingLeft\n * @cssprop --pf-c-jump-links--m-vertical__list--before--BorderTopWidth\n * @cssprop --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth\n * @cssprop --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links--m-vertical__list--FlexDirection\n */\n@customElement('pf-jump-links')\nexport class PfJumpLinks extends LitElement {\n  static readonly styles = [style];\n\n  /** Whether the element features a disclosure widget around the nav items */\n  @property({ reflect: true, type: Boolean }) expandable = false;\n\n  /** Whether the expandable element's disclosure widget is expanded */\n  @property({ reflect: true, type: Boolean }) expanded = false;\n\n  /** Whether the layout of children is vertical or horizontal. */\n  @property({ reflect: true, type: Boolean }) vertical = false;\n\n  /** Whether to center children. */\n  @property({ reflect: true, type: Boolean }) centered = false;\n\n  /** Offset to add to the scroll position, potentially for a masthead which content scrolls under. */\n  @property({ type: Number }) offset = 0;\n\n  /** Label to add to nav element. */\n  @property() label?: string;\n\n  #kids = this.querySelectorAll<LitElement>(':is(pf-jump-links-item, pf-jump-links-list)');\n\n  #tabindex?: RovingTabindexController<HTMLAnchorElement>;\n\n  #spy = new ScrollSpyController(this, {\n    rootMargin: `${this.offset}px 0px 0px 0px`,\n    tagNames: ['pf-jump-links-item'],\n  });\n\n  protected override async getUpdateComplete(): Promise<boolean> {\n    const here = await super.getUpdateComplete();\n    const ps = await Promise.all(Array.from(this.#kids, x => x.updateComplete));\n    return here && ps.every(x => !!x);\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('slotchange', this.#updateItems);\n    this.addEventListener('select', this.#onSelect);\n  }\n\n  override firstUpdated() {\n    this.#tabindex = new RovingTabindexController<HTMLAnchorElement>(this, {\n      getItems: () => {\n        const items = Array.from(this.#kids)\n            .flatMap(i => [\n              ...i.shadowRoot?.querySelectorAll('a') ?? [],\n              ...i.querySelectorAll('a') ?? [],\n            ]);\n        return items;\n      },\n    });\n    const active = this.querySelector<PfJumpLinksItem>('pf-jump-links-item[active]');\n    if (active) {\n      this.#setActiveItem(active);\n    }\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('offset')) {\n      this.#spy.rootMargin = `${this.offset ?? 0}px 0px 0px 0px`;\n    }\n  }\n\n  render() {\n    return html`\n      <nav id=\"container\">${this.expandable ? html`\n        <details ?open=\"${this.expanded}\" @toggle=\"${this.#onToggle}\">\n          <summary>\n            <pf-icon icon=\"chevron-right\"></pf-icon>\n            <span id=\"label\">${this.label}</span>\n          </summary>\n          <div role=\"listbox\" aria-labelledby=\"label\">\n            <slot></slot>\n          </div>\n        </details>` : html`\n        <span id=\"label\">${this.label}</span>\n        <div role=\"listbox\" aria-labelledby=\"label\">\n          <slot></slot>\n        </div>`}\n      </nav>\n    `;\n  }\n\n  #updateItems() {\n    this.#tabindex?.updateItems();\n  }\n\n  #onSelect(event: Event) {\n    if (event.target instanceof PfJumpLinksItem) {\n      this.#setActiveItem(event.target);\n    }\n  }\n\n  #setActiveItem(item: PfJumpLinksItem) {\n    this.#tabindex?.setActiveItem(item.shadowRoot?.querySelector('a') ?? undefined);\n    this.#spy.setActive(item);\n  }\n\n  #onToggle(event: Event) {\n    if (event.target instanceof HTMLDetailsElement) {\n      this.expanded = event.target.open;\n    }\n    this.dispatchEvent(new Event('toggle'));\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-jump-links': PfJumpLinks;\n  }\n}\n"]}
+{"version":3,"file":"pf-jump-links.js","sourceRoot":"","sources":["pf-jump-links.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { ScrollSpyController } from '@patternfly/pfe-core/controllers/scroll-spy-controller.js';\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\n\nimport { PfJumpLinksItem } from './pf-jump-links-item.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nimport style from './pf-jump-links.css';\n\n/**\n * **Jump links** allow users to navigate to sections within a page.\n * @fires toggle - when the `expanded` disclosure widget is toggled\n * @slot - Place pf-jump-links-items here\n * @cssprop --pf-c-jump-links__list--Display\n * @cssprop --pf-c-jump-links__list--FlexDirection\n * @cssprop --pf-c-jump-links__list--PaddingTop -- padding around the list of links\n * @cssprop --pf-c-jump-links__list--PaddingRight\n * @cssprop --pf-c-jump-links__list--PaddingBottom\n * @cssprop --pf-c-jump-links__list--PaddingLeft\n * @cssprop --pf-c-jump-links__list--Visibility\n * @cssprop --pf-c-jump-links__list--before--BorderColor\n * @cssprop --pf-c-jump-links__list--before--BorderTopWidth\n * @cssprop --pf-c-jump-links__list--before--BorderRightWidth\n * @cssprop --pf-c-jump-links__list--before--BorderBottomWidth\n * @cssprop --pf-c-jump-links__list--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links__toggle--MarginBottom--base\n * @cssprop --pf-c-jump-links__toggle--MarginTop -- padding around the expandable jump links disclosure widget.\n * @cssprop --pf-c-jump-links__toggle--MarginBottom\n * @cssprop --pf-c-jump-links__toggle--MarginBottom--base\n * @cssprop --pf-c-jump-links__toggle--MarginLeft\n * @cssprop --pf-c-jump-links__toggle-text--Color\n * @cssprop --pf-c-button--PaddingTop -- padding around the expandable jump links disclosure widget.\n * @cssprop --pf-c-button--PaddingRight\n * @cssprop --pf-c-button--PaddingBottom\n * @cssprop --pf-c-button--PaddingLeft\n * @cssprop --pf-c-jump-links__toggle-icon--Rotate\n * @cssprop --pf-c-jump-links__toggle-icon--Transition\n * @cssprop --pf-c-jump-links__toggle-text--MarginLeft\n * @cssprop --pf-c-jump-links--m-expanded__toggle--MarginBottom\n * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Rotate\n * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Color\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingTop\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingRight\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingBottom\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingLeft\n * @cssprop --pf-c-jump-links--m-vertical__list--before--BorderTopWidth\n * @cssprop --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth\n * @cssprop --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links--m-vertical__list--FlexDirection\n */\n@customElement('pf-jump-links')\nexport class PfJumpLinks extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [style];\n\n  /** Whether the element features a disclosure widget around the nav items */\n  @property({ reflect: true, type: Boolean }) expandable = false;\n\n  /** Whether the expandable element's disclosure widget is expanded */\n  @property({ reflect: true, type: Boolean }) expanded = false;\n\n  /** Whether the layout of children is vertical or horizontal. */\n  @property({ reflect: true, type: Boolean }) vertical = false;\n\n  /** Whether to center children. */\n  @property({ reflect: true, type: Boolean }) centered = false;\n\n  /** Offset to add to the scroll position, potentially for a masthead which content scrolls under. */\n  @property({ type: Number }) offset = 0;\n\n  /** Label to add to nav element. */\n  @property() label?: string;\n\n  #kids = this.querySelectorAll?.<LitElement>(':is(pf-jump-links-item, pf-jump-links-list)');\n\n  get #items() {\n    return Array.from(this.#kids ?? [])\n        .flatMap(i => [\n          ...i.shadowRoot?.querySelectorAll?.('a') ?? [],\n          ...i.querySelectorAll?.('a') ?? [],\n        ]);\n  }\n\n  #tabindex = RovingTabindexController.of<HTMLAnchorElement>(this, {\n    getItems: () => this.#items,\n  });\n\n  #spy = new ScrollSpyController(this, {\n    rootMargin: `${this.offset}px 0px 0px 0px`,\n    tagNames: ['pf-jump-links-item'],\n  });\n\n  protected override async getUpdateComplete(): Promise<boolean> {\n    const here = await super.getUpdateComplete();\n    const ps = await Promise.all(Array.from(this.#kids, x => x.updateComplete));\n    return here && ps.every(x => !!x);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('slotchange', this.#onSlotChange);\n    this.addEventListener('select', this.#onSelect);\n  }\n\n  override firstUpdated(): void {\n    const active = this.querySelector?.<PfJumpLinksItem>('pf-jump-links-item[active]');\n    if (active) {\n      this.#setActiveItem(active);\n    }\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('offset')) {\n      this.#spy.rootMargin = `${this.offset ?? 0}px 0px 0px 0px`;\n    }\n  }\n\n  render(): TemplateResult<1> {\n    return html`\n      <nav id=\"container\">${this.expandable ? html`\n        <details ?open=\"${this.expanded}\" @toggle=\"${this.#onToggle}\">\n          <summary>\n            <pf-icon icon=\"chevron-right\"></pf-icon>\n            <span id=\"label\">${this.label}</span>\n          </summary>\n          <div role=\"listbox\" aria-labelledby=\"label\">\n            <slot></slot>\n          </div>\n        </details>` : html`\n        <span id=\"label\">${this.label}</span>\n        <div role=\"listbox\" aria-labelledby=\"label\">\n          <slot></slot>\n        </div>`}\n      </nav>\n    `;\n  }\n\n  #onSlotChange() {\n    this.#tabindex.items = this.#items;\n  }\n\n  #onSelect(event: Event) {\n    if (event.target instanceof PfJumpLinksItem) {\n      this.#setActiveItem(event.target);\n    }\n  }\n\n  #setActiveItem(item: PfJumpLinksItem) {\n    const itemLink = item.shadowRoot?.querySelector?.('a') ?? null;\n    if (itemLink) {\n      this.#tabindex.atFocusedItemIndex = this.#tabindex.items.indexOf(itemLink);\n      this.#spy.setActive(item);\n    }\n  }\n\n  #onToggle(event: Event) {\n    if (event.target instanceof HTMLDetailsElement) {\n      this.expanded = event.target.open;\n    }\n    this.dispatchEvent(new Event('toggle'));\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-jump-links': PfJumpLinks;\n  }\n}\n"]}

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

@@ -1,5 +1,6 @@
 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-jump-links';
 test.describe(tagName, () => {
     test('snapshot', async ({ page }) => {
@@ -7,5 +8,16 @@ test.describe(tagName, () => {
         await componentPage.navigate({ selector: 'pf-jump-links-nav' });
         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-jump-links.e2e.js.map

package/pf-jump-links/test/pf-jump-links.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-jump-links.e2e.js","sourceRoot":"","sources":["pf-jump-links.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,eAAe,CAAC;AAEhC,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,CAAC,EAAE,QAAQ,EAAE,mBAAmB,EAAE,CAAC,CAAC;QAChE,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-jump-links';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate({ selector: 'pf-jump-links-nav' });\n    await componentPage.snapshot();\n  });\n});\n"]}
+{"version":3,"file":"pf-jump-links.e2e.js","sourceRoot":"","sources":["pf-jump-links.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,eAAe,CAAC;AAEhC,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,CAAC,EAAE,QAAQ,EAAE,mBAAmB,EAAE,CAAC,CAAC;QAChE,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-jump-links';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate({ selector: 'pf-jump-links-nav' });\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-label/pf-label.css

@@ -1,27 +1,61 @@
-#pf-container {
-  display: contents;
+:host {
+  position: relative;
+  white-space: nowrap;
+  border: 0;
 }
 
+pf-icon, ::slotted(pf-icon) {
+  color: currentColor;
+}
+
+:host,
 #container {
-  --pf-global--icon--FontSize--sm: 14px;
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+}
 
+#container {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-width: 0;
   padding-top: var(--pf-c-label--PaddingTop, var(--pf-global--spacer--xs, 0.25rem));
   padding-left: var(--pf-c-label--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));
   padding-bottom: var(--pf-c-label--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem));
   padding-right: var(--pf-c-label--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));
-  font-size: var(--pf-c-label--FontSize, 0.875em);
+  font-size: var(--pf-c-label--FontSize, var(--pf-global--FontSize--sm, 0.875rem));
   color: var(--pf-c-label--Color, var(--pf-global--Color--100, #151515));
   background-color: var(--pf-c-label--BackgroundColor, var(--pf-global--palette--black-150, #f5f5f5));
   border-radius: var(--pf-c-label--BorderRadius, 30em);
   max-width: var(--pf-c-label__content--MaxWidth, 100%);
   color: var(--pf-c-label__content--Color, var(--pf-global--Color--100, #151515));
+
+  --pf-global--icon--FontSize--sm: 14px;
 }
 
 #container::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  content: "";
   border-radius: var(--pf-c-label--BorderRadius, 30em);
   border: var(--pf-c-label__content--before--BorderWidth, 1px) solid var(--pf-c-label__content--before--BorderColor, var(--pf-global--palette--black-300, #d2d2d2));
 }
 
+[part=icon] {
+  display: none;
+  pointer-events: none;
+}
+
+.hasIcon [part=icon] {
+  display: inline-flex;
+  width: 1em;
+}
+
 .compact {
   --pf-c-label--PaddingTop: var(--pf-c-label--m-compact--PaddingTop, 0);
   --pf-c-label--PaddingRight: var(--pf-c-label--m-compact--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));
@@ -30,7 +64,6 @@
   --pf-global--icon--FontSize--sm: 12px;
 }
 
-
 .blue {
   --pf-c-label__content--Color: var(--pf-c-label--m-blue__content--Color, var(--pf-global--info-color--200, #002952));
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor, var(--pf-global--palette--blue-50, #e7f1fa));

package/pf-label/pf-label.d.ts

@@ -1,90 +1,86 @@
-import { BaseLabel } from './BaseLabel.js';
+import { LitElement, type TemplateResult } from 'lit';
 import '@patternfly/elements/pf-button/pf-button.js';
-export type LabelVariant = ('filled' | 'outline');
-export type LabelColor = ('blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey' | 'gold');
+export declare class LabelCloseEvent extends Event {
+    constructor();
+}
 /**
  * The **label** component allows users to add specific element captions for user
  * clarity and convenience.
  * @summary Allows users to display meta data in a stylized form.
- * @fires close - when a removable label's close button is clicked
- * @cssprop {<length>} --pf-c-label--FontSize   {@default `0.875em`}
- * @cssprop {<length>} --pf-c-label--PaddingTop     {@default `0.25rem`}
- * @cssprop {<length>} --pf-c-label--PaddingRight   {@default `0.5rem`}
- * @cssprop {<length>} --pf-c-label--PaddingBottom  {@default `0.25rem`}
- * @cssprop {<length>} --pf-c-label--PaddingLeft    {@default `0.5rem`}
- * @cssprop {<color>} --pf-c-label--Color           {@default `#151515`}
- * @cssprop {<color>} --pf-c-label--BackgroundColor {@default `#f5f5f5`}
- * @cssprop {<length>} --pf-c-label--BorderRadius {@default `30em`}
- * @cssprop {<length>} --pf-c-label__content--MaxWidth            {@default `100%`}
- * @cssprop {<color>} --pf-c-label__content--Color                {@default `#151515`}
- * @cssprop {<length>} --pf-c-label__content--before--BorderWidth {@default `1px`}
- * @cssprop {<color>} --pf-c-label__content--before--BorderColor  {@default `#d2d2d2`}
- * @cssprop {<color>} --pf-c-label--m-outline__content--Color  {@default `#151515`}
- * @cssprop {<color>} --pf-c-label--m-outline--BackgroundColor {@default `#ffffff`}
- * @cssprop {<color>} --pf-c-label--m-blue__content--Color                {@default `#002952`}
- * @cssprop {<color>} --pf-c-label--m-blue--BackgroundColor               {@default `#e7f1fa`}
- * @cssprop {<color>} --pf-c-label--m-blue__content--before--BorderColor  {@default `#bee1f4`}
- * @cssprop {<color>} --pf-c-label--m-outline--m-blue__content--Color      {@default `#06c`}
- * @cssprop {<color>} --pf-c-label--m-cyan__content--Color                {@default `#3b1f00`}
- * @cssprop {<color>} --pf-c-label--m-cyan--BackgroundColor               {@default `#f2f9f9`}
- * @cssprop {<color>} --pf-c-label--m-cyan__content--before--BorderColor  {@default `#a2d9d9`}
- * @cssprop {<color>} --pf-c-label--m-outline--m-cyan__content--Color      {@default `#005f60`}
- * @cssprop {<color>} --pf-c-label--m-green__content--Color                {@default `#1e4f18`}
- * @cssprop {<color>} --pf-c-label--m-green--BackgroundColor               {@default `#f3faf2`}
- * @cssprop {<color>} --pf-c-label--m-green__content--before--BorderColor  {@default `#bde5b8`}
- * @cssprop {<color>} --pf-c-label--m-outline--m-green__content--Color     {@default `#3e8635`}
- * @cssprop {<color>} --pf-c-label--m-orange__content--Color                {@default `#003737`}
- * @cssprop {<color>} --pf-c-label--m-orange--BackgroundColor               {@default `#fff6ec`}
- * @cssprop {<color>} --pf-c-label--m-orange__content--before--BorderColor  {@default `#f4b678`}
- * @cssprop {<color>} --pf-c-label--m-outline--m-orange__content--Color     {@default `#8f4700`}
- * @cssprop {<color>} --pf-c-label--m-purple__content--Color                {@default `#1f0066`}
- * @cssprop {<color>} --pf-c-label--m-purple--BackgroundColor               {@default `#f2f0fc`}
- * @cssprop {<color>} --pf-c-label--m-purple__content--before--BorderColor  {@default `#cbc1ff`}
- * @cssprop {<color>} --pf-c-label--m-outline--m-purple__content--Color     {@default `#6753ac`}
- * @cssprop {<color>} --pf-c-label--m-red__content--Color                {@default `#7d1007`}
- * @cssprop {<color>} --pf-c-label--m-red--BackgroundColor               {@default `#faeae8`}
- * @cssprop {<color>} --pf-c-label--m-red__content--before--BorderColor  {@default `#c9190b`}
- * @cssprop {<color>} --pf-c-label--m-outline--m-red__content--Color     {@default `#c9190b`}
- * @cssprop {<color>} --pf-c-label--m-gold__content--Color                {@default `#3d2c00`}
- * @cssprop {<color>} --pf-c-label--m-gold--BackgroundColor               {@default `#fdf7e7`}
- * @cssprop {<color>} --pf-c-label--m-gold__content--before--BorderColor  {@default `#f9e0a2`}
- * @cssprop {<color>} --pf-c-label--m-outline--m-gold__content--Color     {@default `#795600`}
- * @cssprop {<color>} --pf-c-label--m-blue__icon--Color {@default `#06c`}
- * @cssprop {<color>} --pf-c-label--m-cyan__icon--Color {@default `#009596`}
- * @cssprop {<color>} --pf-c-label--m-green__icon--Color {@default `#3e8635`}
- * @cssprop {<color>} --pf-c-label--m-orange__icon--Color {@default `#ec7a08`}
- * @cssprop {<color>} --pf-c-label--m-red__icon--Color {@default `#c9190b`}
- * @cssprop {<color>} --pf-c-label--m-gold__icon--Color {@default `#f0ab00`}
+ * @fires {LabelCloseEvent} close - when a removable label's close button is clicked
+ * @cssprop {<length>} [--pf-c-label--FontSize=0.875em]
+ * @cssprop {<length>} [--pf-c-label--PaddingTop=0.25rem]
+ * @cssprop {<length>} [--pf-c-label--PaddingRight=0.5rem]
+ * @cssprop {<length>} [--pf-c-label--PaddingBottom=0.25rem]
+ * @cssprop {<length>} [--pf-c-label--PaddingLeft=0.5rem]
+ * @cssprop {<color>} [--pf-c-label--Color=#151515]
+ * @cssprop {<color>} [--pf-c-label--BackgroundColor=#f5f5f5]
+ * @cssprop {<length>} [--pf-c-label--BorderRadius=30em]
+ * @cssprop {<length>} [--pf-c-label__content--MaxWidth=100]
+ * @cssprop {<color>} [--pf-c-label__content--Color=#151515]
+ * @cssprop {<length>} [--pf-c-label__content--before--BorderWidth=1px]
+ * @cssprop {<color>} [--pf-c-label__content--before--BorderColor=#d2d2d2]
+ * @cssprop {<color>} [--pf-c-label--m-outline__content--Color=#151515]
+ * @cssprop {<color>} [--pf-c-label--m-outline--BackgroundColor=#ffffff]
+ * @cssprop {<color>} [--pf-c-label--m-blue__content--Color=#002952]
+ * @cssprop {<color>} [--pf-c-label--m-blue--BackgroundColor=#e7f1fa]
+ * @cssprop {<color>} [--pf-c-label--m-blue__content--before--BorderColor=#bee1f4]
+ * @cssprop {<color>} [--pf-c-label--m-outline--m-blue__content--Color=#06c]
+ * @cssprop {<color>} [--pf-c-label--m-cyan__content--Color=#3b1f00]
+ * @cssprop {<color>} [--pf-c-label--m-cyan--BackgroundColor=#f2f9f9]
+ * @cssprop {<color>} [--pf-c-label--m-cyan__content--before--BorderColor=#a2d9d9]
+ * @cssprop {<color>} [--pf-c-label--m-outline--m-cyan__content--Color=#005f60]
+ * @cssprop {<color>} [--pf-c-label--m-green__content--Color=#1e4f18]
+ * @cssprop {<color>} [--pf-c-label--m-green--BackgroundColor=#f3faf2]
+ * @cssprop {<color>} [--pf-c-label--m-green__content--before--BorderColor=#bde5b8]
+ * @cssprop {<color>} [--pf-c-label--m-outline--m-green__content--Color=#3e8635]
+ * @cssprop {<color>} [--pf-c-label--m-orange__content--Color=#003737]
+ * @cssprop {<color>} [--pf-c-label--m-orange--BackgroundColor=#fff6ec]
+ * @cssprop {<color>} [--pf-c-label--m-orange__content--before--BorderColor=#f4b678]
+ * @cssprop {<color>} [--pf-c-label--m-outline--m-orange__content--Color=#8f4700]
+ * @cssprop {<color>} [--pf-c-label--m-purple__content--Color=#1f0066]
+ * @cssprop {<color>} [--pf-c-label--m-purple--BackgroundColor=#f2f0fc]
+ * @cssprop {<color>} [--pf-c-label--m-purple__content--before--BorderColor=#cbc1ff]
+ * @cssprop {<color>} [--pf-c-label--m-outline--m-purple__content--Color=#6753ac]
+ * @cssprop {<color>} [--pf-c-label--m-red__content--Color=#7d1007]
+ * @cssprop {<color>} [--pf-c-label--m-red--BackgroundColor=#faeae8]
+ * @cssprop {<color>} [--pf-c-label--m-red__content--before--BorderColor=#c9190b]
+ * @cssprop {<color>} [--pf-c-label--m-outline--m-red__content--Color=#c9190b]
+ * @cssprop {<color>} [--pf-c-label--m-gold__content--Color=#3d2c00]
+ * @cssprop {<color>} [--pf-c-label--m-gold--BackgroundColor=#fdf7e7]
+ * @cssprop {<color>} [--pf-c-label--m-gold__content--before--BorderColor=#f9e0a2]
+ * @cssprop {<color>} [--pf-c-label--m-outline--m-gold__content--Color=#795600]
+ * @cssprop {<color>} [--pf-c-label--m-blue__icon--Color=#06c]
+ * @cssprop {<color>} [--pf-c-label--m-cyan__icon--Color=#009596]
+ * @cssprop {<color>} [--pf-c-label--m-green__icon--Color=#3e8635]
+ * @cssprop {<color>} [--pf-c-label--m-orange__icon--Color=#ec7a08]
+ * @cssprop {<color>} [--pf-c-label--m-red__icon--Color=#c9190b]
+ * @cssprop {<color>} [--pf-c-label--m-gold__icon--Color=#f0ab00]
  * @csspart icon - container for the label icon
  * @csspart close-button - container for removable labels' close button
  * @slot icon
  *       Contains the labels's icon, e.g. web-icon-alert-success.
  * @slot
  *       Must contain the text for the label.
- * @cssprop {<length>} --pf-c-label--m-compact--PaddingTop     {@default `0`}
- * @cssprop {<length>} --pf-c-label--m-compact--PaddingRight   {@default `0.5rem`}
- * @cssprop {<length>} --pf-c-label--m-compact--PaddingBottom  {@default `0`}
- * @cssprop {<length>} --pf-c-label--m-compact--PaddingLeft    {@default `0.5rem`}
+ * @cssprop {<length>} [--pf-c-label--m-compact--PaddingTop=0]
+ * @cssprop {<length>} [--pf-c-label--m-compact--PaddingRight=0.5rem]
+ * @cssprop {<length>} [--pf-c-label--m-compact--PaddingBottom=0]
+ * @cssprop {<length>} [--pf-c-label--m-compact--PaddingLeft=0.5rem]
  */
-export declare class PfLabel extends BaseLabel {
+export declare class PfLabel extends LitElement {
+    #private;
     static readonly styles: CSSStyleSheet[];
-    static readonly shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        slotAssignment?: SlotAssignmentMode | undefined;
-        customElements?: CustomElementRegistry | undefined;
-        registry?: CustomElementRegistry | undefined;
-    };
+    static readonly shadowRootOptions: ShadowRootInit;
     /**
      * Changes the style of the label.
      * - Filled: Colored background with colored border.
      * - Outline: White background with colored border.
      */
-    variant: LabelVariant;
+    variant: 'filled' | 'outline';
     /**
      * Changes the color of the label
      */
-    color: LabelColor;
+    color: 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey' | 'gold';
     /** Shorthand for the `icon` slot, the value is icon name */
     icon?: string;
     /** Flag indicating the label is compact */
@@ -95,10 +91,10 @@ export declare class PfLabel extends BaseLabel {
     removable: boolean;
     /** Text label for a removable label's close button */
     closeButtonLabel?: string;
-    render(): import("lit-html").TemplateResult<1>;
-    protected renderDefaultIcon(): import("lit-html").TemplateResult<1> | "";
-    protected renderSuffix(): import("lit-html").TemplateResult<1> | "";
+    render(): TemplateResult<1>;
 }
+export type LabelVariant = PfLabel['variant'];
+export type LabelColor = PfLabel['color'];
 declare global {
     interface HTMLElementTagNameMap {
         'pf-label': PfLabel;

package/pf-label/pf-label.js

@@ -1,80 +1,22 @@
-import { __decorate } from "tslib";
-import { html } from 'lit';
+var _PfLabel_instances, _PfLabel_slots, _PfLabel_onClickClose;
+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 { classMap } from 'lit/directives/class-map.js';
-import { ComposedEvent } from '@patternfly/pfe-core';
-import { BaseLabel } from './BaseLabel.js';
+import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 import '@patternfly/elements/pf-button/pf-button.js';
 import { css } from "lit";
-const styles = css `#pf-container {\n  display: contents;\n}\n\n#container {\n  --pf-global--icon--FontSize--sm: 14px;\n\n  padding-top: var(--pf-c-label--PaddingTop, var(--pf-global--spacer--xs, 0.25rem));\n  padding-left: var(--pf-c-label--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));\n  padding-bottom: var(--pf-c-label--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem));\n  padding-right: var(--pf-c-label--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));\n  font-size: var(--pf-c-label--FontSize, 0.875em);\n  color: var(--pf-c-label--Color, var(--pf-global--Color--100, #151515));\n  background-color: var(--pf-c-label--BackgroundColor, var(--pf-global--palette--black-150, #f5f5f5));\n  border-radius: var(--pf-c-label--BorderRadius, 30em);\n  max-width: var(--pf-c-label__content--MaxWidth, 100%);\n  color: var(--pf-c-label__content--Color, var(--pf-global--Color--100, #151515));\n}\n\n#container::before {\n  border-radius: var(--pf-c-label--BorderRadius, 30em);\n  border: var(--pf-c-label__content--before--BorderWidth, 1px) solid var(--pf-c-label__content--before--BorderColor, var(--pf-global--palette--black-300, #d2d2d2));\n}\n\n.compact {\n  --pf-c-label--PaddingTop: var(--pf-c-label--m-compact--PaddingTop, 0);\n  --pf-c-label--PaddingRight: var(--pf-c-label--m-compact--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));\n  --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom, 0);\n  --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));\n  --pf-global--icon--FontSize--sm: 12px;\n}\n\n\n.blue {\n  --pf-c-label__content--Color: var(--pf-c-label--m-blue__content--Color, var(--pf-global--info-color--200, #002952));\n  --pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor, var(--pf-global--palette--blue-50, #e7f1fa));\n  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor, var(--pf-global--palette--blue-100, #bee1f4));\n}\n\n.blue.outline {\n  --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-blue__content--Color, var(--pf-global--primary-color--100, #06c)));\n}\n\n.cyan {\n  --pf-c-label__content--Color: var(--pf-c-label--m-cyan__content--Color, var(--pf-global--default-color--300, #003737));\n  --pf-c-label--BackgroundColor: var(--pf-c-label--m-cyan--BackgroundColor, var(--pf-global--palette--cyan-50, #f2f9f9));\n  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor, var(--pf-global--palette--cyan-100, #a2d9d9));\n}\n\n.cyan.outline {\n  --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-cyan__content--Color, var(--pf-global--palette--cyan-400, #005f60)))\n}\n\n.green {\n  --pf-c-label__content--Color: var(--pf-c-label--m-green__content--Color,var(--pf-global--success-color--200, #1e4f18));\n  --pf-c-label--BackgroundColor: var(--pf-c-label--m-green--BackgroundColor, var(--pf-global--palette--green-50, #f3faf2));\n  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor, var(--pf-global--palette--green-100, #bde5b8));\n}\n\n.green.outline{\n  --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-green__content--Color, var(--pf-global--success-color--100, #3e8635)))\n}\n\n.orange {\n  --pf-c-label__content--Color: var(--pf-c-label--m-orange__content--Color, var(--pf-global--palette--orange-700, #3b1f00));\n  --pf-c-label--BackgroundColor: var(--pf-c-label--m-orange--BackgroundColor, var(--pf-global--palette--orange-50, #fff6ec));\n  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor, var(--pf-global--palette--orange-100, #f4b678));\n}\n\n.orange.outline {\n  --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-orange__content--Color, var(--pf-global--palette--orange-500, #8f4700)))\n}\n\n.purple {\n  --pf-c-label__content--Color: var(--pf-c-label--m-purple__content--Color, var(--pf-global--palette--purple-700, #1f0066));\n  --pf-c-label--BackgroundColor: var(--pf-c-label--m-purple--BackgroundColor, var(--pf-global--palette--purple-50, #f2f0fc));\n  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor, var(--pf-global--palette--purple-100, #cbc1ff));\n}\n\n.purple.outline {\n  --pf-c-label__content--Color: var(--pf-c-label--m-purple__content--Color, var(--pf-global--palette--purple-500, #6753ac));\n  --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-purple__content--Color, var(--pf-global--palette--purple-500, #6753ac)))\n}\n\n.red {\n  --pf-c-label__content--Color: var(--pf-c-label--m-red__content--Color, var(--pf-global--palette--red-300, #7d1007));\n  --pf-c-label--BackgroundColor: var(--pf-c-label--m-red--BackgroundColor, var(--pf-global--palette--red-50, #faeae8));\n  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor, var(--pf-global--palette--red-100, #c9190b));\n}\n\n.red.outline {\n  --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-red__content--Color, var(--pf-global--danger-color--100, #c9190b)))\n}\n\n.gold {\n  --pf-c-label__content--Color: var(--pf-c-label--m-gold__content--Color, var(--pf-global--palette--gold-700, #3d2c00));\n  --pf-c-label--BackgroundColor: var(--pf-c-label--m-gold--BackgroundColor, var(--pf-global--palette--gold-50, #fdf7e7));\n  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor, var(--pf-global--palette--gold-100, #f9e0a2));\n}\n\n.gold.outline {\n  --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-gold__content--Color, var(--pf-global--palette--gold-600, #795600)))\n}\n\n.outline {\n  --pf-c-label--BackgroundColor: var(--pf-c-label--m-outline--BackgroundColor, #ffffff);\n  --pf-c-label__content--before--BorderColor: var(--pf-global--palette--black-300, #d2d2d2);\n}\n\n.hasIcon [part=icon] {\n  left: var(--pf-c-label--PaddingLeft, var(--pf-global--spacer--md, 1rem));\n  margin-inline-end: var(--pf-c-label__icon--MarginRight, var(--pf-global--spacer--xs, 0.25rem));\n}\n\n.blue .hasIcon [part=icon] {\n  color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-blue__icon--Color, var(--pf-global--primary-color--100, #06c)));\n}\n\n.cyan .hasIcon [part=icon] {\n  color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-cyan__icon--Color, var(--pf-global--default-color--200, #009596)));\n}\n\n.green .hasIcon [part=icon] {\n  color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-green__icon--Color, var(--pf-global--success-color--100, #3e8635)));\n}\n\n.orange .hasIcon [part=icon] {\n  color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-orange__icon--Color, var(--pf-global--palette--orange-300, #ec7a08)));\n}\n\n.purple .hasIcon [part=icon] {\n  color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-purple__icon--Color, var(--pf-global--palette--purple-500, #6753ac)));\n}\n\n.red .hasIcon [part=icon] {\n  color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-red__icon--Color, var(--pf-global--danger-color--100, #c9190b)));\n}\n\n.gold .hasIcon [part=icon] {\n  color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-gold__icon--Color, var(--pf-global--palette--gold-400, #f0ab00)));\n}\n\npf-button {\n  --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize,\n    var(--pf-global--FontSize--xs, 0.75rem));\n  --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop,\n    var(--pf-global--spacer--xs, 0.25rem));\n  --pf-c-button--PaddingRight: var(--pf-c-label__c-button--PaddingRight,\n    var(--pf-global--spacer--sm, 0.5rem));\n  --pf-c-button--PaddingBottom: var(--pf-c-label__c-button--PaddingBottom,\n    var(--pf-global--spacer--xs, 0.25rem));\n  --pf-c-button--PaddingLeft: var(--pf-c-label__c-button--PaddingLeft,\n    var(--pf-global--spacer--sm, 0.5rem));\n    margin-top: var(--pf-c-label__c-button--MarginTop, -0.5rem);\n    margin-right: var(--pf-c-label__c-button--MarginRight, -0.5rem);\n    margin-bottom: var(--pf-c-label__c-button--MarginBottom, -0.5rem);\n    margin-left: var(--pf-c-label__c-button--MarginLeft, 0.25rem);\n}\n\nsvg {\n  vertical-align:-0.125em;\n  fill: currentColor;\n  height: 1em;\n  width: 1em;\n}\n`;
-/**
- * The **label** component allows users to add specific element captions for user
- * clarity and convenience.
- * @summary Allows users to display meta data in a stylized form.
- * @fires close - when a removable label's close button is clicked
- * @cssprop {<length>} --pf-c-label--FontSize   {@default `0.875em`}
- * @cssprop {<length>} --pf-c-label--PaddingTop     {@default `0.25rem`}
- * @cssprop {<length>} --pf-c-label--PaddingRight   {@default `0.5rem`}
- * @cssprop {<length>} --pf-c-label--PaddingBottom  {@default `0.25rem`}
- * @cssprop {<length>} --pf-c-label--PaddingLeft    {@default `0.5rem`}
- * @cssprop {<color>} --pf-c-label--Color           {@default `#151515`}
- * @cssprop {<color>} --pf-c-label--BackgroundColor {@default `#f5f5f5`}
- * @cssprop {<length>} --pf-c-label--BorderRadius {@default `30em`}
- * @cssprop {<length>} --pf-c-label__content--MaxWidth            {@default `100%`}
- * @cssprop {<color>} --pf-c-label__content--Color                {@default `#151515`}
- * @cssprop {<length>} --pf-c-label__content--before--BorderWidth {@default `1px`}
- * @cssprop {<color>} --pf-c-label__content--before--BorderColor  {@default `#d2d2d2`}
- * @cssprop {<color>} --pf-c-label--m-outline__content--Color  {@default `#151515`}
- * @cssprop {<color>} --pf-c-label--m-outline--BackgroundColor {@default `#ffffff`}
- * @cssprop {<color>} --pf-c-label--m-blue__content--Color                {@default `#002952`}
- * @cssprop {<color>} --pf-c-label--m-blue--BackgroundColor               {@default `#e7f1fa`}
- * @cssprop {<color>} --pf-c-label--m-blue__content--before--BorderColor  {@default `#bee1f4`}
- * @cssprop {<color>} --pf-c-label--m-outline--m-blue__content--Color      {@default `#06c`}
- * @cssprop {<color>} --pf-c-label--m-cyan__content--Color                {@default `#3b1f00`}
- * @cssprop {<color>} --pf-c-label--m-cyan--BackgroundColor               {@default `#f2f9f9`}
- * @cssprop {<color>} --pf-c-label--m-cyan__content--before--BorderColor  {@default `#a2d9d9`}
- * @cssprop {<color>} --pf-c-label--m-outline--m-cyan__content--Color      {@default `#005f60`}
- * @cssprop {<color>} --pf-c-label--m-green__content--Color                {@default `#1e4f18`}
- * @cssprop {<color>} --pf-c-label--m-green--BackgroundColor               {@default `#f3faf2`}
- * @cssprop {<color>} --pf-c-label--m-green__content--before--BorderColor  {@default `#bde5b8`}
- * @cssprop {<color>} --pf-c-label--m-outline--m-green__content--Color     {@default `#3e8635`}
- * @cssprop {<color>} --pf-c-label--m-orange__content--Color                {@default `#003737`}
- * @cssprop {<color>} --pf-c-label--m-orange--BackgroundColor               {@default `#fff6ec`}
- * @cssprop {<color>} --pf-c-label--m-orange__content--before--BorderColor  {@default `#f4b678`}
- * @cssprop {<color>} --pf-c-label--m-outline--m-orange__content--Color     {@default `#8f4700`}
- * @cssprop {<color>} --pf-c-label--m-purple__content--Color                {@default `#1f0066`}
- * @cssprop {<color>} --pf-c-label--m-purple--BackgroundColor               {@default `#f2f0fc`}
- * @cssprop {<color>} --pf-c-label--m-purple__content--before--BorderColor  {@default `#cbc1ff`}
- * @cssprop {<color>} --pf-c-label--m-outline--m-purple__content--Color     {@default `#6753ac`}
- * @cssprop {<color>} --pf-c-label--m-red__content--Color                {@default `#7d1007`}
- * @cssprop {<color>} --pf-c-label--m-red--BackgroundColor               {@default `#faeae8`}
- * @cssprop {<color>} --pf-c-label--m-red__content--before--BorderColor  {@default `#c9190b`}
- * @cssprop {<color>} --pf-c-label--m-outline--m-red__content--Color     {@default `#c9190b`}
- * @cssprop {<color>} --pf-c-label--m-gold__content--Color                {@default `#3d2c00`}
- * @cssprop {<color>} --pf-c-label--m-gold--BackgroundColor               {@default `#fdf7e7`}
- * @cssprop {<color>} --pf-c-label--m-gold__content--before--BorderColor  {@default `#f9e0a2`}
- * @cssprop {<color>} --pf-c-label--m-outline--m-gold__content--Color     {@default `#795600`}
- * @cssprop {<color>} --pf-c-label--m-blue__icon--Color {@default `#06c`}
- * @cssprop {<color>} --pf-c-label--m-cyan__icon--Color {@default `#009596`}
- * @cssprop {<color>} --pf-c-label--m-green__icon--Color {@default `#3e8635`}
- * @cssprop {<color>} --pf-c-label--m-orange__icon--Color {@default `#ec7a08`}
- * @cssprop {<color>} --pf-c-label--m-red__icon--Color {@default `#c9190b`}
- * @cssprop {<color>} --pf-c-label--m-gold__icon--Color {@default `#f0ab00`}
- * @csspart icon - container for the label icon
- * @csspart close-button - container for removable labels' close button
- * @slot icon
- *       Contains the labels's icon, e.g. web-icon-alert-success.
- * @slot
- *       Must contain the text for the label.
- * @cssprop {<length>} --pf-c-label--m-compact--PaddingTop     {@default `0`}
- * @cssprop {<length>} --pf-c-label--m-compact--PaddingRight   {@default `0.5rem`}
- * @cssprop {<length>} --pf-c-label--m-compact--PaddingBottom  {@default `0`}
- * @cssprop {<length>} --pf-c-label--m-compact--PaddingLeft    {@default `0.5rem`}
- */
-let PfLabel = class PfLabel extends BaseLabel {
+const styles = css `:host {\n  position: relative;\n  white-space: nowrap;\n  border: 0;\n}\n\npf-icon, ::slotted(pf-icon) {\n  color: currentColor;\n}\n\n:host,\n#container {\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n}\n\n#container {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  border-width: 0;\n  padding-top: var(--pf-c-label--PaddingTop, var(--pf-global--spacer--xs, 0.25rem));\n  padding-left: var(--pf-c-label--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));\n  padding-bottom: var(--pf-c-label--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem));\n  padding-right: var(--pf-c-label--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));\n  font-size: var(--pf-c-label--FontSize, var(--pf-global--FontSize--sm, 0.875rem));\n  color: var(--pf-c-label--Color, var(--pf-global--Color--100, #151515));\n  background-color: var(--pf-c-label--BackgroundColor, var(--pf-global--palette--black-150, #f5f5f5));\n  border-radius: var(--pf-c-label--BorderRadius, 30em);\n  max-width: var(--pf-c-label__content--MaxWidth, 100%);\n  color: var(--pf-c-label__content--Color, var(--pf-global--Color--100, #151515));\n\n  --pf-global--icon--FontSize--sm: 14px;\n}\n\n#container::before {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  pointer-events: none;\n  content: "";\n  border-radius: var(--pf-c-label--BorderRadius, 30em);\n  border: var(--pf-c-label__content--before--BorderWidth, 1px) solid var(--pf-c-label__content--before--BorderColor, var(--pf-global--palette--black-300, #d2d2d2));\n}\n\n[part=icon] {\n  display: none;\n  pointer-events: none;\n}\n\n.hasIcon [part=icon] {\n  display: inline-flex;\n  width: 1em;\n}\n\n.compact {\n  --pf-c-label--PaddingTop: var(--pf-c-label--m-compact--PaddingTop, 0);\n  --pf-c-label--PaddingRight: var(--pf-c-label--m-compact--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));\n  --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom, 0);\n  --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));\n  --pf-global--icon--FontSize--sm: 12px;\n}\n\n.blue {\n  --pf-c-label__content--Color: var(--pf-c-label--m-blue__content--Color, var(--pf-global--info-color--200, #002952));\n  --pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor, var(--pf-global--palette--blue-50, #e7f1fa));\n  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor, var(--pf-global--palette--blue-100, #bee1f4));\n}\n\n.blue.outline {\n  --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-blue__content--Color, var(--pf-global--primary-color--100, #06c)));\n}\n\n.cyan {\n  --pf-c-label__content--Color: var(--pf-c-label--m-cyan__content--Color, var(--pf-global--default-color--300, #003737));\n  --pf-c-label--BackgroundColor: var(--pf-c-label--m-cyan--BackgroundColor, var(--pf-global--palette--cyan-50, #f2f9f9));\n  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor, var(--pf-global--palette--cyan-100, #a2d9d9));\n}\n\n.cyan.outline {\n  --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-cyan__content--Color, var(--pf-global--palette--cyan-400, #005f60)))\n}\n\n.green {\n  --pf-c-label__content--Color: var(--pf-c-label--m-green__content--Color,var(--pf-global--success-color--200, #1e4f18));\n  --pf-c-label--BackgroundColor: var(--pf-c-label--m-green--BackgroundColor, var(--pf-global--palette--green-50, #f3faf2));\n  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor, var(--pf-global--palette--green-100, #bde5b8));\n}\n\n.green.outline{\n  --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-green__content--Color, var(--pf-global--success-color--100, #3e8635)))\n}\n\n.orange {\n  --pf-c-label__content--Color: var(--pf-c-label--m-orange__content--Color, var(--pf-global--palette--orange-700, #3b1f00));\n  --pf-c-label--BackgroundColor: var(--pf-c-label--m-orange--BackgroundColor, var(--pf-global--palette--orange-50, #fff6ec));\n  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor, var(--pf-global--palette--orange-100, #f4b678));\n}\n\n.orange.outline {\n  --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-orange__content--Color, var(--pf-global--palette--orange-500, #8f4700)))\n}\n\n.purple {\n  --pf-c-label__content--Color: var(--pf-c-label--m-purple__content--Color, var(--pf-global--palette--purple-700, #1f0066));\n  --pf-c-label--BackgroundColor: var(--pf-c-label--m-purple--BackgroundColor, var(--pf-global--palette--purple-50, #f2f0fc));\n  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor, var(--pf-global--palette--purple-100, #cbc1ff));\n}\n\n.purple.outline {\n  --pf-c-label__content--Color: var(--pf-c-label--m-purple__content--Color, var(--pf-global--palette--purple-500, #6753ac));\n  --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-purple__content--Color, var(--pf-global--palette--purple-500, #6753ac)))\n}\n\n.red {\n  --pf-c-label__content--Color: var(--pf-c-label--m-red__content--Color, var(--pf-global--palette--red-300, #7d1007));\n  --pf-c-label--BackgroundColor: var(--pf-c-label--m-red--BackgroundColor, var(--pf-global--palette--red-50, #faeae8));\n  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor, var(--pf-global--palette--red-100, #c9190b));\n}\n\n.red.outline {\n  --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-red__content--Color, var(--pf-global--danger-color--100, #c9190b)))\n}\n\n.gold {\n  --pf-c-label__content--Color: var(--pf-c-label--m-gold__content--Color, var(--pf-global--palette--gold-700, #3d2c00));\n  --pf-c-label--BackgroundColor: var(--pf-c-label--m-gold--BackgroundColor, var(--pf-global--palette--gold-50, #fdf7e7));\n  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor, var(--pf-global--palette--gold-100, #f9e0a2));\n}\n\n.gold.outline {\n  --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-gold__content--Color, var(--pf-global--palette--gold-600, #795600)))\n}\n\n.outline {\n  --pf-c-label--BackgroundColor: var(--pf-c-label--m-outline--BackgroundColor, #ffffff);\n  --pf-c-label__content--before--BorderColor: var(--pf-global--palette--black-300, #d2d2d2);\n}\n\n.hasIcon [part=icon] {\n  left: var(--pf-c-label--PaddingLeft, var(--pf-global--spacer--md, 1rem));\n  margin-inline-end: var(--pf-c-label__icon--MarginRight, var(--pf-global--spacer--xs, 0.25rem));\n}\n\n.blue .hasIcon [part=icon] {\n  color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-blue__icon--Color, var(--pf-global--primary-color--100, #06c)));\n}\n\n.cyan .hasIcon [part=icon] {\n  color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-cyan__icon--Color, var(--pf-global--default-color--200, #009596)));\n}\n\n.green .hasIcon [part=icon] {\n  color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-green__icon--Color, var(--pf-global--success-color--100, #3e8635)));\n}\n\n.orange .hasIcon [part=icon] {\n  color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-orange__icon--Color, var(--pf-global--palette--orange-300, #ec7a08)));\n}\n\n.purple .hasIcon [part=icon] {\n  color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-purple__icon--Color, var(--pf-global--palette--purple-500, #6753ac)));\n}\n\n.red .hasIcon [part=icon] {\n  color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-red__icon--Color, var(--pf-global--danger-color--100, #c9190b)));\n}\n\n.gold .hasIcon [part=icon] {\n  color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-gold__icon--Color, var(--pf-global--palette--gold-400, #f0ab00)));\n}\n\npf-button {\n  --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize,\n    var(--pf-global--FontSize--xs, 0.75rem));\n  --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop,\n    var(--pf-global--spacer--xs, 0.25rem));\n  --pf-c-button--PaddingRight: var(--pf-c-label__c-button--PaddingRight,\n    var(--pf-global--spacer--sm, 0.5rem));\n  --pf-c-button--PaddingBottom: var(--pf-c-label__c-button--PaddingBottom,\n    var(--pf-global--spacer--xs, 0.25rem));\n  --pf-c-button--PaddingLeft: var(--pf-c-label__c-button--PaddingLeft,\n    var(--pf-global--spacer--sm, 0.5rem));\n    margin-top: var(--pf-c-label__c-button--MarginTop, -0.5rem);\n    margin-right: var(--pf-c-label__c-button--MarginRight, -0.5rem);\n    margin-bottom: var(--pf-c-label__c-button--MarginBottom, -0.5rem);\n    margin-left: var(--pf-c-label__c-button--MarginLeft, 0.25rem);\n}\n\nsvg {\n  vertical-align:-0.125em;\n  fill: currentColor;\n  height: 1em;\n  width: 1em;\n}\n`;
+export class LabelCloseEvent extends Event {
+    constructor() {
+        super('close', { bubbles: true, cancelable: true });
+    }
+}
+let PfLabel = class PfLabel extends LitElement {
     constructor() {
         super(...arguments);
+        _PfLabel_instances.add(this);
         /**
          * Changes the style of the label.
          * - Filled: Colored background with colored border.
@@ -91,37 +33,54 @@ let PfLabel = class PfLabel extends BaseLabel {
         this.truncated = false;
         /** Flag indicating the label is removable */
         this.removable = false;
+        /** Represents the state of the anonymous and icon slots */
+        _PfLabel_slots.set(this, new SlotController(this, null, 'icon'));
     }
     render() {
         const { compact, truncated } = this;
+        const { variant, color, icon } = this;
+        const hasIcon = !!icon || __classPrivateFieldGet(this, _PfLabel_slots, "f").hasSlotted('icon');
         return html `
-      <span id="pf-container" class="${classMap({ compact, truncated })}">${super.render()}</span>
-    `;
-    }
-    renderDefaultIcon() {
-        return !this.icon ? '' : html `
-      <pf-icon icon="${this.icon}" size="sm"></pf-icon>
-    `;
-    }
-    renderSuffix() {
-        return !this.removable ? '' : html `
-      <span part="close-button" ?hidden=${!this.removable}>
-        <pf-button plain
-                    @click="${() => this.dispatchEvent(new ComposedEvent('close'))}"
-                    label="${this.closeButtonLabel ?? 'remove'}">
-          <svg viewBox="0 0 352 512">
-            <path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/>
-          </svg>
-        </pf-button>
+      <span id="container"
+            class="${classMap({
+            hasIcon,
+            compact,
+            truncated,
+            [variant ?? '']: !!variant,
+            [color ?? '']: !!color
+        })}">
+        <slot name="icon" part="icon">
+          <pf-icon ?hidden="${!icon}"
+                   size="sm"
+                   .icon="${this.icon || undefined}"></pf-icon>
+        </slot>
+        <slot id="text"></slot>
+        <span part="close-button" ?hidden=${!this.removable}>
+          <pf-button plain
+                     @click="${__classPrivateFieldGet(this, _PfLabel_instances, "m", _PfLabel_onClickClose)}"
+                     label="${this.closeButtonLabel ?? 'remove'}">
+            <svg viewBox="0 0 352 512">
+              <path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/>
+            </svg>
+          </pf-button>
+        </span>
       </span>
     `;
     }
 };
-PfLabel.styles = [...BaseLabel.styles, styles];
+_PfLabel_slots = new WeakMap();
+_PfLabel_instances = new WeakSet();
+_PfLabel_onClickClose = function _PfLabel_onClickClose() {
+    if (this.removable && this.dispatchEvent(new LabelCloseEvent())) {
+        this.remove();
+    }
+};
+PfLabel.styles = [styles];
 PfLabel.shadowRootOptions = {
-    ...BaseLabel.shadowRootOptions,
+    ...LitElement.shadowRootOptions,
     delegatesFocus: true,
 };
+PfLabel.version = "4.0.0";
 __decorate([
     property()
 ], PfLabel.prototype, "variant", void 0);

package/pf-label/pf-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-label.js","sourceRoot":"","sources":["pf-label.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,6CAA6C,CAAC;;;AAoBrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,SAAS;IAA/B;;QAQL;;;;WAIG;QACS,YAAO,GAAiB,QAAQ,CAAC;QAE7C;;WAEG;QACS,UAAK,GAAe,MAAM,CAAC;QAKvC,2CAA2C;QACd,YAAO,GAAG,KAAK,CAAC;QAE7C,yDAAyD;QAC5B,cAAS,GAAG,KAAK,CAAC;QAE/C,6CAA6C;QAChB,cAAS,GAAG,KAAK,CAAC;IA+BjD,CAAC;IA1BU,MAAM;QACb,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QACpC,OAAO,IAAI,CAAA;uCACwB,QAAQ,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,KAAK,KAAK,CAAC,MAAM,EAAE;KACrF,CAAC;IACJ,CAAC;IAEkB,iBAAiB;QAClC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;uBACV,IAAI,CAAC,IAAI;KAC3B,CAAC;IACJ,CAAC;IAEkB,YAAY;QAC7B,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;0CACI,CAAC,IAAI,CAAC,SAAS;;8BAE3B,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,aAAa,CAAC,OAAO,CAAC,CAAC;6BACrD,IAAI,CAAC,gBAAgB,IAAI,QAAQ;;;;;;KAMzD,CAAC;IACJ,CAAC;;AA3De,cAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,AAAhC,CAAiC;AAE9B,yBAAiB,GAAG;IAC3C,GAAG,SAAS,CAAC,iBAAiB;IAC9B,cAAc,EAAE,IAAI;CACrB,AAHyC,CAGxC;AAOU;IAAX,QAAQ,EAAE;wCAAkC;AAKjC;IAAX,QAAQ,EAAE;sCAA4B;AAG3B;IAAX,QAAQ,EAAE;qCAAe;AAGG;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAiB;AAGhB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAmB;AAGlB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAmB;AAGA;IAA9C,QAAQ,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;iDAA2B;AAjC9D,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA6DnB","sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { ComposedEvent } from '@patternfly/pfe-core';\n\nimport { BaseLabel } from './BaseLabel.js';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\n\nimport styles from './pf-label.css';\n\nexport type LabelVariant = (\n  | 'filled'\n  | 'outline'\n);\n\nexport type LabelColor = (\n  | 'blue'\n  | 'cyan'\n  | 'green'\n  | 'orange'\n  | 'purple'\n  | 'red'\n  | 'grey'\n  | 'gold'\n);\n\n/**\n * The **label** component allows users to add specific element captions for user\n * clarity and convenience.\n * @summary Allows users to display meta data in a stylized form.\n * @fires close - when a removable label's close button is clicked\n * @cssprop {<length>} --pf-c-label--FontSize   {@default `0.875em`}\n * @cssprop {<length>} --pf-c-label--PaddingTop     {@default `0.25rem`}\n * @cssprop {<length>} --pf-c-label--PaddingRight   {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-label--PaddingBottom  {@default `0.25rem`}\n * @cssprop {<length>} --pf-c-label--PaddingLeft    {@default `0.5rem`}\n * @cssprop {<color>} --pf-c-label--Color           {@default `#151515`}\n * @cssprop {<color>} --pf-c-label--BackgroundColor {@default `#f5f5f5`}\n * @cssprop {<length>} --pf-c-label--BorderRadius {@default `30em`}\n * @cssprop {<length>} --pf-c-label__content--MaxWidth            {@default `100%`}\n * @cssprop {<color>} --pf-c-label__content--Color                {@default `#151515`}\n * @cssprop {<length>} --pf-c-label__content--before--BorderWidth {@default `1px`}\n * @cssprop {<color>} --pf-c-label__content--before--BorderColor  {@default `#d2d2d2`}\n * @cssprop {<color>} --pf-c-label--m-outline__content--Color  {@default `#151515`}\n * @cssprop {<color>} --pf-c-label--m-outline--BackgroundColor {@default `#ffffff`}\n * @cssprop {<color>} --pf-c-label--m-blue__content--Color                {@default `#002952`}\n * @cssprop {<color>} --pf-c-label--m-blue--BackgroundColor               {@default `#e7f1fa`}\n * @cssprop {<color>} --pf-c-label--m-blue__content--before--BorderColor  {@default `#bee1f4`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-blue__content--Color      {@default `#06c`}\n * @cssprop {<color>} --pf-c-label--m-cyan__content--Color                {@default `#3b1f00`}\n * @cssprop {<color>} --pf-c-label--m-cyan--BackgroundColor               {@default `#f2f9f9`}\n * @cssprop {<color>} --pf-c-label--m-cyan__content--before--BorderColor  {@default `#a2d9d9`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-cyan__content--Color      {@default `#005f60`}\n * @cssprop {<color>} --pf-c-label--m-green__content--Color                {@default `#1e4f18`}\n * @cssprop {<color>} --pf-c-label--m-green--BackgroundColor               {@default `#f3faf2`}\n * @cssprop {<color>} --pf-c-label--m-green__content--before--BorderColor  {@default `#bde5b8`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-green__content--Color     {@default `#3e8635`}\n * @cssprop {<color>} --pf-c-label--m-orange__content--Color                {@default `#003737`}\n * @cssprop {<color>} --pf-c-label--m-orange--BackgroundColor               {@default `#fff6ec`}\n * @cssprop {<color>} --pf-c-label--m-orange__content--before--BorderColor  {@default `#f4b678`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-orange__content--Color     {@default `#8f4700`}\n * @cssprop {<color>} --pf-c-label--m-purple__content--Color                {@default `#1f0066`}\n * @cssprop {<color>} --pf-c-label--m-purple--BackgroundColor               {@default `#f2f0fc`}\n * @cssprop {<color>} --pf-c-label--m-purple__content--before--BorderColor  {@default `#cbc1ff`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-purple__content--Color     {@default `#6753ac`}\n * @cssprop {<color>} --pf-c-label--m-red__content--Color                {@default `#7d1007`}\n * @cssprop {<color>} --pf-c-label--m-red--BackgroundColor               {@default `#faeae8`}\n * @cssprop {<color>} --pf-c-label--m-red__content--before--BorderColor  {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-red__content--Color     {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-label--m-gold__content--Color                {@default `#3d2c00`}\n * @cssprop {<color>} --pf-c-label--m-gold--BackgroundColor               {@default `#fdf7e7`}\n * @cssprop {<color>} --pf-c-label--m-gold__content--before--BorderColor  {@default `#f9e0a2`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-gold__content--Color     {@default `#795600`}\n * @cssprop {<color>} --pf-c-label--m-blue__icon--Color {@default `#06c`}\n * @cssprop {<color>} --pf-c-label--m-cyan__icon--Color {@default `#009596`}\n * @cssprop {<color>} --pf-c-label--m-green__icon--Color {@default `#3e8635`}\n * @cssprop {<color>} --pf-c-label--m-orange__icon--Color {@default `#ec7a08`}\n * @cssprop {<color>} --pf-c-label--m-red__icon--Color {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-label--m-gold__icon--Color {@default `#f0ab00`}\n * @csspart icon - container for the label icon\n * @csspart close-button - container for removable labels' close button\n * @slot icon\n *       Contains the labels's icon, e.g. web-icon-alert-success.\n * @slot\n *       Must contain the text for the label.\n * @cssprop {<length>} --pf-c-label--m-compact--PaddingTop     {@default `0`}\n * @cssprop {<length>} --pf-c-label--m-compact--PaddingRight   {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-label--m-compact--PaddingBottom  {@default `0`}\n * @cssprop {<length>} --pf-c-label--m-compact--PaddingLeft    {@default `0.5rem`}\n */\n@customElement('pf-label')\nexport class PfLabel extends BaseLabel {\n  static readonly styles = [...BaseLabel.styles, styles];\n\n  static override readonly shadowRootOptions = {\n    ...BaseLabel.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Changes the style of the label.\n   * - Filled: Colored background with colored border.\n   * - Outline: White background with colored border.\n   */\n  @property() variant: LabelVariant = 'filled';\n\n  /**\n   * Changes the color of the label\n   */\n  @property() color: LabelColor = 'grey';\n\n  /** Shorthand for the `icon` slot, the value is icon name */\n  @property() icon?: string;\n\n  /** Flag indicating the label is compact */\n  @property({ type: Boolean }) compact = false;\n\n  /** Flag indicating the label text should be truncated */\n  @property({ type: Boolean }) truncated = false;\n\n  /** Flag indicating the label is removable */\n  @property({ type: Boolean }) removable = false;\n\n  /** Text label for a removable label's close button */\n  @property({ attribute: 'close-button-label' }) closeButtonLabel?: string;\n\n  override render() {\n    const { compact, truncated } = this;\n    return html`\n      <span id=\"pf-container\" class=\"${classMap({ compact, truncated })}\">${super.render()}</span>\n    `;\n  }\n\n  protected override renderDefaultIcon() {\n    return !this.icon ? '' : html`\n      <pf-icon icon=\"${this.icon}\" size=\"sm\"></pf-icon>\n    `;\n  }\n\n  protected override renderSuffix() {\n    return !this.removable ? '' : html`\n      <span part=\"close-button\" ?hidden=${!this.removable}>\n        <pf-button plain\n                    @click=\"${() => this.dispatchEvent(new ComposedEvent('close'))}\"\n                    label=\"${this.closeButtonLabel ?? 'remove'}\">\n          <svg viewBox=\"0 0 352 512\">\n            <path d=\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\"/>\n          </svg>\n        </pf-button>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-label': PfLabel;\n  }\n}\n"]}
+{"version":3,"file":"pf-label.js","sourceRoot":"","sources":["pf-label.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,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,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;AAErF,OAAO,6CAA6C,CAAC;;;AAIrD,MAAM,OAAO,eAAgB,SAAQ,KAAK;IACxC;QACE,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;IACtD,CAAC;CACF;AAmEM,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;;QAQL;;;;WAIG;QACS,YAAO,GAEH,QAAQ,CAAC;QAEzB;;WAEG;QACS,UAAK,GAQJ,MAAM,CAAC;QAKpB,2CAA2C;QACd,YAAO,GAAG,KAAK,CAAC;QAE7C,yDAAyD;QAC5B,cAAS,GAAG,KAAK,CAAC;QAE/C,6CAA6C;QAChB,cAAS,GAAG,KAAK,CAAC;QAK/C,2DAA2D;QAC3D,yBAAS,IAAI,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAC;;IAEvC,MAAM;QACb,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QACpC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QACtC,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,IAAI,uBAAA,IAAI,sBAAO,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QACzD,OAAO,IAAI,CAAA;;qBAEM,QAAQ,CAAC;YAChB,OAAO;YACP,OAAO;YACP,SAAS;YACT,CAAC,OAAO,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO;YAC1B,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK;SAAE,CAAC;;8BAET,CAAC,IAAI;;4BAEP,IAAI,CAAC,IAAI,IAAI,SAA8B;;;4CAG3B,CAAC,IAAI,CAAC,SAAS;;+BAE5B,uBAAA,IAAI,iDAAc;8BACnB,IAAI,CAAC,gBAAgB,IAAI,QAAQ;;;;;;;KAO1D,CAAC;IACJ,CAAC;;;;;IAGC,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,eAAe,EAAE,CAAC,EAAE,CAAC;QAChE,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;AACH,CAAC;AAlFe,cAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;AAE1B,yBAAiB,GAAmB;IAC3D,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHyC,CAGxC;;AAOU;IAAX,QAAQ,EAAE;wCAEc;AAKb;IAAX,QAAQ,EAAE;sCAQS;AAGR;IAAX,QAAQ,EAAE;qCAAe;AAGG;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAiB;AAGhB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAmB;AAGlB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAmB;AAGA;IAA9C,QAAQ,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;iDAA2B;AA3C9D,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\n\nimport styles from './pf-label.css';\n\nexport class LabelCloseEvent extends Event {\n  constructor() {\n    super('close', { bubbles: true, cancelable: true });\n  }\n}\n\n/**\n * The **label** component allows users to add specific element captions for user\n * clarity and convenience.\n * @summary Allows users to display meta data in a stylized form.\n * @fires {LabelCloseEvent} close - when a removable label's close button is clicked\n * @cssprop {<length>} [--pf-c-label--FontSize=0.875em]\n * @cssprop {<length>} [--pf-c-label--PaddingTop=0.25rem]\n * @cssprop {<length>} [--pf-c-label--PaddingRight=0.5rem]\n * @cssprop {<length>} [--pf-c-label--PaddingBottom=0.25rem]\n * @cssprop {<length>} [--pf-c-label--PaddingLeft=0.5rem]\n * @cssprop {<color>} [--pf-c-label--Color=#151515]\n * @cssprop {<color>} [--pf-c-label--BackgroundColor=#f5f5f5]\n * @cssprop {<length>} [--pf-c-label--BorderRadius=30em]\n * @cssprop {<length>} [--pf-c-label__content--MaxWidth=100]\n * @cssprop {<color>} [--pf-c-label__content--Color=#151515]\n * @cssprop {<length>} [--pf-c-label__content--before--BorderWidth=1px]\n * @cssprop {<color>} [--pf-c-label__content--before--BorderColor=#d2d2d2]\n * @cssprop {<color>} [--pf-c-label--m-outline__content--Color=#151515]\n * @cssprop {<color>} [--pf-c-label--m-outline--BackgroundColor=#ffffff]\n * @cssprop {<color>} [--pf-c-label--m-blue__content--Color=#002952]\n * @cssprop {<color>} [--pf-c-label--m-blue--BackgroundColor=#e7f1fa]\n * @cssprop {<color>} [--pf-c-label--m-blue__content--before--BorderColor=#bee1f4]\n * @cssprop {<color>} [--pf-c-label--m-outline--m-blue__content--Color=#06c]\n * @cssprop {<color>} [--pf-c-label--m-cyan__content--Color=#3b1f00]\n * @cssprop {<color>} [--pf-c-label--m-cyan--BackgroundColor=#f2f9f9]\n * @cssprop {<color>} [--pf-c-label--m-cyan__content--before--BorderColor=#a2d9d9]\n * @cssprop {<color>} [--pf-c-label--m-outline--m-cyan__content--Color=#005f60]\n * @cssprop {<color>} [--pf-c-label--m-green__content--Color=#1e4f18]\n * @cssprop {<color>} [--pf-c-label--m-green--BackgroundColor=#f3faf2]\n * @cssprop {<color>} [--pf-c-label--m-green__content--before--BorderColor=#bde5b8]\n * @cssprop {<color>} [--pf-c-label--m-outline--m-green__content--Color=#3e8635]\n * @cssprop {<color>} [--pf-c-label--m-orange__content--Color=#003737]\n * @cssprop {<color>} [--pf-c-label--m-orange--BackgroundColor=#fff6ec]\n * @cssprop {<color>} [--pf-c-label--m-orange__content--before--BorderColor=#f4b678]\n * @cssprop {<color>} [--pf-c-label--m-outline--m-orange__content--Color=#8f4700]\n * @cssprop {<color>} [--pf-c-label--m-purple__content--Color=#1f0066]\n * @cssprop {<color>} [--pf-c-label--m-purple--BackgroundColor=#f2f0fc]\n * @cssprop {<color>} [--pf-c-label--m-purple__content--before--BorderColor=#cbc1ff]\n * @cssprop {<color>} [--pf-c-label--m-outline--m-purple__content--Color=#6753ac]\n * @cssprop {<color>} [--pf-c-label--m-red__content--Color=#7d1007]\n * @cssprop {<color>} [--pf-c-label--m-red--BackgroundColor=#faeae8]\n * @cssprop {<color>} [--pf-c-label--m-red__content--before--BorderColor=#c9190b]\n * @cssprop {<color>} [--pf-c-label--m-outline--m-red__content--Color=#c9190b]\n * @cssprop {<color>} [--pf-c-label--m-gold__content--Color=#3d2c00]\n * @cssprop {<color>} [--pf-c-label--m-gold--BackgroundColor=#fdf7e7]\n * @cssprop {<color>} [--pf-c-label--m-gold__content--before--BorderColor=#f9e0a2]\n * @cssprop {<color>} [--pf-c-label--m-outline--m-gold__content--Color=#795600]\n * @cssprop {<color>} [--pf-c-label--m-blue__icon--Color=#06c]\n * @cssprop {<color>} [--pf-c-label--m-cyan__icon--Color=#009596]\n * @cssprop {<color>} [--pf-c-label--m-green__icon--Color=#3e8635]\n * @cssprop {<color>} [--pf-c-label--m-orange__icon--Color=#ec7a08]\n * @cssprop {<color>} [--pf-c-label--m-red__icon--Color=#c9190b]\n * @cssprop {<color>} [--pf-c-label--m-gold__icon--Color=#f0ab00]\n * @csspart icon - container for the label icon\n * @csspart close-button - container for removable labels' close button\n * @slot icon\n *       Contains the labels's icon, e.g. web-icon-alert-success.\n * @slot\n *       Must contain the text for the label.\n * @cssprop {<length>} [--pf-c-label--m-compact--PaddingTop=0]\n * @cssprop {<length>} [--pf-c-label--m-compact--PaddingRight=0.5rem]\n * @cssprop {<length>} [--pf-c-label--m-compact--PaddingBottom=0]\n * @cssprop {<length>} [--pf-c-label--m-compact--PaddingLeft=0.5rem]\n */\n@customElement('pf-label')\nexport class PfLabel extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  static override readonly shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Changes the style of the label.\n   * - Filled: Colored background with colored border.\n   * - Outline: White background with colored border.\n   */\n  @property() variant:\n    | 'filled'\n    | 'outline' = 'filled';\n\n  /**\n   * Changes the color of the label\n   */\n  @property() color:\n    | 'blue'\n    | 'cyan'\n    | 'green'\n    | 'orange'\n    | 'purple'\n    | 'red'\n    | 'grey'\n    | 'gold' = 'grey';\n\n  /** Shorthand for the `icon` slot, the value is icon name */\n  @property() icon?: string;\n\n  /** Flag indicating the label is compact */\n  @property({ type: Boolean }) compact = false;\n\n  /** Flag indicating the label text should be truncated */\n  @property({ type: Boolean }) truncated = false;\n\n  /** Flag indicating the label is removable */\n  @property({ type: Boolean }) removable = false;\n\n  /** Text label for a removable label's close button */\n  @property({ attribute: 'close-button-label' }) closeButtonLabel?: string;\n\n  /** Represents the state of the anonymous and icon slots */\n  #slots = new SlotController(this, null, 'icon');\n\n  override render(): TemplateResult<1> {\n    const { compact, truncated } = this;\n    const { variant, color, icon } = this;\n    const hasIcon = !!icon || this.#slots.hasSlotted('icon');\n    return html`\n      <span id=\"container\"\n            class=\"${classMap({\n              hasIcon,\n              compact,\n              truncated,\n              [variant ?? '']: !!variant,\n              [color ?? '']: !!color })}\">\n        <slot name=\"icon\" part=\"icon\">\n          <pf-icon ?hidden=\"${!icon}\"\n                   size=\"sm\"\n                   .icon=\"${this.icon || undefined as unknown as string}\"></pf-icon>\n        </slot>\n        <slot id=\"text\"></slot>\n        <span part=\"close-button\" ?hidden=${!this.removable}>\n          <pf-button plain\n                     @click=\"${this.#onClickClose}\"\n                     label=\"${this.closeButtonLabel ?? 'remove'}\">\n            <svg viewBox=\"0 0 352 512\">\n              <path d=\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\"/>\n            </svg>\n          </pf-button>\n        </span>\n      </span>\n    `;\n  }\n\n  #onClickClose() {\n    if (this.removable && this.dispatchEvent(new LabelCloseEvent())) {\n      this.remove();\n    }\n  }\n}\n\nexport type LabelVariant = PfLabel['variant'];\n\nexport type LabelColor = PfLabel['color'];\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-label': PfLabel;\n  }\n}\n"]}