@patternfly/elements 4.1.0 → 4.3.0

package/pf-label/pf-label.js

@@ -7,7 +7,255 @@ import { classMap } from 'lit/directives/class-map.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 `: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`;
+const styles = css `:host {
+  position: relative;
+  white-space: nowrap;
+  border: 0;
+}
+
+pf-icon, ::slotted(pf-icon) {
+  color: currentColor;
+}
+
+:host,
+#container {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+}
+
+#container {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-width: 0;
+  /** label top padding */
+  padding-top: var(--pf-c-label--PaddingTop, var(--pf-global--spacer--xs, 0.25rem));
+  /** label left padding */
+  padding-left: var(--pf-c-label--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));
+  /** label bottom padding */
+  padding-bottom: var(--pf-c-label--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem));
+  /** label right padding */
+  padding-right: var(--pf-c-label--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));
+  /** label font size */
+  font-size: var(--pf-c-label--FontSize, var(--pf-global--FontSize--sm, 0.875rem));
+  /** label text color */
+  color: var(--pf-c-label--Color, var(--pf-global--Color--100, #151515));
+  /** label background color */
+  background-color: var(--pf-c-label--BackgroundColor, var(--pf-global--palette--black-150, #f5f5f5));
+  /** label border radius */
+  border-radius: var(--pf-c-label--BorderRadius, 30em);
+  /** label content max width */
+  max-width: var(--pf-c-label__content--MaxWidth, 100%);
+  /** label content text color */
+  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);
+  /** label content border width and color */
+  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 {
+  /** compact label top padding */
+  --pf-c-label--PaddingTop: var(--pf-c-label--m-compact--PaddingTop, 0);
+  /** compact label right padding */
+  --pf-c-label--PaddingRight: var(--pf-c-label--m-compact--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));
+  /** compact label bottom padding */
+  --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom, 0);
+  /** compact label left padding */
+  --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));
+  --pf-global--icon--FontSize--sm: 12px;
+}
+
+.blue {
+  /** blue label content text color */
+  --pf-c-label__content--Color: var(--pf-c-label--m-blue__content--Color, var(--pf-global--info-color--200, #002952));
+  /** blue label background color */
+  --pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor, var(--pf-global--palette--blue-50, #e7f1fa));
+  /** blue label content border color */
+  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor, var(--pf-global--palette--blue-100, #bee1f4));
+}
+
+.blue.outline {
+  /** outline blue label content text color */
+  --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-blue__content--Color, var(--pf-global--primary-color--100, #06c)));
+}
+
+.cyan {
+  /** cyan label content text color */
+  --pf-c-label__content--Color: var(--pf-c-label--m-cyan__content--Color, var(--pf-global--default-color--300, #003737));
+  /** cyan label background color */
+  --pf-c-label--BackgroundColor: var(--pf-c-label--m-cyan--BackgroundColor, var(--pf-global--palette--cyan-50, #f2f9f9));
+  /** cyan label content border color */
+  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor, var(--pf-global--palette--cyan-100, #a2d9d9));
+}
+
+.cyan.outline {
+  /** outline cyan label content text color */
+  --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-cyan__content--Color, var(--pf-global--palette--cyan-400, #005f60)))
+}
+
+.green {
+  /** green label content text color */
+  --pf-c-label__content--Color: var(--pf-c-label--m-green__content--Color,var(--pf-global--success-color--200, #1e4f18));
+  /** green label background color */
+  --pf-c-label--BackgroundColor: var(--pf-c-label--m-green--BackgroundColor, var(--pf-global--palette--green-50, #f3faf2));
+  /** green label content border color */
+  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor, var(--pf-global--palette--green-100, #bde5b8));
+}
+
+.green.outline{
+  /** outline green label content text color */
+  --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-green__content--Color, var(--pf-global--success-color--100, #3e8635)))
+}
+
+.orange {
+  /** orange label content text color */
+  --pf-c-label__content--Color: var(--pf-c-label--m-orange__content--Color, var(--pf-global--palette--orange-700, #3b1f00));
+  /** orange label background color */
+  --pf-c-label--BackgroundColor: var(--pf-c-label--m-orange--BackgroundColor, var(--pf-global--palette--orange-50, #fff6ec));
+  /** orange label content border color */
+  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor, var(--pf-global--palette--orange-100, #f4b678));
+}
+
+.orange.outline {
+  /** outline orange label content text color */
+  --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-orange__content--Color, var(--pf-global--palette--orange-500, #8f4700)))
+}
+
+.purple {
+  /** purple label content text color */
+  --pf-c-label__content--Color: var(--pf-c-label--m-purple__content--Color, var(--pf-global--palette--purple-700, #1f0066));
+  /** purple label background color */
+  --pf-c-label--BackgroundColor: var(--pf-c-label--m-purple--BackgroundColor, var(--pf-global--palette--purple-50, #f2f0fc));
+  /** purple label content border color */
+  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor, var(--pf-global--palette--purple-100, #cbc1ff));
+}
+
+.purple.outline {
+  /** outline purple label content text color */
+  --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-purple__content--Color, var(--pf-global--palette--purple-500, #6753ac)))
+}
+
+.red {
+  /** red label content text color */
+  --pf-c-label__content--Color: var(--pf-c-label--m-red__content--Color, var(--pf-global--palette--red-300, #7d1007));
+  /** red label background color */
+  --pf-c-label--BackgroundColor: var(--pf-c-label--m-red--BackgroundColor, var(--pf-global--palette--red-50, #faeae8));
+  /** red label content border color */
+  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor, var(--pf-global--palette--red-100, #c9190b));
+}
+
+.red.outline {
+  /** outline red label content text color */
+  --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-red__content--Color, var(--pf-global--danger-color--100, #c9190b)))
+}
+
+.gold {
+  /** gold label content text color */
+  --pf-c-label__content--Color: var(--pf-c-label--m-gold__content--Color, var(--pf-global--palette--gold-700, #3d2c00));
+  /** gold label background color */
+  --pf-c-label--BackgroundColor: var(--pf-c-label--m-gold--BackgroundColor, var(--pf-global--palette--gold-50, #fdf7e7));
+  /** gold label content border color */
+  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor, var(--pf-global--palette--gold-100, #f9e0a2));
+}
+
+.gold.outline {
+  /** outline gold label content text color */
+  --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-gold__content--Color, var(--pf-global--palette--gold-600, #795600)))
+}
+
+.outline {
+  /** outline label background color */
+  --pf-c-label--BackgroundColor: var(--pf-c-label--m-outline--BackgroundColor, #ffffff);
+  --pf-c-label__content--before--BorderColor: var(--pf-global--palette--black-300, #d2d2d2);
+}
+
+.hasIcon [part=icon] {
+  left: var(--pf-c-label--PaddingLeft, var(--pf-global--spacer--md, 1rem));
+  margin-inline-end: var(--pf-c-label__icon--MarginRight, var(--pf-global--spacer--xs, 0.25rem));
+}
+
+.blue .hasIcon [part=icon] {
+  /** blue label icon color */
+  color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-blue__icon--Color, var(--pf-global--primary-color--100, #06c)));
+}
+
+.cyan .hasIcon [part=icon] {
+  /** cyan label icon color */
+  color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-cyan__icon--Color, var(--pf-global--default-color--200, #009596)));
+}
+
+.green .hasIcon [part=icon] {
+  /** green label icon color */
+  color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-green__icon--Color, var(--pf-global--success-color--100, #3e8635)));
+}
+
+.orange .hasIcon [part=icon] {
+  /** orange label icon color */
+  color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-orange__icon--Color, var(--pf-global--palette--orange-300, #ec7a08)));
+}
+
+.purple .hasIcon [part=icon] {
+  /** purple label icon color */
+  color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-purple__icon--Color, var(--pf-global--palette--purple-500, #6753ac)));
+}
+
+.red .hasIcon [part=icon] {
+  /** red label icon color */
+  color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-red__icon--Color, var(--pf-global--danger-color--100, #c9190b)));
+}
+
+.gold .hasIcon [part=icon] {
+  /** gold label icon color */
+  color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-gold__icon--Color, var(--pf-global--palette--gold-400, #f0ab00)));
+}
+
+pf-button {
+  --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize,
+    var(--pf-global--FontSize--xs, 0.75rem));
+  --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop,
+    var(--pf-global--spacer--xs, 0.25rem));
+  --pf-c-button--PaddingRight: var(--pf-c-label__c-button--PaddingRight,
+    var(--pf-global--spacer--sm, 0.5rem));
+  --pf-c-button--PaddingBottom: var(--pf-c-label__c-button--PaddingBottom,
+    var(--pf-global--spacer--xs, 0.25rem));
+  --pf-c-button--PaddingLeft: var(--pf-c-label__c-button--PaddingLeft,
+    var(--pf-global--spacer--sm, 0.5rem));
+    margin-top: var(--pf-c-label__c-button--MarginTop, -0.5rem);
+    margin-right: var(--pf-c-label__c-button--MarginRight, -0.5rem);
+    margin-bottom: var(--pf-c-label__c-button--MarginBottom, -0.5rem);
+    margin-left: var(--pf-c-label__c-button--MarginLeft, 0.25rem);
+}
+
+svg {
+  vertical-align:-0.125em;
+  fill: currentColor;
+  height: 1em;
+  width: 1em;
+}
+`;
 export class LabelCloseEvent extends Event {
     constructor() {
         super('close', { bubbles: true, cancelable: true });
@@ -49,12 +297,19 @@ let PfLabel = class PfLabel extends LitElement {
             [variant ?? '']: !!variant,
             [color ?? '']: !!color
         })}">
+        <!-- slot:
+               summary: Contains the labels's icon, e.g. web-icon-alert-success.
+             part:
+               summary: container for the label icon
+        -->
         <slot name="icon" part="icon">
           <pf-icon ?hidden="${!icon}"
                    size="sm"
                    .icon="${this.icon || undefined}"></pf-icon>
         </slot>
+        <!-- summary: Must contain the text for the label. -->
         <slot id="text"></slot>
+        <!-- summary: container for removable labels' close button -->
         <span part="close-button" ?hidden=${!this.removable}>
           <pf-button plain
                      @click="${__classPrivateFieldGet(this, _PfLabel_instances, "m", _PfLabel_onClickClose)}"
@@ -80,7 +335,7 @@ PfLabel.shadowRootOptions = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
 };
-PfLabel.version = "4.1.0";
+PfLabel.version = "4.3.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,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"]}
+{"version":3,"file":"pf-label.js","sourceRoot":"","sources":["pf-label.ts"],"names":[],"mappings":"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","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 * @alias Label\n * @fires {LabelCloseEvent} close - when a removable label's close button is clicked\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:\n               summary: Contains the labels's icon, e.g. web-icon-alert-success.\n             part:\n               summary: container for the label icon\n        -->\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        <!-- summary: Must contain the text for the label. -->\n        <slot id=\"text\"></slot>\n        <!-- summary: container for removable labels' close button -->\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"]}

package/pf-modal/pf-modal.css

@@ -19,6 +19,7 @@ section {
   left: 0;
   align-items: center;
   justify-content: center;
+  /** Z-index for modal box */
   z-index: var(--pf-c-modal-box--ZIndex,
     var(--pf-global--ZIndex--xl,
       500));
@@ -44,20 +45,25 @@ section {
   position: relative;
   margin: 0 auto;
 
+  /** Width of modal */
   width: var(--pf-c-modal-box--Width,
     calc(100% - var(--pf-global--spacer--xl,2rem)));
 
+  /** Max width of modal */
   max-width: var(--pf-c-modal-box--MaxWidth,
     calc(100% - var(--pf-global--spacer--xl,2rem)));
 
+  /** Max height of modal */
   max-height: var(--pf-c-modal-box--MaxHeight,
     calc(100% - var(--pf-global--spacer--2xl,3rem)));
 
+  /** Box shadow for modal */
   box-shadow: var(--pf-c-modal-box--BoxShadow,
     var(--pf-global--BoxShadow--xl,
       0 1rem 2rem 0 rgba(3, 3, 3, 0.16),
       0 0 0.5rem 0 rgba(3, 3, 3, 0.1)));
 
+	/** Background color for modal */
 	background-color: var(--pf-c-modal-box--BackgroundColor,
     var(--pf-global--BackgroundColor--100,
       var(--pf-global--BackgroundColor--100, #fff)));
@@ -73,16 +79,19 @@ section {
 
 :host([width="small"]) [part=dialog],
 :host([variant="small"]) [part=dialog] {
+  /** Max width for small modal */
   --pf-c-modal-box--Width: var(--pf-c-modal-box--m-sm--sm--MaxWidth, 35rem);
 }
 
 :host([width="medium"]) [part=dialog],
 :host([variant="medium"]) [part=dialog] {
+  /** Max width for medium modal */
   --pf-c-modal-box--Width: var(--pf-c-modal-box--m-md--Width, 52.5rem);
 }
 
 :host([width="large"]) [part=dialog],
 :host([variant="large"]) [part=dialog] {
+  /** Max width for large modal */
   --pf-c-modal-box--Width: var(--pf-c-modal-box--m-lg--lg--MaxWidth, 70rem);
 }
 
@@ -111,10 +120,12 @@ header {
 }
 
 header ::slotted(:is(h1,h2,h3,h4,h5,h6)[slot="header"]) {
+  /** Font size for modal title */
   font-size: var(--pf-c-modal-box__title--FontSize,
     var(--pf-global--FontSize--2xl,
       1.5rem));
   font-weight: var(--pf-global--FontWeight--normal, 400);
+  /** Font family for modal title */
   font-family: var(--pf-c-modal-box__title--FontFamily,
     var(--pf-global--FontFamily--heading--sans-serif,
       var(--pf-global--FontFamily--redhat-updated--heading--sans-serif,

package/pf-modal/pf-modal.d.ts

@@ -17,34 +17,11 @@ export declare class ModalOpenEvent extends ComposedEvent {
  * A **modal** displays important information to a user without requiring them to navigate
  * to a new page.
  * @summary Displays information or helps a user focus on a task
- * @slot - The default slot can contain any type of content. When the header is not present this unnamed slot appear at the top of the modal window (to the left of the close button). Otherwise it will appear beneath the header.
- * @slot header - The header is an optional slot that appears at the top of the modal window. It should be a header tag (h2-h6).
- * @slot footer - Optional footer content. Good place to put action buttons.
+ * @alias Modal
  * @fires {ModalOpenEvent} open - Fires when a user clicks on the trigger or manually opens a modal.
  * @fires {ModalCloseEvent} close - Fires when either a user clicks on either the close button or the overlay or manually closes a modal.
- * @csspart overlay - The modal overlay which lies under the dialog and above the page body
- * @csspart dialog - The dialog element
- * @csspart content - The container for the dialog content
- * @csspart header - The container for the optional dialog header
- * @csspart description - The container for the optional dialog description in the header
- * @csspart close-button - The modal's close button
- * @csspart footer - Actions footer container
- * @cssprop {<length>} [--pf-c-modal-box--ZIndex=500]
- * @cssprop {<length>} [--pf-c-modal-box--Width=calc(100 - 2rem)] - Width of the modal
- * @cssprop {<length>} [--pf-c-modal-box--MaxWidth=calc(100 - 2rem)] - Max width of the modal
- * @cssprop {<length>} [--pf-c-modal-box--m-sm--sm--MaxWidth=35rem] - Max width of the small variant modal
- * @cssprop {<length>} [--pf-c-modal-box--m-md--MaxWidth=52.5rem] - Max width of the small variant modal
- * @cssprop {<length>} [--pf-c-modal-box--m-lg--lg--MaxWidth=70rem] - Max width of the large variant modal
- * @cssprop {<length>} [--pf-c-modal-box--MaxHeight=calc(100 - 3rem)] - Max height of the modal
- * @cssprop {<length>} [--pf-c-modal-box--BoxShadow=var(--pf-global--BoxShadow--xl)] -
- * @cssprop {<length>} [--pf-c-modal-box__title--FontSize=1.5rem] -
- * @cssprop {<length>} [--pf-c-modal-box--m-align-top--MarginTop=2rem] -
- * @cssprop {<length>} --pf-c-modal-box--m-align-top--MaxWidth
- * @cssprop {<length>} --pf-c-modal-box--m-align-top--MaxHeight
- * @cssprop {<color>} [--pf-c-modal-box--BackgroundColor=#fff] -
- * @cssprop --pf-c-modal-box__title--FontFamily - default font family for header-slotted headings
  */
-export declare class PfModal extends LitElement implements HTMLDialogElement {
+export declare class PfModal extends LitElement {
     #private;
     static readonly shadowRootOptions: ShadowRootInit;
     static readonly styles: CSSStyleSheet[];