@patternfly/elements 4.1.0 → 4.3.0

package/pf-tile/pf-tile.css

@@ -1,18 +1,26 @@
 :host {
   position: relative;
   display: inline-grid;
-  padding: var(--pf-c-tile--PaddingTop, var(--pf-global--spacer--lg, 1.5rem))
-          var(--pf-c-tile--PaddingRight, var(--pf-global--spacer--lg, 1.5rem))
-          var(--pf-c-tile--PaddingBottom, var(--pf-global--spacer--lg, 1.5rem))
-          var(--pf-c-tile--PaddingLeft, var(--pf-global--spacer--lg, 1.5rem));
+  padding: 
+    /** Top padding for tile */
+    var(--pf-c-tile--PaddingTop, var(--pf-global--spacer--lg, 1.5rem))
+    /** Right padding for tile */
+    var(--pf-c-tile--PaddingRight, var(--pf-global--spacer--lg, 1.5rem))
+    /** Bottom padding for tile */
+    var(--pf-c-tile--PaddingBottom, var(--pf-global--spacer--lg, 1.5rem))
+    /** Left padding for tile */
+    var(--pf-c-tile--PaddingLeft, var(--pf-global--spacer--lg, 1.5rem));
   text-align: center;
   cursor: pointer;
+  /** Background color for tile */
   background-color: var(--pf-c-tile--BackgroundColor,
                     var(--pf-global--BackgroundColor--100,
                     var(--pf-global--BackgroundColor--light-100), #ffffff));
   grid-template-rows: -webkit-min-content;
   grid-template-rows: min-content;
+  /** Transition animation for tile */
   transition: var(--pf-c-tile--Transition, none);
+  /** Vertical translation for tile */
   transform: translateY(var(--pf-c-tile--TranslateY, 0));
 }
 
@@ -28,18 +36,25 @@
   right: 0;
   bottom: 0;
   left: 0;
-  border: var(--pf-c-tile--before--BorderWidth, var(--pf-global--BorderWidth--sm, 1px))
-          solid
-          var(--pf-c-tile--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2));
+  border: 
+    /** Border width for tile */
+    var(--pf-c-tile--before--BorderWidth, var(--pf-global--BorderWidth--sm, 1px))
+    solid
+    /** Border color for tile */
+    var(--pf-c-tile--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2));
 }
 
 :host::after {
   right: 0;
   bottom: 0;
   left: 0;
+  /** Height of tile bottom accent */
   height: var(--pf-c-tile--after--Height, var(--pf-global--BorderWidth--lg, 3px));
+  /** Background color of tile bottom accent */
   background-color: var(--pf-c-tile--after--BackgroundColor, transparent);
+  /** Transition animation for tile bottom accent */
   transition: var(--pf-c-tile--after--Transition, none);
+  /** Scale Y and translate Y transform for tile bottom accent */
   transform: scaleY(var(--pf-c-tile--after--ScaleY, 1)) translateY(var(--pf-c-tile--after--TranslateY, 0));
 }
 
@@ -87,6 +102,7 @@
 }
 
 [part="title"] {
+  /** Color for tile title */
   color: var(--pf-c-tile__title--Color, var(--pf-global--Color--100, var(--pf-global--Color--dark-100, #151515)));
 }
 
@@ -96,10 +112,13 @@
 }
 
 [part="icon"] {
-  --_icon-size: var(--pf-c-tile__icon--FontSize: var(--pf-global--icon--FontSize--md, 1.125rem));
+  /** Font size for tile icon */
+  --_icon-size: var(--pf-c-tile__icon--FontSize, var(--pf-global--icon--FontSize--md, 1.125rem));
   --pf-icon--size: var(--_icon-size);
+  /** Right margin for tile icon */
   margin-right: var(--pf-c-tile__icon--MarginRight, var(--pf-global--spacer--sm, 0.5rem));
   font-size: var(--_icon-size);
+  /** Color for tile icon */
   color: var(--pf-c-tile__icon--Color, var(--pf-global--Color--100, #151515));
 }
 
@@ -118,6 +137,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  /** Bottom margin for stacked tile icon */
   margin-bottom: var(--pf-c-tile__header--m-stacked__icon--MarginBottom, var(--pf-global--spacer--xs, 0.25rem));
 }
 

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

@@ -6,32 +6,9 @@ export type StackedSize = ('md' | 'lg');
  * [selectable card](../card/). However, tiles are used specifically when the user is selecting
  * a static option, whereas a selectable card triggers an action or opens a quickstart
  * or sidebar to provide additional information.
- * @slot icon           - Icon expects a `<pf-icon>` or `<svg>`
- * @slot title          - the title of the tile should be a heading
- * @slot                - The content should be a paragraph
- * @csspart icon        - container for the icon
- * @csspart title       - container for the title
- * @csspart body        - container for the body content
+ * @alias Tile
  * @attr {'boolean'} selected       - selected variant
  * @attr {'md'|'lg'|null} stacked   - stacked variant
- * @cssprop   {<length>} [--pf-c-tile--PaddingTop=1.5rem]
- * @cssprop   {<length>} [--pf-c-tile--PaddingRight=1.5rem]
- * @cssprop   {<length>} [--pf-c-tile--PaddingBottom=1.5rem]
- * @cssprop   {<length>} [--pf-c-tile--PaddingLeft=1.5rem]
- * @cssprop   {<color>} [--pf-c-tile--BackgroundColor=#FFFFFF]
- * @cssprop   [--pf-c-tile--Transition=none]
- * @cssprop   [--pf-c-tile--TranslateY=0]
- * @cssprop   {<length>} [--pf-c-tile--before--BorderWidth=1px]
- * @cssprop   {<color>} [--pf-c-tile--before--BorderColor=#444548]
- * @cssprop   {<length>} [--pf-c-tile--after--Height=3px]
- * @cssprop   {<color>} [--pf-c-tile--after--BackgroundColor=transparent]
- * @cssprop   [--pf-c-tile--after--Transition=none]
- * @cssprop   [--pf-c-tile--after--ScaleY=1]
- * @cssprop   {<color>} [--pf-c-tile__title--Color=#06c]
- * @cssprop   {<color>} [--pf-c-tile__icon--Color=#06c]
- * @cssprop   {<length>} [--pf-c-tile__icon--MarginRight=0]
- * @cssprop   {<length>} [--pf-c-tile__icon--FontSize=1.5rem]
- * @cssprop   {<length>} [--pf-c-tile__header--m-stacked__icon--MarginBottom=0.25rem]
  */
 export declare class PfTile extends LitElement {
     static readonly styles: CSSStyleSheet[];

package/pf-tile/pf-tile.js

@@ -3,7 +3,155 @@ import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { css } from "lit";
-const styles = css `:host {\n  position: relative;\n  display: inline-grid;\n  padding: var(--pf-c-tile--PaddingTop, var(--pf-global--spacer--lg, 1.5rem))\n          var(--pf-c-tile--PaddingRight, var(--pf-global--spacer--lg, 1.5rem))\n          var(--pf-c-tile--PaddingBottom, var(--pf-global--spacer--lg, 1.5rem))\n          var(--pf-c-tile--PaddingLeft, var(--pf-global--spacer--lg, 1.5rem));\n  text-align: center;\n  cursor: pointer;\n  background-color: var(--pf-c-tile--BackgroundColor,\n                    var(--pf-global--BackgroundColor--100,\n                    var(--pf-global--BackgroundColor--light-100), #ffffff));\n  grid-template-rows: -webkit-min-content;\n  grid-template-rows: min-content;\n  transition: var(--pf-c-tile--Transition, none);\n  transform: translateY(var(--pf-c-tile--TranslateY, 0));\n}\n\n:host::before,\n:host::after {\n  position: absolute;\n  pointer-events: none;\n  content: "";\n}\n\n:host::before {\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border: var(--pf-c-tile--before--BorderWidth, var(--pf-global--BorderWidth--sm, 1px))\n          solid\n          var(--pf-c-tile--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2));\n}\n\n:host::after {\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: var(--pf-c-tile--after--Height, var(--pf-global--BorderWidth--lg, 3px));\n  background-color: var(--pf-c-tile--after--BackgroundColor, transparent);\n  transition: var(--pf-c-tile--after--Transition, none);\n  transform: scaleY(var(--pf-c-tile--after--ScaleY, 1)) translateY(var(--pf-c-tile--after--TranslateY, 0));\n}\n\n:host(:hover) {\n  --pf-c-tile__title--Color: var(--pf-c-tile--hover__title--Color, var(--pf-global--primary-color--100, #06c));\n  --pf-c-tile__icon--Color: var(--pf-c-tile--hover__icon--Color, var(--pf-global--primary-color--100, #06c));\n  --pf-c-tile--after--BackgroundColor: var(--pf-c-tile--hover--after--BackgroundColor, var(--pf-global--active-color--400, #73bcf7));\n}\n\n:host(:focus) {\n  --pf-c-tile__title--Color: var(--pf-c-tile--focus__title--Color, var(--pf-global--primary-color--100, #06c));\n  --pf-c-tile__icon--Color: var(--pf-c-tile--focus__icon--Color, var(--pf-global--primary-color--100, #06c));\n  --pf-c-tile--after--BackgroundColor: var(--pf-c-tile--focus--after--BackgroundColor, var(--pf-global--active-color--400, #73bcf7));\n}\n\n:host(:active),\n:host([selected]) {\n  --pf-c-tile__title--Color: var(--pf-c-tile--m-selected__title--Color, var(--pf-global--primary-color--100, #06c));\n  --pf-c-tile__icon--Color: var(--pf-c-tile--m-selected__icon--Color, var(--pf-global--primary-color--100, #06c));\n  --pf-c-tile--TranslateY: var(--pf-c-tile--m-selected--TranslateY,\n                            calc(-1 * var(--pf-c-tile--m-selected--after--ScaleY, 2) * var(--pf-c-tile--m-selected--after--Height,\n                            var(--pf-global--BorderWidth--lg, 3px))));\n  --pf-c-tile--Transition: var(--pf-c-tile--m-selected--Transition,\n                          var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1)));\n  --pf-c-tile--after--Height: var(--pf-c-tile--m-selected--after--Height, var(--pf-global--BorderWidth--lg, 3px));\n  --pf-c-tile--after--BackgroundColor: var(--pf-c-tile--m-selected--after--BackgroundColor, var(--pf-global--active-color--100, #06c));\n  --pf-c-tile--after--Transition: var(--pf-c-tile--m-selected--after--Transition,\n                          var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1)));\n  --pf-c-tile--after--ScaleY: var(--pf-c-tile--m-selected--after--ScaleY, 2);\n}\n\n:host([disabled]) {\n  --pf-c-tile--BackgroundColor: var(--pf-c-tile--m-disabled--BackgroundColor, var( --pf-global--disabled-color--300, #f0f0f0));\n  --pf-c-tile__title--Color: var(--pf-c-tile--m-disabled__title--Color, var(--pf-global--disabled-color--100, #6a6e73));\n  --pf-c-tile__body--Color: var(--pf-c-tile--m-disabled__body--Color,  var(--pf-global--disabled-color--100, #6a6e73));\n  --pf-c-tile--before--BorderWidth: 0;\n  --pf-c-tile__icon--Color: var(--pf-c-tile--m-disabled__icon--Color, var(--pf-global--disabled-color--100, #6a6e73));\n  pointer-events: none;\n}\n\n[part="header"] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n[part="title"] {\n  color: var(--pf-c-tile__title--Color, var(--pf-global--Color--100, var(--pf-global--Color--dark-100, #151515)));\n}\n\n[part="body"] {\n  font-size: var(--pf-c-tile__body--FontSize, var(--pf-global--FontSize--xs, 0.75rem));\n  color: var(--pf-c-tile__body--Color, var(--pf-global--Color--100, #151515));\n}\n\n[part="icon"] {\n  --_icon-size: var(--pf-c-tile__icon--FontSize: var(--pf-global--icon--FontSize--md, 1.125rem));\n  --pf-icon--size: var(--_icon-size);\n  margin-right: var(--pf-c-tile__icon--MarginRight, var(--pf-global--spacer--sm, 0.5rem));\n  font-size: var(--_icon-size);\n  color: var(--pf-c-tile__icon--Color, var(--pf-global--Color--100, #151515));\n}\n\n:host([stacked]) [part="header"] {\n  --pf-c-tile__icon--MarginRight: 0;\n  --_icon-size: var(--pf-c-tile__icon--FontSize, var(--pf-c-tile__header--m-stacked__icon--FontSize, var(--pf-global--icon--FontSize--lg, 1.5rem)));\n  flex-direction: column;\n  justify-content: initial;\n}\n\n:host([stacked="lg"]) [part="icon"] {\n  --_icon-size: var(--pf-c-tile__icon--FontSize, var(--pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize, var(--pf-global--icon--FontSize--xl, 3.375rem)));\n}\n\n:host([stacked]) [part="icon"] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: var(--pf-c-tile__header--m-stacked__icon--MarginBottom, var(--pf-global--spacer--xs, 0.25rem));\n}\n\n#body::slotted(:is(h1,h2,h3,h4,h5,h6,p)),\n#title::slotted(:is(h1,h2,h3,h4,h5,h6,p)) {\n  margin-block: 0;\n}\n\n`;
+const styles = css `:host {
+  position: relative;
+  display: inline-grid;
+  padding: 
+    /** Top padding for tile */
+    var(--pf-c-tile--PaddingTop, var(--pf-global--spacer--lg, 1.5rem))
+    /** Right padding for tile */
+    var(--pf-c-tile--PaddingRight, var(--pf-global--spacer--lg, 1.5rem))
+    /** Bottom padding for tile */
+    var(--pf-c-tile--PaddingBottom, var(--pf-global--spacer--lg, 1.5rem))
+    /** Left padding for tile */
+    var(--pf-c-tile--PaddingLeft, var(--pf-global--spacer--lg, 1.5rem));
+  text-align: center;
+  cursor: pointer;
+  /** Background color for tile */
+  background-color: var(--pf-c-tile--BackgroundColor,
+                    var(--pf-global--BackgroundColor--100,
+                    var(--pf-global--BackgroundColor--light-100), #ffffff));
+  grid-template-rows: -webkit-min-content;
+  grid-template-rows: min-content;
+  /** Transition animation for tile */
+  transition: var(--pf-c-tile--Transition, none);
+  /** Vertical translation for tile */
+  transform: translateY(var(--pf-c-tile--TranslateY, 0));
+}
+
+:host::before,
+:host::after {
+  position: absolute;
+  pointer-events: none;
+  content: "";
+}
+
+:host::before {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border: 
+    /** Border width for tile */
+    var(--pf-c-tile--before--BorderWidth, var(--pf-global--BorderWidth--sm, 1px))
+    solid
+    /** Border color for tile */
+    var(--pf-c-tile--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2));
+}
+
+:host::after {
+  right: 0;
+  bottom: 0;
+  left: 0;
+  /** Height of tile bottom accent */
+  height: var(--pf-c-tile--after--Height, var(--pf-global--BorderWidth--lg, 3px));
+  /** Background color of tile bottom accent */
+  background-color: var(--pf-c-tile--after--BackgroundColor, transparent);
+  /** Transition animation for tile bottom accent */
+  transition: var(--pf-c-tile--after--Transition, none);
+  /** Scale Y and translate Y transform for tile bottom accent */
+  transform: scaleY(var(--pf-c-tile--after--ScaleY, 1)) translateY(var(--pf-c-tile--after--TranslateY, 0));
+}
+
+:host(:hover) {
+  --pf-c-tile__title--Color: var(--pf-c-tile--hover__title--Color, var(--pf-global--primary-color--100, #06c));
+  --pf-c-tile__icon--Color: var(--pf-c-tile--hover__icon--Color, var(--pf-global--primary-color--100, #06c));
+  --pf-c-tile--after--BackgroundColor: var(--pf-c-tile--hover--after--BackgroundColor, var(--pf-global--active-color--400, #73bcf7));
+}
+
+:host(:focus) {
+  --pf-c-tile__title--Color: var(--pf-c-tile--focus__title--Color, var(--pf-global--primary-color--100, #06c));
+  --pf-c-tile__icon--Color: var(--pf-c-tile--focus__icon--Color, var(--pf-global--primary-color--100, #06c));
+  --pf-c-tile--after--BackgroundColor: var(--pf-c-tile--focus--after--BackgroundColor, var(--pf-global--active-color--400, #73bcf7));
+}
+
+:host(:active),
+:host([selected]) {
+  --pf-c-tile__title--Color: var(--pf-c-tile--m-selected__title--Color, var(--pf-global--primary-color--100, #06c));
+  --pf-c-tile__icon--Color: var(--pf-c-tile--m-selected__icon--Color, var(--pf-global--primary-color--100, #06c));
+  --pf-c-tile--TranslateY: var(--pf-c-tile--m-selected--TranslateY,
+                            calc(-1 * var(--pf-c-tile--m-selected--after--ScaleY, 2) * var(--pf-c-tile--m-selected--after--Height,
+                            var(--pf-global--BorderWidth--lg, 3px))));
+  --pf-c-tile--Transition: var(--pf-c-tile--m-selected--Transition,
+                          var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1)));
+  --pf-c-tile--after--Height: var(--pf-c-tile--m-selected--after--Height, var(--pf-global--BorderWidth--lg, 3px));
+  --pf-c-tile--after--BackgroundColor: var(--pf-c-tile--m-selected--after--BackgroundColor, var(--pf-global--active-color--100, #06c));
+  --pf-c-tile--after--Transition: var(--pf-c-tile--m-selected--after--Transition,
+                          var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1)));
+  --pf-c-tile--after--ScaleY: var(--pf-c-tile--m-selected--after--ScaleY, 2);
+}
+
+:host([disabled]) {
+  --pf-c-tile--BackgroundColor: var(--pf-c-tile--m-disabled--BackgroundColor, var( --pf-global--disabled-color--300, #f0f0f0));
+  --pf-c-tile__title--Color: var(--pf-c-tile--m-disabled__title--Color, var(--pf-global--disabled-color--100, #6a6e73));
+  --pf-c-tile__body--Color: var(--pf-c-tile--m-disabled__body--Color,  var(--pf-global--disabled-color--100, #6a6e73));
+  --pf-c-tile--before--BorderWidth: 0;
+  --pf-c-tile__icon--Color: var(--pf-c-tile--m-disabled__icon--Color, var(--pf-global--disabled-color--100, #6a6e73));
+  pointer-events: none;
+}
+
+[part="header"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+[part="title"] {
+  /** Color for tile title */
+  color: var(--pf-c-tile__title--Color, var(--pf-global--Color--100, var(--pf-global--Color--dark-100, #151515)));
+}
+
+[part="body"] {
+  font-size: var(--pf-c-tile__body--FontSize, var(--pf-global--FontSize--xs, 0.75rem));
+  color: var(--pf-c-tile__body--Color, var(--pf-global--Color--100, #151515));
+}
+
+[part="icon"] {
+  /** Font size for tile icon */
+  --_icon-size: var(--pf-c-tile__icon--FontSize, var(--pf-global--icon--FontSize--md, 1.125rem));
+  --pf-icon--size: var(--_icon-size);
+  /** Right margin for tile icon */
+  margin-right: var(--pf-c-tile__icon--MarginRight, var(--pf-global--spacer--sm, 0.5rem));
+  font-size: var(--_icon-size);
+  /** Color for tile icon */
+  color: var(--pf-c-tile__icon--Color, var(--pf-global--Color--100, #151515));
+}
+
+:host([stacked]) [part="header"] {
+  --pf-c-tile__icon--MarginRight: 0;
+  --_icon-size: var(--pf-c-tile__icon--FontSize, var(--pf-c-tile__header--m-stacked__icon--FontSize, var(--pf-global--icon--FontSize--lg, 1.5rem)));
+  flex-direction: column;
+  justify-content: initial;
+}
+
+:host([stacked="lg"]) [part="icon"] {
+  --_icon-size: var(--pf-c-tile__icon--FontSize, var(--pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize, var(--pf-global--icon--FontSize--xl, 3.375rem)));
+}
+
+:host([stacked]) [part="icon"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /** Bottom margin for stacked tile icon */
+  margin-bottom: var(--pf-c-tile__header--m-stacked__icon--MarginBottom, var(--pf-global--spacer--xs, 0.25rem));
+}
+
+#body::slotted(:is(h1,h2,h3,h4,h5,h6,p)),
+#title::slotted(:is(h1,h2,h3,h4,h5,h6,p)) {
+  margin-block: 0;
+}
+
+`;
 let PfTile = class PfTile extends LitElement {
     constructor() {
         super(...arguments);
@@ -12,21 +160,27 @@ let PfTile = class PfTile extends LitElement {
     render() {
         return html `
       <div part="header">
+        <!-- container for the icon -->
         <div part="icon">
+          <!-- Icon expects a \`<pf-icon>\` or \`<svg>\` -->
           <slot id="icon" name="icon"></slot>
         </div>
+        <!-- container for the title -->
         <div part="title">
+          <!-- the title of the tile should be a heading -->
           <slot id="title" name="title"></slot>
         </div>
       </div>
+      <!-- container for the body content -->
       <div part="body">
+        <!-- The content should be a paragraph -->
         <slot id="body"></slot>
       </div>
     `;
     }
 };
 PfTile.styles = [styles];
-PfTile.version = "4.1.0";
+PfTile.version = "4.3.0";
 __decorate([
     property({ reflect: true, type: Boolean })
 ], PfTile.prototype, "selected", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"pf-tile.js","sourceRoot":"","sources":["pf-tile.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;;;AA2C/C,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAGuC,aAAQ,GAAG,KAAK,CAAC;;IAIpD,MAAM;QACb,OAAO,IAAI,CAAA;;;;;;;;;;;;KAYV,CAAC;IACJ,CAAC;;AApBe,aAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AAEP;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAkB;AAEhC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAuB;AALxC,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport styles from './pf-tile.css';\n\nexport type StackedSize = (\n  | 'md'\n  | 'lg'\n);\n\n/**\n * A **tile** component is a form of selection that can be used in place of a\n * radio button and is commonly used in forms. A tile appears visually similar to a\n * [selectable card](../card/). However, tiles are used specifically when the user is selecting\n * a static option, whereas a selectable card triggers an action or opens a quickstart\n * or sidebar to provide additional information.\n * @slot icon           - Icon expects a `<pf-icon>` or `<svg>`\n * @slot title          - the title of the tile should be a heading\n * @slot                - The content should be a paragraph\n * @csspart icon        - container for the icon\n * @csspart title       - container for the title\n * @csspart body        - container for the body content\n * @attr {'boolean'} selected       - selected variant\n * @attr {'md'|'lg'|null} stacked   - stacked variant\n * @cssprop   {<length>} [--pf-c-tile--PaddingTop=1.5rem]\n * @cssprop   {<length>} [--pf-c-tile--PaddingRight=1.5rem]\n * @cssprop   {<length>} [--pf-c-tile--PaddingBottom=1.5rem]\n * @cssprop   {<length>} [--pf-c-tile--PaddingLeft=1.5rem]\n * @cssprop   {<color>} [--pf-c-tile--BackgroundColor=#FFFFFF]\n * @cssprop   [--pf-c-tile--Transition=none]\n * @cssprop   [--pf-c-tile--TranslateY=0]\n * @cssprop   {<length>} [--pf-c-tile--before--BorderWidth=1px]\n * @cssprop   {<color>} [--pf-c-tile--before--BorderColor=#444548]\n * @cssprop   {<length>} [--pf-c-tile--after--Height=3px]\n * @cssprop   {<color>} [--pf-c-tile--after--BackgroundColor=transparent]\n * @cssprop   [--pf-c-tile--after--Transition=none]\n * @cssprop   [--pf-c-tile--after--ScaleY=1]\n * @cssprop   {<color>} [--pf-c-tile__title--Color=#06c]\n * @cssprop   {<color>} [--pf-c-tile__icon--Color=#06c]\n * @cssprop   {<length>} [--pf-c-tile__icon--MarginRight=0]\n * @cssprop   {<length>} [--pf-c-tile__icon--FontSize=1.5rem]\n * @cssprop   {<length>} [--pf-c-tile__header--m-stacked__icon--MarginBottom=0.25rem]\n */\n@customElement('pf-tile')\nexport class PfTile extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  @property({ reflect: true, type: Boolean }) selected = false;\n\n  @property({ reflect: true }) stacked?: StackedSize;\n\n  override render(): TemplateResult<1> {\n    return html`\n      <div part=\"header\">\n        <div part=\"icon\">\n          <slot id=\"icon\" name=\"icon\"></slot>\n        </div>\n        <div part=\"title\">\n          <slot id=\"title\" name=\"title\"></slot>\n        </div>\n      </div>\n      <div part=\"body\">\n        <slot id=\"body\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tile': PfTile;\n  }\n}\n"]}
+{"version":3,"file":"pf-tile.js","sourceRoot":"","sources":["pf-tile.ts"],"names":[],"mappings":";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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoB/C,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAGuC,aAAQ,GAAG,KAAK,CAAC;;IAIpD,MAAM;QACb,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;KAkBV,CAAC;IACJ,CAAC;;AA1Be,aAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AAEP;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAkB;AAEhC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAuB;AALxC,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport styles from './pf-tile.css';\n\nexport type StackedSize = (\n  | 'md'\n  | 'lg'\n);\n\n/**\n * A **tile** component is a form of selection that can be used in place of a\n * radio button and is commonly used in forms. A tile appears visually similar to a\n * [selectable card](../card/). However, tiles are used specifically when the user is selecting\n * a static option, whereas a selectable card triggers an action or opens a quickstart\n * or sidebar to provide additional information.\n * @alias Tile\n * @attr {'boolean'} selected       - selected variant\n * @attr {'md'|'lg'|null} stacked   - stacked variant\n */\n@customElement('pf-tile')\nexport class PfTile extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  @property({ reflect: true, type: Boolean }) selected = false;\n\n  @property({ reflect: true }) stacked?: StackedSize;\n\n  override render(): TemplateResult<1> {\n    return html`\n      <div part=\"header\">\n        <!-- container for the icon -->\n        <div part=\"icon\">\n          <!-- Icon expects a \\`<pf-icon>\\` or \\`<svg>\\` -->\n          <slot id=\"icon\" name=\"icon\"></slot>\n        </div>\n        <!-- container for the title -->\n        <div part=\"title\">\n          <!-- the title of the tile should be a heading -->\n          <slot id=\"title\" name=\"title\"></slot>\n        </div>\n      </div>\n      <!-- container for the body content -->\n      <div part=\"body\">\n        <!-- The content should be a paragraph -->\n        <slot id=\"body\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tile': PfTile;\n  }\n}\n"]}

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

@@ -3,6 +3,7 @@ import { LitElement } from 'lit';
 import { type DateTimeFormat } from '@patternfly/pfe-core/controllers/timestamp-controller.js';
 /**
  * A **timestamp** provides consistent formats for displaying date and time values.
+ * @alias Timestamp
  */
 export declare class PfTimestamp extends LitElement {
     #private;

package/pf-timestamp/pf-timestamp.js

@@ -5,7 +5,15 @@ import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { TimestampController, } from '@patternfly/pfe-core/controllers/timestamp-controller.js';
 import { css } from "lit";
-const style = css `:host {\n  display: inline;\n}\n\ntime {\n  text-decoration: var(--_timestamp-text-decoration, none);\n  text-underline-offset: var(--_timestamp-text-underline-offset, initial);\n}\n`;
+const style = css `:host {
+  display: inline;
+}
+
+time {
+  text-decoration: var(--_timestamp-text-decoration, none);
+  text-underline-offset: var(--_timestamp-text-underline-offset, initial);
+}
+`;
 const BooleanStringConverter = {
     fromAttribute(value) {
         return !value || value === 'true';
@@ -47,7 +55,7 @@ let PfTimestamp = class PfTimestamp extends LitElement {
 };
 _PfTimestamp_timestamp = new WeakMap();
 PfTimestamp.styles = [style];
-PfTimestamp.version = "4.1.0";
+PfTimestamp.version = "4.3.0";
 __decorate([
     property({ reflect: true, attribute: 'date-format' })
 ], PfTimestamp.prototype, "dateFormat", void 0);

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

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

package/pf-tooltip/pf-tooltip.css

@@ -10,6 +10,7 @@
   display: inline-flex;
   position: relative;
   max-width: 100%;
+  /** Tooltip arrow width */
   --_floating-arrow-size: var(--pf-c-tooltip__arrow--Width, 0.5rem);
 }
 
@@ -21,6 +22,7 @@
 #tooltip {
   --_timestamp-text-decoration: none;
   --_timestamp-text-underline-offset: initial;
+  user-select: none;
   display: block;
   opacity: 0;
   pointer-events: none;
@@ -34,12 +36,16 @@
   top: 0;
   left: 0;
   will-change: opacity;
+  /** Sets the font color for the tooltip content */
   line-height: var(--pf-c-tooltip--line-height, 1.5);
+  /** Maximum width for the tooltip */
   max-width: var(--pf-c-tooltip--MaxWidth, 18.75rem);
+  /** Box shadow for the tooltip */
   box-shadow: var(--pf-c-tooltip--BoxShadow,
     var(--pf-global--BoxShadow--md,
       0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12),
       0 0 0.25rem 0 rgba(3, 3, 3, 0.06)));
+  /** Tooltip padding (top, right, bottom, left) */
   padding:
     var(--pf-c-tooltip__content--PaddingTop,
       var(--pf-global--spacer--sm, 0.5rem))
@@ -49,10 +55,13 @@
       var(--pf-global--spacer--sm, 0.5rem))
     var(--pf-c-tooltip__content--PaddingLeft,
       var(--pf-global--spacer--sm, 0.5rem));
+  /** Font size for the tooltip content */
   font-size: var(--pf-c-tooltip__content--FontSize,
     var(--pf-global--FontSize--sm, 0.875rem));
+  /** Sets the font color for the tooltip content */
   color: var(--pf-c-tooltip__content--Color,
     var(--pf-global--Color--light-100, #ffffff));
+  /** Sets the background color for the tooltip content */
   background-color: var(--pf-c-tooltip__content--BackgroundColor,
     var(--pf-global--BackgroundColor--dark-100, #151515));
 }
@@ -70,6 +79,7 @@
 
 .open #tooltip {
   opacity: 1;
+  user-select: initial;
 }
 
 /* LEFT */

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

@@ -5,85 +5,7 @@ import { type Placement } from '@patternfly/pfe-core/controllers/floating-dom-co
  * A **tooltip** is in-app messaging used to identify elements on a page with short,
  * clarifying text.
  * @summary Toggle the visibility of helpful or contextual information.
- * @slot
- *       This slot wraps around the element that should be used to invoke the tooltip content to display.
- *       Typically this would be an icon, button, or other small sized element.
- * @slot content
- *       This slot renders the content that will be displayed inside of the tooltip.
- *       Typically this would include a string of text without any additional elements.
- *       This element is wrapped with a div inside of the component to give it the stylings and background colors.
- * @cssprop     {<color>} [--pf-c-tooltip__content--BackgroundColor=#1b1d21]
- *              Sets the background color for the tooltip content.
- *
- * @cssprop     {<color>} [--pf-c-tooltip__content--Color=#e0e0e0]
- *              Sets the font color for the tooltip content.
- *
- * @cssprop     {<number>} [--pf-c-tooltip--line-height=1.5]
- *              Sets the font color for the tooltip content.
- *
- * @cssprop     {<length>} [--pf-c-tooltip--MaxWidth=18.75rem]
- *              Maximum width for the tooltip.
- *
- * @cssprop     [--pf-c-tooltip--BoxShadow=0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)]
- *              Box shadow for the tooltip.
- *
- * @cssprop     {<length>} [--pf-c-tooltip__content--PaddingTop=0.5rem]
- *              Top padding for the tooltip.
- *
- * @cssprop     {<length>} [--pf-c-tooltip__content--PaddingRight=0.5rem]
- *              Right padding for the tooltip.
- *
- * @cssprop     {<length>} [--pf-c-tooltip__content--PaddingBottom=0.5rem]
- *              Bottom padding for the tooltip.
- *
- * @cssprop     {<length>} [--pf-c-tooltip__content--PaddingLeft=0.5rem]
- *              Left Padding for the tooltip.
- *
- * @cssprop     [--pf-c-tooltip__content--FontSize=0.875rem]
- *              Font size for the tooltip content.
- *
- * @cssprop     {<length>} [--pf-c-tooltip__arrow--Width=0.5rem]
- *              Tooltip arrow width.
- *
- * @cssprop     {<length>} [--pf-c-tooltip__arrow--Height=0.5rem]
- *              Tooltip arrow height.
- *
- * @cssprop     [--pf-c-tooltip__arrow--m-top--TranslateX=-50]
- *              Positions the tooltip arrow along the x axis for `top` positioned arrows.
- *
- * @cssprop     [--pf-c-tooltip__arrow--m-top--TranslateY=50]
- *              Positions the tooltip arrow along the y axis for `top` positioned arrows.
- *
- * @cssprop     [--pf-c-tooltip__arrow--m-top--Rotate=45deg]
- *              Rotates the tooltip arrow based on degrees of movement for `top` positioned arrows.
- *
- * @cssprop     [--pf-c-tooltip__arrow--m-right--TranslateX=-50]
- *              Positions the tooltip arrow along the x axis for `right` positioned arrows.
- *
- * @cssprop     [--pf-c-tooltip__arrow--m-right--TranslateY=-50]
- *              Positions the tooltip arrow along the y axis for `right` positioned arrows.
- *
- * @cssprop     [--pf-c-tooltip__arrow--m-right--Rotate=45deg]
- *              Rotates the tooltip arrow based on degrees of movement for `right` positioned arrows.
- *
- * @cssprop     [--pf-c-tooltip__arrow--m-bottom--TranslateX=-50]
- *              Positions the tooltip arrow along the x axis for `bottom` positioned arrows.
- *
- * @cssprop     [--pf-c-tooltip__arrow--m-bottom--TranslateY=-50]
- *              Positions the tooltip arrow along the y axis for `bottom` positioned arrows.
- *
- * @cssprop     [--pf-c-tooltip__arrow--m-bottom--Rotate=45deg]
- *              Rotates the tooltip arrow based on degrees of movement for `bottom` positioned arrows.
- *
- * @cssprop     [--pf-c-tooltip__arrow--m-left--TranslateX=50]
- *              Positions the tooltip arrow along the x axis for `left` positioned arrows.
- *
- * @cssprop     [--pf-c-tooltip__arrow--m-left--TranslateY=-50]
- *              Positions the tooltip arrow along the y axis for `left` positioned arrows.
- *
- * @cssprop     [--pf-c-tooltip__arrow--m-left--Rotate=45deg]
- *              Rotates the tooltip arrow based on degrees of movement for `left` positioned arrows.
- *
+ * @alias Tooltip
  */
 export declare class PfTooltip extends LitElement {
     #private;