@patternfly/elements 2.0.0 → 2.0.1

package/custom-elements.json

@@ -560,7 +560,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Accordions toggle the visibility of sections of content.\nThey feature panels that consist of a section text label and a caret icon that collapses or expands to reveal more information.",
+          "description": "An accordion is an interactive container that expands and collapses to hide or reveal nested content. It takes advantage of progressive disclosure to help reduce page scrolling, by allowing users to choose whether they want to show or hide more detailed information as needed.",
           "name": "PfAccordion",
           "cssProperties": [
             {
@@ -1286,7 +1286,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Avatar is an element for displaying a user's avatar image.",
+          "description": "An avatar is a visual used to represent a user. It may contain an image or a placeholder graphic.",
           "name": "PfAvatar",
           "members": [
             {
@@ -1652,7 +1652,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Buttons allow users to perform an action when triggered. They feature a text\nlabel, a background or a border, and icons.",
+          "description": "A button is a box area or text that communicates and triggers user actions when\nclicked or selected. Buttons can be used to communicate and immediately trigger\nactions a user can take in an application, like submitting a form, canceling a\nprocess, or creating a new object. Buttons can also be used to take a user to a\nnew location, like another page inside of a web application, or an external site\nsuch as help or documentation..",
           "name": "PfButton",
           "cssProperties": [
             {
@@ -2291,21 +2291,6 @@
               "default": "transparent"
             }
           ],
-          "cssParts": [
-            {
-              "description": "Container for the state slot.",
-              "name": "state"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Contains the button's icon or state indicator, e.g. a spinner.",
-              "name": "icon"
-            },
-            {
-              "description": "Must contain exactly one `<button>` element as the only content not assigned to a named slot."
-            }
-          ],
           "members": [
             {
               "kind": "field",
@@ -2736,7 +2721,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "This element creates a header, body, and footer region in which to place\ncontent or other components.",
+          "description": "A card is a square or rectangular container that can contain any kind of content.\nCards symbolize units of information, and each one acts as an entry point for\nusers to access more details. For example, in dashboards and catalog views, cards\nfunction as a preview of a detailed page. Cards may also be used in data displays\nlike card views, or for positioning content on a page.",
           "name": "PfCard",
           "cssProperties": [
             {
@@ -3040,7 +3025,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Clipboard Copy",
+          "description": "The clipboard copy component allows users to quickly and easily copy content to their clipboard.",
           "name": "PfClipboardCopy",
           "slots": [
             {
@@ -3424,7 +3409,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A code block is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard.",
           "name": "PfCodeBlock",
           "cssProperties": [
             {
@@ -3606,7 +3591,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "PatternFly Icon component lazy-loads icons and allows custom icon sets",
+          "description": "An icon component is a container that allows for icons of varying dimensions to\nseamlessly replace each other without shifting surrounding content.",
           "name": "PfIcon",
           "cssParts": [
             {
@@ -3995,10 +3980,13 @@
           "members": [
             {
               "kind": "field",
-              "name": "link",
+              "name": "shadowRootOptions",
               "type": {
-                "text": "HTMLAnchorElement"
-              }
+                "text": "ShadowRootInit"
+              },
+              "static": true,
+              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }",
+              "readonly": true
             },
             {
               "kind": "field",
@@ -4007,6 +3995,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Whether this item is active.",
               "attribute": "active",
               "reflects": true
             },
@@ -4016,6 +4005,7 @@
               "type": {
                 "text": "string | undefined"
               },
+              "description": "hypertext reference for this link",
               "attribute": "href",
               "reflects": true
             },
@@ -4025,15 +4015,6 @@
               "privacy": "private",
               "default": "new InternalsController(this, {\n    role: 'listitem'\n  })"
             },
-            {
-              "kind": "method",
-              "name": "focus",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
             {
               "kind": "method",
               "name": "activeChanged",
@@ -4071,6 +4052,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Whether this item is active.",
               "fieldName": "active"
             },
             {
@@ -4078,6 +4060,7 @@
               "type": {
                 "text": "string | undefined"
               },
+              "description": "hypertext reference for this link",
               "fieldName": "href"
             }
           ],
@@ -4162,7 +4145,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "**Jump links** allow users to navigate to sections within a page.",
+          "description": "Jump links allow users to navigate to sections within a page.",
           "name": "PfJumpLinks",
           "cssProperties": [
             {
@@ -4291,13 +4274,6 @@
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "_items",
-              "type": {
-                "text": "PfJumpLinksItem[]"
-              }
-            },
             {
               "kind": "field",
               "name": "expandable",
@@ -4305,6 +4281,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Whether the element features a disclosure widget around the nav items",
               "attribute": "expandable",
               "reflects": true
             },
@@ -4315,6 +4292,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Whether the expandable element's disclosure widget is expanded",
               "attribute": "expanded",
               "reflects": true
             },
@@ -4325,6 +4303,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Whether the layout of children is vertical or horizontal.",
               "attribute": "vertical",
               "reflects": true
             },
@@ -4335,6 +4314,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Whether to center children.",
               "attribute": "centered",
               "reflects": true
             },
@@ -4345,6 +4325,7 @@
                 "text": "number"
               },
               "default": "0",
+              "description": "Offset to add to the scroll position, potentially for a masthead which content scrolls under.",
               "attribute": "offset"
             },
             {
@@ -4353,19 +4334,12 @@
               "type": {
                 "text": "string | undefined"
               },
+              "description": "Label to add to nav element.",
               "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "#items",
-              "privacy": "private",
-              "type": {
-                "text": "PfJumpLinksItem[]"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "#init",
+              "name": "#initialized",
               "privacy": "private",
               "type": {
                 "text": "boolean"
@@ -4386,7 +4360,7 @@
             },
             {
               "kind": "method",
-              "name": "#onSlotchange",
+              "name": "#updateItems",
               "privacy": "private"
             },
             {
@@ -4432,6 +4406,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Whether the element features a disclosure widget around the nav items",
               "fieldName": "expandable"
             },
             {
@@ -4440,6 +4415,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Whether the expandable element's disclosure widget is expanded",
               "fieldName": "expanded"
             },
             {
@@ -4448,6 +4424,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Whether the layout of children is vertical or horizontal.",
               "fieldName": "vertical"
             },
             {
@@ -4456,6 +4433,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Whether to center children.",
               "fieldName": "centered"
             },
             {
@@ -4464,6 +4442,7 @@
                 "text": "number"
               },
               "default": "0",
+              "description": "Offset to add to the scroll position, potentially for a masthead which content scrolls under.",
               "fieldName": "offset"
             },
             {
@@ -4471,6 +4450,7 @@
               "type": {
                 "text": "string | undefined"
               },
+              "description": "Label to add to nav element.",
               "fieldName": "label"
             }
           ],
@@ -4521,7 +4501,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Labels allow users to display meta data in a stylized form.",
+          "description": "The label component allows users to add specific element captions for user\nclarity and convenience.",
           "name": "PfLabel",
           "cssProperties": [
             {
@@ -5148,7 +5128,7 @@
         },
         {
           "kind": "class",
-          "description": "Modals display information in a window or help a user focus on a task without navigating them away from the page.\nA user can’t perform other actions until the modal is dismissed.",
+          "description": "A modal displays important information to a user without requiring them to navigate\nto a new page.",
           "name": "PfModal",
           "cssProperties": [
             {
@@ -5663,7 +5643,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Panel",
+          "description": "The panel component is a container that supports flexible content layouts. It can\nbe used to house other components such as fields, forms, videos, buttons, and more.\nThe panel should not be confused with the [drawer](https://www.patternfly.org/v4/components/drawer/design-guidelines/)\ncomponent, which allows you to surface information via a collapsable container.",
           "name": "PfPanel",
           "slots": [
             {
@@ -5928,7 +5908,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A **progress stepper** displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.",
+          "description": "A progress stepper displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.",
           "name": "PfProgressStepper",
           "members": [
             {
@@ -6076,7 +6056,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A spinner is used to indicate to users that an action is in progress. For actions\nthat may take a long time, use a progress bar instead.",
           "name": "PfSpinner",
           "cssProperties": [
             {
@@ -6263,7 +6243,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Switch",
+          "description": "A switch toggles the state of a setting (between on and off). Switches and\ncheckboxes can often be used interchangeably, but the switch provides a more\nexplicit, visible representation on a setting.",
           "name": "PfSwitch",
           "cssProperties": [
             {
@@ -6799,7 +6779,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "PfTab",
+          "description": "Tab",
           "name": "PfTab",
           "cssProperties": [
             {
@@ -7190,7 +7170,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Tabs allow users to navigate between views within the same page or context. Variants include\nhorizontal, vertical, inset, and filled. Most tab variations are available as open (default) or\nbox style tabs. Box style tabs also feature a light and dark variation.",
+          "description": "Tabs allow users to navigate between views within the same page or context.",
           "name": "PfTabs",
           "cssProperties": [
             {
@@ -7669,7 +7649,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Tile",
+          "description": "A tile component is a form of selection that can be used in place of a\nradio 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\na static option, whereas a selectable card triggers an action or opens a quickstart\nor sidebar to provide additional information.",
           "name": "PfTile",
           "cssProperties": [
             {
@@ -7886,7 +7866,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A timestamp provides consistent formats for displaying date and time values.",
           "name": "PfTimestamp",
           "members": [
             {
@@ -8097,7 +8077,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Patternfly tooltip\n\nA Tooltip is a floating text area triggered by a user that provides helpful or contextual information.",
+          "description": "A tooltip is in-app messaging used to identify elements on a page with short,\nclarifying text.",
           "name": "PfTooltip",
           "cssProperties": [
             {
@@ -8317,7 +8297,7 @@
             "name": "BaseTooltip",
             "module": "/pf-tooltip/BaseTooltip.js"
           },
-          "summary": "Toggle the visiblity of helpful or contextual information.",
+          "summary": "Toggle the visibility of helpful or contextual information.",
           "tagName": "pf-tooltip",
           "customElement": true,
           "demos": [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/elements",
   "license": "MIT",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "PatternFly Elements",
   "customElements": "custom-elements.json",
   "type": "module",
@@ -116,7 +116,7 @@
     "Wes Ruvalcaba"
   ],
   "dependencies": {
-    "@patternfly/pfe-core": "^2.0.0",
+    "@patternfly/pfe-core": "^2.1.0",
     "lit": "2.6.1",
     "tslib": "^2.4.1"
   }

package/pf-accordion/pf-accordion.d.ts

@@ -2,8 +2,7 @@ import { BaseAccordion } from './BaseAccordion.js';
 export * from './pf-accordion-header.js';
 export * from './pf-accordion-panel.js';
 /**
- * Accordions toggle the visibility of sections of content.
- * They feature panels that consist of a section text label and a caret icon that collapses or expands to reveal more information.
+ * An accordion is an interactive container that expands and collapses to hide or reveal nested content. It takes advantage of progressive disclosure to help reduce page scrolling, by allowing users to choose whether they want to show or hide more detailed information as needed.
  *
  * @summary Toggle the visibility of sections of content
  *

package/pf-accordion/pf-accordion.js

@@ -9,8 +9,7 @@ export * from './pf-accordion-panel.js';
 import { css } from "lit";
 const style = css `:host{--accordion__bordered--Color:var(--rh-color-black-300, #d2d2d2);color:var(--pf-global--Color--100,#151515);background-color:var(--pf-global--BackgroundColor--100,#fff)}:host([bordered]) ::slotted(pf-accordion-header:first-child),:host([large]) ::slotted(pf-accordion-header:first-child){display:block;border-top:1px solid var(--accordion__bordered--Color);border-bottom:1px solid var(--accordion__bordered--Color)}:host([bordered]) ::slotted(pf-accordion-header:not(:first-child)),:host([large]) ::slotted(pf-accordion-header:not(:first-child)){display:block;border-bottom:1px solid var(--accordion__bordered--Color)}:host([bordered]) ::slotted(pf-accordion-header:is([expanded])),:host([large]) ::slotted(pf-accordion-header:is([expanded])){display:block;border-bottom:0}:host([bordered]) ::slotted(pf-accordion-panel:is([expanded])),:host([large]) ::slotted(pf-accordion-panel:is([expanded])){display:block;border-bottom:1px solid var(--accordion__bordered--Color)}`;
 /**
- * Accordions toggle the visibility of sections of content.
- * They feature panels that consist of a section text label and a caret icon that collapses or expands to reveal more information.
+ * An accordion is an interactive container that expands and collapses to hide or reveal nested content. It takes advantage of progressive disclosure to help reduce page scrolling, by allowing users to choose whether they want to show or hide more detailed information as needed.
  *
  * @summary Toggle the visibility of sections of content
  *

package/pf-accordion/pf-accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-accordion.js","sourceRoot":"","sources":["pf-accordion.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;;;AAIxC;;;;;;;;;;;;;;;;GAgBG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,aAAa;IAAvC;;QAGL,oEAAoE;QACxB,WAAM,GAAG,KAAK,CAAC;QAE3D,oDAAoD;QACR,aAAQ,GAAG,KAAK,CAAC;QAE7D,iDAAiD;QAIL,UAAK,GAAG,KAAK,CAAC;QAEd,UAAK,GAAG,KAAK,CAAC;IAiB5D,CAAC;IAfU,KAAK,CAAC,MAAM,CAAC,KAAa,EAAE,eAA+B;QAClE,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE;YAChB,OAAO;SACR;QAED,MAAM,UAAU,GAA+B,IAAI,CAAC,OAAO,CAAC;QAE5D,0DAA0D;QAC1D,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,MAAM,OAAO,CAAC,GAAG,CAAC;gBAChB,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;aAC9E,CAAC,CAAC;SACJ;QACD,MAAM,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC;IAC7C,CAAC;;AA9Be,kBAAM,GAAG,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAGd;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CAAgB;AAGf;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAkB;AAMjB;IAH3C,QAAQ,CAAC,SAAS,YAAY;QAC7B,CAAC,GAAG,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAC3F,CAAC,CAAC;IACD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAe;AAEd;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAe;AAf/C,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAgCvB;SAhCY,WAAW","sourcesContent":["import { observed } from '@patternfly/pfe-core/decorators.js';\nimport { property } from 'lit/decorators/property.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport { BaseAccordion } from './BaseAccordion.js';\nimport { BaseAccordionHeader } from './BaseAccordionHeader.js';\n\nexport * from './pf-accordion-header.js';\nexport * from './pf-accordion-panel.js';\n\nimport style from './pf-accordion.css';\n\n/**\n * Accordions toggle the visibility of sections of content.\n * They feature panels that consist of a section text label and a caret icon that collapses or expands to reveal more information.\n *\n * @summary Toggle the visibility of sections of content\n *\n * @fires {AccordionExpandEvent} expand - when a panel expands\n * @fires {AccordionCollapseEvent} collapse - when a panel collapses\n *\n *\n * @slot\n *       Place the `pf-accordion-header` and `pf-accordion-panel` elements here.\n *\n * @cssproperty {<color>} --accordion__bordered--Color\n *              Color for the borders between accordion headers when using bordered or large attributes\n *              {@default `var(--rh-color-black-300, #d2d2d2)`}\n */\n@customElement('pf-accordion')\nexport class PfAccordion extends BaseAccordion {\n  static readonly styles = [...BaseAccordion.styles, style];\n\n  /** When true, only one accordion panel may be expanded at a time */\n  @property({ reflect: true, type: Boolean }) single = false;\n\n  /** Whether to apply the `bordered` style variant */\n  @property({ type: Boolean, reflect: true }) bordered = false;\n\n  /** Whether to apply the `large` style variant */\n  @observed(function largeChanged(this: PfAccordion) {\n    [...this.headers, ...this.panels].forEach(el => el.toggleAttribute('large', this.large));\n  })\n  @property({ type: Boolean, reflect: true }) large = false;\n\n  @property({ type: Boolean, reflect: true }) fixed = false;\n\n  override async expand(index: number, parentAccordion?: BaseAccordion) {\n    if (index === -1) {\n      return;\n    }\n\n    const allHeaders: Array<BaseAccordionHeader> = this.headers;\n\n    // Get all the headers and capture the item by index value\n    if (this.single) {\n      await Promise.all([\n        ...allHeaders.map((header, index) => header.expanded && this.collapse(index)),\n      ]);\n    }\n    await super.expand(index, parentAccordion);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-accordion': PfAccordion;\n  }\n}\n"]}
+{"version":3,"file":"pf-accordion.js","sourceRoot":"","sources":["pf-accordion.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;;;AAIxC;;;;;;;;;;;;;;;GAeG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,aAAa;IAAvC;;QAGL,oEAAoE;QACxB,WAAM,GAAG,KAAK,CAAC;QAE3D,oDAAoD;QACR,aAAQ,GAAG,KAAK,CAAC;QAE7D,iDAAiD;QAIL,UAAK,GAAG,KAAK,CAAC;QAEd,UAAK,GAAG,KAAK,CAAC;IAiB5D,CAAC;IAfU,KAAK,CAAC,MAAM,CAAC,KAAa,EAAE,eAA+B;QAClE,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE;YAChB,OAAO;SACR;QAED,MAAM,UAAU,GAA+B,IAAI,CAAC,OAAO,CAAC;QAE5D,0DAA0D;QAC1D,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,MAAM,OAAO,CAAC,GAAG,CAAC;gBAChB,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;aAC9E,CAAC,CAAC;SACJ;QACD,MAAM,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC;IAC7C,CAAC;;AA9Be,kBAAM,GAAG,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAGd;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CAAgB;AAGf;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAkB;AAMjB;IAH3C,QAAQ,CAAC,SAAS,YAAY;QAC7B,CAAC,GAAG,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAC3F,CAAC,CAAC;IACD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAe;AAEd;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAe;AAf/C,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAgCvB;SAhCY,WAAW","sourcesContent":["import { observed } from '@patternfly/pfe-core/decorators.js';\nimport { property } from 'lit/decorators/property.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport { BaseAccordion } from './BaseAccordion.js';\nimport { BaseAccordionHeader } from './BaseAccordionHeader.js';\n\nexport * from './pf-accordion-header.js';\nexport * from './pf-accordion-panel.js';\n\nimport style from './pf-accordion.css';\n\n/**\n * An accordion is an interactive container that expands and collapses to hide or reveal nested content. It takes advantage of progressive disclosure to help reduce page scrolling, by allowing users to choose whether they want to show or hide more detailed information as needed.\n *\n * @summary Toggle the visibility of sections of content\n *\n * @fires {AccordionExpandEvent} expand - when a panel expands\n * @fires {AccordionCollapseEvent} collapse - when a panel collapses\n *\n *\n * @slot\n *       Place the `pf-accordion-header` and `pf-accordion-panel` elements here.\n *\n * @cssproperty {<color>} --accordion__bordered--Color\n *              Color for the borders between accordion headers when using bordered or large attributes\n *              {@default `var(--rh-color-black-300, #d2d2d2)`}\n */\n@customElement('pf-accordion')\nexport class PfAccordion extends BaseAccordion {\n  static readonly styles = [...BaseAccordion.styles, style];\n\n  /** When true, only one accordion panel may be expanded at a time */\n  @property({ reflect: true, type: Boolean }) single = false;\n\n  /** Whether to apply the `bordered` style variant */\n  @property({ type: Boolean, reflect: true }) bordered = false;\n\n  /** Whether to apply the `large` style variant */\n  @observed(function largeChanged(this: PfAccordion) {\n    [...this.headers, ...this.panels].forEach(el => el.toggleAttribute('large', this.large));\n  })\n  @property({ type: Boolean, reflect: true }) large = false;\n\n  @property({ type: Boolean, reflect: true }) fixed = false;\n\n  override async expand(index: number, parentAccordion?: BaseAccordion) {\n    if (index === -1) {\n      return;\n    }\n\n    const allHeaders: Array<BaseAccordionHeader> = this.headers;\n\n    // Get all the headers and capture the item by index value\n    if (this.single) {\n      await Promise.all([\n        ...allHeaders.map((header, index) => header.expanded && this.collapse(index)),\n      ]);\n    }\n    await super.expand(index, parentAccordion);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-accordion': PfAccordion;\n  }\n}\n"]}

package/pf-avatar/pf-avatar.d.ts

@@ -1,7 +1,6 @@
 import { BaseAvatar } from './BaseAvatar.js';
 /**
- * Avatar is an element for displaying a user's avatar image.
- *
+ * An avatar is a visual used to represent a user. It may contain an image or a placeholder graphic.
  *
  * @summary For displaying a user's avatar image
  */

package/pf-avatar/pf-avatar.js

@@ -5,8 +5,7 @@ import { BaseAvatar } from './BaseAvatar.js';
 import { css } from "lit";
 const style = css `img,svg{width:var(--pf-c-avatar--Width,24px);height:var(--pf-c-avatar--Height,24px);border-radius:var(--pf-c-avatar--BorderRadius,var(--pf-global--BorderRadius--lg,128px));border:var(--pf-c-avatar--BorderWidth,0) solid var(--pf-c-avatar--BorderColor,var(--pf-global--BorderColor--dark-100,#d2d2d2))}:host([border]) :is(img,svg){--pf-c-avatar--BorderWidth:var(--pf-global--BorderWidth--sm, 1px)}:host([border=dark]) :is(img,svg){--pf-c-avatar--BorderColor:var(--pf-c-avatar--m-dark--BorderColor,\n      var(--pf-global--palette--black-700, #4f5255))}:host([size=sm]){--pf-c-avatar--Width:var(--pf-c-avatar--m-sm--Width, 24px);--pf-c-avatar--Height:var(--pf-c-avatar--m-sm--Height, 24px)}:host([size=md]){--pf-c-avatar--Width:var(--pf-c-avatar--m-md--Width, 36px);--pf-c-avatar--Height:var(--pf-c-avatar--m-md--Height, 36px)}:host([size=lg]){--pf-c-avatar--Width:var(--pf-c-avatar--m-lg--Width, 72px);--pf-c-avatar--Height:var(--pf-c-avatar--m-lg--Height, 72px)}:host([size=xl]){--pf-c-avatar--Width:var(--pf-c-avatar--m-xl--Width, 128px);--pf-c-avatar--Height:var(--pf-c-avatar--m-xl--Height, 128px)}`;
 /**
- * Avatar is an element for displaying a user's avatar image.
- *
+ * An avatar is a visual used to represent a user. It may contain an image or a placeholder graphic.
  *
  * @summary For displaying a user's avatar image
  */

package/pf-avatar/pf-avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-avatar.js","sourceRoot":"","sources":["pf-avatar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;;;AAI7C;;;;;GAKG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAGL,yBAAyB;QACI,SAAI,GAAwB,IAAI,CAAC;IAIhE,CAAC;;AAPiB,eAAM,GAAG,CAAC,KAAK,CAAC,CAAC;AAGJ;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAkC;AAGjC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAyB;AAP1C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAQpB;SARY,QAAQ","sourcesContent":["import { property } from 'lit/decorators/property.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport { BaseAvatar } from './BaseAvatar.js';\n\nimport style from './pf-avatar.css';\n\n/**\n * Avatar is an element for displaying a user's avatar image.\n *\n *\n * @summary For displaying a user's avatar image\n */\n@customElement('pf-avatar')\nexport class PfAvatar extends BaseAvatar {\n  static readonly styles = [style];\n\n  /** Size of the Avatar */\n  @property({ reflect: true }) size: 'sm'|'md'|'lg'|'xl' = 'sm';\n\n  /** Whether to display a border around the avatar */\n  @property({ reflect: true }) border?: 'light'|'dark';\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-avatar': PfAvatar;\n  }\n}\n"]}
+{"version":3,"file":"pf-avatar.js","sourceRoot":"","sources":["pf-avatar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;;;AAI7C;;;;GAIG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAGL,yBAAyB;QACI,SAAI,GAAwB,IAAI,CAAC;IAIhE,CAAC;;AAPiB,eAAM,GAAG,CAAC,KAAK,CAAC,CAAC;AAGJ;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAkC;AAGjC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAyB;AAP1C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAQpB;SARY,QAAQ","sourcesContent":["import { property } from 'lit/decorators/property.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport { BaseAvatar } from './BaseAvatar.js';\n\nimport style from './pf-avatar.css';\n\n/**\n * An avatar is a visual used to represent a user. It may contain an image or a placeholder graphic.\n *\n * @summary For displaying a user's avatar image\n */\n@customElement('pf-avatar')\nexport class PfAvatar extends BaseAvatar {\n  static readonly styles = [style];\n\n  /** Size of the Avatar */\n  @property({ reflect: true }) size: 'sm'|'md'|'lg'|'xl' = 'sm';\n\n  /** Whether to display a border around the avatar */\n  @property({ reflect: true }) border?: 'light'|'dark';\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-avatar': PfAvatar;\n  }\n}\n"]}

package/pf-button/pf-button.d.ts

@@ -3,8 +3,12 @@ import '@patternfly/elements/pf-icon/pf-icon.js';
 import '@patternfly/elements/pf-spinner/pf-spinner.js';
 export type ButtonVariant = ('primary' | 'secondary' | 'tertiary' | 'control' | 'link');
 /**
- * Buttons allow users to perform an action when triggered. They feature a text
- * label, a background or a border, and icons.
+ * A button is a box area or text that communicates and triggers user actions when
+ * clicked or selected. Buttons can be used to communicate and immediately trigger
+ * actions a user can take in an application, like submitting a form, canceling a
+ * process, or creating a new object. Buttons can also be used to take a user to a
+ * new location, like another page inside of a web application, or an external site
+ * such as help or documentation..
  *
  * @summary Allows users to perform an action when triggered
  *
@@ -127,12 +131,6 @@ export type ButtonVariant = ('primary' | 'secondary' | 'tertiary' | 'control' |
  * @cssprop {<color>}  --pf-c-button--m-plain--disabled--Color           {@default `#d2d2d2`}
  * @cssprop {<color>}  --pf-c-button--m-plain--disabled--BackgroundColor {@default `transparent`}
  *
- * @csspart state - Container for the state slot.
- * @slot icon
- *       Contains the button's icon or state indicator, e.g. a spinner.
- * @slot
- *       Must contain exactly one `<button>` element as the only content not assigned to a named slot.
- *
  * @attr {string} loading-label - ARIA label for the loading indicator {@default `'loading'`}
  *
  */

package/pf-button/pf-button.js

@@ -9,8 +9,12 @@ import '@patternfly/elements/pf-spinner/pf-spinner.js';
 import { css } from "lit";
 const styles = css `button{color:var(--pf-c-button--m-primary--Color,var(--pf-global--Color--light-100,#fff));background-color:var(--pf-c-button--m-primary--BackgroundColor,var(--pf-global--primary-color--100,#06c));font-size:var(--pf-c-button--FontSize,\n    var(--pf-global--FontSize--md, 1rem));font-weight:var(--pf-c-button--FontWeight,var(--pf-global--FontWeight--normal,400));line-height:var(--pf-c-button--LineHeight,\n    var(--pf-global--LineHeight--md, 1.5));padding:var(--pf-c-button--PaddingTop,var(--pf-global--spacer--form-element,.375rem)) var(--pf-c-button--PaddingRight,var(--pf-global--spacer--md,1rem)) var(--pf-c-button--PaddingBottom,var(--pf-global--spacer--form-element,.375rem)) var(--pf-c-button--PaddingLeft,var(--pf-global--spacer--md,1rem))}:host,button{border-radius:var(--pf-c-button--BorderRadius,var(--pf-global--BorderRadius--sm,3px))}::slotted(pf-icon),pf-icon{color:currentColor}button::after{border-color:var(--pf-c-button--after--BorderColor,transparent);border-width:var(--pf-c-button--after--BorderWidth,var(--pf-global--BorderWidth--sm,1px));border-radius:var(--pf-c-button--after--BorderRadius,var(--pf-global--BorderRadius--sm,3px))}button:active{--pf-c-button--m-primary--Color:var(--pf-c-button--m-primary--active--Color,\n    var(--pf-global--Color--light-100, #fff));--pf-c-button--m-primary--BackgroundColor:var(--pf-c-button--m-primary--active--BackgroundColor,\n    var(--pf-global--primary-color--200, #004080));--pf-c-button--after--BorderWidth:var(--pf-c-button--active--after--BorderWidth,\n    var(--pf-global--BorderWidth--md, 2px));--pf-c-button--m-danger--Color:var(--pf-c-button--m-danger--active--Color,\n    var(--pf-global--Color--light-100, #fff));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-danger--active--BackgroundColor,\n    var(--pf-global--danger-color--200, #a30000))}button:focus{--pf-c-button--m-primary--Color:var(--pf-c-button--m-primary--focus--Color,\n    var(--pf-global--Color--light-100, #fff));--pf-c-button--m-primary--BackgroundColor:var(--pf-c-button--m-primary--focus--BackgroundColor,\n    var(--pf-global--primary-color--200, #004080));--pf-c-button--after--BorderWidth:var(--pf-c-button--focus--after--BorderWidth,\n    var(--pf-global--BorderWidth--md, 2px));--pf-c-button--m-danger--Color:var(--pf-c-button--m-danger--focus--Color,\n    var(--pf-global--Color--light-100, #fff));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-danger--focus--BackgroundColor,\n    var(--pf-global--danger-color--200, #a30000))}button:hover{--pf-c-button--m-primary--Color:var(--pf-c-button--m-primary--hover--Color,\n    var(--pf-global--Color--light-100, #fff));--pf-c-button--m-primary--BackgroundColor:var(--pf-c-button--m-primary--hover--BackgroundColor,\n    var(--pf-global--primary-color--200, #004080));--pf-c-button--after--BorderWidth:var(--pf-c-button--hover--after--BorderWidth,\n    var(--pf-global--BorderWidth--md, 2px));--pf-c-button--m-danger--Color:var(--pf-c-button--m-danger--hover--Color,\n    var(--pf-global--Color--light-100, #fff));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-danger--hover--BackgroundColor,\n    var(--pf-global--danger-color--200, #a30000))}:host([warning]) button{color:var(--pf-c-button--m-warning--Color,var(--pf-global--Color--dark-100,#151515));background-color:var(--pf-c-button--m-warning--BackgroundColor,var(--pf-global--warning-color--100,#f0ab00))}:host([warning]) button:active{--pf-c-button--m-warning--Color:var(--pf-c-button--m-warning--active--Color,\n    var(--pf-global--Color--dark-100, #151515));--pf-c-button--m-warning--BackgroundColor:var(--pf-c-button--m-warning--active--BackgroundColor,\n    var(--pf-global--palette--gold-500, #c58c00))}:host([warning]) button:focus{--pf-c-button--m-warning--Color:var(--pf-c-button--m-warning--focus--Color,\n    var(--pf-global--Color--dark-100, #151515));--pf-c-button--m-warning--BackgroundColor:var(--pf-c-button--m-warning--focus--BackgroundColor,\n    var(--pf-global--palette--gold-500, #c58c00))}:host([warning]) button:hover{--pf-c-button--m-warning--Color:var(--pf-c-button--m-warning--hover--Color,\n    var(--pf-global--Color--dark-100, #151515));--pf-c-button--m-warning--BackgroundColor:var(--pf-c-button--m-warning--hover--BackgroundColor,\n    var(--pf-global--palette--gold-500, #c58c00))}:host([disabled][warning]) button{pointer-events:none;cursor:default;color:var(--pf-c-button--disabled--Color,var(--pf-global--disabled-color--100,#6a6e73));background-color:var(--pf-c-button--disabled--BackgroundColor,var(--pf-global--disabled-color--200,#d2d2d2))}:host([plain]){--pf-c-button--disabled--BackgroundColor:var(--pf-c-button--m-plain--disabled--BackgroundColor, transparent)}:host([plain]) button{--pf-c-button--after--BorderWidth:0;--pf-c-button--after--BorderColor:var(--pf-c-button--m-tertiary--after--BorderColor,\n    var(--pf-global--Color--100, #151515));--pf-c-button--disabled--Color:var(--pf-c-button--m-plain--disabled--Color,\n    var(--pf-global--disabled-color--200, #d2d2d2));color:var(--pf-c-button--m-plain--Color,var(--pf-global--Color--200,#6a6e73));background-color:var(--pf-c-button--m-plain--BackgroundColor,transparent)}:host([plain]) button:active{--pf-c-button--m-plain--Color:var(--pf-c-button--m-plain--active--Color,\n    var(--pf-global--Color--100, #151515));--pf-c-button--m-plain--BackgroundColor:var(--pf-c-button--m-plain--active--BackgroundColor,\n    tranparent)}:host([plain]) button:focus{--pf-c-button--m-plain--Color:var(--pf-c-button--m-plain--focus--Color,\n    var(--pf-global--Color--100, #151515));--pf-c-button--m-plain--BackgroundColor:var(--pf-c-button--m-plain--focus--BackgroundColor,\n    transparent)}:host([plain]) button:hover{--pf-c-button--m-plain--Color:var(--pf-c-button--m-plain--hover--Color,\n    var(--pf-global--Color--100, #151515));--pf-c-button--m-plain--BackgroundColor:var(--pf-c-button--m-plain--hover--BackgroundColor,\n    transparent)}:host([loading][plain]) [part=icon],:host([plain]) .hasIcon [part=icon]{left:16px}:host([plain]) button:disabled,:host([plain]) button[aria-disabled=true],:host([plain][disabled]),:host([plain][disabled]) button,:host([plain][disabled][variant=link]) button{color:var(--pf-c-button--disabled--Color,var(--pf-c-button--m-plain--disabled--Color,var(--pf-global--disabled--color--200,#d2d2d2)))}.hasIcon{gap:calc(2 * var(--pf-c-button__icon--m-start--MarginLeft,var(--pf-global--spacer--xs,.25rem)))}.hasIcon [part=icon]{--pf-icon--size:16px;position:relative}:host([icon-position=right]) .hasIcon [part=icon],:host([icon-position=right][loading]) [part=icon]{order:1}:host([icon-position=right]) .hasIcon button{padding-left:var(--pf-c-button--PaddingLeft,var(--pf-global--spacer--md,1rem));padding-right:calc(16px + 8px + var(--pf-c-button--PaddingRight,var(--pf-global--spacer--md,1rem)))}:host([loading]) button{position:relative;display:flex;align-items:center}:host([loading]) button [part=icon]{display:inline-block;z-index:1;position:absolute;cursor:pointer;top:var(--pf-c-button__progress--Top,50%);left:var(--pf-c-button__progress--Left,var(--pf-global--spacer--md,1rem));line-height:1;transform:translate(var(--pf-c-button__progress--TranslateX,0),var(--pf-c-button__progress--TranslateY,-50%));margin-inline-end:var(--pf-c-button__icon--m-start--MarginRight,var(--pf-global--spacer--xs,.25rem))}:host([loading][danger]),:host([loading][variant=primary]:not([plain])){--pf-c-spinner--Color:white}:host([loading]:not([plain])){--pf-c-button--PaddingRight:var(--pf-c-button--m-in-progress--PaddingRight,\n    var(--pf-global--spacer--md, 1rem));--pf-c-button--PaddingLeft:var(--pf-c-button--m-in-progress--PaddingLeft,\n    calc(\n      var(--pf-global--spacer--md, 1rem) + var(--pf-c-button__progress--width,\n        calc(var(--pf-global--icon--FontSize--md, 1.125rem) + var(--pf-global--spacer--sm, 0.5rem))) / 2))}:host([loading]:not([plain])) button{padding-left:calc(12px + var(--pf-c-button--PaddingLeft,var(--pf-global--spacer--md,1rem)))}:host([variant=secondary]){--pf-c-button--m-danger--Color:var(--pf-c-button--m-secondary--m-danger--Color,\n    var(--pf-global--danger-color--100, #c9190b));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-secondary--m-danger--BackgroundColor, transparent)}:host([variant=secondary]) button{color:var(--pf-c-button--m-secondary--Color,var(--pf-global--primary-color--100,#06c));background-color:var(--pf-c-button--m-secondary--BackgroundColor,transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--after--BorderColor,\n    var(--pf-global--primary-color--100, #06c))}:host([variant=secondary]) button:active{--pf-c-button--m-secondary--Color:var(--pf-c-button--m-secondary--active--Color,\n    var(--pf-global--primary-color--100, #06c));--pf-c-button--m-secondary--BackgroundColor:var(--pf-c-button--m-secondary--active--BackgroundColor, transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--active--after--BorderColor,\n    var(--pf-global--primary-color--100, #06c));--pf-c-button--m-danger--Color:var(--pf-c-button--m-secondary--m-danger--active--Color,\n    var(--pf-global--danger--color--200, #a30000));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-secondary--m-danger--active--BackgroundColor, transparent)}:host([variant=secondary]) button:focus{--pf-c-button--m-secondary--Color:var(--pf-c-button--m-secondary--focus--Color,\n    var(--pf-global--primary-color--100, #06c));--pf-c-button--m-secondary--BackgroundColor:var(--pf-c-button--m-secondary--focus--BackgroundColor, transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--focus--after--BorderColor,\n    var(--pf-global--primary-color--100, #06c));--pf-c-button--m-danger--Color:var(--pf-c-button--m-secondary--m-danger--focus--Color,\n    var(--pf-global--danger--color--200, #a30000));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-secondary--m-danger--focus--BackgroundColor, transparent)}:host([variant=secondary]) button:hover{--pf-c-button--m-secondary--Color:var(--pf-c-button--m-secondary--hover--Color,\n    var(--pf-global--primary-color--100, #06c));--pf-c-button--m-secondary--BackgroundColor:var(--pf-c-button--m-secondary--hover--BackgroundColor,\n    transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--hover--after--BorderColor,\n    var(--pf-global--primary-color--100, #06c));--pf-c-button--m-danger--Color:var(--pf-c-button--m-secondary--m-danger--hover--Color,\n    var(--pf-global--danger--color--200, #a30000));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-secondary--m-danger--hover--BackgroundColor, transparent)}:host([variant=secondary][danger]) button{color:var(--pf-c-button--m-secondary--m-danger--Color,var(--pf-global--danger--color--100,#c9190b));background-color:var(--pf-c-button--m-secondary--m-danger--BackgroundColor,transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--m-danger--after--BorderColor,\n    var(--pf-global--danger--color--100, #c9190b))}:host([variant=secondary][danger]) button:active{--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--m-danger--active--after--BorderColor,\n    var(--pf-global--danger--color--100, #c9190b))}:host([variant=secondary][danger]) button:focus{--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--m-danger--focus--after--BorderColor,\n    var(--pf-global--danger--color--100, #c9190b))}:host([variant=secondary][danger]) button:hover{--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--m-danger--hover--after--BorderColor,\n    var(--pf-global--danger--color--100, #c9190b))}:host([variant=tertiary]) button{--pf-c-button--after--BorderColor:var(--pf-c-button--m-tertiary--after--BorderColor,\n    var(--pf-global--Color--100, #151515));color:var(--pf-c-button--m-tertiary--Color,var(--pf-global--Color--100,#151515));background-color:var(--pf-c-button--m-tertiary--BackgroundColor,transparent)}:host([variant=tertiary]) button:active{--pf-c-button--m-tertiary--Color:var(--pf-c-button--m-tertiary--active--Color,\n    var(--pf-global--Color--100, #151515));--pf-c-button--m-tertiary--BackgroundColor:var(--pf-c-button--m-tertiary--active--BackgroundColor, transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-tertiary--active--after--BorderColor,\n    var(--pf-global--Color--100, #151515))}:host([variant=tertiary]) button:focus{--pf-c-button--m-tertiary--Color:var(--pf-c-button--m-tertiary--focus--Color,\n    var(--pf-global--Color--100, #151515));--pf-c-button--m-tertiary--BackgroundColor:var(--pf-c-button--m-tertiary--focus--BackgroundColor,\n    transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-tertiary--focus--after--BorderColor,\n    var(--pf-global--Color--100, #151515))}:host([variant=tertiary]) button:hover{--pf-c-button--m-tertiary--Color:var(--pf-c-button--m-tertiary--hover--Color,\n    var(--pf-global--Color--100, #151515));--pf-c-button--m-tertiary--BackgroundColor:var(--pf-c-button--m-tertiary--hover--BackgroundColor, transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-tertiary--hover--after--BorderColor,\n    var(--pf-global--Color--100, #151515))}:host([variant=control]) button{--pf-c-button--BorderRadius:var(--pf-c-button--m-control--BorderRadius, 0);--pf-c-button--disabled--BackgroundColor:var(--pf-c-button--m-control--disabled--BackgroundColor,\n    var(--pf-global--disabled-color--300, #f0f0f0));--pf-c-button--after--BorderRadius:0;--pf-c-button--after--BorderWidth:var(--pf-c-button--m-control--after--BorderWidth,\n    var(--pf-global--BorderWidth--sm, 1px));--pf-c-button--after--BorderColor:var(--pf-c-button--m-control--after--BorderTopColor,\n      var(--pf-global--BorderColor--300, #f0f0f0)) var(--pf-c-button--m-control--after--BorderRightColor,\n      var(--pf-global--BorderColor--300, #f0f0f0)) var(--pf-c-button--m-control--after--BorderBottomColor,\n      var(--pf-global--BorderColor--200, #8a8d90)) var(--pf-c-button--m-control--after--BorderLeftColor,\n      var(--pf-global--BorderColor--300, #f0f0f0));color:var(--pf-c-button--m-control--Color,var(--pf-global--Color--100,#151515));background-color:var(--pf-c-button--m-control--BackgroundColor,var(--pf-global--BackgroundColor--100,#fff))}:host([variant=control]) button:active{--pf-c-button--m-control--Color:var(--pf-c-button--m-control--active--Color,\n    var(--pf-global--Color--100, #151515));--pf-c-button--m-control--BackgroundColor:var(--pf-c-button--m-control--active--BackgroundColor,\n    var(--pf-global--BackgroundColor--100, #fff));--pf-c-button--m-control--after--BorderBottomColor:var(--pf-c-button--m-control--active--after--BorderBottomColor,\n    var(--pf-global--active-color--100, #06c))}:host([variant=control]) button:focus{--pf-c-button--m-control--Color:var(--pf-c-button--m-control--focus--Color,\n    var(--pf-global--Color--100, #151515));--pf-c-button--m-control--BackgroundColor:var(--pf-c-button--m-control--focus--BackgroundColor,\n    var(--pf-global--BackgroundColor--100, #fff));--pf-c-button--m-control--after--BorderBottomColor:var(--pf-c-button--m-control--focus--after--BorderBottomColor,\n    var(--pf-global--active-color--100, #06c))}:host([variant=control]) button:hover{--pf-c-button--m-control--Color:var(--pf-c-button--m-control--hover--Color,\n    var(--pf-global--Color--100, #151515));--pf-c-button--m-control--BackgroundColor:var(--pf-c-button--m-control--hover--BackgroundColor,\n    var(--pf-global--BackgroundColor--100, #fff));--pf-c-button--m-control--after--BorderBottomColor:var(--pf-c-button--m-control--hover--after--BorderBottomColor,\n    var(--pf-global--active-color--100, #06c))}:host([variant=control]) button:active::after{border-block-end-width:var(--pf-c-button--m-control--active--after--BorderBottomWidth,var(--pf-global--BorderWidth--md,2px))}:host([variant=control]) button:focus::after{border-block-end-width:var(--pf-c-button--m-control--focus--after--BorderBottomWidth,var(--pf-global--BorderWidth--md,2px))}:host([variant=control]) button:hover::after{border-block-end-width:var(--pf-c-button--m-control--hover--after--BorderBottomWidth,var(--pf-global--BorderWidth--md,2px))}:host([variant=link]) button{color:var(--pf-c-button--m-link--Color,var(--pf-global--link--Color,#06c))}:host([variant=link]) button{background-color:var(--pf-c-button--m-link--BackgroundColor,var(--pf-c-button--m-link--hover--BackgroundColor,transparent))}:host([variant=link][inline]),:host([variant=link][inline]) button{display:inline}:host([variant=link][inline]){--pf-c-button--PaddingTop:0;--pf-c-button--PaddingLeft:0;--pf-c-button--PaddingBottom:0;--pf-c-button--PaddingRight:0}:host([variant=link][inline]) button:hover{text-decoration:var(--pf-c-button--m-link--m-inline--hover--TextDecoration,var(--pf-global--link--TextDecoration--hover,underline))}:host([variant=link]){--pf-c-button--disabled--BackgroundColor:var(--pf-c-button--m-link--disabled--BackgroundColor, transparent)}:host(:hover){--pf-c-button--m-link--Color:var(--pf-c-button--m-link--hover--Color,\n    var(--pf-global--link--Color--hover, #004080));--pf-c-button--m-link--BackgroundColor:var(--pf-c-button--m-link--hover--BackgroundColor, transparent)}:host(:focus),:host(:focus-within){--pf-c-button--m-link--Color:var(--pf-c-button--m-link--focus--Color,\n    var(--pf-global--link--Color--hover, #004080));--pf-c-button--m-link--BackgroundColor:var(--pf-c-button--m-link--hover--BackgroundColor, transparent)}:host(:not([inline])) button:active{--pf-c-button--m-link--Color:var(--pf-c-button--m-link--active--Color,\n    var(--pf-global--link--Color--hover, #004080));--pf-c-button--m-link--BackgroundColor:var(--pf-c-button--m-link--active--BackgroundColor, transparent)}:host(:not([inline]):has(button:active)){--pf-c-button--m-link--Color:var(--pf-c-button--m-link--active--Color,\n    var(--pf-global--link--Color--hover, #004080));--pf-c-button--m-link--BackgroundColor:var(--pf-c-button--m-link--active--BackgroundColor, transparent)}:host([variant=link][danger]) button{--pf-c-button--m-danger--Color:var(--pf-c-button--m-link--m-danger--Color,\n      var(--pf-global--danger-color--100, #c9190b));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-link--m-danger--BackgroundColor, transparent)}:host([variant=link][danger]) button:hover{--pf-c-button--m-link--m-danger--Color:var(--pf-c-button--m-link--m-danger--hover--Color,\n      var(--pf-global--danger-color--200, #a30000));--pf-c-button--m-link--m-danger--BackgroundColor:var(--pf-c-button--m-link--m-danger--hover--BackgroundColor, transparent)}:host([variant=link][danger]) button:active{--pf-c-button--m-link--m-danger--Color:var(--pf-c-button--m-link--m-danger--active--Color,\n    var(--pf-global--danger-color--200, #a30000));--pf-c-button--m-link--m-danger--BackgroundColor:var(--pf-c-button--m-link--m-danger--active--BackgroundColor, transparent)}:host([variant=link][danger]:has(button:active)){--pf-c-button--m-link--m-danger--Color:var(--pf-c-button--m-link--m-danger--active--Color,\n    var(--pf-global--danger-color--200, #a30000));--pf-c-button--m-link--m-danger--BackgroundColor:var(--pf-c-button--m-link--m-danger--active--BackgroundColor, transparent)}:host([variant=link][danger]:is(:focus,:focus-within)){--pf-c-button--m-link--m-danger--Color:var(--pf-c-button--m-link--m-danger--focus--Color,\n    var(--pf-global--danger-color--200, #a30000));--pf-c-button--m-link--m-danger--BackgroundColor:var(--pf-c-button--m-link--m-danger--focus--BackgroundColor, transparent)}:host(:is(:disabled,[aria-disabled=true])),:host(:is(:disabled,[aria-disabled=true])) button,:host(:is(:disabled,[aria-disabled=true])[danger]) button,:host(:is(:disabled,[aria-disabled=true])[variant=link]) button{color:var(--pf-c-button--disabled--Color,var(--pf-global--disabled-color--100,#6a6e73));background-color:var(--pf-c-button--disabled--BackgroundColor,var(--pf-global--disabled-color--200,#d2d2d2))}:host(:is(:disabled,[aria-disabled=true])) button::after{border-color:var(--pf-c-button--disabled--after--BorderColor,transparent)}:host([block]),:host([block]) button{display:flex;width:100%;justify-content:center}:host([size=large]) button{--pf-c-button--PaddingTop:var(--pf-c-button--m-display-lg--PaddingTop,\n    var(--pf-global--spacer--md, 1rem));--pf-c-button--PaddingRight:var(--pf-c-button--m-display-lg--PaddingRight,\n    var(--pf-global--spacer--xl, 2rem));--pf-c-button--PaddingBottom:var(--pf-c-button--m-display-lg--PaddingBottom,\n    var(--pf-global--spacer--md, 1rem));--pf-c-button--PaddingLeft:var(--pf-c-button--m-display-lg--PaddingLeft,\n    var(--pf-global--spacer--xl, 2rem));--pf-c-button--FontWeight:var(--pf-c-button--m-display-lg--FontWeight,\n    var(--pf-global--FontWeight--bold, 700))}:host([size=small]) button{--pf-c-button--FontSize:var(--pf-c-button--m-small--FontSize,\n    var(--pf-global--FontSize--md, 1rem))}:host([danger]) button{color:var(--pf-c-button--m-danger--Color,var(--pf-global--Color--light-100,#fff));background-color:var(--pf-c-button--m-danger--BackgroundColor,var(--pf-global--danger-color--100,#c9190b))}`;
 /**
- * Buttons allow users to perform an action when triggered. They feature a text
- * label, a background or a border, and icons.
+ * A button is a box area or text that communicates and triggers user actions when
+ * clicked or selected. Buttons can be used to communicate and immediately trigger
+ * actions a user can take in an application, like submitting a form, canceling a
+ * process, or creating a new object. Buttons can also be used to take a user to a
+ * new location, like another page inside of a web application, or an external site
+ * such as help or documentation..
  *
  * @summary Allows users to perform an action when triggered
  *
@@ -133,12 +137,6 @@ const styles = css `button{color:var(--pf-c-button--m-primary--Color,var(--pf-gl
  * @cssprop {<color>}  --pf-c-button--m-plain--disabled--Color           {@default `#d2d2d2`}
  * @cssprop {<color>}  --pf-c-button--m-plain--disabled--BackgroundColor {@default `transparent`}
  *
- * @csspart state - Container for the state slot.
- * @slot icon
- *       Contains the button's icon or state indicator, e.g. a spinner.
- * @slot
- *       Must contain exactly one `<button>` element as the only content not assigned to a named slot.
- *
  * @attr {string} loading-label - ARIA label for the loading indicator {@default `'loading'`}
  *
  */