@patternfly/elements 3.0.1 → 3.0.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/elements",
   "license": "MIT",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "PatternFly Elements",
   "customElements": "custom-elements.json",
   "type": "module",

package/pf-clipboard-copy/pf-clipboard-copy.css

@@ -128,6 +128,10 @@ textarea {
   height: 100%;
 }
 
+#copy-button {
+  height: calc(100% - var(--pf-c-button--PaddingTop) - var(--pf-c-button--PaddingBottom));
+}
+
 .container:is(.compact, .inline) #input-group {
   display: contents;
 }

package/pf-clipboard-copy/pf-clipboard-copy.js

@@ -7,7 +7,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { BaseClipboardCopy } from './BaseClipboardCopy.js';
 import { css } from "lit";
-const styles = css `.container {\n  display: flex;\n  flex-direction: column;\n}\n\n#input-group,\n#wrapper,\npf-tooltip,\npf-button {\n  display: flex;\n}\n\n.inline #wrapper {\n  display: inline-flex;\n}\n\npf-button {\n  height: 100%;\n}\n\npf-tooltip::part(invoker) {\n  display: flex;\n  height: 100%;\n}\n\n:host {\n  --pf-icon--size: var(--pf-global--FontSize--md, 1rem);\n}\n\n#input-group > * + * {\n  margin-left: -1px;\n}\n\ninput {\n  color: var(--pf-c-form-control--Color,\n    var(--pf-global--Color--100, var(--pf-global--Color--dark-100, #151515)));\n  width: var(--pf-c-form-control--Width);\n  padding:\n    var(--pf-c-form-control--PaddingTop, calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px)))\n    var(--pf-c-form-control--PaddingRight, var(--pf-c-form-control--inset--base, var(--pf-global--spacer--sm, 0.5rem)))\n    var(--pf-c-form-control--PaddingBottom, calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px)))\n    var(--pf-c-form-control--PaddingLeft, var(--pf-c-form-control--inset--base, var(--pf-global--spacer--sm, 0.5rem)));\n  font-size: var(--pf-c-form-control--FontSize);\n  line-height: var(--pf-c-form-control--LineHeight);\n  background-color: var(--pf-c-form-control--BackgroundColor);\n  background-repeat: no-repeat;\n  border: var(--pf-c-form-control--BorderWidth, var(--pf-global--BorderWidth--sm, 1px)) solid;\n  border-color:\n    var(--pf-c-form-control--BorderTopColor, var(--pf-global--BorderColor--300, #f0f0f0))\n    var(--pf-c-form-control--BorderRightColor, var(--pf-global--BorderColor--300, #f0f0f0))\n    var(--pf-c-form-control--BorderBottomColor, var(--pf-global--BorderColor--200, #8a8d90))\n    var(--pf-c-form-control--BorderLeftColor, var(--pf-global--BorderColor--300, #f0f0f0));\n  border-radius: var(--pf-c-form-control--BorderRadius, 0);\n  margin: 0;\n  appearance: none;\n  height: var(--pf-c-form-control--Height, calc(var(--pf-c-form-control--FontSize) * var(--pf-c-form-control--LineHeight) + var(--pf-c-form-control--BorderWidth) * 2 + var(--pf-c-form-control--PaddingTop) + var(--pf-c-form-control--PaddingBottom)), 36px);\n  text-overflow: ellipsis;\n  flex: 1 1 auto;\n}\n\ninput[disabled] {\n  background-color: var(--pf-c-form-control--readonly--BackgroundColor,\n    var(--pf-global--disabled-color--300, #f0f0f0));\n}\n\ntextarea {\n  display: flex;\n  flex: 1 1 auto;\n  padding:\n    var(--pf-c-clipboard-copy__expandable-content--PaddingTop,\n      var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-clipboard-copy__expandable-content--PaddingRight,\n      var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-clipboard-copy__expandable-content--PaddingBottom,\n      var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-clipboard-copy__expandable-content--PaddingLeft,\n      var(--pf-global--spacer--md, 1rem));\n  word-wrap: break-word;\n  background-color: var(--pf-c-clipboard-copy__expandable-content--BackgroundColor, var(--pf-global--BackgroundColor--light-100, #fff));\n  background-clip: padding-box;\n  border: solid var(--pf-c-clipboard-copy__expandable-content--BorderColor,\n    var(--pf-global--BorderColor--100, #d2d2d2));\n  border-width:\n    var(--pf-c-clipboard-copy__expandable-content--BorderTopWidth, 0)\n    var(--pf-c-clipboard-copy__expandable-content--BorderRightWidth,\n      var(--pf-global--BorderWidth--sm, 1px))\n    var(--pf-c-clipboard-copy__expandable-content--BorderBottomWidth,\n      var(--pf-global--BorderWidth--sm, 1px))\n    var(--pf-c-clipboard-copy__expandable-content--BorderLeftWidth,\n      var(--pf-global--BorderWidth--sm, 1px));\n  box-shadow: var(--pf-c-clipboard-copy__expandable-content--BoxShadow);\n  margin: 0;\n  color: inherit;\n  font-family: inherit;\n}\n\n.container.code textarea {\n  font-family: var(--pf-global--FontFamily--monospace,\n    var(--pf-global--FontFamily--redhat--monospace,\n      "RedHatMono",\n      "Liberation Mono",\n      consolas,\n      "SFMono-Regular",\n      menlo,\n      monaco,\n      "Courier New",\n      monospace));\n}\n\n.container.expanded #expand-button pf-icon {\n  rotate: 90deg;\n}\n\n.container.inline {\n  display: inline;\n  background-color: var(--pf-c-clipboard-copy--m-inline--BackgroundColor,\n    var(--pf-global--BackgroundColor--200, #f0f0f0));\n  padding-block-start: var(--pf-c-clipboard-copy--m-inline--PaddingTop, 0px);\n  padding-block-end: var(--pf-c-clipboard-copy--m-inline--PaddingBottom, 0px);\n  padding-inline-start: var(--pf-c-clipboard-copy--m-inline--PaddingLeft,\n    var(--pf-global--spacer--xs, 0.25rem));\n  word-break: break-word;\n  white-space: normal;\n}\n\n#input-group {\n  display: flex;\n  height: 100%;\n}\n\n.container:is(.compact, .inline) #input-group {\n  display: contents;\n}\n\n.container:is(.compact, .inline) pf-tooltip,\n.container:is(.compact, .inline) pf-tooltip::part(invoker) {\n  display: inline-flex;\n}\n\n.container:is(.compact, .inline) #input-group {\n  background-color: var(--pf-c-button--m-plain--BackgroundColor,\n    var(--pf-global--BackgroundColor--200, #f0f0f0));\n}\n\n.container.compact.block {\n  display: block;\n  background-color: var(--pf-c-clipboard-copy--m-inline--BackgroundColor,\n    var(--pf-global--BackgroundColor--200, #f0f0f0));\n}\n\n.container:is(.compact, .inline) #copy-button,\n.container:is(.compact, .inline) slot[name="actions"]::slotted(*) {\n  --pf-c-button--PaddingTop: var(--pf-c-clipboard-copy__actions-item--button--PaddingTop,\n    var(--pf-global--spacer--xs, 0.25rem));\n  --pf-c-button--PaddingRight: var(--pf-c-clipboard-copy__actions-item--button--PaddingRight,\n    var(--pf-global--spacer--xs, 0.25rem));\n  --pf-c-button--PaddingBottom: var(--pf-c-clipboard-copy__actions-item--button--PaddingBottom,\n    var(--pf-global--spacer--xs, 0.25rem));\n  --pf-c-button--PaddingLeft: var(--pf-c-clipboard-copy__actions-item--button--PaddingLeft,\n    var(--pf-global--spacer--sm, 0.5rem));\n  margin-block-start: calc(-1 * var(--pf-c-button--PaddingTop));\n  margin-block-end: calc(-1 * var(--pf-c-button--PaddingBottom));\n}\n\n`;
+const styles = css `.container {\n  display: flex;\n  flex-direction: column;\n}\n\n#input-group,\n#wrapper,\npf-tooltip,\npf-button {\n  display: flex;\n}\n\n.inline #wrapper {\n  display: inline-flex;\n}\n\npf-button {\n  height: 100%;\n}\n\npf-tooltip::part(invoker) {\n  display: flex;\n  height: 100%;\n}\n\n:host {\n  --pf-icon--size: var(--pf-global--FontSize--md, 1rem);\n}\n\n#input-group > * + * {\n  margin-left: -1px;\n}\n\ninput {\n  color: var(--pf-c-form-control--Color,\n    var(--pf-global--Color--100, var(--pf-global--Color--dark-100, #151515)));\n  width: var(--pf-c-form-control--Width);\n  padding:\n    var(--pf-c-form-control--PaddingTop, calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px)))\n    var(--pf-c-form-control--PaddingRight, var(--pf-c-form-control--inset--base, var(--pf-global--spacer--sm, 0.5rem)))\n    var(--pf-c-form-control--PaddingBottom, calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px)))\n    var(--pf-c-form-control--PaddingLeft, var(--pf-c-form-control--inset--base, var(--pf-global--spacer--sm, 0.5rem)));\n  font-size: var(--pf-c-form-control--FontSize);\n  line-height: var(--pf-c-form-control--LineHeight);\n  background-color: var(--pf-c-form-control--BackgroundColor);\n  background-repeat: no-repeat;\n  border: var(--pf-c-form-control--BorderWidth, var(--pf-global--BorderWidth--sm, 1px)) solid;\n  border-color:\n    var(--pf-c-form-control--BorderTopColor, var(--pf-global--BorderColor--300, #f0f0f0))\n    var(--pf-c-form-control--BorderRightColor, var(--pf-global--BorderColor--300, #f0f0f0))\n    var(--pf-c-form-control--BorderBottomColor, var(--pf-global--BorderColor--200, #8a8d90))\n    var(--pf-c-form-control--BorderLeftColor, var(--pf-global--BorderColor--300, #f0f0f0));\n  border-radius: var(--pf-c-form-control--BorderRadius, 0);\n  margin: 0;\n  appearance: none;\n  height: var(--pf-c-form-control--Height, calc(var(--pf-c-form-control--FontSize) * var(--pf-c-form-control--LineHeight) + var(--pf-c-form-control--BorderWidth) * 2 + var(--pf-c-form-control--PaddingTop) + var(--pf-c-form-control--PaddingBottom)), 36px);\n  text-overflow: ellipsis;\n  flex: 1 1 auto;\n}\n\ninput[disabled] {\n  background-color: var(--pf-c-form-control--readonly--BackgroundColor,\n    var(--pf-global--disabled-color--300, #f0f0f0));\n}\n\ntextarea {\n  display: flex;\n  flex: 1 1 auto;\n  padding:\n    var(--pf-c-clipboard-copy__expandable-content--PaddingTop,\n      var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-clipboard-copy__expandable-content--PaddingRight,\n      var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-clipboard-copy__expandable-content--PaddingBottom,\n      var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-clipboard-copy__expandable-content--PaddingLeft,\n      var(--pf-global--spacer--md, 1rem));\n  word-wrap: break-word;\n  background-color: var(--pf-c-clipboard-copy__expandable-content--BackgroundColor, var(--pf-global--BackgroundColor--light-100, #fff));\n  background-clip: padding-box;\n  border: solid var(--pf-c-clipboard-copy__expandable-content--BorderColor,\n    var(--pf-global--BorderColor--100, #d2d2d2));\n  border-width:\n    var(--pf-c-clipboard-copy__expandable-content--BorderTopWidth, 0)\n    var(--pf-c-clipboard-copy__expandable-content--BorderRightWidth,\n      var(--pf-global--BorderWidth--sm, 1px))\n    var(--pf-c-clipboard-copy__expandable-content--BorderBottomWidth,\n      var(--pf-global--BorderWidth--sm, 1px))\n    var(--pf-c-clipboard-copy__expandable-content--BorderLeftWidth,\n      var(--pf-global--BorderWidth--sm, 1px));\n  box-shadow: var(--pf-c-clipboard-copy__expandable-content--BoxShadow);\n  margin: 0;\n  color: inherit;\n  font-family: inherit;\n}\n\n.container.code textarea {\n  font-family: var(--pf-global--FontFamily--monospace,\n    var(--pf-global--FontFamily--redhat--monospace,\n      "RedHatMono",\n      "Liberation Mono",\n      consolas,\n      "SFMono-Regular",\n      menlo,\n      monaco,\n      "Courier New",\n      monospace));\n}\n\n.container.expanded #expand-button pf-icon {\n  rotate: 90deg;\n}\n\n.container.inline {\n  display: inline;\n  background-color: var(--pf-c-clipboard-copy--m-inline--BackgroundColor,\n    var(--pf-global--BackgroundColor--200, #f0f0f0));\n  padding-block-start: var(--pf-c-clipboard-copy--m-inline--PaddingTop, 0px);\n  padding-block-end: var(--pf-c-clipboard-copy--m-inline--PaddingBottom, 0px);\n  padding-inline-start: var(--pf-c-clipboard-copy--m-inline--PaddingLeft,\n    var(--pf-global--spacer--xs, 0.25rem));\n  word-break: break-word;\n  white-space: normal;\n}\n\n#input-group {\n  display: flex;\n  height: 100%;\n}\n\n#copy-button {\n  height: calc(100% - var(--pf-c-button--PaddingTop) - var(--pf-c-button--PaddingBottom));\n}\n\n.container:is(.compact, .inline) #input-group {\n  display: contents;\n}\n\n.container:is(.compact, .inline) pf-tooltip,\n.container:is(.compact, .inline) pf-tooltip::part(invoker) {\n  display: inline-flex;\n}\n\n.container:is(.compact, .inline) #input-group {\n  background-color: var(--pf-c-button--m-plain--BackgroundColor,\n    var(--pf-global--BackgroundColor--200, #f0f0f0));\n}\n\n.container.compact.block {\n  display: block;\n  background-color: var(--pf-c-clipboard-copy--m-inline--BackgroundColor,\n    var(--pf-global--BackgroundColor--200, #f0f0f0));\n}\n\n.container:is(.compact, .inline) #copy-button,\n.container:is(.compact, .inline) slot[name="actions"]::slotted(*) {\n  --pf-c-button--PaddingTop: var(--pf-c-clipboard-copy__actions-item--button--PaddingTop,\n    var(--pf-global--spacer--xs, 0.25rem));\n  --pf-c-button--PaddingRight: var(--pf-c-clipboard-copy__actions-item--button--PaddingRight,\n    var(--pf-global--spacer--xs, 0.25rem));\n  --pf-c-button--PaddingBottom: var(--pf-c-clipboard-copy__actions-item--button--PaddingBottom,\n    var(--pf-global--spacer--xs, 0.25rem));\n  --pf-c-button--PaddingLeft: var(--pf-c-clipboard-copy__actions-item--button--PaddingLeft,\n    var(--pf-global--spacer--sm, 0.5rem));\n  margin-block-start: calc(-1 * var(--pf-c-button--PaddingTop));\n  margin-block-end: calc(-1 * var(--pf-c-button--PaddingBottom));\n}\n\n`;
 import '@patternfly/elements/pf-button/pf-button.js';
 import '@patternfly/elements/pf-icon/pf-icon.js';
 import '@patternfly/elements/pf-tooltip/pf-tooltip.js';

package/pfe.min.js

@@ -6095,6 +6095,10 @@ textarea {
   height: 100%;
 }
 
+#copy-button {
+  height: calc(100% - var(--pf-c-button--PaddingTop) - var(--pf-c-button--PaddingBottom));
+}
+
 .container:is(.compact, .inline) #input-group {
   display: contents;
 }