{ "schemaVersion": "2.1.0", "modules": [ { "kind": "javascript-module", "path": "pf-accordion/pf-accordion-header.js", "declarations": [ { "name": "PfAccordionHeaderChangeEvent", "superclass": { "name": "Event", "package": "global:" }, "members": [ { "name": "target", "type": { "text": "PfAccordionHeader" }, "kind": "field" }, { "name": "expanded", "type": { "text": "boolean" }, "kind": "field" }, { "name": "toggle", "type": { "text": "PfAccordionHeader" }, "kind": "field" }, { "name": "accordion", "type": { "text": "PfAccordion" }, "kind": "field" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-accordion/pf-accordion-header.ts#L20" }, "kind": "class" }, { "name": "PfAccordionHeader", "description": "Accordion Header", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "bordered", "type": { "text": "'true' | 'false'" }, "kind": "field", "attribute": "bordered", "reflects": true }, { "name": "icon", "type": { "text": "string" }, "kind": "field", "attribute": "icon", "reflects": true }, { "name": "iconSet", "type": { "text": "string" }, "kind": "field", "attribute": "icon-set", "reflects": true }, { "name": "expanded", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "expanded", "reflects": true }, { "name": "headingText", "type": { "text": "string" }, "kind": "field", "attribute": "heading-text", "reflects": true }, { "name": "headingTag", "type": { "text": "string" }, "kind": "field", "attribute": "heading-tag", "reflects": true } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-accordion/pf-accordion-header.ts#L37" }, "kind": "class", "tagName": "pf-accordion-header", "attributes": [ { "name": "bordered", "type": { "text": "'true' | 'false'" }, "fieldName": "bordered" }, { "name": "icon", "type": { "text": "string" }, "fieldName": "icon" }, { "name": "icon-set", "type": { "text": "string" }, "fieldName": "iconSet" }, { "name": "expanded", "type": { "text": "boolean" }, "default": "false", "fieldName": "expanded" }, { "name": "heading-text", "type": { "text": "string" }, "fieldName": "headingText" }, { "name": "heading-tag", "type": { "text": "string" }, "fieldName": "headingTag" } ], "events": [ { "name": "change", "description": "when the open panels change", "type": { "text": "AccordionHeaderChangeEvent" } } ], "slots": [ { "name": "", "summary": "A heading level tag (h1, h2, h3, h4, h5, h6)" }, { "name": "accents", "summary": "Header accent elements like tag or icon", "description": "These elements will appear inline with the accordion header,\nbetween the header and the chevron\n(or after the chevron and header in disclosure mode)." } ], "cssParts": [ { "name": "text", "summary": "inline element containing the heading text or slotted heading content" }, { "name": "accents", "summary": "container for accents within the header" }, { "name": "icon", "summary": "caret icon" } ], "cssProperties": [ { "name": "--pf-icon--size", "default": "var(--pf-c-accordion__toggle--IconSize, 10px)" }, { "name": "--pf-global--BackgroundColor--100", "default": "#ffffff" }, { "name": "--pf-global--FontSize--xl", "default": "1.25rem" }, { "name": "--pf-c-accordion__toggle--IconSize", "default": "12px" }, { "name": "--pf-c-accordion__toggle--BackgroundColor", "description": "Sets the background color for the accordion header toggle element.", "default": "transparent" }, { "name": "--pf-c-accordion__toggle-icon--Transition", "description": "Sets the transition animation for the accordion header.", "default": "0.2s ease-in 0s" }, { "name": "--pf-c-accordion__toggle--PaddingTop", "description": "Sets the top padding for the accordion header.", "default": "var(--pf-global--spacer--md, 0.5rem)" }, { "name": "--pf-c-accordion__toggle--PaddingRight", "description": "Sets the right padding for the accordion header.", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-accordion__toggle--PaddingBottom", "description": "Sets the bottom padding for the accordion header.", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-global--spacer--sm", "default": "0.5rem" }, { "name": "--pf-c-accordion__toggle--PaddingLeft", "description": "Sets the left padding for the accordion header.", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-global--spacer--md", "default": "1rem" }, { "name": "--pf-c-accordion__toggle--FontFamily", "description": "Sets the font family for the accordion header.", "default": "var(--pf-global--FontFamily--redhat-updated--heading--sans-serif,\n \"RedHatTextUpdated\",\n helvetica,\n arial,\n sans-serif)" }, { "name": "--pf-global--FontFamily--redhat-updated--heading--sans-serif", "default": "\"RedHatTextUpdated\", helvetica, arial, sans-serif" }, { "name": "--pf-c-accordion__toggle--FontSize", "description": "Sets the font size for the accordion header.", "default": "var(--pf-global--FontSize--lg, 1rem)" }, { "name": "--pf-global--FontSize--lg", "default": "1rem" }, { "name": "--pf-c-accordion__toggle--FontWeight", "description": "Sets the font weight for the accordion header.", "default": "var(--pf-global--FontWeight--normal, 400)" }, { "name": "--pf-global--FontWeight--normal", "default": "400" }, { "name": "--pf-c-accordion__toggle--Color", "description": "Sets the font color for the accordion header.", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-global--Color--100", "default": "#151515" }, { "name": "--pf-c-accordion__toggle--expanded--before--BackgroundColor", "description": "Sets the hover expanded before background color for the accordion header.", "default": "var(\n --pf-global--primary-color--100,\n #0066cc\n )" }, { "name": "--pf-global--primary-color--100", "default": "#0066cc" }, { "name": "--pf-c-accordion__toggle--before--Top", "default": "-1px" }, { "name": "--pf-c-accordion__toggle--before--Width", "description": "Sets the sidebar width for the accordion header.", "default": "var(--pf-global--BorderWidth--lg, 3px)" }, { "name": "--pf-global--BorderWidth--lg", "default": "3px" }, { "name": "--pf-c-accordion__toggle--after--BackgroundColor", "description": "Sets the background color for the after element for the accordion header toggle element.", "default": "transparent" }, { "name": "--pf-c-accordion__toggle-text--MaxWidth", "description": "Sets the max width for the text inside the accordion header.", "default": "calc(100% - var(--pf-global--spacer--lg, 1.5rem))" }, { "name": "--pf-global--spacer--lg", "default": "1.5rem" }, { "name": "--pf-c-accordion__toggle--expanded-icon--Rotate", "description": "Sets the expanded icon rotation degrees for the accordion header.", "default": "90deg" }, { "name": "--pf-c-accordion__toggle--active--BackgroundColor", "description": "Sets the active background color for the accordion header.", "default": "var(--pf-global--BackgroundColor--200, #f0f0f0)" }, { "name": "--pf-global--BackgroundColor--200", "default": "#f0f0f0" }, { "name": "--pf-c-accordion__toggle--active-text--Color", "description": "Sets the active text color for the accordion header.", "default": "var(--pf-global--link--Color, #0066cc)" }, { "name": "--pf-global--link--Color", "default": "#0066cc" }, { "name": "--pf-c-accordion__toggle--active-text--FontWeight", "default": "var(--pf-global--FontWeight--semi-bold, 700)" }, { "name": "--pf-global--FontWeight--semi-bold", "default": "700" } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "PfAccordionHeaderChangeEvent", "declaration": { "name": "PfAccordionHeaderChangeEvent", "module": "pf-accordion/pf-accordion-header.js" } }, { "kind": "custom-element-definition", "name": "pf-accordion-header", "declaration": { "name": "PfAccordionHeader", "module": "pf-accordion/pf-accordion-header.js" } }, { "kind": "js", "name": "PfAccordionHeader", "declaration": { "name": "PfAccordionHeader", "module": "pf-accordion/pf-accordion-header.js" } } ] }, { "kind": "javascript-module", "path": "pf-accordion/pf-accordion-panel.js", "declarations": [ { "name": "PfAccordionPanel", "description": "Accordion Panel", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "expanded", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "expanded", "reflects": true }, { "name": "bordered", "type": { "text": "'true' | 'false'" }, "kind": "field", "attribute": "bordered", "reflects": true } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-accordion/pf-accordion-panel.ts#L14" }, "kind": "class", "tagName": "pf-accordion-panel", "attributes": [ { "name": "expanded", "type": { "text": "boolean" }, "default": "false", "fieldName": "expanded" }, { "name": "bordered", "type": { "text": "'true' | 'false'" }, "fieldName": "bordered" } ], "slots": [ { "name": "", "description": "Panel content" } ], "cssParts": [ { "name": "container" } ], "cssProperties": [ { "name": "--pf-global--Color--100", "default": "#151515" }, { "name": "--pf-c-accordion--BackgroundColor", "description": "Background color for accordion panel", "default": "var(--pf-global--BackgroundColor--light-100, #ffffff)" }, { "name": "--pf-global--BackgroundColor--light-100", "default": "#ffffff" }, { "name": "--pf-c-accordion__panel-body--PaddingRight", "description": "Right padding for panel content", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-accordion__panel-body--PaddingBottom", "description": "Bottom padding for panel content", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-global--spacer--sm", "default": "0.5rem" }, { "name": "--pf-c-accordion__panel-body--PaddingLeft", "description": "Left padding for panel content", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-global--spacer--md", "default": "1rem" }, { "name": "--pf-c-accordion__panel-body--before--Width", "description": "Before width for panel content", "default": "var(--pf-global--BorderWidth--lg, 3px)" }, { "name": "--pf-global--BorderWidth--lg", "default": "3px" }, { "name": "--pf-c-accordion__panel-body--before--BackgroundColor", "description": "Background color for panel content before element", "default": "transparent" }, { "name": "--pf-c-accordion__panel-body--PaddingTop", "description": "Top padding for panel content", "default": "var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop, 0)" }, { "name": "--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop", "default": "0" }, { "name": "--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight", "default": "1rem" }, { "name": "--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom", "default": "1.5rem" }, { "name": "--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft", "default": "1.5rem" }, { "name": "--pf-c-accordion--m-display-lg__expanded-content--FontSize", "default": "1rem" }, { "name": "--pf-c-accordion--m-display-lg__expanded-content--Color", "default": "#151515" }, { "name": "--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom", "default": "1.5rem" }, { "name": "--pf-c-accordion__panel--Color", "description": "Font color for panel content", "default": "var(--pf-global--Color--dark-200, #6a6e73)" }, { "name": "--pf-global--Color--dark-200", "default": "#6a6e73" }, { "name": "--pf-c-accordion__panel--FontSize", "description": "Font size for panel content", "default": "var(--pf-global--FontSize--sm, 0.875rem)" }, { "name": "--pf-global--FontSize--sm", "default": "0.875rem" }, { "name": "--pf-c-accordion__panel--m-fixed--MaxHeight", "description": "Maximum height for panel content when fixed", "default": "9.375rem" }, { "name": "--pf-c-accordion__panel--content-body--before--BackgroundColor", "default": "var(--pf-global--primary-color--100, #0066cc)" }, { "name": "--pf-global--primary-color--100", "default": "#0066cc" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-accordion-panel", "declaration": { "name": "PfAccordionPanel", "module": "pf-accordion/pf-accordion-panel.js" } }, { "kind": "js", "name": "PfAccordionPanel", "declaration": { "name": "PfAccordionPanel", "module": "pf-accordion/pf-accordion-panel.js" } } ] }, { "kind": "javascript-module", "path": "pf-accordion/pf-accordion.js", "declarations": [ { "name": "PfAccordionExpandEvent", "superclass": { "name": "Event", "package": "global:" }, "members": [ { "name": "toggle", "type": { "text": "PfAccordionHeader" }, "kind": "field" }, { "name": "panel", "type": { "text": "PfAccordionPanel" }, "kind": "field" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-accordion/pf-accordion.ts#L19" }, "kind": "class" }, { "name": "PfAccordionCollapseEvent", "superclass": { "name": "Event", "package": "global:" }, "members": [ { "name": "toggle", "type": { "text": "PfAccordionHeader" }, "kind": "field" }, { "name": "panel", "type": { "text": "PfAccordionPanel" }, "kind": "field" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-accordion/pf-accordion.ts#L28" }, "kind": "class" }, { "name": "PfAccordion", "summary": "Toggle the visibility of sections of content", "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.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "single", "description": "When true, only one accordion panel may be expanded at a time", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "single", "reflects": true }, { "name": "bordered", "description": "Whether to apply the `bordered` style variant", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "bordered", "reflects": true }, { "name": "large", "description": "Whether to apply the `large` style variant", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "large", "reflects": true }, { "name": "fixed", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "fixed", "reflects": true }, { "name": "expandedIndex", "description": "Sets and reflects the currently expanded accordion 0-based indexes.\nUse commas to separate multiple indexes.\n```html\n\u003cpf-accordion expanded-index=\"1,2\"\u003e\n...\n\u003c/pf-accordion\u003e\n```", "type": { "text": "number[]" }, "kind": "field", "attribute": "expanded-index" }, { "name": "expandedSets", "type": { "text": "Set\u003cnumber\u003e" }, "default": "new Set\u003cnumber\u003e()", "kind": "field", "privacy": "protected" }, { "name": "headers", "type": { "text": "PfAccordionHeader[]" }, "readonly": true, "kind": "field" }, { "name": "panels", "type": { "text": "PfAccordionPanel[]" }, "readonly": true, "kind": "field" }, { "return": { "type": { "text": "Promise\u003cvoid\u003e" } }, "name": "firstUpdated", "kind": "method" }, { "return": { "type": { "text": "void" } }, "name": "largeChanged", "kind": "method", "privacy": "protected" }, { "return": { "type": { "text": "void" } }, "name": "updateActiveHeader", "kind": "method", "privacy": "protected" }, { "parameters": [ { "name": "event", "type": { "text": "PfAccordionHeaderChangeEvent" } } ], "return": { "type": { "text": "void" } }, "name": "onChange", "kind": "method", "privacy": "protected" }, { "return": { "type": { "text": "void" } }, "name": "updateAccessibility", "kind": "method", "privacy": "public" }, { "parameters": [ { "name": "index", "type": { "text": "number" } } ], "return": { "type": { "text": "Promise\u003cvoid\u003e" } }, "name": "expand", "description": "Accepts a 0-based index value (integer) for the set of accordion items to expand.\nAccepts an optional parent accordion to search for headers and panels.", "kind": "method", "privacy": "public" }, { "parameters": [ { "name": "index", "type": { "text": "number" } } ], "return": { "type": { "text": "Promise\u003cvoid\u003e" } }, "name": "collapse", "description": "Accepts a 0-based index value (integer) for the set of accordion items to collapse.", "kind": "method", "privacy": "public" }, { "parameters": [ { "name": "index", "type": { "text": "number" } } ], "return": { "type": { "text": "Promise\u003cvoid\u003e" } }, "name": "toggle", "description": "Accepts a 0-based index value (integer) for the set of accordion items to expand or collapse.", "kind": "method", "privacy": "public" }, { "return": { "type": { "text": "Promise\u003cvoid\u003e" } }, "name": "expandAll", "description": "Expands all accordion items.", "kind": "method", "privacy": "public" }, { "return": { "type": { "text": "Promise\u003cvoid\u003e" } }, "name": "collapseAll", "description": "Collapses all accordion items.", "kind": "method", "privacy": "public" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-accordion/pf-accordion.ts#L45" }, "kind": "class", "tagName": "pf-accordion", "attributes": [ { "name": "single", "description": "When true, only one accordion panel may be expanded at a time", "type": { "text": "boolean" }, "default": "false", "fieldName": "single" }, { "name": "bordered", "description": "Whether to apply the `bordered` style variant", "type": { "text": "boolean" }, "default": "false", "fieldName": "bordered" }, { "name": "large", "description": "Whether to apply the `large` style variant", "type": { "text": "boolean" }, "default": "false", "fieldName": "large" }, { "name": "fixed", "type": { "text": "boolean" }, "default": "false", "fieldName": "fixed" }, { "name": "expanded-index", "description": "Sets and reflects the currently expanded accordion 0-based indexes.\nUse commas to separate multiple indexes.\n```html\n\u003cpf-accordion expanded-index=\"1,2\"\u003e\n...\n\u003c/pf-accordion\u003e\n```", "type": { "text": "number[]" }, "fieldName": "expandedIndex" } ], "events": [ { "name": "expand", "description": "when a panel expands", "type": { "text": "AccordionExpandEvent" } }, { "name": "collapse", "description": "when a panel collapses", "type": { "text": "AccordionCollapseEvent" } } ], "slots": [ { "name": "", "description": "Place the `pf-accordion-header` and `pf-accordion-panel` elements here." } ], "cssProperties": [ { "name": "--pf-global--BackgroundColor--100", "default": "#fff" }, { "name": "--pf-c-accordion__toggle--PaddingTop", "description": "PaddingTop for the toggle", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-accordion__toggle--PaddingRight", "description": "PaddingRight for the toggle", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-accordion__toggle--PaddingBottom", "description": "PaddingBottom for the toggle", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-accordion__toggle--PaddingLeft", "description": "PaddingLeft for the toggle", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-accordion__toggle--before--BackgroundColor", "description": "BackgroundColor for the toggle before element", "default": "transparent" }, { "name": "--pf-c-accordion__toggle--before--Top", "description": "Top position for the toggle before element", "default": "0" }, { "name": "--pf-c-accordion__toggle--hover--BackgroundColor", "description": "BackgroundColor for the toggle on hover", "default": "var(--pf-global--BackgroundColor--200, #f0f0f0)" }, { "name": "--pf-c-accordion__toggle--focus--BackgroundColor", "description": "BackgroundColor for the toggle on focus", "default": "var(--pf-global--BackgroundColor--200, #f0f0f0)" }, { "name": "--pf-c-accordion__toggle--active--BackgroundColor", "description": "BackgroundColor for the toggle when active", "default": "var(--pf-global--BackgroundColor--200, #f0f0f0)" }, { "name": "--pf-global--BackgroundColor--200", "default": "#f0f0f0" }, { "name": "--pf-c-accordion__toggle--before--Width", "description": "Width for the toggle before element", "default": "var(--pf-global--BorderWidth--lg, 3px)" }, { "name": "--pf-c-accordion__toggle--m-expanded--before--BackgroundColor", "description": "BackgroundColor for the toggle before element when expanded", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-c-accordion__toggle-text--MaxWidth", "description": "MaxWidth for the toggle text", "default": "calc(100% - var(--pf-global--spacer--lg, 1.5rem))" }, { "name": "--pf-c-accordion__toggle--hover__toggle-text--Color", "description": "Color for the toggle text on hover", "default": "var(--pf-global--link--Color, #06c)" }, { "name": "--pf-c-accordion__toggle--active__toggle-text--Color", "description": "Color for the toggle text when active", "default": "var(--pf-global--link--Color, #06c)" }, { "name": "--pf-c-accordion__toggle--active__toggle-text--FontWeight", "description": "FontWeight for the toggle text when active", "default": "var(--pf-global--FontWeight--semi-bold, 700)" }, { "name": "--pf-c-accordion__toggle--focus__toggle-text--Color", "description": "Color for the toggle text on focus", "default": "var(--pf-global--link--Color, #06c)" }, { "name": "--pf-c-accordion__toggle--focus__toggle-text--FontWeight", "description": "FontWeight for the toggle text on focus", "default": "var(--pf-global--FontWeight--semi-bold, 700)" }, { "name": "--pf-c-accordion__toggle--m-expanded__toggle-text--Color", "description": "Color for the toggle text when expanded", "default": "var(--pf-global--link--Color, #06c)" }, { "name": "--pf-global--link--Color", "default": "#06c" }, { "name": "--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight", "description": "FontWeight for the toggle text when expanded", "default": "var(--pf-global--FontWeight--semi-bold, 700)" }, { "name": "--pf-global--FontWeight--semi-bold", "default": "700" }, { "name": "--pf-c-accordion__toggle-icon--Transition", "description": "Transition for the toggle icon", "default": ".2s ease-in 0s" }, { "name": "--pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate", "description": "Rotate value for the toggle icon when expanded", "default": "90deg" }, { "name": "--pf-c-accordion__expanded-content--Color", "description": "Color for the expanded content", "default": "var(--pf-global--Color--200, #6a6e73)" }, { "name": "--pf-global--Color--200", "default": "#6a6e73" }, { "name": "--pf-c-accordion__expanded-content--FontSize", "description": "FontSize for the expanded content", "default": "var(--pf-global--FontSize--sm, 0.875rem)" }, { "name": "--pf-global--FontSize--sm", "default": "0.875rem" }, { "name": "--pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor", "description": "BackgroundColor for the expanded content body before element when expanded", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-global--primary-color--100", "default": "#06c" }, { "name": "--pf-c-accordion__expanded-content--m-fixed--MaxHeight", "description": "MaxHeight for the expanded content when fixed", "default": "9.375rem" }, { "name": "--pf-c-accordion__expanded-content-body--PaddingTop", "description": "PaddingTop for the expanded content body", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-accordion__expanded-content-body--PaddingRight", "description": "PaddingRight for the expanded content body", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-accordion__expanded-content-body--PaddingBottom", "description": "PaddingBottom for the expanded content body", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-global--spacer--sm", "default": "0.5rem" }, { "name": "--pf-c-accordion__expanded-content-body--PaddingLeft", "description": "PaddingLeft for the expanded content body", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop", "description": "PaddingTop for nested expanded content body", "default": "0" }, { "name": "--pf-c-accordion__expanded-content-body--before--BackgroundColor", "description": "BackgroundColor for the expanded content body before element", "default": "transparent" }, { "name": "--pf-c-accordion__expanded-content-body--before--Width", "description": "Width for the expanded content body before element", "default": "var(--pf-global--BorderWidth--lg, 3px)" }, { "name": "--pf-global--BorderWidth--lg", "default": "3px" }, { "name": "--pf-c-accordion__expanded-content-body--before--Top", "description": "Top position for the expanded content body before element", "default": "0" }, { "name": "--pf-c-accordion--m-display-lg__toggle--PaddingTop", "description": "PaddingTop for the toggle in large display mode", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-accordion--m-display-lg__toggle--PaddingRight", "description": "PaddingRight for the toggle in large display mode", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-accordion--m-display-lg__toggle--PaddingBottom", "description": "PaddingBottom for the toggle in large display mode", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-accordion--m-display-lg__toggle--PaddingLeft", "description": "PaddingLeft for the toggle in large display mode", "default": "var(--pf-global--spacer--lg, 1.5rem)" }, { "name": "--pf-c-accordion--m-display-lg__toggle--FontFamily", "description": "FontFamily for the toggle in large display mode", "default": "var(--pf-global--FontFamily--heading--sans-serif, \"RedHatDisplay\", \"Overpass\", overpass, helvetica, arial, sans-serif)" }, { "name": "--pf-global--FontFamily--heading--sans-serif", "default": "\"RedHatDisplay\", \"Overpass\", overpass, helvetica, arial, sans-serif" }, { "name": "--pf-c-accordion--m-display-lg__toggle--FontSize", "description": "FontSize for the toggle in large display mode", "default": "var(--pf-global--FontSize--xl, 1.25rem)" }, { "name": "--pf-global--FontSize--xl", "default": "1.25rem" }, { "name": "--pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color", "description": "Color for the toggle text on hover in large display mode", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color", "description": "Color for the toggle text when active in large display mode", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight", "description": "FontWeight for the toggle text when active in large display mode", "default": "var(--pf-global--FontWeight--normal, 400)" }, { "name": "--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color", "description": "Color for the toggle text on focus in large display mode", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight", "description": "FontWeight for the toggle text on focus in large display mode", "default": "var(--pf-global--FontWeight--normal, 400)" }, { "name": "--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color", "description": "Color for the toggle text when expanded in large display mode", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight", "description": "FontWeight for the toggle text when expanded in large display mode", "default": "var(--pf-global--FontWeight--normal, 400)" }, { "name": "--pf-global--FontWeight--normal", "default": "400" }, { "name": "--pf-c-accordion--m-display-lg__expanded-content--FontSize", "description": "FontSize for the expanded content in large display mode", "default": "var(--pf-global--FontSize--md, 1rem)" }, { "name": "--pf-global--FontSize--md", "default": "1rem" }, { "name": "--pf-c-accordion--m-display-lg__expanded-content--Color", "description": "Color for the expanded content in large display mode", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop", "description": "PaddingTop for the expanded content body in large display mode", "default": "0" }, { "name": "--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight", "description": "PaddingRight for the expanded content body in large display mode", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom", "description": "PaddingBottom for the expanded content body in large display mode", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-global--spacer--md", "default": "1rem" }, { "name": "--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom", "description": "PaddingBottom for the last child of expanded content body in large display mode", "default": "var(--pf-global--spacer--lg, 1.5rem)" }, { "name": "--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft", "description": "PaddingLeft for the expanded content body in large display mode", "default": "var(--pf-global--spacer--lg, 1.5rem)" }, { "name": "--pf-global--spacer--lg", "default": "1.5rem" }, { "name": "--pf-c-accordion--m-bordered--BorderTopWidth", "description": "BorderTopWidth for the bordered variant", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-c-accordion--m-bordered--BorderTopColor", "description": "BorderTopColor for the bordered variant", "default": "var(--pf-global--BorderColor--100, #d2d2d2)" }, { "name": "--pf-c-accordion--m-bordered__toggle--before--Top", "description": "Top position for the toggle before element in bordered variant", "default": "calc(-1 * var(--pf-global--BorderWidth--sm, 1px))" }, { "name": "--pf-c-accordion--m-bordered__toggle--after--BorderColor", "description": "BorderColor for the toggle after element in bordered variant", "default": "var(--pf-global--BorderColor--100, #d2d2d2)" }, { "name": "--pf-c-accordion--m-bordered__toggle--after--BorderTopWidth", "description": "BorderTopWidth for the toggle after element in bordered variant", "default": "0" }, { "name": "--pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth", "description": "BorderBottomWidth for the toggle after element in bordered variant", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth", "description": "BorderBottomWidth for the last child after element in bordered expanded content", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-global--BorderWidth--sm", "default": "1px" }, { "name": "--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor", "description": "BorderBottomColor for the last child after element in bordered expanded content", "default": "var(--pf-global--BorderColor--100, #d2d2d2)" }, { "name": "--pf-global--BorderColor--100", "default": "#d2d2d2" }, { "name": "--pf-global--Color--100", "default": "#151515" }, { "name": "--pf-c-accordion--BackgroundColor", "description": "BackgroundColor for the accordion", "default": "var(--pf-global--BackgroundColor--100, #fff)" }, { "name": "--accordion__bordered--Color" } ], "demos": [ { "url": "https://patternflyelements.org/components/accordion/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-accordion/demo/index.html" } }, { "url": "https://patternflyelements.org/components/accordion/demo/bordered/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-accordion/demo/bordered.html" } }, { "url": "https://patternflyelements.org/components/accordion/demo/content-attributes/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-accordion/demo/content-attributes.html" } }, { "url": "https://patternflyelements.org/components/accordion/demo/fixed-panel/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-accordion/demo/fixed-panel.html" } }, { "url": "https://patternflyelements.org/components/accordion/demo/nested/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-accordion/demo/nested.html" } }, { "url": "https://patternflyelements.org/components/accordion/demo/single-expanded-panel/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-accordion/demo/single-expanded-panel.html" } } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "PfAccordionExpandEvent", "declaration": { "name": "PfAccordionExpandEvent", "module": "pf-accordion/pf-accordion.js" } }, { "kind": "js", "name": "PfAccordionCollapseEvent", "declaration": { "name": "PfAccordionCollapseEvent", "module": "pf-accordion/pf-accordion.js" } }, { "kind": "custom-element-definition", "name": "pf-accordion", "declaration": { "name": "PfAccordion", "module": "pf-accordion/pf-accordion.js" } }, { "kind": "js", "name": "PfAccordion", "declaration": { "name": "PfAccordion", "module": "pf-accordion/pf-accordion.js" } } ] }, { "kind": "javascript-module", "path": "pf-alert/pf-alert.js", "declarations": [ { "name": "PfAlertCloseEvent", "superclass": { "name": "Event", "package": "global:" }, "members": [ { "name": "reason", "type": { "text": "'closed' | 'timeout'" }, "kind": "field" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-alert/pf-alert.ts#L22" }, "kind": "class" }, { "name": "PfAlert", "description": "An **alert** is a notification that provides brief information to the user\nwithout blocking their workflow.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "variant", "description": "PatternFly supports several alert variants for different scenarios.\nEach variant has an associated status icon, background, and alert title\ncoded to communicate the severity of an alert. Use the variant property to\napply the following styling options. If no variant is specified, then the\nvariant will be set to \"default\".\n\n- **Default** - Use for generic messages with no associated severity\n- **Info** - Use for general informational messages\n- **Success** - Use to indicate that a task or process has been completed successfully\n- **Warning** - Use to indicate that a non-critical error has occurred\n- **Danger** - Use to indicate that a critical or blocking error has occurred", "type": { "text": "| 'warning'\n | 'custom'\n | 'neutral'\n | 'info'\n | 'success'\n | 'danger'" }, "default": "'neutral'", "kind": "field", "attribute": "variant", "reflects": true }, { "name": "icon", "description": "Use the `icon` attribute to replace a default alert icon with a custom icon.\nThe `icon` attribute is overridden by the `icon` slot.", "type": { "text": "string" }, "kind": "field", "attribute": "icon" }, { "name": "titleText", "description": "The title of the alert. Overridden by the title slot.", "type": { "text": "string" }, "kind": "field", "attribute": "title-text", "reflects": true }, { "name": "titleLevel", "description": "The heading level of the alert's title. Overridden by the title slot.\nDefault: 3", "type": { "text": "1 | 2 | 3 | 4 | 5 | 6" }, "kind": "field", "attribute": "title-level", "reflects": true }, { "name": "inline", "description": "Use inline alerts to display an alert inline with content. All alert\nvariants may use the `inline` attribute to position alerts in content-heavy\nareas, such as within forms, wizards, or drawers.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "inline", "reflects": true }, { "name": "plain", "description": "Use the `plain` attribute to make any inline alert plain. Plain styling\nremoves the colored background but keeps colored text and icons.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "plain", "reflects": true }, { "name": "expandable", "description": "An alert can contain additional, hidden information that is made visible\nwhen users click a caret icon. This information can be expanded and\ncollapsed each time the icon is clicked.\n\nIt is not recommended to use an expandable alert with a timeout in a toast\nalert group because the alert could timeout before users have time to\ninteract with and view the entire alert.\n\nSee the toast alert considerations section of the alert accessibility\ndocumentation to understand the accessibility risks associated with using\ntoast alerts.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "expandable", "reflects": true }, { "name": "expanded", "description": "True when an expandable alert is expanded", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "expanded", "reflects": true }, { "name": "dismissable", "description": "When true, the alert displays a close button\nClicking the close button removes the alert", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "dismissable", "reflects": true }, { "return": { "type": { "text": "void" } }, "name": "timeoutChanged", "kind": "method", "privacy": "protected" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-alert/pf-alert.ts#L36" }, "kind": "class", "tagName": "pf-alert", "attributes": [ { "name": "variant", "description": "PatternFly supports several alert variants for different scenarios.\nEach variant has an associated status icon, background, and alert title\ncoded to communicate the severity of an alert. Use the variant property to\napply the following styling options. If no variant is specified, then the\nvariant will be set to \"default\".\n\n- **Default** - Use for generic messages with no associated severity\n- **Info** - Use for general informational messages\n- **Success** - Use to indicate that a task or process has been completed successfully\n- **Warning** - Use to indicate that a non-critical error has occurred\n- **Danger** - Use to indicate that a critical or blocking error has occurred", "type": { "text": "| 'warning'\n | 'custom'\n | 'neutral'\n | 'info'\n | 'success'\n | 'danger'" }, "default": "'neutral'", "fieldName": "variant" }, { "name": "icon", "description": "Use the `icon` attribute to replace a default alert icon with a custom icon.\nThe `icon` attribute is overridden by the `icon` slot.", "type": { "text": "string" }, "fieldName": "icon" }, { "name": "title-text", "description": "The title of the alert. Overridden by the title slot.", "type": { "text": "string" }, "fieldName": "titleText" }, { "name": "title-level", "description": "The heading level of the alert's title. Overridden by the title slot.\nDefault: 3", "type": { "text": "1 | 2 | 3 | 4 | 5 | 6" }, "fieldName": "titleLevel" }, { "name": "inline", "description": "Use inline alerts to display an alert inline with content. All alert\nvariants may use the `inline` attribute to position alerts in content-heavy\nareas, such as within forms, wizards, or drawers.", "type": { "text": "boolean" }, "default": "false", "fieldName": "inline" }, { "name": "plain", "description": "Use the `plain` attribute to make any inline alert plain. Plain styling\nremoves the colored background but keeps colored text and icons.", "type": { "text": "boolean" }, "default": "false", "fieldName": "plain" }, { "name": "expandable", "description": "An alert can contain additional, hidden information that is made visible\nwhen users click a caret icon. This information can be expanded and\ncollapsed each time the icon is clicked.\n\nIt is not recommended to use an expandable alert with a timeout in a toast\nalert group because the alert could timeout before users have time to\ninteract with and view the entire alert.\n\nSee the toast alert considerations section of the alert accessibility\ndocumentation to understand the accessibility risks associated with using\ntoast alerts.", "type": { "text": "boolean" }, "default": "false", "fieldName": "expandable" }, { "name": "expanded", "description": "True when an expandable alert is expanded", "type": { "text": "boolean" }, "default": "false", "fieldName": "expanded" }, { "name": "dismissable", "description": "When true, the alert displays a close button\nClicking the close button removes the alert", "type": { "text": "boolean" }, "default": "false", "fieldName": "dismissable" } ], "events": [ { "name": "close", "description": "When an alert is closed e.g. when close button is clicked or when the alert times\nout. Cancel the event to prevent the alert from being removed." } ], "slots": [ { "name": "icon" }, { "name": "title" }, { "name": "" }, { "name": "actions" } ], "cssProperties": [ { "name": "--pf-global--BoxShadow--lg", "default": "0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)" }, { "name": "--pf-global--BackgroundColor--100", "default": "#fff" }, { "name": "--pf-global--BorderWidth--md", "default": "2px" }, { "name": "--pf-global--FontSize--sm", "default": "0.875rem" }, { "name": "--pf-global--Transition", "default": "all 250ms cubic-bezier(0.42, 0, 0.58, 1)" }, { "name": "--pf-global--default-color--200", "default": "#009596" }, { "name": "--pf-global--icon--FontSize--md", "default": "1.125rem" }, { "name": "--pf-global--FontWeight--bold", "default": "700" }, { "name": "--pf-global--default-color--300", "default": "#003737" }, { "name": "--pf-global--spacer--form-element", "default": "0.375rem" }, { "name": "--pf-global--spacer--sm", "default": "0.5rem" }, { "name": "--pf-global--spacer--xs", "default": "0.25rem" }, { "name": "--pf-global--spacer--md", "default": "1rem" }, { "name": "--pf-global--spacer--lg", "default": "1.5rem" }, { "name": "--pf-global--success-color--100", "default": "#3e8635" }, { "name": "--pf-global--success-color--200", "default": "#1e4f18" }, { "name": "--pf-global--danger-color--100", "default": "#c9190b" }, { "name": "--pf-global--danger-color--200", "default": "#a30000" }, { "name": "--pf-global--warning-color--100", "default": "#f0ab00" }, { "name": "--pf-global--warning-color--200", "default": "#795600" }, { "name": "--pf-global--info-color--100", "default": "#2b9af3" }, { "name": "--pf-global--info-color--200", "default": "#002952" }, { "name": "--pf-global--palette--cyan-50", "default": "#f2f9f9" }, { "name": "--pf-global--palette--green-50", "default": "#f3faf2" }, { "name": "--pf-global--palette--red-50", "default": "#faeae8" }, { "name": "--pf-global--palette--gold-50", "default": "#fdf7e7" }, { "name": "--pf-global--palette--blue-50", "default": "#e7f1fa" }, { "name": "--pf-c-alert__action-group--PaddingTop-base" }, { "name": "--pf-c-alert__description--action-group--PaddingTop-base" }, { "name": "--pf-global--Color--100", "default": "#151515" }, { "name": "--pf-c-alert--PaddingTop" }, { "name": "--pf-c-alert--PaddingRight" }, { "name": "--pf-c-alert--PaddingBottom" }, { "name": "--pf-c-alert--PaddingLeft" }, { "name": "--pf-c-alert__FontSize" }, { "name": "--pf-c-alert--BackgroundColor" }, { "name": "--pf-c-alert--GridTemplateAreas" }, { "name": "--pf-c-alert--m-success--BorderTopColor" }, { "name": "--pf-c-alert--m-success__icon--Color" }, { "name": "--pf-c-alert--m-success__title--Color" }, { "name": "--pf-c-alert--m-inline--m-success--BackgroundColor" }, { "name": "--pf-c-alert--m-danger--BorderTopColor" }, { "name": "--pf-c-alert--m-danger__icon--Color" }, { "name": "--pf-c-alert--m-danger__title--Color" }, { "name": "--pf-c-alert--m-inline--m-danger--BackgroundColor" }, { "name": "--pf-c-alert--m-warning--BorderTopColor" }, { "name": "--pf-c-alert--m-warning__icon--Color" }, { "name": "--pf-c-alert--m-warning__title--Color" }, { "name": "--pf-c-alert--m-inline--m-warning--BackgroundColor" }, { "name": "--pf-c-alert--BorderTopColor", "default": "var(--pf-c-alert--m-info--BorderTopColor)" }, { "name": "--pf-c-alert--m-info--BorderTopColor" }, { "name": "--pf-c-alert--m-info__icon--Color" }, { "name": "--pf-c-alert--m-info__title--Color" }, { "name": "--pf-c-alert--m-inline--m-info--BackgroundColor" }, { "name": "--pf-c-alert--BoxShadow", "default": "var(--pf-c-alert--m-inline--BoxShadow)" }, { "name": "--pf-c-alert--m-inline--BoxShadow" }, { "name": "--pf-c-alert--m-inline--BackgroundColor" }, { "name": "--pf-c-alert--BorderTopWidth", "default": "var(--pf-c-alert--m-inline--m-plain--BorderTopWidth)" }, { "name": "--pf-c-alert--m-inline--m-plain--BorderTopWidth" }, { "name": "--pf-c-alert--m-inline--m-plain--BackgroundColor" }, { "name": "--pf-c-alert--m-inline--m-plain--PaddingTop" }, { "name": "--pf-c-alert--m-inline--m-plain--PaddingRight" }, { "name": "--pf-c-alert--m-inline--m-plain--PaddingBottom" }, { "name": "--pf-c-alert--m-inline--m-plain--PaddingLeft" }, { "name": "--pf-c-alert--GridTemplateColumns", "default": "var(--pf-c-alert--m-expandable--GridTemplateColumns)" }, { "name": "--pf-c-alert--m-expandable--GridTemplateColumns" }, { "name": "--pf-c-alert--m-expandable--GridTemplateAreas" }, { "name": "--pf-c-alert--m-expandable__description--action-group--PaddingTop" }, { "name": "--pf-c-alert__toggle-icon--Rotate", "default": "var(--pf-c-alert--m-expanded__toggle-icon--Rotate)" }, { "name": "--pf-c-alert--m-expanded__toggle-icon--Rotate" }, { "name": "--pf-c-alert--m-expanded__description--action-group--PaddingTop" }, { "name": "--pf-c-alert__toggle--MarginTop" }, { "name": "--pf-c-alert__toggle--MarginBottom" }, { "name": "--pf-c-alert__toggle--MarginLeft" }, { "name": "--pf-c-alert__icon--MarginTop" }, { "name": "--pf-c-alert__icon--MarginRight" }, { "name": "--pf-c-alert__icon--FontSize" }, { "name": "--pf-c-alert__icon--Color" }, { "name": "--pf-c-alert__title--FontWeight" }, { "name": "--pf-c-alert__title--Color" }, { "name": "--pf-c-alert__description--PaddingTop" }, { "name": "--pf-c-alert__description--action-group--PaddingTop" } ], "demos": [ { "url": "https://patternflyelements.org/components/pf-alert/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-alert/demo/index.html" } }, { "url": "https://patternflyelements.org/components/pf-alert/demo/custom-icons/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-alert/demo/custom-icons.html" } }, { "url": "https://patternflyelements.org/components/pf-alert/demo/expandable/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-alert/demo/expandable.html" } }, { "url": "https://patternflyelements.org/components/pf-alert/demo/inline/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-alert/demo/inline.html" } }, { "url": "https://patternflyelements.org/components/pf-alert/demo/plain/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-alert/demo/plain.html" } }, { "url": "https://patternflyelements.org/components/pf-alert/demo/timeout/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-alert/demo/timeout.html" } }, { "url": "https://patternflyelements.org/components/pf-alert/demo/title-slot/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-alert/demo/title-slot.html" } }, { "url": "https://patternflyelements.org/components/pf-alert/demo/variations/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-alert/demo/variations.html" } } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "PfAlertCloseEvent", "declaration": { "name": "PfAlertCloseEvent", "module": "pf-alert/pf-alert.js" } }, { "kind": "custom-element-definition", "name": "pf-alert", "declaration": { "name": "PfAlert", "module": "pf-alert/pf-alert.js" } }, { "kind": "js", "name": "PfAlert", "declaration": { "name": "PfAlert", "module": "pf-alert/pf-alert.js" } } ] }, { "kind": "javascript-module", "path": "pf-avatar/pf-avatar.js", "declarations": [ { "name": "PfAvatarLoadEvent", "superclass": { "name": "Event", "package": "global:" }, "members": [ { "name": "originalEvent", "type": { "text": "Event" }, "kind": "field" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-avatar/pf-avatar.ts#L7" }, "kind": "class" }, { "name": "PfAvatar", "summary": "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.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "src", "description": "The URL to the user's custom avatar image.", "type": { "text": "string" }, "kind": "field", "attribute": "src" }, { "name": "alt", "description": "The alt text for the avatar image.", "type": { "text": "string" }, "default": "'Avatar image'", "kind": "field", "attribute": "alt", "reflects": true }, { "name": "size", "description": "Size of the Avatar", "type": { "text": "'sm' | 'md' | 'lg' | 'xl'" }, "default": "'sm'", "kind": "field", "attribute": "size", "reflects": true }, { "name": "border", "description": "Whether to display a border around the avatar", "type": { "text": "'light' | 'dark'" }, "kind": "field", "attribute": "border", "reflects": true }, { "name": "dark", "description": "Whether or not the Avatar image is dark", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "dark", "reflects": true } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-avatar/pf-avatar.ts#L20" }, "kind": "class", "tagName": "pf-avatar", "attributes": [ { "name": "src", "description": "The URL to the user's custom avatar image.", "type": { "text": "string" }, "fieldName": "src" }, { "name": "alt", "description": "The alt text for the avatar image.", "type": { "text": "string" }, "default": "'Avatar image'", "fieldName": "alt" }, { "name": "size", "description": "Size of the Avatar", "type": { "text": "'sm' | 'md' | 'lg' | 'xl'" }, "default": "'sm'", "fieldName": "size" }, { "name": "border", "description": "Whether to display a border around the avatar", "type": { "text": "'light' | 'dark'" }, "fieldName": "border" }, { "name": "dark", "description": "Whether or not the Avatar image is dark", "type": { "text": "boolean" }, "default": "false", "fieldName": "dark" } ], "events": [ { "name": "load", "description": "when the avatar loads", "type": { "text": "PfAvatarLoadEvent" } } ], "cssProperties": [ { "name": "--pf-global--BorderRadius--lg", "default": "30em" }, { "name": "--pf-global--BorderColor--dark-100", "default": "#d2d2d2" }, { "name": "--pf-global--palette--black-700", "default": "#4f5255" }, { "name": "--pf-c-avatar--Height", "description": "Height for avatar", "default": "2.25rem" }, { "name": "--pf-c-avatar--BorderRadius", "description": "Border radius for avatar", "default": "var(--pf-global--BorderRadius--lg, 30em)" }, { "name": "--pf-c-avatar--BorderWidth", "description": "Border width for avatar", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-global--BorderWidth--sm", "default": "1px" }, { "name": "--pf-c-avatar--BorderColor", "description": "Border color for avatar", "default": "var(--pf-c-avatar--m-dark--BorderColor)" }, { "name": "--pf-c-avatar--m-dark--BorderColor", "description": "Border color for dark avatar", "default": "var(--pf-global--palette--black-700, #4f5255)" }, { "name": "--pf-c-avatar--m-sm--Width", "description": "Width for small avatar", "default": "1.5rem" }, { "name": "--pf-c-avatar--m-sm--Height", "description": "Height for small avatar", "default": "1.5rem" }, { "name": "--pf-c-avatar--m-md--Width", "description": "Width for medium avatar", "default": "2.25rem" }, { "name": "--pf-c-avatar--m-md--Height", "description": "Height for medium avatar", "default": "2.25rem" }, { "name": "--pf-c-avatar--m-lg--Width", "description": "Width for large avatar", "default": "4.5rem" }, { "name": "--pf-c-avatar--m-lg--Height", "description": "Height for large avatar", "default": "4.5rem" }, { "name": "--pf-c-avatar--Width", "description": "Width for avatar", "default": "var(--pf-c-avatar--m-xl--Width)" }, { "name": "--pf-c-avatar--m-xl--Width", "description": "Width for extra large avatar", "default": "8rem" }, { "name": "--pf-c-avatar--m-xl--Height", "description": "Height for extra large avatar", "default": "8rem" } ], "demos": [ { "url": "https://patternflyelements.org/components/avatar/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-avatar/demo/index.html" } }, { "url": "https://patternflyelements.org/components/avatar/demo/bordered/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-avatar/demo/bordered.html" } }, { "url": "https://patternflyelements.org/components/avatar/demo/dark-border/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-avatar/demo/dark-border.html" } }, { "url": "https://patternflyelements.org/components/avatar/demo/dark-variant/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-avatar/demo/dark-variant.html" } }, { "url": "https://patternflyelements.org/components/avatar/demo/sizes/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-avatar/demo/sizes.html" } } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "PfAvatarLoadEvent", "declaration": { "name": "PfAvatarLoadEvent", "module": "pf-avatar/pf-avatar.js" } }, { "kind": "custom-element-definition", "name": "pf-avatar", "declaration": { "name": "PfAvatar", "module": "pf-avatar/pf-avatar.js" } }, { "kind": "js", "name": "PfAvatar", "declaration": { "name": "PfAvatar", "module": "pf-avatar/pf-avatar.js" } } ] }, { "kind": "javascript-module", "path": "pf-back-to-top/pf-back-to-top.js", "declarations": [ { "name": "PfBackToTop", "summary": "A shortcut that allows users to quickly navigate to the top of a lengthy content page.", "description": "The **back to top** component is a shortcut that allows users to quickly navigate to the top of a lengthy content page.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "icon", "description": "Shorthand for the `icon` slot, the value is icon name", "type": { "text": "string" }, "kind": "field", "attribute": "icon", "reflects": true }, { "name": "iconSet", "description": "Icon set for the `icon` property", "type": { "text": "string" }, "kind": "field", "attribute": "icon-set" }, { "name": "alwaysVisible", "description": "Flag to always show back to top button, defaults to false.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "always-visible", "reflects": true }, { "name": "scrollableSelector", "description": "Element selector to spy on for scrolling. Not passing a selector defaults to spying on window scroll events", "type": { "text": "string" }, "kind": "field", "attribute": "scrollable-selector", "reflects": true }, { "name": "scrollDistance", "description": "Distance from the top of the scrollable element to trigger the visibility of the back to top button", "type": { "text": "number" }, "default": "400", "kind": "field", "attribute": "scroll-distance" }, { "name": "label", "description": "Accessible name for the back-to-top link, use when component does not have slotted text", "type": { "text": "string" }, "kind": "field", "attribute": "label" }, { "name": "href", "description": "Page fragment link to target element, must include hash ex: #top", "type": { "text": "string" }, "kind": "field", "attribute": "href", "reflects": true } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-back-to-top/pf-back-to-top.ts#L19" }, "kind": "class", "tagName": "pf-back-to-top", "attributes": [ { "name": "icon", "description": "Shorthand for the `icon` slot, the value is icon name", "type": { "text": "string" }, "fieldName": "icon" }, { "name": "icon-set", "description": "Icon set for the `icon` property", "type": { "text": "string" }, "fieldName": "iconSet" }, { "name": "always-visible", "description": "Flag to always show back to top button, defaults to false.", "type": { "text": "boolean" }, "default": "false", "fieldName": "alwaysVisible" }, { "name": "scrollable-selector", "description": "Element selector to spy on for scrolling. Not passing a selector defaults to spying on window scroll events", "type": { "text": "string" }, "fieldName": "scrollableSelector" }, { "name": "scroll-distance", "description": "Distance from the top of the scrollable element to trigger the visibility of the back to top button", "type": { "text": "number" }, "default": "400", "fieldName": "scrollDistance" }, { "name": "label", "description": "Accessible name for the back-to-top link, use when component does not have slotted text", "type": { "text": "string" }, "fieldName": "label" }, { "name": "href", "description": "Page fragment link to target element, must include hash ex: #top", "type": { "text": "string" }, "fieldName": "href" } ], "cssProperties": [ { "name": "--pf-c-back-to-top--Right", "description": "Right position for back to top", "default": "var(--pf-global--spacer--2xl, 3rem)" }, { "name": "--pf-global--spacer--lg", "default": "1.5rem" }, { "name": "--pf-c-back-to-top--c-button--BoxShadow", "description": "Box shadow for back to top button", "default": "var(--pf-global--BoxShadow--lg-bottom, 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18))" }, { "name": "--pf-global--BoxShadow--lg-bottom", "default": "0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18)" }, { "name": "--pf-c-back-to-top--c-button--FontSize", "default": "var(--pf-global--FontSize--xs, 0.75rem)" }, { "name": "--pf-global--FontSize--xs", "default": "0.75rem" }, { "name": "--pf-c-back-to-top--c-button--BorderRadius", "default": "var(--pf-global--BorderRadius--lg, 30em)" }, { "name": "--pf-global--BorderRadius--lg", "default": "30em" }, { "name": "--pf-c-back-to-top--c-button--PaddingTop", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-back-to-top--c-button--PaddingRight", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-back-to-top--c-button--PaddingBottom", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-back-to-top--c-button--PaddingLeft", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-global--spacer--sm", "default": "0.5rem" }, { "name": "--pf-c-button--m-primary--Color", "description": "Primary color for back to top button", "default": "var(--pf-global--Color--light-100, #fff)" }, { "name": "--pf-c-button--m-primary--BackgroundColor", "description": "Primary background color for back to top button", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-global--primary-color--100", "default": "#06c" }, { "name": "--pf-c-button--PaddingTop" }, { "name": "--pf-c-button--PaddingRight" }, { "name": "--pf-c-button--PaddingBottom" }, { "name": "--pf-c-button--PaddingLeft" }, { "name": "--pf-c-button--BorderRadius" }, { "name": "--pf-c-button--m-primary--hover--Color", "default": "var(--pf-global--Color--light-100,#fff)" }, { "name": "--pf-global--Color--light-100", "default": "#fff" }, { "name": "--pf-c-button--m-primary--hover--BackgroundColor", "default": "var(--pf-global--primary-color--200, #004080)" }, { "name": "--pf-global--primary-color--200", "default": "#004080" }, { "name": "--pf-c-button--FontSize" }, { "name": "--pf-c-button__icon--m-end--MarginLeft", "description": "End icon margin left for back to top button", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-global--spacer--xs", "default": "0.25rem" }, { "name": "--pf-c-back-to-top--Bottom", "description": "Bottom position for back to top", "default": "var(--pf-c-back-to-top--md--Bottom, var(--pf-global--spacer--2xl, 3rem))" }, { "name": "--pf-c-back-to-top--md--Bottom", "default": "var(--pf-global--spacer--2xl, 3rem)" }, { "name": "--pf-global--spacer--2xl", "default": "3rem" } ], "demos": [ { "url": "https://patternflyelements.org/components/back-to-top/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-back-to-top/demo/index.html" } }, { "url": "https://patternflyelements.org/components/back-to-top/demo/always-visible/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-back-to-top/demo/always-visible.html" } }, { "url": "https://patternflyelements.org/components/back-to-top/demo/button-no-text/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-back-to-top/demo/button-no-text.html" } }, { "url": "https://patternflyelements.org/components/back-to-top/demo/button/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-back-to-top/demo/button.html" } }, { "url": "https://patternflyelements.org/components/back-to-top/demo/label/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-back-to-top/demo/label.html" } }, { "url": "https://patternflyelements.org/components/back-to-top/demo/no-text/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-back-to-top/demo/no-text.html" } }, { "url": "https://patternflyelements.org/components/back-to-top/demo/scroll-distance/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-back-to-top/demo/scroll-distance.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-back-to-top", "declaration": { "name": "PfBackToTop", "module": "pf-back-to-top/pf-back-to-top.js" } }, { "kind": "js", "name": "PfBackToTop", "declaration": { "name": "PfBackToTop", "module": "pf-back-to-top/pf-back-to-top.js" } } ] }, { "kind": "javascript-module", "path": "pf-background-image/pf-background-image.js", "declarations": [ { "name": "PfBackgroundImage", "summary": "Allows users to place an image in the background of your page or area of a page.", "description": "A **background image** allows you to place an image in the background of your page or area of a page.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "src", "description": "The URL for the image shown on mobile", "type": { "text": "string" }, "kind": "field", "attribute": "src", "reflects": true }, { "name": "src2x", "description": "The image shown on mobile with 2x DPI", "type": { "text": "string" }, "kind": "field", "attribute": "src-2x", "reflects": true }, { "name": "srcSm", "description": "The URL for the image shown on small screens (min-width: 576px)", "type": { "text": "string" }, "kind": "field", "attribute": "src-sm", "reflects": true }, { "name": "srcSm2x", "description": "The URL for the image shown on small screens (min-width: 576px) with 2x DPI", "type": { "text": "string" }, "kind": "field", "attribute": "src-sm-2x", "reflects": true }, { "name": "srcLg", "description": "The URL for the image shown on large screens (min-width: 992px)", "type": { "text": "string" }, "kind": "field", "attribute": "src-lg", "reflects": true }, { "name": "filter", "description": "Apply SVG Filter to the image", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "filter", "reflects": true } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-background-image/pf-background-image.ts#L17" }, "kind": "class", "tagName": "pf-background-image", "attributes": [ { "name": "src", "description": "The URL for the image shown on mobile", "type": { "text": "string" }, "fieldName": "src" }, { "name": "src-2x", "description": "The image shown on mobile with 2x DPI", "type": { "text": "string" }, "fieldName": "src2x" }, { "name": "src-sm", "description": "The URL for the image shown on small screens (min-width: 576px)", "type": { "text": "string" }, "fieldName": "srcSm" }, { "name": "src-sm-2x", "description": "The URL for the image shown on small screens (min-width: 576px) with 2x DPI", "type": { "text": "string" }, "fieldName": "srcSm2x" }, { "name": "src-lg", "description": "The URL for the image shown on large screens (min-width: 992px)", "type": { "text": "string" }, "fieldName": "srcLg" }, { "name": "filter", "description": "Apply SVG Filter to the image", "type": { "text": "boolean" }, "default": "false", "fieldName": "filter" } ], "slots": [ { "name": "filter", "description": "Overrides the default svg filter for the background image." } ], "cssParts": [ { "name": "container" } ], "cssProperties": [ { "name": "--pf-c-background-image--BackgroundImage", "description": "Background image for the element" }, { "name": "--pf-c-background-image--BackgroundColor", "description": "Background color for the background image", "default": "var(--pf-global--BackgroundColor--dark-100, #151515)" }, { "name": "--pf-global--BackgroundColor--dark-100", "default": "#151515" }, { "name": "--pf-c-background-image--Filter", "description": "SVG filter applied to the background image", "default": "url(\"#image_overlay\")" }, { "name": "--pf-c-background-image--BackgroundImage-2x", "description": "Background image for 2x DPI screens", "default": "var(--_background-image-2x, var(--_background-image))" }, { "name": "--pf-c-background-image--BackgroundImage--sm", "description": "Background image for small screens", "default": "var(--_background-image-sm, var(--_background-image))" }, { "name": "--pf-c-background-image--BackgroundImage--sm-2x", "description": "Background image for small screens with 2x DPI", "default": "var(--_background-image-sm-2x, var(--_background-image))" }, { "name": "--pf-c-background-image--BackgroundImage--lg", "description": "Background image for large screens", "default": "var(--_background-image-lg, var(--_background-image))" } ], "demos": [ { "url": "https://patternflyelements.org/components/background-image/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-background-image/demo/index.html" } }, { "url": "https://patternflyelements.org/components/background-image/demo/filter-override/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-background-image/demo/filter-override.html" } }, { "url": "https://patternflyelements.org/components/background-image/demo/sibling-content/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-background-image/demo/sibling-content.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-background-image", "declaration": { "name": "PfBackgroundImage", "module": "pf-background-image/pf-background-image.js" } }, { "kind": "js", "name": "PfBackgroundImage", "declaration": { "name": "PfBackgroundImage", "module": "pf-background-image/pf-background-image.js" } } ] }, { "kind": "javascript-module", "path": "pf-badge/pf-badge.js", "declarations": [ { "name": "PfBadge", "description": "A **badge** is used to annotate other information like a label or an object name.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "state", "description": "Denotes the state-of-affairs this badge represents\nOptions include read and unread", "type": { "text": "'unread' | 'read'" }, "kind": "field", "attribute": "state", "reflects": true }, { "name": "number", "description": "Sets a numeric value for a badge.\n\nYou can pair it with `threshold` attribute to add a `+` sign\nif the number exceeds the threshold value.", "type": { "text": "number" }, "kind": "field", "attribute": "number", "reflects": true }, { "name": "threshold", "description": "Sets a threshold for the numeric value and adds `+` sign if\nthe numeric value exceeds the threshold value.", "type": { "text": "number" }, "kind": "field", "attribute": "threshold", "reflects": true } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-badge/pf-badge.ts#L14" }, "kind": "class", "tagName": "pf-badge", "attributes": [ { "name": "state", "description": "Denotes the state-of-affairs this badge represents\nOptions include read and unread", "type": { "text": "'unread' | 'read'" }, "fieldName": "state" }, { "name": "number", "description": "Sets a numeric value for a badge.\n\nYou can pair it with `threshold` attribute to add a `+` sign\nif the number exceeds the threshold value.", "type": { "text": "number" }, "fieldName": "number" }, { "name": "threshold", "description": "Sets a threshold for the numeric value and adds `+` sign if\nthe numeric value exceeds the threshold value.", "type": { "text": "number" }, "fieldName": "threshold" } ], "cssProperties": [ { "name": "--pf-c-badge--BorderRadius", "description": "Border radius for badge", "default": "var(--pf-global--BorderRadius--lg, 180em)" }, { "name": "--pf-global--BorderRadius--lg", "default": "180em" }, { "name": "--pf-c-badge--MinWidth", "description": "Minimum width for badge", "default": "var(--pf-global--spacer--xl, 2rem)" }, { "name": "--pf-global--spacer--xl", "default": "2rem" }, { "name": "--pf-c-badge--PaddingLeft", "description": "Left padding for badge", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-badge--PaddingRight", "description": "Right padding for badge", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-global--spacer--sm", "default": "0.5rem" }, { "name": "--pf-c-badge--FontSize", "description": "Font size for badge", "default": "var(--pf-theme--font-size, 0.75em)" }, { "name": "--pf-theme--font-size", "default": "0.75em" }, { "name": "--pf-c-badge--FontWeight", "description": "Font weight for badge", "default": "var(--pf-theme--font-weight--bold, 700)" }, { "name": "--pf-theme--font-weight--bold", "default": "700" }, { "name": "--pf-c-badge--LineHeight", "description": "Line height for badge", "default": "var(--pf-global--LineHeight--md, 1.5)" }, { "name": "--pf-global--LineHeight--md", "default": "1.5" }, { "name": "--pf-c-badge--m-read--Color", "default": "var(--pf-global--palette--black-900, #151515)" }, { "name": "--pf-global--palette--black-900", "default": "#151515" }, { "name": "--pf-c-badge--m-read--BackgroundColor", "default": "var(--pf-global--palette--black-200, #f0f0f0)" }, { "name": "--pf-global--palette--black-200", "default": "#f0f0f0" }, { "name": "--pf-c-badge--Color", "description": "Color for badge\n\nColor for read badge\n\nColor for unread badge", "default": "var(--pf-c-badge--m-unread--Color,\n var(--pf-global--palette--white, #fff))" }, { "name": "--pf-c-badge--m-unread--Color", "default": "var(--pf-global--palette--white, #fff)" }, { "name": "--pf-global--palette--white", "default": "#fff" }, { "name": "--pf-c-badge--BackgroundColor", "description": "Background color for badge\n\nBackground color for read badge\n\nBackground color for unread badge", "default": "var(--pf-c-badge--m-unread--BackgroundColor,\n var(--pf-global--palette--blue-400, #06c))" }, { "name": "--pf-c-badge--m-unread--BackgroundColor", "default": "var(--pf-global--palette--blue-400, #06c)" }, { "name": "--pf-global--palette--blue-400", "default": "#06c" } ], "demos": [ { "url": "https://patternflyelements.org/components/badge/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-badge/demo/index.html" } }, { "url": "https://patternflyelements.org/components/badge/demo/read/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-badge/demo/read.html" } }, { "url": "https://patternflyelements.org/components/badge/demo/threshold/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-badge/demo/threshold.html" } }, { "url": "https://patternflyelements.org/components/badge/demo/unread/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-badge/demo/unread.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-badge", "declaration": { "name": "PfBadge", "module": "pf-badge/pf-badge.js" } }, { "kind": "js", "name": "PfBadge", "declaration": { "name": "PfBadge", "module": "pf-badge/pf-badge.js" } } ] }, { "kind": "javascript-module", "path": "pf-banner/pf-banner.js", "declarations": [ { "name": "PfBanner", "summary": "Allows users to display a stylized banner.", "description": "A banner is a 1-line, full color, full width container that can be used to communicate short snippets of information to users.\nBanners are un-intrusive and non-dismissible.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "variant", "description": "Changes the visual appearance of the banner.", "type": { "text": "BannerVariant" }, "kind": "field", "attribute": "variant", "reflects": true }, { "name": "icon", "description": "Shorthand for the `icon` slot, the value is icon name", "type": { "text": "string" }, "kind": "field", "attribute": "icon" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-banner/pf-banner.ts#L26" }, "kind": "class", "tagName": "pf-banner", "attributes": [ { "name": "variant", "description": "Changes the visual appearance of the banner.", "type": { "text": "BannerVariant" }, "fieldName": "variant" }, { "name": "icon", "description": "Shorthand for the `icon` slot, the value is icon name", "type": { "text": "string" }, "fieldName": "icon" } ], "slots": [ { "name": "icon", "description": "Contains the labels's icon, e.g. web-icon-alert-success." }, { "name": "", "description": "Contains the text for the banner" } ], "cssParts": [ { "name": "container", "description": "The container of the banner" }, { "name": "icon", "description": "Contains the labels's icon, e.g. web-icon-alert-success." } ], "cssProperties": [ { "name": "--pf-c-banner--link--Color", "description": "Link color for banner (references banner color)", "default": "var(--pf-c-banner--Color)" }, { "name": "--pf-c-banner--link--TextDecoration", "description": "Link text decoration for banner", "default": "underline" }, { "name": "--pf-c-banner--link--hover--Color", "description": "Link hover color for banner (references banner color)", "default": "var(--pf-c-banner--Color)" }, { "name": "--pf-c-banner--link--hover--FontWeight", "description": "Link hover font weight for banner", "default": "var(--pf-global--FontWeight--semi-bold, 700)" }, { "name": "--pf-global--FontWeight--semi-bold", "default": "700" }, { "name": "--pf-c-banner--link--disabled--Color", "description": "Disabled link color for banner (references banner color)", "default": "var(--pf-c-banner--Color)" }, { "name": "--pf-c-banner--Color", "description": "Text color for banner", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-banner--link--disabled--TextDecoration", "description": "Disabled link text decoration for banner", "default": "none" }, { "name": "--pf-c-banner--PaddingTop", "description": "Top padding for banner", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-banner--PaddingRight", "description": "Right padding for banner", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-banner--PaddingBottom", "description": "Bottom padding for banner", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-global--spacer--xs", "default": "0.25rem" }, { "name": "--pf-c-banner--PaddingLeft", "description": "Left padding for banner", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-global--spacer--md", "default": "1rem" }, { "name": "--pf-c-banner--FontSize", "description": "Font size for banner", "default": "var(--pf-global--FontSize--sm, 0.875rem)" }, { "name": "--pf-global--FontSize--sm", "default": "0.875rem" }, { "name": "--pf-global--Color--light-100", "default": "#ffffff" }, { "name": "--pf-c-banner--BackgroundColor", "description": "Background color for banner", "default": "var(--pf-global--BackgroundColor--dark-400, #4f5255)" }, { "name": "--pf-global--BackgroundColor--dark-400", "default": "#4f5255" }, { "name": "--pf-c-banner--m-info--BackgroundColor", "description": "Background color for info banner", "default": "var(--pf-global--palette--blue-200, #73bcf7)" }, { "name": "--pf-global--palette--blue-200", "default": "#73bcf7" }, { "name": "--pf-c-banner--m-danger--BackgroundColor", "description": "Background color for danger banner", "default": "var(--pf-global--danger-color--100, #c9190b)" }, { "name": "--pf-global--danger-color--100", "default": "#c9190b" }, { "name": "--pf-c-banner--m-success--BackgroundColor", "description": "Background color for success banner", "default": "var(--pf-global--success-color--100, #3e8635)" }, { "name": "--pf-global--success-color--100", "default": "#3e8635" }, { "name": "--pf-global--Color--100", "default": "var(--pf-global--Color--dark-100, #151515)" }, { "name": "--pf-global--Color--dark-100", "default": "#151515" }, { "name": "--pf-c-banner--m-warning--BackgroundColor", "description": "Background color for warning banner", "default": "var(--pf-global--warning-color--100, #f0ab00)" }, { "name": "--pf-global--warning-color--100", "default": "#f0ab00" }, { "name": "--pf-l-flex--Display", "default": "flex" }, { "name": "--pf-l-flex--FlexWrap", "default": "wrap" }, { "name": "--pf-l-flex--AlignItems", "default": "baseline" }, { "name": "--pf-l-flex--spacer", "default": "var(--pf-l-flex--spacer--sm, var(--pf-global--spacer--sm, 0.5rem))" }, { "name": "--pf-l-flex--spacer--sm", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-global--spacer--sm", "default": "0.5rem" }, { "name": "--pf-c-banner--m-sticky--ZIndex", "description": "Z-index for sticky banner", "default": "var(--pf-global--ZIndex--md, 300)" }, { "name": "--pf-global--ZIndex--md", "default": "300" }, { "name": "--pf-c-banner--m-sticky--BoxShadow", "description": "Box shadow for sticky banner", "default": "var(--pf-global--BoxShadow--md-bottom, 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18))" }, { "name": "--pf-global--BoxShadow--md-bottom", "default": "0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)" }, { "name": "--pf-c-banner--md--PaddingRight", "description": "Right padding for banner on medium screens", "default": "var(--pf-global--spacer--lg, 1.5rem)" }, { "name": "--pf-c-banner--md--PaddingLeft", "description": "Left padding for banner on medium screens", "default": "var(--pf-global--spacer--lg, 1.5rem)" }, { "name": "--pf-global--spacer--lg", "default": "1.5rem" } ], "demos": [ { "url": "https://patternflyelements.org/components/banner/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-banner/demo/index.html" } }, { "url": "https://patternflyelements.org/components/banner/demo/status-banners/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-banner/demo/status-banners.html" } }, { "url": "https://patternflyelements.org/components/banner/demo/sticky/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-banner/demo/sticky.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-banner", "declaration": { "name": "PfBanner", "module": "pf-banner/pf-banner.js" } }, { "kind": "js", "name": "PfBanner", "declaration": { "name": "PfBanner", "module": "pf-banner/pf-banner.js" } } ] }, { "kind": "javascript-module", "path": "pf-button/pf-button.js", "declarations": [ { "name": "PfButton", "summary": "Allows users to perform an action when triggered", "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..", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "type", "type": { "text": "'button' | 'submit' | 'reset'" }, "kind": "field", "attribute": "type", "reflects": true }, { "name": "label", "description": "Accessible name for the button, use when the button does not have slotted text", "type": { "text": "string" }, "kind": "field", "attribute": "label" }, { "name": "value", "description": "Form value for the button", "type": { "text": "string" }, "kind": "field", "attribute": "value" }, { "name": "name", "description": "Form element name for the button", "type": { "text": "string" }, "kind": "field", "attribute": "name" }, { "name": "disabled", "description": "Disables the button", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "disabled", "reflects": true }, { "name": "loading", "description": "Represents the state of a stateful button", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "loading", "reflects": true }, { "name": "size", "description": "Changes the size of the button.", "type": { "text": "'small' | 'large'" }, "kind": "field", "attribute": "size", "reflects": true }, { "name": "warning", "description": "Not as urgent as danger", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "warning", "reflects": true }, { "name": "danger", "description": "Use danger buttons for actions a user can take that are potentially\ndestructive or difficult/impossible to undo, like deleting or removing\nuser data.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "danger", "reflects": true }, { "name": "plain", "description": "Applies plain styles", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "plain", "reflects": true }, { "name": "variant", "description": "Changes the style of the button.\n- Primary: Used for the most important call to action on a page. Try to\nlimit primary buttons to one per page.\n- Secondary: Use secondary buttons for general actions on a page, that\ndon’t require as much emphasis as primary button actions. For example,\nyou can use secondary buttons where there are multiple actions, like in\ntoolbars or data lists.\n- Tertiary: Tertiary buttons are flexible and can be used as needed.", "type": { "text": "ButtonVariant" }, "default": "'primary'", "kind": "field", "attribute": "variant", "reflects": true }, { "name": "inline", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "inline", "reflects": true }, { "name": "block", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "block", "reflects": true }, { "name": "icon", "description": "Shorthand for the `icon` slot, the value is icon name", "type": { "text": "string" }, "kind": "field", "attribute": "icon" }, { "name": "iconSet", "description": "Icon set for the `icon` property", "type": { "text": "string" }, "kind": "field", "attribute": "icon-set" }, { "name": "href", "description": "Store the URL Link", "type": { "text": "string" }, "kind": "field", "attribute": "href", "reflects": true }, { "name": "target", "description": "Redirecting the URL Link to new Tab", "type": { "text": "string" }, "kind": "field", "attribute": "target", "reflects": true } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-button/pf-button.ts#L38" }, "kind": "class", "tagName": "pf-button", "attributes": [ { "name": "loading-label", "description": "ARIA label for the loading indicator", "type": { "text": "string" }, "default": "'loading'" }, { "name": "type", "type": { "text": "'button' | 'submit' | 'reset'" }, "fieldName": "type" }, { "name": "label", "description": "Accessible name for the button, use when the button does not have slotted text", "type": { "text": "string" }, "fieldName": "label" }, { "name": "value", "description": "Form value for the button", "type": { "text": "string" }, "fieldName": "value" }, { "name": "name", "description": "Form element name for the button", "type": { "text": "string" }, "fieldName": "name" }, { "name": "disabled", "description": "Disables the button", "type": { "text": "boolean" }, "default": "false", "fieldName": "disabled" }, { "name": "loading", "description": "Represents the state of a stateful button", "type": { "text": "boolean" }, "default": "false", "fieldName": "loading" }, { "name": "size", "description": "Changes the size of the button.", "type": { "text": "'small' | 'large'" }, "fieldName": "size" }, { "name": "warning", "description": "Not as urgent as danger", "type": { "text": "boolean" }, "default": "false", "fieldName": "warning" }, { "name": "danger", "description": "Use danger buttons for actions a user can take that are potentially\ndestructive or difficult/impossible to undo, like deleting or removing\nuser data.", "type": { "text": "boolean" }, "default": "false", "fieldName": "danger" }, { "name": "plain", "description": "Applies plain styles", "type": { "text": "boolean" }, "default": "false", "fieldName": "plain" }, { "name": "variant", "description": "Changes the style of the button.\n- Primary: Used for the most important call to action on a page. Try to\nlimit primary buttons to one per page.\n- Secondary: Use secondary buttons for general actions on a page, that\ndon’t require as much emphasis as primary button actions. For example,\nyou can use secondary buttons where there are multiple actions, like in\ntoolbars or data lists.\n- Tertiary: Tertiary buttons are flexible and can be used as needed.", "type": { "text": "ButtonVariant" }, "default": "'primary'", "fieldName": "variant" }, { "name": "inline", "type": { "text": "boolean" }, "default": "false", "fieldName": "inline" }, { "name": "block", "type": { "text": "boolean" }, "default": "false", "fieldName": "block" }, { "name": "icon", "description": "Shorthand for the `icon` slot, the value is icon name", "type": { "text": "string" }, "fieldName": "icon" }, { "name": "icon-set", "description": "Icon set for the `icon` property", "type": { "text": "string" }, "fieldName": "iconSet" }, { "name": "href", "description": "Store the URL Link", "type": { "text": "string" }, "fieldName": "href" }, { "name": "target", "description": "Redirecting the URL Link to new Tab", "type": { "text": "string" }, "fieldName": "target" } ], "slots": [ { "name": "icon" }, { "name": "" } ], "cssParts": [ { "name": "icon" } ], "cssProperties": [ { "name": "--pf-c-button__icon--m-start--MarginLeft", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-button--FontWeight", "default": "var(--pf-global--FontWeight--normal, 400)" }, { "name": "--pf-global--FontWeight--normal", "default": "400" }, { "name": "--pf-c-button--LineHeight", "default": "var(--pf-global--LineHeight--md, 1.5)" }, { "name": "--pf-global--LineHeight--md", "default": "1.5" }, { "name": "--pf-c-button--BackgroundColor", "description": "BackgroundColor for the button", "default": "transparent" }, { "name": "--pf-c-button--PaddingBottom", "default": "var(--pf-global--spacer--form-element, 0.375rem)" }, { "name": "--pf-global--spacer--form-element", "default": "0.375rem" }, { "name": "--pf-c-button--BorderRadius", "default": "var(--pf-global--BorderRadius--sm, 3px)" }, { "name": "--pf-global--BorderRadius--sm", "default": "3px" }, { "name": "--pf-c-button--after--BorderWidth" }, { "name": "--pf-c-button--after--BorderRadius" }, { "name": "--pf-c-button--m-primary--focus--Color", "default": "var(--pf-global--Color--light-100, #fff)" }, { "name": "--pf-c-button--m-primary--focus--BackgroundColor", "default": "var(--pf-global--primary-color--200, #004080)" }, { "name": "--pf-c-button--focus--after--BorderWidth", "default": "var(--pf-global--BorderWidth--md, 2px)" }, { "name": "--pf-c-button--m-danger--focus--Color", "default": "var(--pf-global--Color--light-100, #fff)" }, { "name": "--pf-c-button--m-danger--focus--BackgroundColor", "default": "var(--pf-global--danger-color--200, #a30000)" }, { "name": "--pf-c-button--m-link--focus--Color", "default": "var(--pf-global--link--Color--hover, #004080)" }, { "name": "--pf-c-button--m-plain--focus--Color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-button--m-plain--focus--BackgroundColor", "default": "transparent" }, { "name": "--pf-c-button--m-primary--hover--Color", "default": "var(--pf-global--Color--light-100, #fff)" }, { "name": "--pf-c-button--m-primary--hover--BackgroundColor", "default": "var(--pf-global--primary-color--200, #004080)" }, { "name": "--pf-c-button--hover--after--BorderWidth", "default": "var(--pf-global--BorderWidth--md, 2px)" }, { "name": "--pf-c-button--m-danger--hover--Color", "default": "var(--pf-global--Color--light-100, #fff)" }, { "name": "--pf-c-button--m-danger--hover--BackgroundColor", "default": "var(--pf-global--danger-color--200, #a30000)" }, { "name": "--pf-c-button--m-link--hover--Color", "default": "var(--pf-global--link--Color--hover, #004080)" }, { "name": "--pf-c-button--m-link--hover--BackgroundColor", "default": "transparent" }, { "name": "--pf-c-button--m-plain--hover--Color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-button--m-plain--hover--BackgroundColor", "default": "transparent" }, { "name": "--pf-c-button--m-primary--Color", "default": "var(--pf-c-button--m-primary--active--Color,\n var(--pf-global--Color--light-100, #fff))" }, { "name": "--pf-c-button--m-primary--active--Color", "default": "var(--pf-global--Color--light-100, #fff)" }, { "name": "--pf-c-button--m-primary--active--BackgroundColor", "default": "var(--pf-global--primary-color--200, #004080)" }, { "name": "--pf-global--primary-color--200", "default": "#004080" }, { "name": "--pf-c-button--active--after--BorderWidth", "default": "var(--pf-global--BorderWidth--md, 2px)" }, { "name": "--pf-c-button--m-danger--active--Color", "default": "var(--pf-global--Color--light-100, #fff)" }, { "name": "--pf-c-button--m-danger--active--BackgroundColor", "default": "var(--pf-global--danger-color--200, #a30000)" }, { "name": "--pf-c-button--m-link--active--Color", "default": "var(--pf-global--link--Color--hover, #004080)" }, { "name": "--pf-global--link--Color--hover", "default": "#004080" }, { "name": "--pf-c-button--m-link--active--BackgroundColor", "default": "transparent" }, { "name": "--pf-c-button--m-plain--disabled--BackgroundColor", "default": "transparent" }, { "name": "--pf-global--Color--200", "default": "#6a6e73" }, { "name": "--pf-c-button--m-plain--BackgroundColor", "default": "transparent" }, { "name": "--pf-c-button--m-plain--Color", "default": "var(--pf-c-button--m-plain--active--Color,\n var(--pf-global--Color--100, #151515))" }, { "name": "--pf-c-button--m-plain--active--Color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-button--m-plain--active--BackgroundColor", "default": "tranparent" }, { "name": "--pf-c-button--m-plain--disabled--Color", "default": "var(--pf-global--disabled--color--200, #d2d2d2)" }, { "name": "--pf-global--disabled--color--200", "default": "#d2d2d2" }, { "name": "--pf-c-button--PaddingRight", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-button--m-warning--BackgroundColor", "default": "var(--pf-global--warning-color--100, #f0ab00)" }, { "name": "--pf-global--warning-color--100", "default": "#f0ab00" }, { "name": "--pf-c-button--m-warning--focus--Color", "default": "var(--pf-global--Color--dark-100, #151515)" }, { "name": "--pf-c-button--m-warning--focus--BackgroundColor", "default": "var(--pf-global--palette--gold-500, #c58c00)" }, { "name": "--pf-c-button--m-warning--hover--Color", "default": "var(--pf-global--Color--dark-100, #151515)" }, { "name": "--pf-c-button--m-warning--hover--BackgroundColor", "default": "var(--pf-global--palette--gold-500, #c58c00)" }, { "name": "--pf-c-button--m-warning--Color", "default": "var(--pf-c-button--m-warning--active--Color,\n var(--pf-global--Color--dark-100, #151515))" }, { "name": "--pf-c-button--m-warning--active--Color", "default": "var(--pf-global--Color--dark-100, #151515)" }, { "name": "--pf-global--Color--dark-100", "default": "#151515" }, { "name": "--pf-c-button--m-warning--active--BackgroundColor", "default": "var(--pf-global--palette--gold-500, #c58c00)" }, { "name": "--pf-global--palette--gold-500", "default": "#c58c00" }, { "name": "--pf-c-button--m-link--m-inline__progress--Left" }, { "name": "--pf-c-button__progress--Top", "default": "50%" }, { "name": "--pf-c-button__progress--Left", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-button__progress--TranslateX", "default": "0" }, { "name": "--pf-c-button__progress--TranslateY", "default": "-50%" }, { "name": "--pf-c-button__icon--m-start--MarginRight", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-global--spacer--xs", "default": "0.25rem" }, { "name": "--pf-c-button--PaddingLeft", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-button--m-in-progress--PaddingRight", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-button--m-in-progress--PaddingLeft", "default": "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)" }, { "name": "--pf-c-button__progress--width", "default": "calc(var(--pf-global--icon--FontSize--md, 1.125rem) + var(--pf-global--spacer--sm, 0.5rem))" }, { "name": "--pf-global--icon--FontSize--md", "default": "1.125rem" }, { "name": "--pf-global--spacer--sm", "default": "0.5rem" }, { "name": "--pf-c-button--m-secondary--BackgroundColor", "default": "transparent" }, { "name": "--pf-c-button--m-secondary--after--BorderColor", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-c-button--m-secondary--focus--Color", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-c-button--m-secondary--focus--BackgroundColor", "default": "transparent" }, { "name": "--pf-c-button--m-secondary--focus--after--BorderColor", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-c-button--m-secondary--m-danger--focus--Color", "default": "var(--pf-global--danger--color--200, #a30000)" }, { "name": "--pf-c-button--m-secondary--m-danger--focus--BackgroundColor", "default": "transparent" }, { "name": "--pf-c-button--m-secondary--hover--Color", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-c-button--m-secondary--hover--BackgroundColor", "default": "transparent" }, { "name": "--pf-c-button--m-secondary--hover--after--BorderColor", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-c-button--m-secondary--m-danger--hover--Color", "default": "var(--pf-global--danger--color--200, #a30000)" }, { "name": "--pf-c-button--m-secondary--m-danger--hover--BackgroundColor", "default": "transparent" }, { "name": "--pf-c-button--m-secondary--Color", "default": "var(--pf-c-button--m-secondary--active--Color,\n var(--pf-global--primary-color--100, #06c))" }, { "name": "--pf-c-button--m-secondary--active--Color", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-global--FontSize--sm", "default": "0.875rem" }, { "name": "--pf-c-button--m-secondary--active--BackgroundColor", "default": "transparent" }, { "name": "--pf-c-button--m-secondary--active--after--BorderColor", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-global--primary-color--100", "default": "#06c" }, { "name": "--pf-c-button--m-secondary--m-danger--active--Color", "default": "var(--pf-global--danger--color--200, #a30000)" }, { "name": "--pf-global--danger--color--200", "default": "#a30000" }, { "name": "--pf-global--FontSize--lg", "default": "1.125rem" }, { "name": "--pf-c-button--m-secondary--m-danger--active--BackgroundColor", "default": "transparent" }, { "name": "--pf-c-button--m-secondary--m-danger--Color", "default": "var(--pf-global--danger--color--100, #c9190b)" }, { "name": "--pf-c-button--m-secondary--m-danger--BackgroundColor", "default": "transparent" }, { "name": "--pf-c-button--m-secondary--m-danger--after--BorderColor", "default": "var(--pf-global--danger--color--100, #c9190b)" }, { "name": "--pf-c-button--m-secondary--m-danger--focus--after--BorderColor", "default": "var(--pf-global--danger--color--100, #c9190b)" }, { "name": "--pf-global--TransitionDuration", "default": "250ms" }, { "name": "--pf-c-button--m-secondary--m-danger--hover--after--BorderColor", "default": "var(--pf-global--danger--color--100, #c9190b)" }, { "name": "--pf-c-button--after--BorderColor", "default": "var(--pf-c-button--m-secondary--m-danger--active--after--BorderColor,\n var(--pf-global--danger--color--100, #c9190b))" }, { "name": "--pf-c-button--m-secondary--m-danger--active--after--BorderColor", "default": "var(--pf-global--danger--color--100, #c9190b)" }, { "name": "--pf-global--danger--color--100", "default": "#c9190b" }, { "name": "--pf-c-button--m-tertiary--after--BorderColor", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-button--m-tertiary--BackgroundColor", "default": "transparent" }, { "name": "--pf-global--BackgroundColor--200", "default": "#f0f0f0" }, { "name": "--pf-c-button--m-tertiary--focus--Color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-button--m-tertiary--focus--BackgroundColor", "default": "transparent" }, { "name": "--pf-c-button--m-tertiary--focus--after--BorderColor", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-button--m-primary--BackgroundColor", "description": "BackgroundColor for the primary button variant\n\nInternal button background color property", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-c-button--m-tertiary--hover--Color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-button--m-tertiary--hover--BackgroundColor", "default": "transparent" }, { "name": "--pf-c-button--m-tertiary--hover--after--BorderColor", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-button--m-tertiary--Color", "default": "var(--pf-c-button--m-tertiary--active--Color,\n var(--pf-global--Color--100, #151515))" }, { "name": "--pf-c-button--m-tertiary--active--Color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-button--m-tertiary--active--BackgroundColor", "default": "transparent" }, { "name": "--pf-c-button--m-tertiary--active--after--BorderColor", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-button--m-control--BorderRadius", "default": "0" }, { "name": "--pf-c-button--m-control--disabled--BackgroundColor", "default": "var(--pf-global--disabled-color--300, #f0f0f0)" }, { "name": "--pf-global--disabled-color--300", "default": "#f0f0f0" }, { "name": "--pf-c-button--m-control--after--BorderWidth", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-global--BorderWidth--sm", "default": "1px" }, { "name": "--pf-c-button--m-control--after--BorderTopColor", "default": "var(--pf-global--BorderColor--300, #f0f0f0)" }, { "name": "--pf-c-button--m-control--after--BorderRightColor", "default": "var(--pf-global--BorderColor--300, #f0f0f0)" }, { "name": "--pf-c-button--m-control--after--BorderBottomColor", "default": "var(--pf-global--BorderColor--200, #8a8d90)" }, { "name": "--pf-global--BorderColor--200", "default": "#8a8d90" }, { "name": "--pf-c-button--m-control--after--BorderLeftColor", "default": "var(--pf-global--BorderColor--300, #f0f0f0)" }, { "name": "--pf-global--BorderColor--300", "default": "#f0f0f0" }, { "name": "--pf-c-button--m-control--BackgroundColor", "default": "var(--pf-global--BackgroundColor--100, #fff)" }, { "name": "--pf-c-button--m-control--focus--Color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-button--m-control--focus--BackgroundColor", "default": "var(--pf-global--BackgroundColor--100, #fff)" }, { "name": "--pf-c-button--m-control--focus--after--BorderBottomColor", "default": "var(--pf-global--active-color--100, #06c)" }, { "name": "--pf-c-button--m-control--focus--after--BorderBottomWidth", "default": "var(--pf-global--BorderWidth--md, 2px)" }, { "name": "--pf-c-button--m-control--hover--Color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-button--m-control--hover--BackgroundColor", "default": "var(--pf-global--BackgroundColor--100, #fff)" }, { "name": "--pf-c-button--m-control--hover--after--BorderBottomColor", "default": "var(--pf-global--active-color--100, #06c)" }, { "name": "--pf-c-button--m-control--hover--after--BorderBottomWidth", "default": "var(--pf-global--BorderWidth--md, 2px)" }, { "name": "--pf-c-button--m-control--Color", "default": "var(--pf-c-button--m-control--active--Color,\n var(--pf-global--Color--100, #151515))" }, { "name": "--pf-c-button--m-control--active--Color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-global--Color--100", "default": "#151515" }, { "name": "--pf-c-button--m-control--active--BackgroundColor", "default": "var(--pf-global--BackgroundColor--100, #fff)" }, { "name": "--pf-global--BackgroundColor--100", "default": "#fff" }, { "name": "--pf-c-button--m-control--active--after--BorderBottomColor", "default": "var(--pf-global--active-color--100, #06c)" }, { "name": "--pf-global--active-color--100", "default": "#06c" }, { "name": "--pf-c-button--m-control--active--after--BorderBottomWidth", "default": "var(--pf-global--BorderWidth--md, 2px)" }, { "name": "--pf-global--BorderWidth--md", "default": "2px" }, { "name": "--pf-c-button--m-link--disabled--BackgroundColor", "default": "transparent" }, { "name": "--pf-c-button--m-link--Color", "default": "var(--pf-global--link--Color, #06c)" }, { "name": "--pf-global--link--Color", "default": "#06c" }, { "name": "--pf-c-button--m-link--BackgroundColor", "default": "transparent" }, { "name": "--pf-c-button--m-link--m-inline--hover--TextDecoration", "default": "var(--pf-global--link--TextDecoration--hover, underline)" }, { "name": "--pf-global--link--TextDecoration--hover", "default": "underline" }, { "name": "--pf-c-button--m-link--m-danger--BackgroundColor", "default": "transparent" }, { "name": "--pf-c-button--m-link--m-danger--hover--Color", "default": "var(--pf-global--danger-color--200, #a30000)" }, { "name": "--pf-c-button--m-link--m-danger--hover--BackgroundColor", "default": "transparent" }, { "name": "--pf-c-button--m-link--m-danger--focus--Color", "default": "var(--pf-global--danger-color--200, #a30000)" }, { "name": "--pf-c-button--m-link--m-danger--focus--BackgroundColor", "default": "transparent" }, { "name": "--pf-c-button--m-link--m-danger--Color", "default": "var(--pf-c-button--m-link--m-danger--active--Color,\n var(--pf-global--danger-color--200, #a30000))" }, { "name": "--pf-c-button--m-link--m-danger--active--Color", "default": "var(--pf-global--danger-color--200, #a30000)" }, { "name": "--pf-global--danger-color--200", "default": "#a30000" }, { "name": "--pf-c-button--m-link--m-danger--active--BackgroundColor", "default": "transparent" }, { "name": "--pf-c-button--disabled--Color", "default": "var(--pf-global--disabled-color--100, #6a6e73)" }, { "name": "--pf-global--disabled-color--100", "default": "#6a6e73" }, { "name": "--pf-c-button--disabled--BackgroundColor", "default": "var(--pf-global--disabled-color--200, #d2d2d2)" }, { "name": "--pf-global--disabled-color--200", "default": "#d2d2d2" }, { "name": "--pf-c-button--disabled--after--BorderColor", "default": "transparent" }, { "name": "--pf-c-button--PaddingTop", "default": "var(--pf-c-button--m-display-lg--PaddingTop,\n var(--pf-global--spacer--md, 1rem))" }, { "name": "--pf-c-button--m-display-lg--PaddingTop", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-button--m-display-lg--PaddingRight", "default": "var(--pf-global--spacer--xl, 2rem)" }, { "name": "--pf-c-button--m-display-lg--PaddingBottom", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-global--spacer--md", "default": "1rem" }, { "name": "--pf-c-button--m-display-lg--PaddingLeft", "default": "var(--pf-global--spacer--xl, 2rem)" }, { "name": "--pf-global--spacer--xl", "default": "2rem" }, { "name": "--pf-c-button--m-display-lg--FontWeight", "default": "var(--pf-global--FontWeight--bold, 700)" }, { "name": "--pf-global--FontWeight--bold", "default": "700" }, { "name": "--pf-c-button--FontSize", "default": "var(--pf-c-button--m-small--FontSize,\n var(--pf-global--FontSize--md, 1rem))" }, { "name": "--pf-c-button--m-small--FontSize", "default": "var(--pf-global--FontSize--md, 1rem)" }, { "name": "--pf-global--FontSize--md", "default": "1rem" }, { "name": "--pf-c-button--m-danger--Color", "default": "var(--pf-global--Color--light-100, #fff)" }, { "name": "--pf-global--Color--light-100", "default": "#fff" }, { "name": "--pf-c-button--m-danger--BackgroundColor", "default": "var(--pf-global--danger-color--100, #c9190b)" }, { "name": "--pf-global--danger-color--100", "default": "#c9190b" } ], "demos": [ { "url": "https://patternflyelements.org/components/button/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-button/demo/index.html" } }, { "url": "https://patternflyelements.org/components/button/demo/block/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-button/demo/block.html" } }, { "url": "https://patternflyelements.org/components/button/demo/form-control/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-button/demo/form-control.html" } }, { "url": "https://patternflyelements.org/components/button/demo/sizes/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-button/demo/sizes.html" } }, { "url": "https://patternflyelements.org/components/button/demo/stateful/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-button/demo/stateful.html" } }, { "url": "https://patternflyelements.org/components/button/demo/user-role/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-button/demo/user-role.html" } }, { "url": "https://patternflyelements.org/components/button/demo/variants/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-button/demo/variants.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-button", "declaration": { "name": "PfButton", "module": "pf-button/pf-button.js" } }, { "kind": "js", "name": "PfButton", "declaration": { "name": "PfButton", "module": "pf-button/pf-button.js" } } ] }, { "kind": "javascript-module", "path": "pf-card/pf-card.js", "declarations": [ { "name": "PfCard", "summary": "Gives a preview of information in a small layout", "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.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "size", "description": "Optionally provide a size for the card and the card contents.\nThe default is set to `undefined` and provides default styles.\nCompact provides styles which decreases the padding between the sections.\nLarge provides styles which increases the padding between the sections and the font size for the title, header, and footer.", "type": { "text": "'compact' | 'large'" }, "kind": "field", "attribute": "size", "reflects": true }, { "name": "rounded", "description": "Optionally apply a border radius for the drop shadow and/or border.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "rounded", "reflects": true }, { "name": "fullHeight", "description": "Optionally allow the card to take up the full height of the parent element.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "full-height", "reflects": true }, { "name": "plain", "description": "Optionally remove the border on the card container.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "plain", "reflects": true } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-card/pf-card.ts#L20" }, "kind": "class", "tagName": "pf-card", "attributes": [ { "name": "size", "description": "Optionally provide a size for the card and the card contents.\nThe default is set to `undefined` and provides default styles.\nCompact provides styles which decreases the padding between the sections.\nLarge provides styles which increases the padding between the sections and the font size for the title, header, and footer.", "type": { "text": "'compact' | 'large'" }, "fieldName": "size" }, { "name": "rounded", "description": "Optionally apply a border radius for the drop shadow and/or border.", "type": { "text": "boolean" }, "default": "false", "fieldName": "rounded" }, { "name": "full-height", "description": "Optionally allow the card to take up the full height of the parent element.", "type": { "text": "boolean" }, "default": "false", "fieldName": "fullHeight" }, { "name": "plain", "description": "Optionally remove the border on the card container.", "type": { "text": "boolean" }, "default": "false", "fieldName": "plain" } ], "slots": [ { "name": "header", "summary": "When included, defines the contents of a card.", "description": "Card headers can contain images as well as the title of a card and an actions menu\nrepresented by the right-aligned kebab. In most cases, your card should include a\nheader. The only exceptions are when cards being used as a layout element to\ncreate a white background behind other content." }, { "name": "title", "summary": "Communicates the title of a card if it's not included in the header.", "description": "If a card will be utilized as a selectable and clickable card, the title\nneeds to be made as a linked text to trigger action and indicate interaction." }, { "name": "", "summary": "Body. Provides details about the item.", "description": "A card body can include any combination of static text and/or active content." }, { "name": "footer", "summary": "Contains external links, actions, or static text at the bottom of a card." } ], "cssParts": [ { "name": "header", "summary": "The container for *header* content" }, { "name": "body", "summary": "The container for *body* content" }, { "name": "footer", "summary": "The container for *footer* content" } ], "cssProperties": [ { "name": "--pf-global--BackgroundColor--100", "default": "#fff" }, { "name": "--pf-global--BoxShadow--sm", "default": "0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)" }, { "name": "--pf-global--FontFamily--heading--sans-serif", "default": "\"RedHatDisplay\", \"Overpass\", overpass, helvetica, arial, sans-serif" }, { "name": "--pf-global--FontWeight--bold", "default": "700" }, { "name": "--pf-global--FontSize--md", "default": "1rem" }, { "name": "--pf-global--Transition", "default": "all 250ms cubic-bezier(0.42, 0, 0.58, 1)" }, { "name": "--pf-global--BorderWidth--lg", "default": "3px" }, { "name": "--pf-global--BorderWidth--xl", "default": "4px" }, { "name": "--pf-global--BoxShadow--md", "default": "0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)" }, { "name": "--pf-global--active-color--400", "default": "#73bcf7" }, { "name": "--pf-global--active-color--100", "default": "#06c" }, { "name": "--pf-global--BoxShadow--lg", "default": "0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)" }, { "name": "--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base" }, { "name": "--pf-global--ZIndex--xs", "default": "100" }, { "name": "--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY" }, { "name": "--pf-global--BackgroundColor--light-200", "default": "#fafafa" }, { "name": "--pf-global--disabled-color--200", "default": "#d2d2d2" }, { "name": "--pf-global--FontSize--sm", "default": "0.875rem" }, { "name": "--pf-global--spacer--md", "default": "1rem" }, { "name": "--pf-global--spacer--sm", "default": "0.5rem" }, { "name": "--pf-global--FontSize--xl", "default": "1.25rem" }, { "name": "--pf-global--spacer--xl", "default": "2rem" }, { "name": "--pf-global--spacer--lg", "default": "1.5rem" }, { "name": "--pf-global--BorderWidth--sm", "default": "1px" }, { "name": "--pf-global--BorderColor--100", "default": "#d2d2d2" }, { "name": "--pf-global--BorderRadius--sm", "default": "3px" }, { "name": "--pf-global--spacer--form-element", "default": "0.375rem" }, { "name": "--pf-global--spacer--xs", "default": "0.25rem" }, { "name": "--pf-global--BorderWidth--md", "default": "2px" }, { "name": "--pf-global--primary-color--100", "default": "#06c" }, { "name": "--pf-c-card--BackgroundColor", "description": "BackgroundColor for the card", "default": "var(--pf-global--BackgroundColor--100, #fff)" }, { "name": "--pf-c-card--first-child--PaddingTop" }, { "name": "--pf-c-card__title--FontFamily", "description": "FontFamily for the card title", "default": "var(--pf-global--FontFamily--heading--sans-serif, \"RedHatDisplay\", \"Overpass\", overpass, helvetica, arial, sans-serif)" }, { "name": "--pf-c-card__title--FontWeight", "description": "FontWeight for the card title", "default": "var(--pf-global--FontWeight--bold, 700)" }, { "name": "--pf-c-card--child--PaddingLeft" }, { "name": "--pf-c-card--child--PaddingRight" }, { "name": "--pf-c-card--child--PaddingBottom" }, { "name": "--pf-c-card__title--not--last-child--PaddingBottom" }, { "name": "--pf-c-card__body--FullHeight--Flex" }, { "name": "--pf-c-card__footer--FontSize" }, { "name": "--pf-c-card__body--FontSize", "default": "var(--pf-c-card--m-compact__body--FontSize)" }, { "name": "--pf-c-card--m-compact__body--FontSize", "description": "FontSize for the card body in compact size", "default": "var(--pf-global--FontSize--sm, 0.875rem)" }, { "name": "--pf-c-card--m-compact__footer--FontSize", "description": "FontSize for the card footer in compact size", "default": "var(--pf-global--FontSize--sm, 0.875rem)" }, { "name": "--pf-c-card--m-compact--first-child--PaddingTop", "description": "PaddingTop for the first child in compact size", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-card--m-compact--child--PaddingRight", "description": "PaddingRight for children in compact size", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-card--m-compact--child--PaddingBottom", "description": "PaddingBottom for children in compact size", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-card--m-compact--child--PaddingLeft", "description": "PaddingLeft for children in compact size", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-card--m-compact--c-divider--child--PaddingTop" }, { "name": "--pf-c-card--m-compact__title--not--last-child--PaddingBottom", "description": "PaddingBottom for the title when not last child in compact size", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-card__title--FontSize", "description": "FontSize for the card title", "default": "var(--pf-c-card--m-display-lg__title--FontSize)" }, { "name": "--pf-c-card--m-display-lg__title--FontSize", "description": "FontSize for the title in large size", "default": "var(--pf-global--FontSize--xl, 1.25rem)" }, { "name": "--pf-c-card--m-display-lg--first-child--PaddingTop", "description": "PaddingTop for the first child in large size", "default": "var(--pf-global--spacer--xl, 2rem)" }, { "name": "--pf-c-card--m-display-lg--child--PaddingRight", "description": "PaddingRight for children in large size", "default": "var(--pf-global--spacer--xl, 2rem)" }, { "name": "--pf-c-card--m-display-lg--child--PaddingBottom", "description": "PaddingBottom for children in large size", "default": "var(--pf-global--spacer--xl, 2rem)" }, { "name": "--pf-c-card--m-display-lg--child--PaddingLeft", "description": "PaddingLeft for children in large size", "default": "var(--pf-global--spacer--xl, 2rem)" }, { "name": "--pf-c-card--m-display-lg--c-divider--child--PaddingTop" }, { "name": "--pf-c-card--m-display-lg__title--not--last-child--PaddingBottom", "description": "PaddingBottom for the title when not last child in large size", "default": "var(--pf-global--spacer--lg, 1.5rem)" }, { "name": "--pf-c-card--m-flat--BorderWidth", "description": "BorderWidth for the flat variant", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-c-card--m-flat--BorderColor", "description": "BorderColor for the flat variant", "default": "var(--pf-global--BorderColor--100, #d2d2d2)" }, { "name": "--pf-c-card--BoxShadow", "description": "BoxShadow for the card", "default": "var(--pf-c-card--m-plain--BoxShadow)" }, { "name": "--pf-c-card--m-plain--BoxShadow", "description": "BoxShadow for the plain variant", "default": "none" }, { "name": "--pf-c-card--m-plain--BackgroundColor", "description": "BackgroundColor for the plain variant", "default": "transparent" }, { "name": "--pf-c-card--m-rounded--BorderRadius", "description": "BorderRadius for the rounded variant", "default": "var(--pf-global--BorderRadius--sm, 3px)" }, { "name": "--pf-c-card--m-full-height--Height", "description": "Height for the full height variant", "default": "100%" } ], "demos": [ { "url": "https://patternflyelements.org/components/card/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-card/demo/index.html" } }, { "url": "https://patternflyelements.org/components/card/demo/header-images-and-actions/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-card/demo/header-images-and-actions.html" } }, { "url": "https://patternflyelements.org/components/card/demo/modifiers/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-card/demo/modifiers.html" } }, { "url": "https://patternflyelements.org/components/card/demo/ssr/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-card/demo/ssr.html" } }, { "url": "https://patternflyelements.org/components/card/demo/title-inline-with-images-and-actions/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-card/demo/title-inline-with-images-and-actions.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-card", "declaration": { "name": "PfCard", "module": "pf-card/pf-card.js" } }, { "kind": "js", "name": "PfCard", "declaration": { "name": "PfCard", "module": "pf-card/pf-card.js" } } ] }, { "kind": "javascript-module", "path": "pf-chip/pf-chip-group.js", "declarations": [ { "name": "PfChipGroupExpandEvent", "superclass": { "name": "Event", "package": "global:" }, "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-chip/pf-chip-group.ts#L16" }, "kind": "class" }, { "name": "PfChipGroupRemoveEvent", "superclass": { "name": "Event", "package": "global:" }, "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-chip/pf-chip-group.ts#L22" }, "kind": "class" }, { "name": "PfChipGroup", "description": "A **chip group** is a collection of chips that can be grouped by category and used to represent one or more values assigned to a single attribute. When value of numChips is exceeded, additional chips will be hidden using an overflow chip.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "accessibleLabel", "description": "Accessible label for chip group that does not have a category name", "type": { "text": "string" }, "default": "''", "kind": "field", "attribute": "accessible-label" }, { "name": "accessibleCloseLabel", "description": "Accessible label for close button", "type": { "text": "string" }, "default": "'Close'", "kind": "field", "attribute": "accessible-close-label" }, { "name": "collapsedText", "description": "Customizeable \"more\" template string. Use variable \"${remaining}\" for overflow chip count.", "type": { "text": "string" }, "default": "'${remaining} more'", "kind": "field", "attribute": "collapsed-text" }, { "name": "expandedText", "description": "Customizable \"show less\" text string.", "type": { "text": "string" }, "default": "'show less'", "kind": "field", "attribute": "expanded-text" }, { "name": "numChips", "description": "Set number of chips to show before overflow", "type": { "text": "number" }, "default": "3", "kind": "field", "attribute": "num-chips" }, { "name": "open", "description": "Flag indicating if overflow chips are visible", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "open", "reflects": true }, { "name": "closeable", "description": "Flag if chip group can be closed", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "closeable", "reflects": true }, { "name": "activeChip", "description": "active chip that receives focus when group receives focus", "kind": "field" }, { "name": "hasCategory", "description": "whether or not group has a category", "type": { "text": "boolean" }, "readonly": true, "kind": "field" }, { "name": "remaining", "type": { "text": "number" }, "readonly": true, "kind": "field" }, { "return": { "type": { "text": "void" } }, "name": "chipsChanged", "description": "updates chips when they change", "kind": "method", "privacy": "private" }, { "parameters": [ { "name": "chip", "type": { "text": "PfChip" } } ], "return": { "type": { "text": "void" } }, "name": "focusOnChip", "description": "Activates the specified chip and sets focus on it", "kind": "method" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-chip/pf-chip-group.ts#L46" }, "kind": "class", "tagName": "pf-chip-group", "attributes": [ { "name": "accessible-label", "description": "Accessible label for chip group that does not have a category name", "type": { "text": "string" }, "default": "''", "fieldName": "accessibleLabel" }, { "name": "accessible-close-label", "description": "Accessible label for close button", "type": { "text": "string" }, "default": "'Close'", "fieldName": "accessibleCloseLabel" }, { "name": "collapsed-text", "description": "Customizeable \"more\" template string. Use variable \"${remaining}\" for overflow chip count.", "type": { "text": "string" }, "default": "'${remaining} more'", "fieldName": "collapsedText" }, { "name": "expanded-text", "description": "Customizable \"show less\" text string.", "type": { "text": "string" }, "default": "'show less'", "fieldName": "expandedText" }, { "name": "num-chips", "description": "Set number of chips to show before overflow", "type": { "text": "number" }, "default": "3", "fieldName": "numChips" }, { "name": "open", "description": "Flag indicating if overflow chips are visible", "type": { "text": "boolean" }, "default": "false", "fieldName": "open" }, { "name": "closeable", "description": "Flag if chip group can be closed", "type": { "text": "boolean" }, "default": "false", "fieldName": "closeable" } ], "events": [ { "name": "expand", "description": "Fires when chip group is expanded to show all chips" }, { "name": "remove", "description": "Fires when chip group is closed/removed" } ], "slots": [ { "name": "category-name", "description": "category-name\nCategory name text for chip group category. If this prop is supplied chip group with have a label and category styling applied" }, { "name": "", "description": "`\u003cpf-chip\u003e` elements." } ], "cssProperties": [ { "name": "--pf-c-chip-group--m-category--PaddingTop", "description": "PaddingTop for the chip group category", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-chip--PaddingTop" }, { "name": "--pf-c-chip--PaddingRight" }, { "name": "--pf-c-chip-group--m-category--PaddingRight", "description": "PaddingRight for the chip group category", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-chip--PaddingBottom" }, { "name": "--pf-global--FontSize--xs", "default": "0.75rem" }, { "name": "--pf-c-chip-group--m-category--PaddingBottom", "description": "PaddingBottom for the chip group category", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-chip-group--m-category--PaddingLeft", "description": "PaddingLeft for the chip group category", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-chip-group--m-category--BorderRadius", "description": "BorderRadius for the chip group category", "default": "var(--pf-global--BorderRadius--sm, 3px)" }, { "name": "--pf-c-chip-group--m-category--BackgroundColor", "description": "BackgroundColor for the chip group category", "default": "var(--pf-global--BackgroundColor--200, #f0f0f0)" }, { "name": "--pf-global--BackgroundColor--200", "default": "#f0f0f0" }, { "name": "--pf-c-chip-group__label--MarginRight", "description": "MarginRight for the chip group label", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-chip-group__label--FontSize", "description": "FontSize for the chip group label", "default": "var(--pf-global--FontSize--sm, 0.875rem)" }, { "name": "--pf-c-chip-group__label--MaxWidth", "description": "MaxWidth for the chip group label", "default": "18ch" }, { "name": "--pf-c-chip-group__close--MarginTop", "description": "MarginTop for the chip group close button", "default": "calc(var(--pf-global--spacer--xs, 0.25rem) * -1)" }, { "name": "--pf-c-chip-group__close--MarginBottom", "description": "MarginBottom for the chip group close button", "default": "calc(var(--pf-global--spacer--xs, 0.25rem) * -1)" }, { "name": "--pf-global--Color--100", "default": "#151515" }, { "name": "--pf-global--BorderRadius--sm", "default": "3px" }, { "name": "--pf-global--spacer--xs", "default": "0.25rem" }, { "name": "--pf-global--spacer--sm", "default": "0.5rem" }, { "name": "--pf-theme--color--surface--lighter", "default": "#f0f0f0" }, { "name": "--pf-c-chip-group__list--MarginRight", "description": "MarginRight for the chip group list", "default": "calc(var(--pf-global--spacer--xs, 0.25rem) * -1)" }, { "name": "--pf-c-chip-group__list--MarginBottom", "description": "MarginBottom for the chip group list", "default": "calc(var(--pf-global--spacer--xs, 0.25rem) * -1)" }, { "name": "--pf-global--FontFamily--sans-serif", "default": "\"RedHatTextUpdated\", \"Overpass\", overpass, helvetica, arial, sans-serif" }, { "name": "--pf-global--FontWeight--normal", "default": "400" }, { "name": "--pf-c-chip-group__list-item--MarginRight", "description": "MarginRight for chip group list items", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-chip-group__list-item--MarginBottom", "description": "MarginBottom for chip group list items", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-chip__c-button--MarginTop" }, { "name": "--pf-c-chip__c-button--MarginRight" }, { "name": "--pf-c-chip__c-button--MarginBottom" }, { "name": "--pf-c-chip__c-button--MarginLeft" }, { "name": "--pf-c-chip__c-button--PaddingTop" }, { "name": "--pf-c-chip__c-button--PaddingRight" }, { "name": "--pf-c-chip__c-button--PaddingBottom" }, { "name": "--pf-c-chip__c-button--PaddingLeft" }, { "name": "--pf-global--FontSize--sm", "default": "14px" } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "PfChipGroupExpandEvent", "declaration": { "name": "PfChipGroupExpandEvent", "module": "pf-chip/pf-chip-group.js" } }, { "kind": "js", "name": "PfChipGroupRemoveEvent", "declaration": { "name": "PfChipGroupRemoveEvent", "module": "pf-chip/pf-chip-group.js" } }, { "kind": "custom-element-definition", "name": "pf-chip-group", "declaration": { "name": "PfChipGroup", "module": "pf-chip/pf-chip-group.js" } }, { "kind": "js", "name": "PfChipGroup", "declaration": { "name": "PfChipGroup", "module": "pf-chip/pf-chip-group.js" } } ] }, { "kind": "javascript-module", "path": "pf-chip/pf-chip.js", "declarations": [ { "name": "PfChipRemoveEvent", "superclass": { "name": "Event", "package": "global:" }, "members": [ { "name": "chip", "type": { "text": "PfChip" }, "kind": "field" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-chip/pf-chip.ts#L10" }, "kind": "class" }, { "name": "PfChip", "description": "A **chip** is used to communicate a value or a set of attribute-value pairs within workflows that involve filtering a set of objects.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "accessibleCloseLabel", "description": "Accessible label for close button", "type": { "text": "string" }, "default": "'Close'", "kind": "field", "attribute": "accessible-close-label" }, { "name": "readonly", "description": "Flag indicating if chip is read-only and cannot be removed", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "readonly", "reflects": true }, { "name": "overflowChip", "description": "Flag indicating if chip is read-only and cannot be removed", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "overflow-chip", "reflects": true } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-chip/pf-chip.ts#L23" }, "kind": "class", "tagName": "pf-chip", "attributes": [ { "name": "accessible-close-label", "description": "Accessible label for close button", "type": { "text": "string" }, "default": "'Close'", "fieldName": "accessibleCloseLabel" }, { "name": "readonly", "description": "Flag indicating if chip is read-only and cannot be removed", "type": { "text": "boolean" }, "default": "false", "fieldName": "readonly" }, { "name": "overflow-chip", "description": "Flag indicating if chip is read-only and cannot be removed", "type": { "text": "boolean" }, "default": "false", "fieldName": "overflowChip" } ], "events": [ { "name": "remove", "description": "Fires when chip is removed", "type": { "text": "ChipRemoveEvent" } }, { "name": "click", "description": "when close button is clicked", "type": { "text": "Event" } } ], "slots": [ { "name": "", "description": "chip text" } ], "cssParts": [ { "name": "text", "description": "container for chip text" } ], "cssProperties": [ { "name": "--pf-global--Color--light-100", "default": "#fff" }, { "name": "--pf-global--BorderRadius--sm", "default": "3px" }, { "name": "--pf-global--BorderColor--300", "default": "#f0f0f0" }, { "name": "--pf-global--BorderWidth--sm", "default": "1px" }, { "name": "--pf-global--primary-color--100", "default": "#06c" }, { "name": "--pf-c-chip--m-draggable--BackgroundColor", "description": "Background color for draggable chip", "default": "var(--pf-global--BackgroundColor--200, #f0f0f0)" }, { "name": "--pf-global--BackgroundColor--200", "default": "#f0f0f0" }, { "name": "--pf-c-chip--m-draggable--BoxShadow", "description": "Box shadow for draggable chip", "default": "var(--pf-global--BoxShadow--sm, 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06))" }, { "name": "--pf-global--BoxShadow--sm", "default": "0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)" }, { "name": "--pf-c-chip--m-draggable__icon--FontSize", "description": "Font size for draggable chip icon", "default": "var(--pf-global--icon--FontSize--sm, 0.625rem)" }, { "name": "--pf-global--icon--FontSize--sm", "default": "0.625rem" }, { "name": "--pf-c-chip__icon--MarginLeft", "description": "Left margin for chip icon", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-global--spacer--sm", "default": "0.5rem" }, { "name": "--pf-global--Color--100", "default": "#151515" }, { "name": "--pf-c-chip--BackgroundColor", "description": "Background color for chip\n\nBackground color of chip", "default": "var(--pf-global--Color--light-100, #fff)" }, { "name": "--pf-c-chip--BorderRadius", "description": "Border radius for chip\n\nBorder radius of chip", "default": "var(--pf-global--BorderRadius--sm, 3px)" }, { "name": "--pf-c-chip--PaddingTop", "description": "Top padding for chip", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-chip--PaddingRight", "description": "Right padding for chip", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-chip--PaddingBottom", "description": "Bottom padding for chip", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-chip--PaddingLeft", "description": "Left padding for chip", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-chip--before--BorderWidth", "description": "Border width for chip\n\nBorder width", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-c-chip--before--BorderColor", "description": "Border color for chip\n\nBorder color", "default": "var(--pf-global--BorderColor--300, #f0f0f0)" }, { "name": "--pf-c-chip--before--BorderRadius", "description": "Border radius for chip border (references chip border radius)\n\nBorder radius of chip border", "default": "var(--pf-c-chip--BorderRadius)" }, { "name": "--pf-c-chip__text--MaxWidth", "description": "Maximum width for chip text\n\nMaximum width of chip text", "default": "16ch" }, { "name": "--pf-c-chip__text--FontSize", "description": "Font size for chip text\n\nFont size of chip text", "default": "var(--pf-global--FontSize--xs, 0.75rem)" }, { "name": "--pf-c-chip__text--Color", "description": "Color for chip text\n\nColor of chip text", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-global--Color--200", "default": "#6a6e73" }, { "name": "--pf-c-chip--m-overflow__text--Color", "description": "Text color for overflow chip\n\nColor for overflow chip text", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-c-chip__c-button--PaddingTop" }, { "name": "--pf-c-chip__c-button--PaddingRight" }, { "name": "--pf-c-chip__c-button--PaddingBottom" }, { "name": "--pf-c-chip__c-button--PaddingLeft" }, { "name": "--pf-c-chip__c-button--FontSize" }, { "name": "--pf-c-chip__c-button--MarginTop" }, { "name": "--pf-c-chip__c-button--MarginRight" }, { "name": "--pf-c-chip__c-button--MarginBottom" }, { "name": "--pf-global--FontSize--xs", "default": "12px" }, { "name": "--pf-global--spacer--xs", "default": "0.25rem" } ], "demos": [ { "url": "https://patternflyelements.org/components/chip/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-chip/demo/index.html" } }, { "url": "https://patternflyelements.org/components/chip/demo/chip-group-closeable/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-chip/demo/chip-group-closeable.html" } }, { "url": "https://patternflyelements.org/components/chip/demo/chip-group-open/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-chip/demo/chip-group-open.html" } }, { "url": "https://patternflyelements.org/components/chip/demo/chip-group-with-accessible-label/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-chip/demo/chip-group-with-accessible-label.html" } }, { "url": "https://patternflyelements.org/components/chip/demo/chip-group-with-custom-number-of-chips/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-chip/demo/chip-group-with-custom-number-of-chips.html" } }, { "url": "https://patternflyelements.org/components/chip/demo/chip-group-with-visible-category-name/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-chip/demo/chip-group-with-visible-category-name.html" } }, { "url": "https://patternflyelements.org/components/chip/demo/chip-group/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-chip/demo/chip-group.html" } }, { "url": "https://patternflyelements.org/components/chip/demo/long-chip-with-tooltip/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-chip/demo/long-chip-with-tooltip.html" } }, { "url": "https://patternflyelements.org/components/chip/demo/overflow/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-chip/demo/overflow.html" } }, { "url": "https://patternflyelements.org/components/chip/demo/read-only/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-chip/demo/read-only.html" } }, { "url": "https://patternflyelements.org/components/chip/demo/with-badge/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-chip/demo/with-badge.html" } } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "PfChipRemoveEvent", "declaration": { "name": "PfChipRemoveEvent", "module": "pf-chip/pf-chip.js" } }, { "kind": "custom-element-definition", "name": "pf-chip", "declaration": { "name": "PfChip", "module": "pf-chip/pf-chip.js" } }, { "kind": "js", "name": "PfChip", "declaration": { "name": "PfChip", "module": "pf-chip/pf-chip.js" } } ] }, { "kind": "javascript-module", "path": "pf-clipboard-copy/pf-clipboard-copy.js", "declarations": [ { "name": "PfClipboardCopyCopiedEvent", "superclass": { "name": "Event", "package": "global:" }, "members": [ { "name": "text", "type": { "text": "string" }, "kind": "field" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-clipboard-copy/pf-clipboard-copy.ts#L16" }, "kind": "class" }, { "name": "PfClipboardCopy", "description": "The **clipboard copy** component allows users to quickly and easily copy content to their clipboard.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "clickTip", "description": "Tooltip message to display when clicking the copy button", "type": { "text": "string" }, "default": "'Successfully copied to clipboard!'", "kind": "field", "attribute": "click-tip" }, { "name": "hoverTip", "description": "Tooltip message to display when hover the copy button", "type": { "text": "string" }, "default": "'Copy to clipboard'", "kind": "field", "attribute": "hover-tip" }, { "name": "accessibleTextLabel", "description": "Accessible label to use on the text input.", "type": { "text": "string" }, "default": "'Copyable input'", "kind": "field", "attribute": "accessible-text-label" }, { "name": "accessibleToggleLabel", "description": "Accessible label to use on the toggle button.", "type": { "text": "string" }, "default": "'Show content'", "kind": "field", "attribute": "accessible-toggle-label" }, { "name": "entryDelay", "description": "Delay in ms before the tooltip appears.", "type": { "text": "number" }, "default": "300", "kind": "field", "attribute": "entry-delay" }, { "name": "exitDelay", "description": "Delay in ms before the tooltip disappears.", "type": { "text": "number" }, "default": "1500", "kind": "field", "attribute": "exit-delay" }, { "name": "block", "description": "Flag to determine if inline clipboard copy should be block styling", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "block", "reflects": true }, { "name": "code", "description": "Flag to determine if clipboard copy content includes code", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "code", "reflects": true }, { "name": "expanded", "description": "Flag to determine if clipboard copy is in the expanded state", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "expanded", "reflects": true }, { "name": "expandable", "description": "Implies not `inline`.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "expandable", "reflects": true }, { "name": "readonly", "description": "Flag to show if the input is read only.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "readonly", "reflects": true }, { "name": "inline", "description": "Implies not expandable. Overrules `expandable`.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "inline", "reflects": true }, { "name": "compact", "description": "Flag to determine if inline clipboard copy should have compact styling", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "compact", "reflects": true }, { "name": "value", "description": "String to copy", "type": { "text": "string" }, "default": "''", "kind": "field", "attribute": "value" }, { "return": { "type": { "text": "Promise\u003cvoid\u003e" } }, "name": "copy", "description": "Copy the current value to the clipboard.", "kind": "method" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-clipboard-copy/pf-clipboard-copy.ts#L28" }, "kind": "class", "tagName": "pf-clipboard-copy", "attributes": [ { "name": "click-tip", "description": "Tooltip message to display when clicking the copy button", "type": { "text": "string" }, "default": "'Successfully copied to clipboard!'", "fieldName": "clickTip" }, { "name": "hover-tip", "description": "Tooltip message to display when hover the copy button", "type": { "text": "string" }, "default": "'Copy to clipboard'", "fieldName": "hoverTip" }, { "name": "accessible-text-label", "description": "Accessible label to use on the text input.", "type": { "text": "string" }, "default": "'Copyable input'", "fieldName": "accessibleTextLabel" }, { "name": "accessible-toggle-label", "description": "Accessible label to use on the toggle button.", "type": { "text": "string" }, "default": "'Show content'", "fieldName": "accessibleToggleLabel" }, { "name": "entry-delay", "description": "Delay in ms before the tooltip appears.", "type": { "text": "number" }, "default": "300", "fieldName": "entryDelay" }, { "name": "exit-delay", "description": "Delay in ms before the tooltip disappears.", "type": { "text": "number" }, "default": "1500", "fieldName": "exitDelay" }, { "name": "block", "description": "Flag to determine if inline clipboard copy should be block styling", "type": { "text": "boolean" }, "default": "false", "fieldName": "block" }, { "name": "code", "description": "Flag to determine if clipboard copy content includes code", "type": { "text": "boolean" }, "default": "false", "fieldName": "code" }, { "name": "expanded", "description": "Flag to determine if clipboard copy is in the expanded state", "type": { "text": "boolean" }, "default": "false", "fieldName": "expanded" }, { "name": "expandable", "description": "Implies not `inline`.", "type": { "text": "boolean" }, "default": "false", "fieldName": "expandable" }, { "name": "readonly", "description": "Flag to show if the input is read only.", "type": { "text": "boolean" }, "default": "false", "fieldName": "readonly" }, { "name": "inline", "description": "Implies not expandable. Overrules `expandable`.", "type": { "text": "boolean" }, "default": "false", "fieldName": "inline" }, { "name": "compact", "description": "Flag to determine if inline clipboard copy should have compact styling", "type": { "text": "boolean" }, "default": "false", "fieldName": "compact" }, { "name": "value", "description": "String to copy", "type": { "text": "string" }, "default": "''", "fieldName": "value" } ], "events": [ { "name": "copy", "description": "when the text snippet is successfully copied.", "type": { "text": "PfClipboardCopyCopiedEvent" } } ], "slots": [ { "name": "actions", "description": "Place additional action buttons here" } ], "cssProperties": [ { "name": "--pf-c-clipboard-copy__toggle-icon--Transition", "description": "Transition for the toggle icon", "default": ".2s ease-in 0s" }, { "name": "--pf-c-clipboard-copy--m-expanded__toggle-icon--Rotate", "description": "Rotate value for the toggle icon when expanded", "default": "90deg" }, { "name": "--pf-global--LineHeight--md", "default": "1.5" }, { "name": "--pf-global--BorderColor--300", "default": "#f0f0f0" }, { "name": "--pf-global--BackgroundColor--100", "default": "#fff" }, { "name": "--pf-global--spacer--md", "default": "1rem" }, { "name": "--pf-global--BackgroundColor--light-100", "default": "#fff" }, { "name": "--pf-global--BorderWidth--sm", "default": "1px" }, { "name": "--pf-global--BorderColor--100", "default": "#d2d2d2" }, { "name": "--pf-c-clipboard-copy__expandable-content--OutlineOffset", "description": "OutlineOffset for the expandable content", "default": "calc(-1 * var(--pf-global--spacer--xs, 0.25rem))" }, { "name": "--pf-c-form-control--focus--BorderBottomWidth" }, { "name": "--pf-global--primary-color--100", "default": "#06c" }, { "name": "--pf-c-clipboard-copy__text--m-code--FontFamily", "description": "FontFamily for the code text", "default": "var(--pf-global--FontFamily--monospace, \"Liberation Mono\", consolas, \"SFMono-Regular\", menlo, monaco, \"Courier New\", monospace)" }, { "name": "--pf-global--Color--dark-200", "default": "#6a6e73" }, { "name": "--pf-global--Color--100", "default": "#151515" }, { "name": "--pf-global--disabled-color--100", "default": "#6a6e73" }, { "name": "--pf-c-clipboard-copy__text--m-code--FontSize", "description": "FontSize for the code text", "default": "var(--pf-global--FontSize--sm, 0.875rem)" }, { "name": "--pf-global--FontSize--sm", "default": "0.875rem" }, { "name": "--pf-c-clipboard-copy__actions-item--MarginTop", "description": "MarginTop for actions item", "default": "calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))" }, { "name": "--pf-global--disabled-color--300", "default": "#f0f0f0" }, { "name": "--pf-c-clipboard-copy__actions-item--MarginBottom", "description": "MarginBottom for actions item", "default": "calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))" }, { "name": "--pf-global--spacer--form-element", "default": "0.375rem" }, { "name": "--pf-global--BorderColor--200", "default": "#8a8d90" }, { "name": "--pf-global--spacer--xs", "default": "0.25rem" }, { "name": "--pf-global--spacer--sm", "default": "0.5rem" }, { "name": "--pf-global--FontSize--md", "default": "1rem" }, { "name": "--pf-c-form-control--success--BorderBottomWidth" }, { "name": "--pf-global--success-color--100", "default": "#3e8635" }, { "name": "--pf-c-form-control--Color" }, { "name": "--pf-c-form-control--Width" }, { "name": "--pf-c-form-control--PaddingTop" }, { "name": "--pf-c-form-control--PaddingRight" }, { "name": "--pf-c-form-control--PaddingBottom" }, { "name": "--pf-c-form-control--success--BackgroundPositionX" }, { "name": "--pf-c-form-control--PaddingLeft" }, { "name": "--pf-c-form-control--success--BackgroundPositionY" }, { "name": "--pf-c-form-control--FontSize" }, { "name": "--pf-c-form-control--LineHeight" }, { "name": "--pf-c-form-control--BackgroundColor" }, { "name": "--pf-c-form-control--BorderWidth" }, { "name": "--pf-c-form-control--success--BackgroundSizeX" }, { "name": "--pf-c-form-control--BorderTopColor" }, { "name": "--pf-c-form-control--BorderRightColor" }, { "name": "--pf-c-form-control--success--BackgroundSizeY" }, { "name": "--pf-c-form-control--BorderBottomColor" }, { "name": "--pf-c-form-control--BorderLeftColor" }, { "name": "--pf-c-form-control--BorderRadius" }, { "name": "--pf-c-form-control--Height" }, { "name": "--pf-c-form-control--readonly--BackgroundColor" }, { "name": "--pf-c-clipboard-copy__expandable-content--PaddingTop", "description": "PaddingTop for the expandable content", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-clipboard-copy__expandable-content--PaddingRight", "description": "PaddingRight for the expandable content", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-clipboard-copy__expandable-content--PaddingBottom", "description": "PaddingBottom for the expandable content", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-clipboard-copy__expandable-content--PaddingLeft", "description": "PaddingLeft for the expandable content", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-clipboard-copy__expandable-content--BackgroundColor", "description": "BackgroundColor for the expandable content", "default": "var(--pf-global--BackgroundColor--light-100, #fff)" }, { "name": "--pf-c-form-control--m-warning--BorderBottomWidth" }, { "name": "--pf-c-clipboard-copy__expandable-content--BorderColor", "description": "BorderColor for the expandable content", "default": "var(--pf-global--BorderColor--100, #d2d2d2)" }, { "name": "--pf-global--warning-color--100", "default": "#f0ab00" }, { "name": "--pf-c-clipboard-copy__expandable-content--BorderTopWidth", "description": "BorderTopWidth for the expandable content", "default": "0" }, { "name": "--pf-c-clipboard-copy__expandable-content--BorderRightWidth", "description": "BorderRightWidth for the expandable content", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-c-clipboard-copy__expandable-content--BorderBottomWidth", "description": "BorderBottomWidth for the expandable content", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-c-clipboard-copy__expandable-content--BorderLeftWidth", "description": "BorderLeftWidth for the expandable content", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-c-clipboard-copy__expandable-content--BoxShadow" }, { "name": "--pf-c-form-control--m-warning--BackgroundPositionX" }, { "name": "--pf-c-form-control--m-warning--BackgroundPositionY" }, { "name": "--pf-global--FontFamily--monospace", "default": "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)" }, { "name": "--pf-global--FontFamily--redhat--monospace", "default": "\"RedHatMono\", \"Liberation Mono\", consolas, \"SFMono-Regular\", menlo, monaco, \"Courier New\", monospace" }, { "name": "--pf-c-form-control--m-warning--BackgroundSizeX" }, { "name": "--pf-c-form-control--m-warning--BackgroundSizeY" }, { "name": "--pf-c-clipboard-copy--m-inline--PaddingTop", "description": "PaddingTop for the inline variant", "default": "0" }, { "name": "--pf-c-clipboard-copy--m-inline--PaddingBottom", "description": "PaddingBottom for the inline variant", "default": "0" }, { "name": "--pf-c-clipboard-copy--m-inline--PaddingLeft", "description": "PaddingLeft for the inline variant", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-button--m-plain--BackgroundColor", "default": "var(--pf-global--BackgroundColor--200, #f0f0f0)" }, { "name": "--pf-global--BackgroundColor--200", "default": "#f0f0f0" }, { "name": "--pf-global--BorderWidth--md", "default": "2px" }, { "name": "--pf-c-clipboard-copy--m-inline--BackgroundColor", "description": "BackgroundColor for the inline variant", "default": "var(--pf-global--BackgroundColor--200, #f0f0f0)" }, { "name": "--pf-c-form-control--invalid--BorderBottomWidth" }, { "name": "--pf-global--danger-color--100", "default": "#c9190b" }, { "name": "--pf-c-clipboard-copy__actions-item--button--PaddingTop", "description": "PaddingTop for actions item button", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-clipboard-copy__actions-item--button--PaddingRight", "description": "PaddingRight for actions item button", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-clipboard-copy__actions-item--button--PaddingBottom", "description": "PaddingBottom for actions item button", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-clipboard-copy__actions-item--button--PaddingLeft", "description": "PaddingLeft for actions item button", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-form-control--invalid--BackgroundPositionX" }, { "name": "--pf-c-form-control--invalid--BackgroundPositionY" }, { "name": "--pf-c-button--PaddingTop" }, { "name": "--pf-c-button--PaddingBottom" }, { "name": "--pf-c-form-control--invalid--BackgroundSizeY" }, { "name": "--pf-c-form-control--invalid--exclamation--Background" }, { "name": "--pf-global--spacer--xl", "default": "2rem" }, { "name": "--pf-c-form-control--inset--base" }, { "name": "--pf-c-form-control--m-icon--BackgroundPositionX" }, { "name": "--pf-c-form-control--m-icon--icon--spacer" }, { "name": "--pf-c-form-control--invalid--BackgroundSizeX" }, { "name": "--pf-c-form-control--invalid--BackgroundUrl" }, { "name": "--pf-c-form-control--invalid--BackgroundPosition" }, { "name": "--pf-c-form-control--invalid--BackgroundSize" }, { "name": "--pf-c-form-control--success--BackgroundUrl" }, { "name": "--pf-c-form-control--success--BackgroundPosition" }, { "name": "--pf-c-form-control--success--BackgroundSize" }, { "name": "--pf-c-form-control--m-warning--BackgroundUrl" }, { "name": "--pf-c-form-control--m-icon--BackgroundUrl" }, { "name": "--pf-c-form-control--m-warning--BackgroundPosition" }, { "name": "--pf-c-form-control--m-icon--icon--BackgroundPositionX" }, { "name": "--pf-c-form-control--m-icon--BackgroundPositionY" }, { "name": "--pf-c-form-control--m-warning--BackgroundSize" }, { "name": "--pf-c-form-control--m-icon--BackgroundSizeX" }, { "name": "--pf-c-form-control--m-icon--BackgroundSizeY" }, { "name": "--pf-c-form-control__select--BackgroundPositionY" }, { "name": "--pf-global--spacer--3xl", "default": "4rem" }, { "name": "--pf-c-form-control__select--BackgroundPositionX" }, { "name": "--pf-global--spacer--lg", "default": "1.5rem" } ], "demos": [ { "url": "https://patternflyelements.org/components/clipboard-copy/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-clipboard-copy/demo/index.html" } }, { "url": "https://patternflyelements.org/components/clipboard-copy/demo/code/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-clipboard-copy/demo/code.html" } }, { "url": "https://patternflyelements.org/components/clipboard-copy/demo/expandable/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-clipboard-copy/demo/expandable.html" } }, { "url": "https://patternflyelements.org/components/clipboard-copy/demo/inline-compact-code/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-clipboard-copy/demo/inline-compact-code.html" } }, { "url": "https://patternflyelements.org/components/clipboard-copy/demo/inline-compact/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-clipboard-copy/demo/inline-compact.html" } }, { "url": "https://patternflyelements.org/components/clipboard-copy/demo/read-only-expandable/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-clipboard-copy/demo/read-only-expandable.html" } }, { "url": "https://patternflyelements.org/components/clipboard-copy/demo/read-only-expanded/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-clipboard-copy/demo/read-only-expanded.html" } }, { "url": "https://patternflyelements.org/components/clipboard-copy/demo/read-only/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-clipboard-copy/demo/read-only.html" } } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "PfClipboardCopyCopiedEvent", "declaration": { "name": "PfClipboardCopyCopiedEvent", "module": "pf-clipboard-copy/pf-clipboard-copy.js" } }, { "kind": "custom-element-definition", "name": "pf-clipboard-copy", "declaration": { "name": "PfClipboardCopy", "module": "pf-clipboard-copy/pf-clipboard-copy.js" } }, { "kind": "js", "name": "PfClipboardCopy", "declaration": { "name": "PfClipboardCopy", "module": "pf-clipboard-copy/pf-clipboard-copy.js" } } ] }, { "kind": "javascript-module", "path": "pf-code-block/pf-code-block.js", "declarations": [ { "name": "PfCodeBlock", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "expanded", "description": "Flag for whether the code block is expanded", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "expanded", "reflects": true } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-code-block/pf-code-block.ts#L21" }, "kind": "class", "tagName": "pf-code-block", "attributes": [ { "name": "expanded", "description": "Flag for whether the code block is expanded", "type": { "text": "boolean" }, "default": "false", "fieldName": "expanded" } ], "slots": [ { "name": "actions", "description": "Contains the actions for the code-block. For example, copy to clipboard." } ], "cssProperties": [ { "name": "--pf-c-code-block--BackgroundColor", "description": "Background color for code block", "default": "#f0f0f0" }, { "name": "--pf-c-code-block__pre--FontSize", "description": "Font size for code block pre element", "default": "0.875rem" }, { "name": "--pf-c-code-block__pre--FontFamily", "description": "Font family for code block pre element", "default": "\"Liberation Mono\", consolas, \"SFMono-Regular\", menlo, monaco, \"Courier New\", monospace" }, { "name": "--pf-c-code-block__content--PaddingTop", "description": "Top padding for code block content", "default": "1rem" }, { "name": "--pf-c-code-block__content--PaddingRight", "description": "Right padding for code block content", "default": "1rem" }, { "name": "--pf-c-code-block__content--PaddingBottom", "description": "Bottom padding for code block content", "default": "1rem" }, { "name": "--pf-c-code-block__content--PaddingLeft", "description": "Left padding for code block content", "default": "1rem" }, { "name": "--pf-c-code-block__header--BorderBottomWidth", "default": "1px" }, { "name": "--pf-c-code-block__header--BorderBottomColor", "description": "Border bottom color for code block header", "default": "#d2d2d2" } ], "demos": [ { "url": "https://patternflyelements.org/components/pf-code-block/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-code-block/demo/index.html" } }, { "url": "https://patternflyelements.org/components/pf-code-block/demo/expandable/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-code-block/demo/expandable.html" } }, { "url": "https://patternflyelements.org/components/pf-code-block/demo/expanded/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-code-block/demo/expanded.html" } }, { "url": "https://patternflyelements.org/components/pf-code-block/demo/javascript-sample/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-code-block/demo/javascript-sample.html" } }, { "url": "https://patternflyelements.org/components/pf-code-block/demo/noscript/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-code-block/demo/noscript.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-code-block", "declaration": { "name": "PfCodeBlock", "module": "pf-code-block/pf-code-block.js" } }, { "kind": "js", "name": "PfCodeBlock", "declaration": { "name": "PfCodeBlock", "module": "pf-code-block/pf-code-block.js" } } ] }, { "kind": "javascript-module", "path": "pf-dropdown/context.js", "declarations": [ { "name": "context", "type": { "text": ": Context\u003cunknown, PfDropdownContext\u003e" }, "kind": "variable", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-dropdown/context.ts#L8" } } ], "exports": [ { "kind": "js", "name": "context", "declaration": { "name": "context", "module": "pf-dropdown/context.js" } } ] }, { "kind": "javascript-module", "path": "pf-dropdown/pf-dropdown-group.js", "declarations": [ { "name": "PfDropdownGroup", "description": "Represents a group of items for a dropdown component.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "label", "description": "The label for the group of dropdown items.", "type": { "text": "string" }, "kind": "field", "attribute": "label", "reflects": true } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-dropdown/pf-dropdown-group.ts#L13" }, "kind": "class", "tagName": "pf-dropdown-group", "attributes": [ { "name": "label", "description": "The label for the group of dropdown items.", "type": { "text": "string" }, "fieldName": "label" } ], "slots": [ { "name": "Content", "description": "Content for the group of dropdown items" }, { "name": "" } ], "cssProperties": [ { "name": "--pf-c-divider--BackgroundColor", "default": "var(--pf-global--BorderColor--100, #d2d2d2)" }, { "name": "--pf-global--BorderColor--100", "default": "#d2d2d2" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-dropdown-group", "declaration": { "name": "PfDropdownGroup", "module": "pf-dropdown/pf-dropdown-group.js" } }, { "kind": "js", "name": "PfDropdownGroup", "declaration": { "name": "PfDropdownGroup", "module": "pf-dropdown/pf-dropdown-group.js" } } ] }, { "kind": "javascript-module", "path": "pf-dropdown/pf-dropdown-item.js", "declarations": [ { "name": "DropdownItemChange", "superclass": { "name": "Event", "package": "global:" }, "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-dropdown/pf-dropdown-item.ts#L12" }, "kind": "class" }, { "name": "PfDropdownItem", "description": "Represents an item for a dropdown component.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "value", "description": "The value associated with the dropdown item.\nThis value can be used to identify the selected item", "type": { "text": "string" }, "kind": "field", "attribute": "value", "reflects": true }, { "name": "href", "description": "href for link dropdown items", "type": { "text": "string" }, "kind": "field", "attribute": "href" }, { "name": "active", "description": "Flag indicating whether the item is active", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "active", "reflects": true }, { "name": "disabled", "description": "Indicates whether the dropdown item is disabled.\nA disabled item cannot be selected.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "disabled", "reflects": true }, { "name": "description", "description": "Item description; overridden by `description` slot", "type": { "text": "string" }, "kind": "field", "attribute": "description" }, { "name": "ctx", "type": { "text": "PfDropdownContext" }, "kind": "field", "privacy": "private" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-dropdown/pf-dropdown-item.ts#L28" }, "kind": "class", "tagName": "pf-dropdown-item", "attributes": [ { "name": "value", "description": "The value associated with the dropdown item.\nThis value can be used to identify the selected item", "type": { "text": "string" }, "fieldName": "value" }, { "name": "href", "description": "href for link dropdown items", "type": { "text": "string" }, "fieldName": "href" }, { "name": "active", "description": "Flag indicating whether the item is active", "type": { "text": "boolean" }, "default": "false", "fieldName": "active" }, { "name": "disabled", "description": "Indicates whether the dropdown item is disabled.\nA disabled item cannot be selected.", "type": { "text": "boolean" }, "default": "false", "fieldName": "disabled" }, { "name": "description", "description": "Item description; overridden by `description` slot", "type": { "text": "string" }, "fieldName": "description" } ], "slots": [ { "name": "icon", "description": "icon\nOptional slot for an icon" }, { "name": "", "description": "Content for the dropdown item" }, { "name": "description", "description": "description\nOptional slot for item description" } ], "cssProperties": [ { "name": "--pf-c-dropdown__menu-item--FontSize", "description": "Dropdown item font size", "default": "var(--pf-global--FontSize--md, 1rem)" }, { "name": "--pf-global--FontSize--md", "default": "1rem" }, { "name": "--pf-c-dropdown__menu-item--FontWeight", "description": "Dropdown item font weight", "default": "var(--pf-global--FontWeight--normal, 400)" }, { "name": "--pf-global--FontWeight--normal", "default": "400" }, { "name": "--pf-c-dropdown__menu-item--LineHeight", "description": "Dropdown item line height", "default": "var(--pf-global--LineHeight--md, 1.5)" }, { "name": "--pf-global--LineHeight--md", "default": "1.5" }, { "name": "--pf-c-dropdown__menu-item--BackgroundColor", "description": "Dropdown item background color", "default": "transparent" }, { "name": "--pf-c-dropdown__menu-item--disabled--Color", "default": "var(--pf-global--Color--dark-200, #6a6e73)" }, { "name": "--pf-c-dropdown__menu-item--disabled--BackgroundColor", "default": "transparent" }, { "name": "--pf-c-dropdown__menu-item--hover--Color", "default": "var(--pf-global--Color--dark-100, #151515)" }, { "name": "--pf-c-dropdown__menu-item--hover--BackgroundColor", "default": "var(--pf-global--BackgroundColor--light-300, #f0f0f0)" }, { "name": "--pf-global--BackgroundColor--light-300", "default": "#f0f0f0" }, { "name": "--pf-global--link--Color", "default": "#0066cc" }, { "name": "--pf-global--spacer--sm", "default": "0.5rem" }, { "name": "--pf-global--spacer--md", "default": "1rem" }, { "name": "--pf-c-dropdown__menu-item-description--FontSize", "default": "var(\n --pf-global--FontSize--sm, 0.75rem\n )" }, { "name": "--pf-global--FontSize--sm", "default": "0.75rem" }, { "name": "--pf-c-dropdown__menu-item-description--Color", "default": "var(\n --pf-global--Color--dark-200, #6a6e73\n )" }, { "name": "--pf-global--Color--dark-200", "default": "#6a6e73" }, { "name": "--pf-c-dropdown__menu-item--Color", "description": "Dropdown item color", "default": "var(--pf-global--Color--dark-100, #151515)" }, { "name": "--pf-global--Color--dark-100", "default": "#151515" } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "DropdownItemChange", "declaration": { "name": "DropdownItemChange", "module": "pf-dropdown/pf-dropdown-item.js" } }, { "kind": "custom-element-definition", "name": "pf-dropdown-item", "declaration": { "name": "PfDropdownItem", "module": "pf-dropdown/pf-dropdown-item.js" } }, { "kind": "js", "name": "PfDropdownItem", "declaration": { "name": "PfDropdownItem", "module": "pf-dropdown/pf-dropdown-item.js" } } ] }, { "kind": "javascript-module", "path": "pf-dropdown/pf-dropdown-menu.js", "declarations": [ { "name": "PfDropdownMenu", "description": "A **dropdown** presents a menu of actions or links in a constrained space that will trigger a\nprocess or navigate to a new location.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "activeItem", "description": "current active descendant in menu", "type": { "text": "HTMLElement | null" }, "readonly": true, "kind": "field" }, { "name": "activeIndex", "description": "index of current active descendant in menu", "type": { "text": "number" }, "readonly": true, "kind": "field" }, { "name": "items", "type": { "text": "PfDropdownItem[]" }, "readonly": true, "kind": "field" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-dropdown/pf-dropdown-menu.ts#L28" }, "kind": "class", "tagName": "pf-dropdown-menu", "slots": [ { "name": "", "description": "Must contain one or more `\u003cpf-dropdown-item\u003e` or `\u003cpf-dropdown-group\u003e`" } ], "cssProperties": [ { "name": "--pf-c-dropdown__menu--BackgroundColor", "default": "#fff" }, { "name": "--pf-c-dropdown__menu-item--disabled--Color", "default": "var(--pf-global--Color--dark-200, #6a6e73)" }, { "name": "--pf-global--Color--dark-200", "default": "#6a6e73" }, { "name": "--pf-c-dropdown__menu-item--disabled--BackgroundColor", "default": "transparent" }, { "name": "--pf-c-divider--BackgroundColor", "default": "var(--pf-global--BorderColor--100, #d2d2d2)" }, { "name": "--pf-global--BorderColor--100", "default": "#d2d2d2" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-dropdown-menu", "declaration": { "name": "PfDropdownMenu", "module": "pf-dropdown/pf-dropdown-menu.js" } }, { "kind": "js", "name": "PfDropdownMenu", "declaration": { "name": "PfDropdownMenu", "module": "pf-dropdown/pf-dropdown-menu.js" } } ] }, { "kind": "javascript-module", "path": "pf-dropdown/pf-dropdown.js", "declarations": [ { "name": "PfDropdownSelectEvent", "superclass": { "name": "Event", "package": "global:" }, "members": [ { "name": "originalEvent", "type": { "text": "Event | KeyboardEvent" }, "kind": "field" }, { "name": "value", "type": { "text": "string" }, "kind": "field" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-dropdown/pf-dropdown.ts#L22" }, "kind": "class" }, { "name": "PfDropdown", "description": "A **dropdown** presents a menu of actions or links in a constrained space that\nwill trigger a process or navigate to a new location.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "disabled", "description": "When disabled, the dropdown can still be toggled open and closed via keyboard, but menu items cannot be activated.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "disabled", "reflects": true }, { "name": "expanded", "description": "Whether the dropdown is expanded", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "expanded", "reflects": true }, { "return": { "type": { "text": "void" } }, "name": "firstUpdated", "kind": "method" }, { "return": { "type": { "text": "Promise\u003cvoid\u003e" } }, "name": "show", "description": "Opens the dropdown", "kind": "method" }, { "return": { "type": { "text": "Promise\u003cvoid\u003e" } }, "name": "hide", "description": "Closes the dropdown", "kind": "method" }, { "return": { "type": { "text": "Promise\u003cvoid\u003e" } }, "name": "toggle", "kind": "method" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-dropdown/pf-dropdown.ts#L40" }, "kind": "class", "tagName": "pf-dropdown", "attributes": [ { "name": "disabled", "description": "When disabled, the dropdown can still be toggled open and closed via keyboard, but menu items cannot be activated.", "type": { "text": "boolean" }, "default": "false", "fieldName": "disabled" }, { "name": "expanded", "description": "Whether the dropdown is expanded", "type": { "text": "boolean" }, "default": "false", "fieldName": "expanded" } ], "events": [ { "name": "select", "description": "when a user select dropdown value", "type": { "text": "PfDropdownSelectEvent" } }, { "name": "open", "description": "when the dropdown toggles open" }, { "name": "close", "description": "when the dropdown toggles closed" } ], "slots": [ { "name": "toggle", "description": "Custom toggle button" }, { "name": "menu", "description": "when using a custom toggle, you must slot a `\u003cpf-dropdown-menu\u003e` in alongside it" }, { "name": "", "description": "Must contain one or more `\u003cpf-dropdown-item\u003e` or `\u003cpf-dropdown-group\u003e`" } ], "cssParts": [ { "name": "menu", "description": "The dropdown menu wrapper" } ], "cssProperties": [ { "name": "--pf-global--BorderColor--200", "default": "#8a8d90" }, { "name": "--pf-global--BorderColor--300", "default": "#f0f0f0" }, { "name": "--pf-global--active-color--100", "default": "#06c" }, { "name": "--pf-global--disabled-color--300", "default": "#f0f0f0" }, { "name": "--pf-global--disabled-color--200", "default": "#d2d2d2" }, { "name": "--pf-global--Color--light-100", "default": "#fff" }, { "name": "--pf-global--FontSize--sm", "default": "0.875rem" }, { "name": "--pf-global--spacer--form-element", "default": "0.375rem" }, { "name": "--pf-global--BorderRadius--sm", "default": "3px" }, { "name": "--pf-c-dropdown__toggle--m-split-button--child--BorderRadius" }, { "name": "--pf-global--primary-color--200", "default": "#004080" }, { "name": "--pf-global--BorderWidth--sm", "default": "1px" }, { "name": "--pf-global--primary-color--100", "default": "#06c" }, { "name": "--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base" }, { "name": "--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base" }, { "name": "--pf-global--BorderWidth--md", "default": "2px" }, { "name": "--pf-global--Color--200", "default": "#6a6e73" }, { "name": "--pf-global--Color--100", "default": "#151515" }, { "name": "--pf-global--BackgroundColor--light-100", "default": "#fff" }, { "name": "--pf-global--BackgroundColor--light-300", "default": "#f0f0f0" }, { "name": "--pf-global--icon--FontSize--lg", "default": "1.5rem" }, { "name": "--pf-c-dropdown__menu-item--PaddingRight", "description": "Dropdown menu item right padding", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-dropdown__menu-item--PaddingBottom" }, { "name": "--pf-c-dropdown__menu-item--PaddingLeft" }, { "name": "--pf-global--FontSize--xs", "default": "0.75rem" }, { "name": "--pf-global--BorderWidth--xl", "default": "4px" }, { "name": "--pf-global--spacer--lg", "default": "1.5rem" }, { "name": "--pf-c-dropdown__menu-item--FontSize", "default": "var(--pf-global--FontSize--md, 1rem)" }, { "name": "--pf-global--FontSize--md", "default": "1rem" }, { "name": "--pf-c-dropdown__menu-item--FontWeight", "default": "var(--pf-global--FontWeight--normal, 400)" }, { "name": "--pf-global--FontWeight--normal", "default": "400" }, { "name": "--pf-c-dropdown__menu-item--LineHeight", "default": "var(--pf-global--LineHeight--md, 1.5)" }, { "name": "--pf-global--LineHeight--md", "default": "1.5" }, { "name": "--pf-c-dropdown__menu-item--Color", "default": "var(--pf-global--Color--dark-100, #151515)" }, { "name": "--pf-global--Color--dark-100", "default": "#151515" }, { "name": "--pf-c-dropdown__menu-item--BackgroundColor", "default": "transparent" }, { "name": "--pf-global--Color--dark-200", "default": "#6a6e73" }, { "name": "--pf-c-dropdown__toggle--MinWidth" }, { "name": "--pf-c-dropdown__toggle--PaddingTop" }, { "name": "--pf-c-dropdown__toggle--PaddingRight" }, { "name": "--pf-c-dropdown__toggle--PaddingBottom" }, { "name": "--pf-c-dropdown__toggle--FontSize" }, { "name": "--pf-c-dropdown__toggle--FontWeight" }, { "name": "--pf-c-dropdown__toggle--LineHeight" }, { "name": "--pf-c-dropdown__toggle--Color" }, { "name": "--pf-c-dropdown__toggle--BackgroundColor" }, { "name": "--pf-c-dropdown__menu--Top", "description": "Dropdown top position", "default": "calc(100% + var(--pf-global--spacer--xs, 0.25rem))" }, { "name": "--pf-global--spacer--xs", "default": "0.25rem" }, { "name": "--pf-c-dropdown__menu--Left", "default": "0" }, { "name": "--pf-c-dropdown__menu--Right", "default": "auto" }, { "name": "--pf-c-dropdown__menu--ZIndex", "description": "Dropdown z-index", "default": "var(--pf-global--ZIndex--sm, 200)" }, { "name": "--pf-global--ZIndex--sm", "default": "200" }, { "name": "--pf-c-dropdown__menu--PaddingTop", "description": "Dropdown top padding", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-dropdown__menu--PaddingBottom", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-dropdown__menu--BackgroundColor", "default": "#fff" }, { "name": "--pf-c-dropdown__menu--BoxShadow", "description": "Dropdown box shadow", "default": "var(\n --pf-global--BoxShadow--md,\n 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12),\n 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)\n )" }, { "name": "--pf-global--BoxShadow--md", "default": "0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)" }, { "name": "--pf-c-divider--BackgroundColor", "default": "var(--pf-global--BorderColor--100, #d2d2d2)" }, { "name": "--pf-global--BorderColor--100", "default": "#d2d2d2" }, { "name": "--pf-theme--color--surface--lighter", "default": "#f0f0f0" }, { "name": "--pf-c-button--disabled--after--BorderColor" }, { "name": "--pf-c-button--disabled--Color" }, { "name": "--pf-c-button--disabled--BackgroundColor" }, { "name": "--pf-global--link--Color", "default": "#0066cc" }, { "name": "--pf-c-dropdown__toggle--PaddingLeft", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-global--spacer--md", "default": "1rem" }, { "name": "--pf-global--spacer--sm", "default": "0.5rem" } ], "demos": [ { "url": "https://patternflyelements.org/components/dropdown/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-dropdown/demo/index.html" } }, { "url": "https://patternflyelements.org/components/dropdown/demo/custom-toggle/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-dropdown/demo/custom-toggle.html" } }, { "url": "https://patternflyelements.org/components/dropdown/demo/descriptions/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-dropdown/demo/descriptions.html" } }, { "url": "https://patternflyelements.org/components/dropdown/demo/disabled-item/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-dropdown/demo/disabled-item.html" } }, { "url": "https://patternflyelements.org/components/dropdown/demo/disabled/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-dropdown/demo/disabled.html" } }, { "url": "https://patternflyelements.org/components/dropdown/demo/groups/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-dropdown/demo/groups.html" } } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "PfDropdownSelectEvent", "declaration": { "name": "PfDropdownSelectEvent", "module": "pf-dropdown/pf-dropdown.js" } }, { "kind": "custom-element-definition", "name": "pf-dropdown", "declaration": { "name": "PfDropdown", "module": "pf-dropdown/pf-dropdown.js" } }, { "kind": "js", "name": "PfDropdown", "declaration": { "name": "PfDropdown", "module": "pf-dropdown/pf-dropdown.js" } } ] }, { "kind": "javascript-module", "path": "pf-helper-text/pf-helper-text.js", "declarations": [ { "name": "PfHelperText", "description": "Displays contextual feedback for form fields with optional icon and status color.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "variant", "description": "Defines the helper text status and its corresponding color and icon.", "type": { "text": "| 'default'\n | 'success'\n | 'warning'\n | 'error'\n | 'indeterminate'" }, "default": "'default'", "kind": "field", "attribute": "variant", "reflects": true }, { "name": "icon", "description": "Custom icon name to override the default icon.\nRequires `\u003cpf-icon\u003e` to be imported.", "type": { "text": "string" }, "kind": "field", "attribute": "icon" }, { "name": "iconSet", "description": "Icon set for custom icons (e.g., 'fas', 'patternfly').", "type": { "text": "string" }, "kind": "field", "attribute": "icon-set" }, { "name": "_resolvedIcon", "description": "Determine the effective icon to display.", "type": { "text": "string | undefined" }, "readonly": true, "kind": "field", "privacy": "private" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-helper-text/pf-helper-text.ts#L33" }, "kind": "class", "tagName": "pf-helper-text", "attributes": [ { "name": "variant", "description": "Defines the helper text status and its corresponding color and icon.", "type": { "text": "| 'default'\n | 'success'\n | 'warning'\n | 'error'\n | 'indeterminate'" }, "default": "'default'", "fieldName": "variant" }, { "name": "icon", "description": "Custom icon name to override the default icon.\nRequires `\u003cpf-icon\u003e` to be imported.", "type": { "text": "string" }, "fieldName": "icon" }, { "name": "icon-set", "description": "Icon set for custom icons (e.g., 'fas', 'patternfly').", "type": { "text": "string" }, "fieldName": "iconSet" } ], "events": [ { "name": "icon-load", "description": "Fired when the icon successfully loads." }, { "name": "icon-error", "description": "Fired if loading the icon fails." } ], "slots": [ { "name": "icon", "description": "Optional custom icon to override the default icon." }, { "name": "", "description": "Default slot for the helper text content." } ], "cssParts": [ { "name": "icon", "description": "The container for the icon." }, { "name": "text", "description": "The container for the text." } ], "cssProperties": [ { "name": "--pf-c-helper-text--Gap", "default": "0.25rem" }, { "name": "--pf-c-helper-text--FontSize", "default": "0.875rem" }, { "name": "--pf-c-helper-text__item-text--Color", "default": "#151515" }, { "name": "--pf-c-helper-text__item-text--m-indeterminate--Color", "default": "#6a6e73" }, { "name": "--pf-c-helper-text__item-text--m-warning--Color", "default": "#795600" }, { "name": "--pf-c-helper-text__item-text--m-success--Color", "default": "#1e4f18" }, { "name": "--pf-c-helper-text__item-text--m-error--Color", "default": "#a30000" } ], "demos": [ { "url": "https://patternflyelements.org/components/pf-helper-text/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-helper-text/demo/index.html" } }, { "url": "https://patternflyelements.org/components/pf-helper-text/demo/dynamic-list/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-helper-text/demo/dynamic-list.html" } }, { "url": "https://patternflyelements.org/components/pf-helper-text/demo/dynamic/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-helper-text/demo/dynamic.html" } }, { "url": "https://patternflyelements.org/components/pf-helper-text/demo/multiple/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-helper-text/demo/multiple.html" } }, { "url": "https://patternflyelements.org/components/pf-helper-text/demo/static-icons/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-helper-text/demo/static-icons.html" } }, { "url": "https://patternflyelements.org/components/pf-helper-text/demo/static/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-helper-text/demo/static.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-helper-text", "declaration": { "name": "PfHelperText", "module": "pf-helper-text/pf-helper-text.js" } }, { "kind": "js", "name": "PfHelperText", "declaration": { "name": "PfHelperText", "module": "pf-helper-text/pf-helper-text.js" } } ] }, { "kind": "javascript-module", "path": "pf-hint/pf-hint.js", "declarations": [ { "name": "PfHint", "summary": "Provides inline contextual help or information to users", "description": "A **hint** is in-app messaging that provides a one-step reminder, explanation,\nor call to action for a page or modal. Hints provide information about an interaction\nor prerequisite step that might not be immediately obvious to the user.", "superclass": { "name": "LitElement", "package": "lit" }, "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-hint/pf-hint.ts#L18" }, "kind": "class", "tagName": "pf-hint", "slots": [ { "name": "actions", "summary": "Actions menu (e.g., kebab dropdown)" }, { "name": "title", "summary": "Optional title for the hint" }, { "name": "", "summary": "Body content of the hint. Main informational text." }, { "name": "footer", "summary": "Optional footer content, typically containing action links or buttons" } ], "cssParts": [ { "name": "container" }, { "name": "actions" }, { "name": "title" }, { "name": "body" }, { "name": "footer" } ], "cssProperties": [ { "name": "--pf-global--spacer--md", "default": "1rem" }, { "name": "--pf-global--palette--blue-50", "default": "#e7f1fa" }, { "name": "--pf-global--palette--blue-100", "default": "#bee1f4" }, { "name": "--pf-global--BorderRadius--sm", "default": "3px" }, { "name": "--pf-global--BoxShadow--sm", "default": "0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)" }, { "name": "--pf-global--FontWeight--semi-bold", "default": "700" }, { "name": "--pf-global--Color--100", "default": "#151515" }, { "name": "--pf-global--LineHeight--md", "default": "1.5" }, { "name": "--pf-global--spacer--lg", "default": "1.5rem" }, { "name": "--pf-c-hint--GridRowGap" }, { "name": "--pf-c-hint--PaddingTop" }, { "name": "--pf-c-hint--PaddingRight" }, { "name": "--pf-c-hint--PaddingBottom" }, { "name": "--pf-c-hint--PaddingLeft" }, { "name": "--pf-c-hint--BackgroundColor" }, { "name": "--pf-c-hint--BorderWidth" }, { "name": "--pf-c-hint--BorderColor" }, { "name": "--pf-c-hint--BorderRadius" }, { "name": "--pf-c-hint--BoxShadow" }, { "name": "--pf-c-hint__actions--c-dropdown--MarginTop" }, { "name": "--pf-c-hint__title--FontSize" }, { "name": "--pf-c-hint__title--FontWeight" }, { "name": "--pf-c-hint__title--Color" }, { "name": "--pf-c-hint__title--LineHeight" }, { "name": "--pf-c-hint__body--Color" }, { "name": "--pf-c-hint__footer--MarginTop" }, { "name": "--pf-c-hint__body--FontSize" }, { "name": "--pf-c-hint__body--LineHeight" }, { "name": "--pf-c-hint__footer--child--MarginRight" }, { "name": "--pf-global--link--Color--hover", "default": "#004080" }, { "name": "--pf-global--link--Color", "default": "#06c" } ], "demos": [ { "url": "https://patternflyelements.org/components/hint/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-hint/demo/index.html" } }, { "url": "https://patternflyelements.org/components/hint/demo/with-title/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-hint/demo/with-title.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-hint", "declaration": { "name": "PfHint", "module": "pf-hint/pf-hint.js" } }, { "kind": "js", "name": "PfHint", "declaration": { "name": "PfHint", "module": "pf-hint/pf-hint.js" } } ] }, { "kind": "javascript-module", "path": "pf-icon/pf-icon.js", "declarations": [ { "name": "IconResolveError", "description": "Fired when an icon fails to load", "superclass": { "name": "ErrorEvent", "package": "global:" }, "members": [ { "name": "originalError", "description": "The original error when importing the icon module", "type": { "text": "Error" }, "kind": "field" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-icon/pf-icon.ts#L25" }, "kind": "class" }, { "name": "PfIcon", "description": "An **icon** component is a container that allows for icons of varying dimensions to\nseamlessly replace each other without shifting surrounding content.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "onIntersect", "kind": "method", "static": true, "privacy": "private" }, { "parameters": [ { "name": "set", "type": { "text": "string" } }, { "name": "icon", "type": { "text": "string" } } ], "return": { "type": { "text": "Renderable" } }, "name": "defaultResolve", "kind": "method", "static": true, "privacy": "private" }, { "name": "io", "default": "new IntersectionObserver(PfIcon.onIntersect)", "kind": "field", "static": true, "privacy": "private" }, { "name": "resolvers", "default": "new Map\u003cstring, IconResolverFunction\u003e()", "kind": "field", "static": true, "privacy": "private" }, { "name": "instances", "default": "new Set\u003cPfIcon\u003e()", "kind": "field", "static": true, "privacy": "private" }, { "parameters": [ { "name": "setName", "type": { "text": "string" } }, { "name": "resolver", "type": { "text": "IconResolverFunction" } } ], "return": { "type": { "text": "void" } }, "name": "addIconSet", "description": "Register a new icon set\n\n\u003cfigure\u003e\n\u003cfigcaption\u003ereturning a URL object\u003c/figcaption\u003e\n\n```js\nPfIcon.addIconSet('rh', (set, icon) =\u003e\nnew URL(`./icons/${set}\n\u003c/figure\u003e", "kind": "method", "static": true, "privacy": "public" }, { "return": { "type": { "text": "void" } }, "name": "reset", "description": "Removes all added icon sets and resets resolve function", "kind": "method", "static": true, "privacy": "public" }, { "name": "resolve", "description": "Gets a renderable icon. Override this to customize how icons are resolved.\n\n\u003cfigure\u003e\n\u003cfigcaption\u003eresolving an icon node from an icon module\u003c/figcaption\u003e\n\n```js\nPfIcon.resolve = (set, icon) =\u003e\nimport(`/assets/icons/${set}\n\u003c/figure\u003e", "type": { "text": "IconResolverFunction" }, "default": "PfIcon.defaultResolve", "kind": "field", "static": true }, { "name": "set", "description": "Icon set", "type": { "text": "string" }, "default": "'fas'", "kind": "field", "attribute": "set" }, { "name": "icon", "description": "Icon name", "type": { "text": "string" }, "default": "''", "kind": "field", "attribute": "icon", "reflects": true }, { "name": "size", "description": "Size of the icon", "type": { "text": "'sm' | 'md' | 'lg' | 'xl'" }, "default": "'sm'", "kind": "field", "attribute": "size", "reflects": true }, { "name": "loading", "description": "Controls how eager the element will be to load the icon data\n- `eager`: eagerly load the icon, blocking the main thread\n- `idle`: wait for the browser to attain an idle state before loading\n- `lazy` (default): wait for the element to enter the viewport before loading", "type": { "text": "'idle' | 'lazy' | 'eager'" }, "default": "'lazy'", "kind": "field", "attribute": "loading" }, { "return": { "type": { "text": "Promise\u003cvoid\u003e" } }, "name": "load", "kind": "method", "privacy": "protected" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-icon/pf-icon.ts#L44" }, "kind": "class", "tagName": "pf-icon", "attributes": [ { "name": "set", "description": "Icon set", "type": { "text": "string" }, "default": "'fas'", "fieldName": "set" }, { "name": "icon", "description": "Icon name", "type": { "text": "string" }, "default": "''", "fieldName": "icon" }, { "name": "size", "description": "Size of the icon", "type": { "text": "'sm' | 'md' | 'lg' | 'xl'" }, "default": "'sm'", "fieldName": "size" }, { "name": "loading", "description": "Controls how eager the element will be to load the icon data\n- `eager`: eagerly load the icon, blocking the main thread\n- `idle`: wait for the browser to attain an idle state before loading\n- `lazy` (default): wait for the element to enter the viewport before loading", "type": { "text": "'idle' | 'lazy' | 'eager'" }, "default": "'lazy'", "fieldName": "loading" } ], "events": [ { "name": "load", "description": "Fired when an icon is loaded and rendered" }, { "name": "error", "description": "Fired when an icon fails to load" } ], "slots": [ { "name": "", "summary": "Slotted content is used as a fallback in case the icon doesn't load" } ], "cssParts": [ { "name": "fallback", "summary": "Container for the fallback (i.e. slotted) content" } ], "cssProperties": [ { "name": "--pf-global--icon--FontSize--sm", "default": "10px" }, { "name": "--pf-global--icon--FontSize--md", "default": "18px" }, { "name": "--pf-global--icon--FontSize--lg", "default": "24px" }, { "name": "--pf-global--icon--FontSize--xl", "default": "54px" }, { "name": "--pf-icon--size", "description": "size of the icon", "default": "var(--_size)" } ], "demos": [ { "url": "https://patternflyelements.org/components/icon/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-icon/demo/index.html" } }, { "url": "https://patternflyelements.org/components/icon/demo/custom-icon-sets/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-icon/demo/custom-icon-sets.html" } }, { "url": "https://patternflyelements.org/components/icon/demo/sets/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-icon/demo/sets.html" } }, { "url": "https://patternflyelements.org/components/icon/demo/styling-icons/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-icon/demo/styling-icons.html" } } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "IconResolveError", "declaration": { "name": "IconResolveError", "module": "pf-icon/pf-icon.js" } }, { "kind": "custom-element-definition", "name": "pf-icon", "declaration": { "name": "PfIcon", "module": "pf-icon/pf-icon.js" } }, { "kind": "js", "name": "PfIcon", "declaration": { "name": "PfIcon", "module": "pf-icon/pf-icon.js" } } ] }, { "kind": "javascript-module", "path": "pf-jump-links/pf-jump-links-item.js", "declarations": [ { "name": "PfJumpLinksItem", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "active", "description": "Whether this item is active.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "active", "reflects": true }, { "name": "href", "description": "hypertext reference for this link", "type": { "text": "string" }, "kind": "field", "attribute": "href", "reflects": true }, { "return": { "type": { "text": "void" } }, "name": "activeChanged", "kind": "method", "privacy": "protected" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-jump-links/pf-jump-links-item.ts#L14" }, "kind": "class", "tagName": "pf-jump-links-item", "attributes": [ { "name": "active", "description": "Whether this item is active.", "type": { "text": "boolean" }, "default": "false", "fieldName": "active" }, { "name": "href", "description": "hypertext reference for this link", "type": { "text": "string" }, "fieldName": "href" } ], "slots": [ { "name": "" }, { "name": "subsection" } ], "cssProperties": [ { "name": "--pf-c-jump-links__link--PaddingTop", "description": "Top padding around the link", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-jump-links__link--PaddingRight", "description": "Right padding around the link", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-jump-links__link--PaddingBottom", "description": "Bottom padding around the link", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-jump-links__link--PaddingLeft", "description": "Left padding around the link", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-global--spacer--md", "default": "1rem" }, { "name": "--pf-c-jump-links__link--OutlineOffset", "description": "Outline offset for jump links link", "default": "calc(-1 * var(--pf-global--spacer--sm, 0.5rem))" }, { "name": "--pf-global--spacer--sm", "default": "0.5rem" }, { "name": "--pf-c-jump-links__link-text--Color", "description": "Color for jump links link text", "default": "var(--pf-global--Color--200, #6a6e73)" }, { "name": "--pf-global--Color--200", "default": "#6a6e73" }, { "name": "--pf-c-jump-links__link--before--BorderColor", "default": "transparent" }, { "name": "--pf-c-jump-links__list--before--BorderTopWidth", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-global--BorderWidth--sm", "default": "1px" }, { "name": "--pf-c-jump-links__link--before--BorderRightWidth", "default": "0" }, { "name": "--pf-c-jump-links__link--before--BorderBottomWidth", "default": "0" }, { "name": "--pf-c-jump-links__link--before--BorderLeftWidth", "default": "0" }, { "name": "--pf-c-jump-links__link--hover__link-text--Color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-jump-links__link--focus__link-text--Color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-jump-links__link--before--BorderTopWidth", "default": "var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth,\n var(--pf-global--BorderWidth--lg, 3px))" }, { "name": "--pf-c-jump-links__item--m-current__link--before--BorderTopWidth", "default": "var(--pf-global--BorderWidth--lg, 3px)" }, { "name": "--pf-global--BorderWidth--lg", "default": "3px" }, { "name": "--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth", "default": "0" }, { "name": "--pf-c-jump-links__item--m-current__link--before--BorderColor", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-global--primary-color--100", "default": "#06c" }, { "name": "--pf-c-jump-links__item--m-current__link-text--Color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-global--Color--100", "default": "#151515" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-jump-links-item", "declaration": { "name": "PfJumpLinksItem", "module": "pf-jump-links/pf-jump-links-item.js" } }, { "kind": "js", "name": "PfJumpLinksItem", "declaration": { "name": "PfJumpLinksItem", "module": "pf-jump-links/pf-jump-links-item.js" } } ] }, { "kind": "javascript-module", "path": "pf-jump-links/pf-jump-links-list.js", "declarations": [ { "name": "PfJumpLinksList", "superclass": { "name": "LitElement", "package": "lit" }, "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-jump-links/pf-jump-links-list.ts#L7" }, "kind": "class", "tagName": "pf-jump-links-list", "slots": [ { "name": "" } ], "cssProperties": [ { "name": "--pf-c-jump-links__list__list__link--PaddingTop", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-jump-links__list__list__link--PaddingBottom", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-global--spacer--sm", "default": "0.5rem" }, { "name": "--pf-c-jump-links__list__list__link--PaddingLeft", "default": "var(--pf-global--spacer--lg, 1.5rem)" }, { "name": "--pf-global--spacer--lg", "default": "1.5rem" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-jump-links-list", "declaration": { "name": "PfJumpLinksList", "module": "pf-jump-links/pf-jump-links-list.js" } }, { "kind": "js", "name": "PfJumpLinksList", "declaration": { "name": "PfJumpLinksList", "module": "pf-jump-links/pf-jump-links-list.js" } } ] }, { "kind": "javascript-module", "path": "pf-jump-links/pf-jump-links.js", "declarations": [ { "name": "PfJumpLinks", "description": "Jump links** allow users to navigate to sections within a page.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "expandable", "description": "Whether the element features a disclosure widget around the nav items", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "expandable", "reflects": true }, { "name": "expanded", "description": "Whether the expandable element's disclosure widget is expanded", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "expanded", "reflects": true }, { "name": "vertical", "description": "Whether the layout of children is vertical or horizontal.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "vertical", "reflects": true }, { "name": "centered", "description": "Whether to center children.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "centered", "reflects": true }, { "name": "label", "description": "Label to add to nav element.", "type": { "text": "string" }, "kind": "field", "attribute": "label" }, { "return": { "type": { "text": "void" } }, "name": "firstUpdated", "kind": "method" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-jump-links/pf-jump-links.ts#L20" }, "kind": "class", "tagName": "pf-jump-links", "attributes": [ { "name": "expandable", "description": "Whether the element features a disclosure widget around the nav items", "type": { "text": "boolean" }, "default": "false", "fieldName": "expandable" }, { "name": "expanded", "description": "Whether the expandable element's disclosure widget is expanded", "type": { "text": "boolean" }, "default": "false", "fieldName": "expanded" }, { "name": "vertical", "description": "Whether the layout of children is vertical or horizontal.", "type": { "text": "boolean" }, "default": "false", "fieldName": "vertical" }, { "name": "centered", "description": "Whether to center children.", "type": { "text": "boolean" }, "default": "false", "fieldName": "centered" }, { "name": "label", "description": "Label to add to nav element.", "type": { "text": "string" }, "fieldName": "label" } ], "events": [ { "name": "toggle", "description": "when the `expanded` disclosure widget is toggled" } ], "slots": [ { "name": "", "description": "Place pf-jump-links-items here" } ], "cssProperties": [ { "name": "--pf-global--FontFamily--sans-serif", "default": "\"RedHatTextUpdated\", \"Overpass\", overpass, helvetica, arial, sans-serif" }, { "name": "--pf-global--FontSize--md", "default": "16px" }, { "name": "--pf-global--FontWeight--normal", "default": "400" }, { "name": "--pf-c-jump-links__list--Display", "description": "Controls the display type of the list container", "default": "flex" }, { "name": "--pf-c-jump-links__list--FlexDirection", "description": "Controls the direction of items in the list", "default": "row" }, { "name": "--pf-c-jump-links__list--PaddingTop", "description": "Padding around the list of links", "default": "0" }, { "name": "--pf-c-jump-links__list--PaddingRight", "description": "Right padding for the list", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-jump-links__list--PaddingBottom", "description": "Bottom padding for the list", "default": "0" }, { "name": "--pf-c-jump-links__list--PaddingLeft", "description": "Left padding for the list", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-jump-links__list--Visibility", "description": "Controls visibility of the list", "default": "visible" }, { "name": "--pf-c-jump-links__list--before--BorderColor", "description": "Border color for the list pseudo-element", "default": "var(--pf-global--BorderColor--100, #d2d2d2)" }, { "name": "--pf-global--BorderColor--100", "default": "#d2d2d2" }, { "name": "--pf-c-jump-links__list--before--BorderTopWidth", "description": "Top border width for the list pseudo-element", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-c-jump-links__list--before--BorderRightWidth", "description": "Right border width for the list pseudo-element", "default": "0" }, { "name": "--pf-c-jump-links__list--before--BorderBottomWidth", "description": "Bottom border width for the list pseudo-element", "default": "0" }, { "name": "--pf-c-jump-links__list--before--BorderLeftWidth", "description": "Left border width for the list pseudo-element", "default": "0" }, { "name": "--pf-c-jump-links--m-vertical__list--PaddingTop", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-jump-links--m-vertical__list--PaddingRight", "default": "0" }, { "name": "--pf-c-jump-links--m-vertical__list--PaddingBottom", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-jump-links--m-vertical__list--PaddingLeft", "default": "0" }, { "name": "--pf-c-jump-links--m-vertical__list--before--BorderTopWidth", "default": "0" }, { "name": "--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-global--BorderWidth--sm", "default": "1px" }, { "name": "--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth", "default": "0" }, { "name": "--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth", "default": "var(--pf-global--BorderWidth--lg, 3px)" }, { "name": "--pf-global--BorderWidth--lg", "default": "3px" }, { "name": "--pf-c-jump-links--m-vertical__list--FlexDirection", "default": "column" }, { "name": "--pf-c-jump-links__label--MarginBottom", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-jump-links__toggle--MarginTop", "description": "Padding around the expandable jump links disclosure widget.", "default": "calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))" }, { "name": "--pf-c-jump-links__toggle--MarginBottom", "description": "Bottom margin for the toggle", "default": "var(--pf-c-jump-links__toggle--MarginBottom--base,\n calc(-1 * var(--pf-global--spacer--form-element, 0.375rem)))" }, { "name": "--pf-c-jump-links__toggle--MarginLeft", "description": "Left margin for the toggle" }, { "name": "--pf-c-jump-links__toggle-text--Color", "description": "Color of the toggle text", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-button--PaddingTop", "default": "var(--pf-global--spacer--form-element, 0.375rem)" }, { "name": "--pf-c-button--PaddingRight", "description": "Right padding for the button", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-button--PaddingBottom", "description": "Bottom padding for the button", "default": "var(--pf-global--spacer--form-element, 0.375rem)" }, { "name": "--pf-c-button--PaddingLeft", "description": "Left padding for the button", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-jump-links__toggle-icon--Rotate", "description": "Rotation angle for the toggle icon", "default": "0" }, { "name": "--pf-c-jump-links__toggle-icon--Transition", "description": "Transition for the toggle icon", "default": "var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1))" }, { "name": "--pf-global--Transition", "default": "all 250ms cubic-bezier(0.42, 0, 0.58, 1)" }, { "name": "--pf-c-jump-links__toggle-text--MarginLeft", "description": "Left margin for the toggle text", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-jump-links--m-expanded__toggle--MarginBottom", "description": "Base margin for the toggle button", "default": "calc(var(--pf-c-jump-links__toggle--MarginBottom--base,\n calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))) +\n var(--pf-global--spacer--md, 1rem))" }, { "name": "--pf-c-jump-links__toggle--MarginBottom--base", "default": "calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))" }, { "name": "--pf-global--spacer--form-element", "default": "0.375rem" }, { "name": "--pf-global--spacer--md", "default": "1rem" }, { "name": "--pf-c-jump-links--m-expanded__toggle-icon--Rotate", "default": "90deg" }, { "name": "--pf-c-jump-links--m-expanded__toggle-icon--Color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-global--Color--100", "default": "#151515" } ], "demos": [ { "url": "https://patternflyelements.org/components/jump-links/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-jump-links/demo/index.html" } }, { "url": "https://patternflyelements.org/components/jump-links/demo/centered-list/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-jump-links/demo/centered-list.html" } }, { "url": "https://patternflyelements.org/components/jump-links/demo/expandable-vertical-with-subsection/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-jump-links/demo/expandable-vertical-with-subsection.html" } }, { "url": "https://patternflyelements.org/components/jump-links/demo/label/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-jump-links/demo/label.html" } }, { "url": "https://patternflyelements.org/components/jump-links/demo/scrollspy-with-subsections/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-jump-links/demo/scrollspy-with-subsections.html" } }, { "url": "https://patternflyelements.org/components/jump-links/demo/vertical-with-label/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-jump-links/demo/vertical-with-label.html" } }, { "url": "https://patternflyelements.org/components/jump-links/demo/vertical/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-jump-links/demo/vertical.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-jump-links", "declaration": { "name": "PfJumpLinks", "module": "pf-jump-links/pf-jump-links.js" } }, { "kind": "js", "name": "PfJumpLinks", "declaration": { "name": "PfJumpLinks", "module": "pf-jump-links/pf-jump-links.js" } } ] }, { "kind": "javascript-module", "path": "pf-label/pf-label.js", "declarations": [ { "name": "LabelCloseEvent", "superclass": { "name": "Event", "package": "global:" }, "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-label/pf-label.ts#L12" }, "kind": "class" }, { "name": "PfLabel", "summary": "Allows 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.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "variant", "description": "Changes the style of the label.\n- Filled: Colored background with colored border.\n- Outline: White background with colored border.", "type": { "text": "| 'filled'\n | 'outline'" }, "default": "'filled'", "kind": "field", "attribute": "variant" }, { "name": "color", "description": "Changes the color of the label", "type": { "text": "| 'blue'\n | 'cyan'\n | 'green'\n | 'orange'\n | 'purple'\n | 'red'\n | 'grey'\n | 'gold'" }, "default": "'grey'", "kind": "field", "attribute": "color" }, { "name": "icon", "description": "Shorthand for the `icon` slot, the value is icon name", "type": { "text": "string" }, "kind": "field", "attribute": "icon" }, { "name": "closeButtonLabel", "description": "Text label for a removable label's close button", "type": { "text": "string" }, "kind": "field", "attribute": "close-button-label" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-label/pf-label.ts#L26" }, "kind": "class", "tagName": "pf-label", "attributes": [ { "name": "variant", "description": "Changes the style of the label.\n- Filled: Colored background with colored border.\n- Outline: White background with colored border.", "type": { "text": "| 'filled'\n | 'outline'" }, "default": "'filled'", "fieldName": "variant" }, { "name": "color", "description": "Changes the color of the label", "type": { "text": "| 'blue'\n | 'cyan'\n | 'green'\n | 'orange'\n | 'purple'\n | 'red'\n | 'grey'\n | 'gold'" }, "default": "'grey'", "fieldName": "color" }, { "name": "icon", "description": "Shorthand for the `icon` slot, the value is icon name", "type": { "text": "string" }, "fieldName": "icon" }, { "name": "close-button-label", "description": "Text label for a removable label's close button", "type": { "text": "string" }, "fieldName": "closeButtonLabel" } ], "events": [ { "name": "close", "description": "when a removable label's close button is clicked", "type": { "text": "LabelCloseEvent" } } ], "slots": [ { "name": "icon", "summary": "Contains the labels's icon, e.g. web-icon-alert-success." }, { "name": "", "summary": "Must contain the text for the label." } ], "cssParts": [ { "name": "icon", "summary": "container for the label icon" }, { "name": "close-button", "summary": "container for removable labels' close button" } ], "cssProperties": [ { "name": "--pf-c-label--PaddingTop", "description": "label top padding", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-label--PaddingBottom", "description": "label bottom padding", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-label--PaddingRight", "description": "label right padding", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-label--FontSize", "description": "label font size", "default": "var(--pf-global--FontSize--sm, 0.875rem)" }, { "name": "--pf-global--FontSize--sm", "default": "0.875rem" }, { "name": "--pf-c-label--Color", "description": "label text color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-label--BackgroundColor", "description": "label background color", "default": "var(--pf-global--palette--black-150, #f5f5f5)" }, { "name": "--pf-global--palette--black-150", "default": "#f5f5f5" }, { "name": "--pf-c-label__content--MaxWidth", "description": "label content max width", "default": "100%" }, { "name": "--pf-c-label__content--Color", "description": "label content text color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-global--Color--100", "default": "#151515" }, { "name": "--pf-c-label--BorderRadius", "description": "label border radius", "default": "30em" }, { "name": "--pf-c-label__content--before--BorderWidth", "default": "1px" }, { "name": "--pf-c-label__content--before--BorderColor", "default": "var(--pf-global--palette--black-300, #d2d2d2)" }, { "name": "--pf-c-label--m-compact--PaddingTop", "default": "0" }, { "name": "--pf-c-label--m-compact--PaddingRight", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-label--m-compact--PaddingBottom", "default": "0" }, { "name": "--pf-c-label--m-compact--PaddingLeft", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-label--m-blue__content--Color", "default": "var(--pf-global--info-color--200, #002952)" }, { "name": "--pf-global--info-color--200", "default": "#002952" }, { "name": "--pf-c-label--m-blue--BackgroundColor", "default": "var(--pf-global--palette--blue-50, #e7f1fa)" }, { "name": "--pf-global--palette--blue-50", "default": "#e7f1fa" }, { "name": "--pf-c-label--m-blue__content--before--BorderColor", "default": "var(--pf-global--palette--blue-100, #bee1f4)" }, { "name": "--pf-global--palette--blue-100", "default": "#bee1f4" }, { "name": "--pf-c-label--m-outline--m-blue__content--Color", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-c-label--m-cyan__content--Color", "default": "var(--pf-global--default-color--300, #003737)" }, { "name": "--pf-global--default-color--300", "default": "#003737" }, { "name": "--pf-c-label--m-cyan--BackgroundColor", "default": "var(--pf-global--palette--cyan-50, #f2f9f9)" }, { "name": "--pf-global--palette--cyan-50", "default": "#f2f9f9" }, { "name": "--pf-c-label--m-cyan__content--before--BorderColor", "default": "var(--pf-global--palette--cyan-100, #a2d9d9)" }, { "name": "--pf-global--palette--cyan-100", "default": "#a2d9d9" }, { "name": "--pf-c-label--m-outline--m-cyan__content--Color", "default": "var(--pf-global--palette--cyan-400, #005f60)" }, { "name": "--pf-global--palette--cyan-400", "default": "#005f60" }, { "name": "--pf-c-label--m-green__content--Color", "default": "var(--pf-global--success-color--200, #1e4f18)" }, { "name": "--pf-global--success-color--200", "default": "#1e4f18" }, { "name": "--pf-c-label--m-green--BackgroundColor", "default": "var(--pf-global--palette--green-50, #f3faf2)" }, { "name": "--pf-global--palette--green-50", "default": "#f3faf2" }, { "name": "--pf-c-label--m-green__content--before--BorderColor", "default": "var(--pf-global--palette--green-100, #bde5b8)" }, { "name": "--pf-global--palette--green-100", "default": "#bde5b8" }, { "name": "--pf-c-label--m-outline--m-green__content--Color", "default": "var(--pf-global--success-color--100, #3e8635)" }, { "name": "--pf-c-label--m-orange__content--Color", "default": "var(--pf-global--palette--orange-700, #3b1f00)" }, { "name": "--pf-global--palette--orange-700", "default": "#3b1f00" }, { "name": "--pf-c-label--m-orange--BackgroundColor", "default": "var(--pf-global--palette--orange-50, #fff6ec)" }, { "name": "--pf-global--palette--orange-50", "default": "#fff6ec" }, { "name": "--pf-c-label--m-orange__content--before--BorderColor", "default": "var(--pf-global--palette--orange-100, #f4b678)" }, { "name": "--pf-global--palette--orange-100", "default": "#f4b678" }, { "name": "--pf-c-label--m-outline--m-orange__content--Color", "default": "var(--pf-global--palette--orange-500, #8f4700)" }, { "name": "--pf-global--palette--orange-500", "default": "#8f4700" }, { "name": "--pf-c-label--m-purple__content--Color", "default": "var(--pf-global--palette--purple-700, #1f0066)" }, { "name": "--pf-global--palette--purple-700", "default": "#1f0066" }, { "name": "--pf-c-label--m-purple--BackgroundColor", "default": "var(--pf-global--palette--purple-50, #f2f0fc)" }, { "name": "--pf-global--palette--purple-50", "default": "#f2f0fc" }, { "name": "--pf-c-label--m-purple__content--before--BorderColor", "default": "var(--pf-global--palette--purple-100, #cbc1ff)" }, { "name": "--pf-global--palette--purple-100", "default": "#cbc1ff" }, { "name": "--pf-c-label--m-outline--m-purple__content--Color", "default": "var(--pf-global--palette--purple-500, #6753ac)" }, { "name": "--pf-c-label--m-red__content--Color", "default": "var(--pf-global--palette--red-300, #7d1007)" }, { "name": "--pf-global--palette--red-300", "default": "#7d1007" }, { "name": "--pf-c-label--m-red--BackgroundColor", "default": "var(--pf-global--palette--red-50, #faeae8)" }, { "name": "--pf-global--palette--red-50", "default": "#faeae8" }, { "name": "--pf-c-label--m-red__content--before--BorderColor", "default": "var(--pf-global--palette--red-100, #c9190b)" }, { "name": "--pf-global--palette--red-100", "default": "#c9190b" }, { "name": "--pf-c-label--m-outline--m-red__content--Color", "default": "var(--pf-global--danger-color--100, #c9190b)" }, { "name": "--pf-c-label--m-gold__content--Color", "default": "var(--pf-global--palette--gold-700, #3d2c00)" }, { "name": "--pf-global--palette--gold-700", "default": "#3d2c00" }, { "name": "--pf-c-label--m-gold--BackgroundColor", "default": "var(--pf-global--palette--gold-50, #fdf7e7)" }, { "name": "--pf-global--palette--gold-50", "default": "#fdf7e7" }, { "name": "--pf-c-label--m-gold__content--before--BorderColor", "default": "var(--pf-global--palette--gold-100, #f9e0a2)" }, { "name": "--pf-global--palette--gold-100", "default": "#f9e0a2" }, { "name": "--pf-c-label--m-outline__content--Color", "default": "var(--pf-c-label--m-outline--m-gold__content--Color, var(--pf-global--palette--gold-600, #795600))" }, { "name": "--pf-c-label--m-outline--m-gold__content--Color", "default": "var(--pf-global--palette--gold-600, #795600)" }, { "name": "--pf-global--palette--gold-600", "default": "#795600" }, { "name": "--pf-c-label--m-outline--BackgroundColor", "default": "#ffffff" }, { "name": "--pf-global--palette--black-300", "default": "#d2d2d2" }, { "name": "--pf-c-label--PaddingLeft", "description": "label left padding", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-global--spacer--md", "default": "1rem" }, { "name": "--pf-c-label__icon--MarginRight", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-label--m-blue__icon--Color", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-global--primary-color--100", "default": "#06c" }, { "name": "--pf-c-label--m-cyan__icon--Color", "default": "var(--pf-global--default-color--200, #009596)" }, { "name": "--pf-global--default-color--200", "default": "#009596" }, { "name": "--pf-c-label--m-green__icon--Color", "default": "var(--pf-global--success-color--100, #3e8635)" }, { "name": "--pf-global--success-color--100", "default": "#3e8635" }, { "name": "--pf-c-label--m-orange__icon--Color", "default": "var(--pf-global--palette--orange-300, #ec7a08)" }, { "name": "--pf-global--palette--orange-300", "default": "#ec7a08" }, { "name": "--pf-c-label--m-purple__icon--Color", "default": "var(--pf-global--palette--purple-500, #6753ac)" }, { "name": "--pf-global--palette--purple-500", "default": "#6753ac" }, { "name": "--pf-c-label--m-red__icon--Color", "default": "var(--pf-global--danger-color--100, #c9190b)" }, { "name": "--pf-global--danger-color--100", "default": "#c9190b" }, { "name": "--pf-c-label__icon--Color", "description": "blue label icon color\n\ncyan label icon color\n\ngreen label icon color\n\norange label icon color\n\npurple label icon color\n\nred label icon color\n\ngold label icon color", "default": "var(--pf-c-label--m-gold__icon--Color, var(--pf-global--palette--gold-400, #f0ab00))" }, { "name": "--pf-c-label--m-gold__icon--Color", "default": "var(--pf-global--palette--gold-400, #f0ab00)" }, { "name": "--pf-global--palette--gold-400", "default": "#f0ab00" }, { "name": "--pf-c-label__c-button--FontSize", "default": "var(--pf-global--FontSize--xs, 0.75rem)" }, { "name": "--pf-global--FontSize--xs", "default": "0.75rem" }, { "name": "--pf-c-label__c-button--PaddingTop", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-label__c-button--PaddingRight", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-label__c-button--PaddingBottom", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-global--spacer--xs", "default": "0.25rem" }, { "name": "--pf-c-label__c-button--PaddingLeft", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-global--spacer--sm", "default": "0.5rem" }, { "name": "--pf-c-label__c-button--MarginTop", "default": "-0.5rem" }, { "name": "--pf-c-label__c-button--MarginRight", "default": "-0.5rem" }, { "name": "--pf-c-label__c-button--MarginBottom", "default": "-0.5rem" }, { "name": "--pf-c-label__c-button--MarginLeft", "default": "0.25rem" } ], "demos": [ { "url": "https://patternflyelements.org/components/label/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-label/demo/index.html" } }, { "url": "https://patternflyelements.org/components/label/demo/compact/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-label/demo/compact.html" } }, { "url": "https://patternflyelements.org/components/label/demo/filled-color/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-label/demo/filled-color.html" } }, { "url": "https://patternflyelements.org/components/label/demo/icon/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-label/demo/icon.html" } }, { "url": "https://patternflyelements.org/components/label/demo/outline-color/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-label/demo/outline-color.html" } }, { "url": "https://patternflyelements.org/components/label/demo/patternfly/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-label/demo/patternfly.html" } } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "LabelCloseEvent", "declaration": { "name": "LabelCloseEvent", "module": "pf-label/pf-label.js" } }, { "kind": "custom-element-definition", "name": "pf-label", "declaration": { "name": "PfLabel", "module": "pf-label/pf-label.js" } }, { "kind": "js", "name": "PfLabel", "declaration": { "name": "PfLabel", "module": "pf-label/pf-label.js" } } ] }, { "kind": "javascript-module", "path": "pf-modal/pf-modal.js", "declarations": [ { "name": "ModalCancelEvent", "superclass": { "name": "ComposedEvent" }, "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-modal/pf-modal.ts#L16" }, "kind": "class" }, { "name": "ModalCloseEvent", "superclass": { "name": "ComposedEvent" }, "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-modal/pf-modal.ts#L22" }, "kind": "class" }, { "name": "ModalOpenEvent", "superclass": { "name": "ComposedEvent" }, "members": [ { "name": "trigger", "description": "The trigger element which triggered the modal to open", "type": { "text": "HTMLElement | null" }, "kind": "field" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-modal/pf-modal.ts#L28" }, "kind": "class" }, { "name": "PfModal", "summary": "Displays information or helps a user focus on a task", "description": "A **modal** displays important information to a user without requiring them to navigate\nto a new page.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "closeOnOutsideClick", "description": "Should the dialog close when user clicks outside the dialog?", "type": { "text": "boolean" }, "default": "false", "kind": "field", "static": true, "privacy": "protected" }, { "name": "variant", "description": "The `variant` controls the width of the modal.\nThere are three options: `small`, `medium` and `large`. The default is `large`.", "type": { "text": "'small' | 'medium' | 'large'" }, "kind": "field", "attribute": "variant", "reflects": true }, { "name": "position", "description": "`position=\"top\"` aligns the dialog with the top of the page", "type": { "text": "'top'" }, "kind": "field", "attribute": "position", "reflects": true }, { "name": "open", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "open", "reflects": true }, { "name": "trigger", "description": "Optional ID of the trigger element", "type": { "text": "string" }, "kind": "field", "attribute": "trigger" }, { "name": "returnValue", "type": { "text": "string" }, "default": "''", "kind": "field" }, { "return": { "type": { "text": "Promise\u003cvoid\u003e" } }, "name": "_init", "kind": "method", "privacy": "protected" }, { "parameters": [ { "name": "oldValue", "type": { "text": "boolean" } }, { "name": "newValue", "type": { "text": "boolean" } } ], "return": { "type": { "text": "Promise\u003cvoid\u003e" } }, "name": "openChanged", "kind": "method", "privacy": "protected" }, { "return": { "type": { "text": "void" } }, "name": "triggerChanged", "kind": "method", "privacy": "protected" }, { "parameters": [ { "name": "event", "type": { "text": "MouseEvent" } } ], "name": "onTriggerClick", "kind": "method", "privacy": "private" }, { "parameters": [ { "name": "event", "type": { "text": "MouseEvent" } } ], "name": "onClick", "kind": "method", "privacy": "private" }, { "parameters": [ { "name": "event", "type": { "text": "KeyboardEvent" } } ], "name": "onKeydown", "kind": "method", "privacy": "private" }, { "name": "cancel", "kind": "method", "privacy": "private" }, { "parameters": [ { "name": "element", "type": { "text": "HTMLElement" } } ], "return": { "type": { "text": "void" } }, "name": "setTrigger", "kind": "method" }, { "return": { "type": { "text": "void" } }, "name": "toggle", "description": "Manually toggles the modal.\n```js\nmodal.toggle();\n```", "kind": "method" }, { "return": { "type": { "text": "void" } }, "name": "show", "description": "Manually opens the modal.\n```js\nmodal.open();\n```", "kind": "method" }, { "return": { "type": { "text": "void" } }, "name": "showModal", "kind": "method" }, { "parameters": [ { "name": "returnValue", "type": { "text": "string" } } ], "return": { "type": { "text": "void" } }, "name": "close", "description": "Manually closes the modal.\n```js\nmodal.close();\n```", "kind": "method" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-modal/pf-modal.ts#L46" }, "kind": "class", "tagName": "pf-modal", "attributes": [ { "name": "variant", "description": "The `variant` controls the width of the modal.\nThere are three options: `small`, `medium` and `large`. The default is `large`.", "type": { "text": "'small' | 'medium' | 'large'" }, "fieldName": "variant" }, { "name": "position", "description": "`position=\"top\"` aligns the dialog with the top of the page", "type": { "text": "'top'" }, "fieldName": "position" }, { "name": "open", "type": { "text": "boolean" }, "default": "false", "fieldName": "open" }, { "name": "trigger", "description": "Optional ID of the trigger element", "type": { "text": "string" }, "fieldName": "trigger" } ], "events": [ { "name": "open", "description": "Fires when a user clicks on the trigger or manually opens a modal.", "type": { "text": "ModalOpenEvent" } }, { "name": "close", "description": "Fires when either a user clicks on either the close button or the overlay or manually closes a modal.", "type": { "text": "ModalCloseEvent" } } ], "slots": [ { "name": "header", "summary": "Heading tag", "description": "The header is an optional slot that appears at the top of the modal window.\nIt should be a heading tag (h2-h6)." }, { "name": "description" }, { "name": "", "summary": "Modal dialog content", "description": "The default slot can contain any type of content. When the header is not present,\nthis unnamed slot appear at the top of the modal window (to the left of the close\nbutton). Otherwise it will appear beneath the header." }, { "name": "footer", "summary": "Optional footer content. Good place to put action buttons." } ], "cssParts": [ { "name": "overlay", "summary": "The modal overlay which lies under the dialog and above the page body" }, { "name": "dialog", "summary": "The dialog element" }, { "name": "content", "summary": "The container for the dialog content" }, { "name": "header", "summary": "The container for the optional dialog header" }, { "name": "description", "summary": "The container for the optional dialog description in the header" }, { "name": "footer", "summary": "Actions footer container" }, { "name": "close-button", "summary": "The modal's close button" } ], "cssProperties": [ { "name": "--pf-global--spacer--sm", "default": "0.5rem" }, { "name": "--pf-c-modal-box--ZIndex", "description": "Z-index for modal box", "default": "var(--pf-global--ZIndex--xl,\n 500)" }, { "name": "--pf-global--ZIndex--xl", "default": "500" }, { "name": "--pf-c-backdrop--BackgroundColor", "default": "var(--pf-global--BackgroundColor--dark-transparent-100,\n rgba(3, 3, 3, 0.62))" }, { "name": "--pf-global--BackgroundColor--dark-transparent-100", "default": "rgba(3, 3, 3, 0.62)" }, { "name": "--pf-c-modal-box--Width", "description": "Width of modal", "default": "calc(100% - var(--pf-global--spacer--xl,2rem))" }, { "name": "--pf-c-modal-box--MaxWidth", "description": "Max width of modal", "default": "calc(100% - var(--pf-global--spacer--xl,2rem))" }, { "name": "--pf-c-modal-box--BoxShadow", "description": "Box shadow for modal", "default": "var(--pf-global--BoxShadow--xl,\n 0 1rem 2rem 0 rgba(3, 3, 3, 0.16),\n 0 0 0.5rem 0 rgba(3, 3, 3, 0.1))" }, { "name": "--pf-global--BoxShadow--xl", "default": "0 1rem 2rem 0 rgba(3, 3, 3, 0.16), 0 0 0.5rem 0 rgba(3, 3, 3, 0.1)" }, { "name": "--pf-c-modal-box--m-sm--sm--MaxWidth", "default": "35rem" }, { "name": "--pf-c-modal-box--m-md--Width", "default": "52.5rem" }, { "name": "--pf-c-modal-box--m-lg--lg--MaxWidth", "default": "70rem" }, { "name": "--pf-c-modal-box--MaxHeight", "description": "Max height of modal", "default": "calc(100vh - var(--pf-global--spacer--2xl,\n 3rem))" }, { "name": "--pf-global--spacer--2xl", "default": "3rem" }, { "name": "--pf-c-modal-box--BackgroundColor", "description": "Background color for modal", "default": "var(--pf-global--BackgroundColor--100,\n var(--pf-global--BackgroundColor--100,\n #fff))" }, { "name": "--pf-global--BackgroundColor--100", "default": "#fff" }, { "name": "--pf-c-modal-box__title--FontSize", "description": "Font size for modal title", "default": "var(--pf-global--FontSize--2xl,\n 1.5rem)" }, { "name": "--pf-global--FontSize--2xl", "default": "1.5rem" }, { "name": "--pf-global--FontWeight--normal", "default": "400" }, { "name": "--pf-c-modal-box__title--FontFamily", "description": "Font family for modal title", "default": "var(--pf-global--FontFamily--heading--sans-serif,\n var(--pf-global--FontFamily--redhat-updated--heading--sans-serif,\n \"RedHatDisplayUpdated\", \"Overpass\", overpass, helvetica, arial, sans-serif))" }, { "name": "--pf-global--FontFamily--heading--sans-serif", "default": "var(--pf-global--FontFamily--redhat-updated--heading--sans-serif,\n \"RedHatDisplayUpdated\", \"Overpass\", overpass, helvetica, arial, sans-serif)" }, { "name": "--pf-global--FontFamily--redhat-updated--heading--sans-serif", "default": "\"RedHatDisplayUpdated\", \"Overpass\", overpass, helvetica, arial, sans-serif" }, { "name": "--pf-c-button--PaddingTop", "default": "var(--pf-global--spacer--form-element, 0.375rem)" }, { "name": "--pf-global--spacer--form-element", "default": "0.375rem" }, { "name": "--pf-c-button--PaddingRight", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-global--spacer--lg", "default": "1.5rem" }, { "name": "--pf-c-button--m-plain--Color", "default": "var(--pf-global--Color--200,\n #6a6e73)" }, { "name": "--pf-global--Color--200", "default": "#6a6e73" }, { "name": "--pf-c-button--FontSize", "default": "var(--pf-global--FontSize--md,\n 1rem)" }, { "name": "--pf-global--FontSize--md", "default": "1rem" }, { "name": "--pf-c-button--m-plain--focus--Color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-global--Color--100", "default": "#151515" }, { "name": "--pf-c-modal-box--m-align-top--MarginTop", "default": "var(--pf-c-modal-box--m-align-top--spacer,\n 2rem)" }, { "name": "--pf-global--spacer--md", "default": "1rem" }, { "name": "--pf-c-modal-box--m-align-top--MaxWidth", "default": "calc(100% - min(\n var(--pf-c-modal-box--m-align-top--spacer, 2rem) * 2,\n var(--pf-global--spacer--xl, 2rem)))" }, { "name": "--pf-c-modal-box--m-align-top--spacer", "default": "2rem" }, { "name": "--pf-c-modal-box--m-align-top--MaxHeight", "default": "calc(100% - var(--_height-offset) - var(--_spacer-align-top))" }, { "name": "--pf-global--spacer--xl", "default": "0.5rem" } ], "demos": [ { "url": "https://patternflyelements.org/components/modal/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-modal/demo/index.html" } }, { "url": "https://patternflyelements.org/components/modal/demo/custom-header-footer/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-modal/demo/custom-header-footer.html" } }, { "url": "https://patternflyelements.org/components/modal/demo/custom-icon/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-modal/demo/custom-icon.html" } }, { "url": "https://patternflyelements.org/components/modal/demo/description/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-modal/demo/description.html" } }, { "url": "https://patternflyelements.org/components/modal/demo/no-header/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-modal/demo/no-header.html" } }, { "url": "https://patternflyelements.org/components/modal/demo/overflowing-content/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-modal/demo/overflowing-content.html" } }, { "url": "https://patternflyelements.org/components/modal/demo/styling/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-modal/demo/styling.html" } }, { "url": "https://patternflyelements.org/components/modal/demo/top-aligned/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-modal/demo/top-aligned.html" } }, { "url": "https://patternflyelements.org/components/modal/demo/trigger-attribute/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-modal/demo/trigger-attribute.html" } }, { "url": "https://patternflyelements.org/components/modal/demo/variants/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-modal/demo/variants.html" } }, { "url": "https://patternflyelements.org/components/modal/demo/warning-alert/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-modal/demo/warning-alert.html" } } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "ModalCancelEvent", "declaration": { "name": "ModalCancelEvent", "module": "pf-modal/pf-modal.js" } }, { "kind": "js", "name": "ModalCloseEvent", "declaration": { "name": "ModalCloseEvent", "module": "pf-modal/pf-modal.js" } }, { "kind": "js", "name": "ModalOpenEvent", "declaration": { "name": "ModalOpenEvent", "module": "pf-modal/pf-modal.js" } }, { "kind": "custom-element-definition", "name": "pf-modal", "declaration": { "name": "PfModal", "module": "pf-modal/pf-modal.js" } }, { "kind": "js", "name": "PfModal", "declaration": { "name": "PfModal", "module": "pf-modal/pf-modal.js" } } ] }, { "kind": "javascript-module", "path": "pf-panel/pf-panel.js", "declarations": [ { "name": "PfPanel", "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.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "scrollable", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "scrollable", "reflects": true }, { "name": "variant", "type": { "text": "'raised' | 'bordered'" }, "kind": "field", "attribute": "variant", "reflects": true } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-panel/pf-panel.ts#L17" }, "kind": "class", "tagName": "pf-panel", "attributes": [ { "name": "scrollable", "type": { "text": "boolean" }, "default": "false", "fieldName": "scrollable" }, { "name": "variant", "type": { "text": "'raised' | 'bordered'" }, "fieldName": "variant" } ], "slots": [ { "name": "header", "description": "Place header content here" }, { "name": "" }, { "name": "footer", "description": "Place footer content here" } ], "cssProperties": [ { "name": "--pf-global--BackgroundColor--100", "default": "#fff" }, { "name": "--pf-c-panel--before--BorderWidth", "description": "Border width of panel before element", "default": "0" }, { "name": "--pf-c-panel--ZIndex", "description": "Z-index of panel", "default": "auto" }, { "name": "--pf-c-panel--Width", "description": "Width of panel", "default": "auto" }, { "name": "--pf-c-panel--MinWidth", "description": "Minimum width of panel", "default": "auto" }, { "name": "--pf-c-panel--MaxWidth", "description": "Maximum width of panel", "default": "none" }, { "name": "--pf-c-panel--BackgroundColor", "description": "Background color of panel", "default": "var(--pf-global--BackgroundColor--100, #fff)" }, { "name": "--pf-c-panel--m-bordered--before--BorderWidth", "description": "Border width of bordered panel before element", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-c-panel--before--BorderColor", "description": "Border color of panel before element", "default": "var(--pf-global--BorderColor--100, #d2d2d2)" }, { "name": "--pf-c-panel--BoxShadow", "description": "Box shadow of panel", "default": "var(--pf-c-panel--m-raised--BoxShadow,\n 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)))" }, { "name": "--pf-c-panel--m-raised--BoxShadow", "description": "Box shadow of raised panel", "default": "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))" }, { "name": "--pf-global--BoxShadow--md", "default": "0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)" }, { "name": "--pf-c-panel--m-raised--ZIndex", "description": "Z-index of raised panel", "default": "var(--pf-global--ZIndex--sm, 200)" }, { "name": "--pf-global--ZIndex--sm", "default": "200" }, { "name": "--pf-c-panel--m-scrollable__main--MaxHeight", "description": "Maximum height of scrollable panel main", "default": "18.75rem" }, { "name": "--pf-c-panel--m-scrollable__main--Overflow", "description": "Overflow of scrollable panel main", "default": "auto" }, { "name": "--pf-c-panel--m-scrollable__footer--BoxShadow", "description": "Box shadow of scrollable panel footer", "default": "0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16)" }, { "name": "--pf-c-panel__main--MaxHeight", "description": "Maximum height of panel main", "default": "var(--pf-c-panel--m-scrollable__main--MaxHeight)" }, { "name": "--pf-c-panel__main--Overflow", "description": "Overflow of panel main", "default": "visible" }, { "name": "--pf-c-panel__main-body--PaddingTop", "description": "Top padding of panel main body", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-panel__main-body--PaddingRight", "description": "Right padding of panel main body", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-panel__main-body--PaddingBottom", "description": "Bottom padding of panel main body", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-panel__main-body--PaddingLeft", "description": "Left padding of panel main body", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-global--spacer--md", "default": "1rem" }, { "name": "--pf-c-panel__header--PaddingTop", "description": "Top padding of panel header", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-panel__header--PaddingRight", "description": "Right padding of panel header", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-panel__header--PaddingBottom", "description": "Bottom padding of panel header", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-panel__header--PaddingLeft", "description": "Left padding of panel header", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-panel__footer--PaddingTop", "description": "Top padding of panel footer", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-panel__footer--PaddingRight", "description": "Right padding of panel footer", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-panel__footer--PaddingBottom", "description": "Bottom padding of panel footer", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-panel__footer--PaddingLeft", "description": "Left padding of panel footer", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-panel__footer--BoxShadow", "description": "Box shadow of panel footer", "default": "none" }, { "name": "--pf-global--BorderWidth--sm", "default": "1px" }, { "name": "--pf-c-divider--BackgroundColor" }, { "name": "--pf-global--BorderColor--100", "default": "#d2d2d2" }, { "name": "--pf-c-divider--BorderColor--base" }, { "name": "--pf-c-divider--Height" }, { "name": "--pf-c-divider--BorderWidth--base" }, { "name": "--pf-c-divider--m-horizontal--Display" }, { "name": "--pf-c-divider--m-horizontal--FlexDirection" }, { "name": "--pf-c-divider--m-horizontal--after--Width" }, { "name": "--pf-c-divider--m-horizontal--after--Height" }, { "name": "--pf-c-divider--Display" }, { "name": "--pf-c-divider--FlexDirection" }, { "name": "--pf-c-divider--after--Width" }, { "name": "--pf-c-divider--after--Height" }, { "name": "--pf-c-divider--after--BackgroundColor" }, { "name": "--pf-c-divider--after--FlexBasis" }, { "name": "--pf-c-divider--after--Inset" } ], "demos": [ { "url": "https://patternflyelements.org/components/panel/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-panel/demo/index.html" } }, { "url": "https://patternflyelements.org/components/panel/demo/bordered/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-panel/demo/bordered.html" } }, { "url": "https://patternflyelements.org/components/panel/demo/footer/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-panel/demo/footer.html" } }, { "url": "https://patternflyelements.org/components/panel/demo/header-and-footer/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-panel/demo/header-and-footer.html" } }, { "url": "https://patternflyelements.org/components/panel/demo/header/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-panel/demo/header.html" } }, { "url": "https://patternflyelements.org/components/panel/demo/raised/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-panel/demo/raised.html" } }, { "url": "https://patternflyelements.org/components/panel/demo/scrollable-with-header-and-footer/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-panel/demo/scrollable-with-header-and-footer.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-panel", "declaration": { "name": "PfPanel", "module": "pf-panel/pf-panel.js" } }, { "kind": "js", "name": "PfPanel", "declaration": { "name": "PfPanel", "module": "pf-panel/pf-panel.js" } } ] }, { "kind": "javascript-module", "path": "pf-popover/pf-popover.js", "declarations": [ { "name": "PopoverHideEvent", "superclass": { "name": "ComposedEvent" }, "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-popover/pf-popover.ts#L24" }, "kind": "class" }, { "name": "PopoverHiddenEvent", "superclass": { "name": "ComposedEvent" }, "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-popover/pf-popover.ts#L30" }, "kind": "class" }, { "name": "PopoverShowEvent", "superclass": { "name": "ComposedEvent" }, "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-popover/pf-popover.ts#L36" }, "kind": "class" }, { "name": "PopoverShownEvent", "superclass": { "name": "ComposedEvent" }, "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-popover/pf-popover.ts#L42" }, "kind": "class" }, { "name": "PfPopover", "summary": "Toggle the visibility of helpful or contextual information.", "description": "A **Popover** displays content in a non-modal dialog and adds contextual information or provides resources via text and links.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "instances", "default": "new Set\u003cPfPopover\u003e()", "kind": "field", "static": true, "privacy": "private" }, { "name": "alertIcons", "default": "new Map(Object.entries({\\n default: 'bell',\\n info: 'circle-info',\\n success: 'circle-check',\\n warning: 'triangle-exclamation',\\n danger: 'circle-exclamation',\\n } satisfies Record\u003cAlertSeverity, string\u003e) as [AlertSeverity, string][])", "kind": "field", "static": true, "privacy": "private" }, { "name": "position", "description": "Indicates the initial popover position.\nThere are 12 options: `top`, `bottom`, `left`, `right`, `top-start`, `top-end`,\n`bottom-start`, `bottom-end`, `left-start`, `left-end`,`right-start`, `right-end`.\nThe default is `top`.", "type": { "text": "Placement" }, "default": "'top'", "kind": "field", "attribute": "position", "reflects": true }, { "name": "heading", "description": "The content rendered in the popover's heading.", "type": { "text": "string" }, "kind": "field", "attribute": "heading", "reflects": true }, { "name": "body", "description": "The content rendered in the popover's body.", "type": { "text": "string" }, "kind": "field", "attribute": "body", "reflects": true }, { "name": "footer", "description": "The content rendered in the popover's footer.", "type": { "text": "string" }, "kind": "field", "attribute": "footer", "reflects": true }, { "name": "icon", "description": "The icon placed before the popover's heading.", "type": { "text": "string" }, "kind": "field", "attribute": "icon", "reflects": true }, { "name": "label", "description": "The accessible label for the popover. This is required if the no heading is set.", "type": { "text": "string" }, "kind": "field", "attribute": "label", "reflects": true }, { "name": "distance", "description": "The distance to set between the popover and its trigger element.", "type": { "text": "number" }, "kind": "field", "attribute": "distance", "reflects": true }, { "name": "flipBehavior", "description": "The flip order when flip is enabled and the initial position is not possible.\nThere are 12 options: `top`, `bottom`, `left`, `right`, `top-start`, `top-end`,\n`bottom-start`, `bottom-end`, `left-start`, `left-end`,`right-start`, `right-end`.\nThe default is [oppositePlacement], where only the opposite placement is tried.", "type": { "text": "Placement[]" }, "kind": "field", "attribute": "flip-behavior" }, { "name": "noFlip", "description": "Disable the flip behavior. The default is `false`.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "no-flip", "reflects": true }, { "name": "headingLevel", "description": "The heading level to use for the popover's header. The default is `h6`.", "type": { "text": "HeadingLevel" }, "kind": "field", "attribute": "heading-level", "reflects": true }, { "name": "iconSet", "description": "Indicates which icon set to use for the header's icon.\nThe default is `fas` (Font Awesome Free Solid).", "type": { "text": "string" }, "kind": "field", "attribute": "icon-set", "reflects": true }, { "name": "hideClose", "description": "Hide the close button. The default is `false`.", "type": { "text": "boolean" }, "kind": "field", "attribute": "hide-close", "reflects": true }, { "name": "alertSeverity", "description": "Indicates the severity variant to use for the alert popover.\nThere are five options: `default`, `info`, `warning`, `success`, and `danger`.", "type": { "text": "AlertSeverity" }, "kind": "field", "attribute": "alert-severity", "reflects": true }, { "name": "accessibleCloseLabel", "description": "The accessible label for the popover's close button. The default is `Close popover`.", "type": { "text": "string" }, "kind": "field", "attribute": "accessible-close-label", "reflects": true }, { "name": "alertSeverityText", "description": "The text announced by the screen reader to indicate the popover's severity.\nThe default is `${alertSeverity} alert:`.", "type": { "text": "string" }, "kind": "field", "attribute": "alert-severity-text", "reflects": true }, { "name": "noOutsideClick", "description": "Don't hide the popover when clicking ouside of it.", "type": { "text": "boolean" }, "kind": "field", "attribute": "no-outside-click", "reflects": true }, { "name": "trigger", "description": "The ID of the element to attach the popover to.", "type": { "text": "string" }, "kind": "field", "attribute": "trigger", "reflects": true }, { "return": { "type": { "text": "Promise\u003cvoid\u003e" } }, "name": "toggle", "description": "Toggle the popover", "kind": "method" }, { "return": { "type": { "text": "Promise\u003cvoid\u003e" } }, "name": "show", "description": "Opens the popover", "kind": "method" }, { "return": { "type": { "text": "Promise\u003cvoid\u003e" } }, "name": "hide", "description": "Closes the popover", "kind": "method" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-popover/pf-popover.ts#L54" }, "kind": "class", "tagName": "pf-popover", "attributes": [ { "name": "position", "description": "Indicates the initial popover position.\nThere are 12 options: `top`, `bottom`, `left`, `right`, `top-start`, `top-end`,\n`bottom-start`, `bottom-end`, `left-start`, `left-end`,`right-start`, `right-end`.\nThe default is `top`.", "type": { "text": "Placement" }, "default": "'top'", "fieldName": "position" }, { "name": "heading", "description": "The content rendered in the popover's heading.", "type": { "text": "string" }, "fieldName": "heading" }, { "name": "body", "description": "The content rendered in the popover's body.", "type": { "text": "string" }, "fieldName": "body" }, { "name": "footer", "description": "The content rendered in the popover's footer.", "type": { "text": "string" }, "fieldName": "footer" }, { "name": "icon", "description": "The icon placed before the popover's heading.", "type": { "text": "string" }, "fieldName": "icon" }, { "name": "label", "description": "The accessible label for the popover. This is required if the no heading is set.", "type": { "text": "string" }, "fieldName": "label" }, { "name": "distance", "description": "The distance to set between the popover and its trigger element.", "type": { "text": "number" }, "fieldName": "distance" }, { "name": "flip-behavior", "description": "The flip order when flip is enabled and the initial position is not possible.\nThere are 12 options: `top`, `bottom`, `left`, `right`, `top-start`, `top-end`,\n`bottom-start`, `bottom-end`, `left-start`, `left-end`,`right-start`, `right-end`.\nThe default is [oppositePlacement], where only the opposite placement is tried.", "type": { "text": "Placement[]" }, "fieldName": "flipBehavior" }, { "name": "no-flip", "description": "Disable the flip behavior. The default is `false`.", "type": { "text": "boolean" }, "default": "false", "fieldName": "noFlip" }, { "name": "heading-level", "description": "The heading level to use for the popover's header. The default is `h6`.", "type": { "text": "HeadingLevel" }, "fieldName": "headingLevel" }, { "name": "icon-set", "description": "Indicates which icon set to use for the header's icon.\nThe default is `fas` (Font Awesome Free Solid).", "type": { "text": "string" }, "fieldName": "iconSet" }, { "name": "hide-close", "description": "Hide the close button. The default is `false`.", "type": { "text": "boolean" }, "fieldName": "hideClose" }, { "name": "alert-severity", "description": "Indicates the severity variant to use for the alert popover.\nThere are five options: `default`, `info`, `warning`, `success`, and `danger`.", "type": { "text": "AlertSeverity" }, "fieldName": "alertSeverity" }, { "name": "accessible-close-label", "description": "The accessible label for the popover's close button. The default is `Close popover`.", "type": { "text": "string" }, "fieldName": "accessibleCloseLabel" }, { "name": "alert-severity-text", "description": "The text announced by the screen reader to indicate the popover's severity.\nThe default is `${alertSeverity} alert:`.", "type": { "text": "string" }, "fieldName": "alertSeverityText" }, { "name": "no-outside-click", "description": "Don't hide the popover when clicking ouside of it.", "type": { "text": "boolean" }, "fieldName": "noOutsideClick" }, { "name": "trigger", "description": "The ID of the element to attach the popover to.", "type": { "text": "string" }, "fieldName": "trigger" } ], "slots": [ { "name": "heading", "summary": "Heading content.", "description": "This slot projects content into the header of the popover.\nTypically this would be a heading (e.g. h2, h3, etc.) element.\n" }, { "name": "", "description": "The default slot holds invoking element.\nTypically this would be an icon, button, or other small sized element." }, { "name": "icon", "summary": "The icon in the header of the popover, before the heading." }, { "name": "body", "summary": "body of the popover, which is hidden until the popover is activated." }, { "name": "footer", "summary": "optional footer content of the popover." } ], "cssParts": [ { "name": "heading", "summary": "The heading element" }, { "name": "container", "description": "The component wrapper" }, { "name": "content", "description": "The content wrapper" }, { "name": "close-button", "description": "The close button" }, { "name": "header", "description": "The header element; only visible if both an icon annd heading are provided." }, { "name": "icon", "summary": "Container for the header icon" }, { "name": "body", "summary": "The container for the body content" }, { "name": "footer", "summary": "The container for the footer content" } ], "cssProperties": [ { "name": "--pf-c-popover__title-text--Color", "description": "Heading font color", "default": "inherit" }, { "name": "--pf-c-popover__title-icon--Color", "description": "Heading icon font color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-popover--animation-speed", "default": "300ms" }, { "name": "--pf-popover--z-index", "default": "9999" }, { "name": "--pf-c-popover__arrow--BackgroundColor", "description": "Arrow background color", "default": "var(--pf-global--BackgroundColor--100, #fff)" }, { "name": "--pf-c-popover__arrow--BoxShadow", "description": "Arrow box shadow", "default": "var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08))" }, { "name": "--pf-c-popover__arrow--Height", "description": "Height of the arrow", "default": "var(--pf-global--arrow--width-lg, 1.5625rem)" }, { "name": "--pf-c-popover__arrow--Width", "description": "Width of the arrow\n\nWidth of the arrow", "default": "var(--pf-global--arrow--width-lg, 1.5625rem)" }, { "name": "--pf-global--arrow--width-lg", "default": "1.5625rem" }, { "name": "--pf-c-popover--BoxShadow", "description": "Popover box shadow", "default": "var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08))" }, { "name": "--pf-global--BoxShadow--lg", "default": "0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)" }, { "name": "--pf-c-popover__content--PaddingBottom", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-popover--line-height", "description": "Popover line height", "default": "1.5" }, { "name": "--pf-c-popover__content--FontSize", "description": "Popover font-size", "default": "var(--pf-global--FontSize--sm, 0.875rem)" }, { "name": "--pf-global--FontSize--sm", "default": "0.875rem" }, { "name": "--pf-c-popover__content--Color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-global--Color--100", "default": "#151515" }, { "name": "--pf-c-popover__content--BackgroundColor", "description": "Popover background color", "default": "var(--pf-global--BackgroundColor--100, #fff)" }, { "name": "--pf-global--BackgroundColor--100", "default": "#fff" }, { "name": "--pf-c-popover--MaxWidth", "description": "Popover max-width", "default": "calc(var(--pf-c-popover__content--PaddingLeft, 1rem) + var(--pf-c-popover__content--PaddingRight, 1rem) + 18.75rem)" }, { "name": "--pf-c-popover--MinWidth", "description": "Popover min-width", "default": "calc(var(--pf-c-popover__content--PaddingLeft, 1rem) + var(--pf-c-popover__content--PaddingRight, 1rem) + 18.75rem)" }, { "name": "--pf-c-popover__content--PaddingLeft", "default": "1rem" }, { "name": "--pf-c-popover--c-button--Right", "description": "Close button right position", "default": "calc(var(--pf-c-popover__content--PaddingRight, 1rem) - var(--pf-global--spacer--md, 1rem))" }, { "name": "--pf-c-popover__content--PaddingRight", "default": "1rem" }, { "name": "--pf-c-popover--c-button--Top", "description": "Close button top position", "default": "calc(var(--pf-c-popover__content--PaddingTop, 1rem) - var(--pf-global--spacer--form-element, 0.375rem))" }, { "name": "--pf-c-popover__content--PaddingTop", "default": "1rem" }, { "name": "--pf-global--spacer--form-element", "default": "0.375rem" }, { "name": "--pf-c-popover--c-button--sibling--PaddingRight", "description": "Padding between close button and its immediate sibling", "default": "var(--pf-global--spacer--2xl, 3rem)" }, { "name": "--pf-global--spacer--2xl", "default": "3rem" }, { "name": "--pf-c-popover__title-icon--MarginRight", "description": "Heading icon right margin", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-global--FontWeight--normal", "default": "400" }, { "name": "--pf-c-popover__title--FontSize", "description": "Header font-size", "default": "var(--pf-global--FontSize--md, var(--pf-global--icon--FontSize--md, 1em))" }, { "name": "--pf-global--FontSize--md", "default": "var(--pf-global--icon--FontSize--md, 1em)" }, { "name": "--pf-global--icon--FontSize--md", "default": "1em" }, { "name": "--pf-c-popover__title--MarginBottom", "description": "Header bottom margin", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-global--spacer--sm", "default": "0.5rem" }, { "name": "--pf-c-popover__title--LineHeight", "description": "Header line height", "default": "var(--pf-global--LineHeight--md, 1.5)" }, { "name": "--pf-global--LineHeight--md", "default": "1.5" }, { "name": "--pf-c-popover__title--FontFamily", "description": "Header font-family", "default": "var(\n --pf-global--FontFamily--heading--sans-serif,\n 'RedHatDisplay',\n 'Overpass',\n overpass,\n helvetica,\n arial,\n sans-serif\n )" }, { "name": "--pf-global--FontFamily--heading--sans-serif", "default": "'RedHatDisplay', 'Overpass', overpass, helvetica, arial, sans-serif" }, { "name": "--pf-c-popover__footer--MarginTop", "description": "Footer top margin", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-global--spacer--md", "default": "1rem" }, { "name": "--pf-c-popover--m-default__title-text--Color", "description": "Default alert heading color", "default": "var(--pf-global--default-color--300, #003737)" }, { "name": "--pf-global--default-color--300", "default": "#003737" }, { "name": "--pf-c-popover--m-default__title-icon--Color", "description": "Default alert icon color", "default": "var(--pf-global--default-color--200, #009596)" }, { "name": "--pf-global--default-color--200", "default": "#009596" }, { "name": "--pf-c-popover--m-info__title-text--Color", "description": "Info alert heading color", "default": "var(--pf-global--info-color--200, #002952)" }, { "name": "--pf-global--info-color--200", "default": "#002952" }, { "name": "--pf-c-popover--m-info__title-icon--Color", "description": "Info alert icon color", "default": "var(--pf-global--info-color--100, #2b9af3)" }, { "name": "--pf-global--info-color--100", "default": "#2b9af3" }, { "name": "--pf-c-popover--m-warning__title-icon--Color", "description": "Warning alert icon color", "default": "var(--pf-global--warning-color--100, #f0ab00)" }, { "name": "--pf-global--warning-color--100", "default": "#f0ab00" }, { "name": "--pf-c-popover--m-warning__title-text--Color", "description": "Warning alert heading color", "default": "var(--pf-global--warning-color--200, #795600)" }, { "name": "--pf-global--warning-color--200", "default": "#795600" }, { "name": "--pf-c-popover--m-success__title-icon--Color", "description": "Success alert icon color", "default": "var(--pf-global--success-color--100, #3e8635)" }, { "name": "--pf-global--success-color--100", "default": "#3e8635" }, { "name": "--pf-c-popover--m-success__title-text--Color", "description": "Success alert heading color", "default": "var(--pf-global--success-color--200, #1e4f18)" }, { "name": "--pf-global--success-color--200", "default": "#1e4f18" }, { "name": "--pf-c-popover--m-danger__title-icon--Color", "description": "Danger alert icon color", "default": "var(--pf-global--danger-color--100, #c9190b)" }, { "name": "--pf-global--danger-color--100", "default": "#c9190b" }, { "name": "--pf-c-popover--m-danger__title-text--Color", "description": "Danger alert heading color", "default": "var(--pf-global--danger-color--200, #a30000)" }, { "name": "--pf-global--danger-color--200", "default": "#a30000" } ], "demos": [ { "url": "https://patternflyelements.org/components/popover/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-popover/demo/index.html" } }, { "url": "https://patternflyelements.org/components/popover/demo/alert/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-popover/demo/alert.html" } }, { "url": "https://patternflyelements.org/components/popover/demo/content/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-popover/demo/content.html" } }, { "url": "https://patternflyelements.org/components/popover/demo/edge-of-viewport/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-popover/demo/edge-of-viewport.html" } }, { "url": "https://patternflyelements.org/components/popover/demo/flip/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-popover/demo/flip.html" } }, { "url": "https://patternflyelements.org/components/popover/demo/icons/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-popover/demo/icons.html" } } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "PopoverHideEvent", "declaration": { "name": "PopoverHideEvent", "module": "pf-popover/pf-popover.js" } }, { "kind": "js", "name": "PopoverHiddenEvent", "declaration": { "name": "PopoverHiddenEvent", "module": "pf-popover/pf-popover.js" } }, { "kind": "js", "name": "PopoverShowEvent", "declaration": { "name": "PopoverShowEvent", "module": "pf-popover/pf-popover.js" } }, { "kind": "js", "name": "PopoverShownEvent", "declaration": { "name": "PopoverShownEvent", "module": "pf-popover/pf-popover.js" } }, { "kind": "custom-element-definition", "name": "pf-popover", "declaration": { "name": "PfPopover", "module": "pf-popover/pf-popover.js" } }, { "kind": "js", "name": "PfPopover", "declaration": { "name": "PfPopover", "module": "pf-popover/pf-popover.js" } } ] }, { "kind": "javascript-module", "path": "pf-progress-stepper/pf-progress-step.js", "declarations": [ { "name": "PfProgressStep", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "parentTagName", "type": { "text": "string" }, "default": "'pf-progress-stepper'", "kind": "field", "static": true, "privacy": "protected" }, { "name": "description", "description": "Optional extended description of the step", "type": { "text": "string" }, "kind": "field", "attribute": "description" }, { "name": "icon", "description": "Step Icon", "type": { "text": "string" }, "kind": "field", "attribute": "icon" }, { "name": "iconSet", "description": "Step icon set", "type": { "text": "string" }, "kind": "field", "attribute": "icon-set" }, { "name": "variant", "description": "Describes the state of the current item", "type": { "text": "'pending' | 'info' | 'success' | 'warning' | 'danger'" }, "kind": "field", "attribute": "variant", "reflects": true }, { "name": "current", "description": "Indicates if this item is the current active item.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "current", "reflects": true } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-progress-stepper/pf-progress-step.ts#L31" }, "kind": "class", "tagName": "pf-progress-step", "attributes": [ { "name": "description", "description": "Optional extended description of the step", "type": { "text": "string" }, "fieldName": "description" }, { "name": "icon", "description": "Step Icon", "type": { "text": "string" }, "fieldName": "icon" }, { "name": "icon-set", "description": "Step icon set", "type": { "text": "string" }, "fieldName": "iconSet" }, { "name": "variant", "description": "Describes the state of the current item", "type": { "text": "'pending' | 'info' | 'success' | 'warning' | 'danger'" }, "fieldName": "variant" }, { "name": "current", "description": "Indicates if this item is the current active item.", "type": { "text": "boolean" }, "default": "false", "fieldName": "current" } ], "slots": [ { "name": "icon", "description": "icon\nOverrides the icon property" }, { "name": "", "description": "Short description of the current step." }, { "name": "description", "description": "description\nLonger description of the current step." } ], "cssProperties": [ { "name": "--pf-c-progress-stepper__step-icon--ZIndex" }, { "name": "--pf-c-progress-stepper__step-icon--Width" }, { "name": "--pf-c-progress-stepper__step-icon--Height" }, { "name": "--pf-c-progress-stepper__step-icon--BackgroundColor" }, { "name": "--pf-c-progress-stepper__step-icon--BorderWidth" }, { "name": "--pf-c-progress-stepper__step-icon--BorderColor" }, { "name": "--pf-c-progress-stepper__step-icon--FontSize" }, { "name": "--pf-c-progress-stepper__step-main--Position", "default": "initial" }, { "name": "--pf-c-progress-stepper__step-main--MarginRight" }, { "name": "--pf-c-progress-stepper__step-main--MarginLeft" }, { "name": "--pf-c-progress-stepper--step-main--TextAlign", "default": "auto" }, { "name": "--pf-c-progress-stepper--m-compact__step-main--MarginBottom" }, { "name": "--pf-c-progress-stepper__step-title--FontSize" }, { "name": "--pf-c-progress-stepper__step-title--Color" }, { "name": "--pf-c-progress-stepper__step-title--TextAlign" }, { "name": "--pf-c-progress-stepper__step-description--MarginTop" }, { "name": "--pf-c-progress-stepper__step-description--FontSize" }, { "name": "--pf-c-progress-stepper__step-description--Color" }, { "name": "--pf-c-progress-stepper__step-description--TextAlign" }, { "name": "--pf-c-progress-stepper__step-connector--JustifyContent" }, { "name": "--pf-c-progress-stepper--m-compact__step-connector--MinWidth" }, { "name": "--pf-c-progress-stepper--m-compact__step-connector--GridRow" }, { "name": "--pf-c-progress-stepper--m-compact__step-connector--PaddingBottom" }, { "name": "--pf-c-progress-stepper__step-main--before--Content" }, { "name": "--pf-c-progress-stepper__step-main--MarginTop" }, { "name": "--pf-c-progress-stepper__step-main--MarginBottom" }, { "name": "--pf-c-progress-stepper__step-connector--before--Top" }, { "name": "--pf-c-progress-stepper__step-connector--before--Left" }, { "name": "--pf-c-progress-stepper__step-connector--before--Width" }, { "name": "--pf-c-progress-stepper__step-connector--before--Height" }, { "name": "--pf-c-progress-stepper__step-connector--before--Content" }, { "name": "--pf-c-progress-stepper__step-connector--before--BorderRightWidth" }, { "name": "--pf-c-progress-stepper__step-connector--before--BorderRightColor" }, { "name": "--pf-c-progress-stepper__step-connector--before--BorderBottomWidth" }, { "name": "--pf-c-progress-stepper__step-connector--before--BorderBottomColor" }, { "name": "--pf-c-progress-stepper__step-connector--before--Transform" }, { "name": "--pf-c-progress-stepper__step-title--FontWeight", "default": "var(--pf-c-progress-stepper__step--m-current__step-title--FontWeight)" }, { "name": "--pf-c-progress-stepper__step--m-current__step-title--FontWeight" }, { "name": "--pf-c-progress-stepper__step--m-current__step-title--Color" }, { "name": "--pf-global--success-color--100", "default": "#3e8635" }, { "name": "--pf-global--info-color--100", "default": "#2b9af3" }, { "name": "--pf-global--warning-color--100", "default": "#f0ab00" }, { "name": "--pf-c-progress-stepper__step-icon--Color", "default": "var(--pf-global--danger-color--100, #c9190b)" }, { "name": "--pf-global--danger-color--100", "default": "#c9190b" }, { "name": "--pf-c-progress-stepper__step--m-danger__step-title--Color" }, { "name": "--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color" }, { "name": "--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color" }, { "name": "--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor" }, { "name": "--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor" }, { "name": "--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecorationColor" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-progress-step", "declaration": { "name": "PfProgressStep", "module": "pf-progress-stepper/pf-progress-step.js" } }, { "kind": "js", "name": "PfProgressStep", "declaration": { "name": "PfProgressStep", "module": "pf-progress-stepper/pf-progress-step.js" } } ] }, { "kind": "javascript-module", "path": "pf-progress-stepper/pf-progress-stepper.js", "declarations": [ { "name": "PfProgressStepper", "description": "A **progress stepper** displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "childTagName", "type": { "text": "string" }, "default": "'pf-progress-step'", "kind": "field", "static": true, "privacy": "protected" }, { "name": "vertical", "description": "Whether to use the vertical layout", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "vertical", "reflects": true }, { "name": "center", "description": "Whether to use the center alignment", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "center", "reflects": true }, { "name": "compact", "description": "Whether to use the compact layout", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "compact", "reflects": true }, { "name": "value", "type": { "text": "number" }, "readonly": true, "kind": "field" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-progress-stepper/pf-progress-stepper.ts#L17" }, "kind": "class", "tagName": "pf-progress-stepper", "attributes": [ { "name": "vertical", "description": "Whether to use the vertical layout", "type": { "text": "boolean" }, "default": "false", "fieldName": "vertical" }, { "name": "center", "description": "Whether to use the center alignment", "type": { "text": "boolean" }, "default": "false", "fieldName": "center" }, { "name": "compact", "description": "Whether to use the compact layout", "type": { "text": "boolean" }, "default": "false", "fieldName": "compact" } ], "slots": [ { "name": "" } ], "cssProperties": [ { "name": "--pf-global--spacer--xl", "default": "2rem" }, { "name": "--pf-c-progress-stepper--m-compact__step-connector--MinWidth", "description": "Minimum width for compact step connector", "default": "1.75rem" }, { "name": "--pf-global--icon--FontSize--sm", "default": "0.625rem" }, { "name": "--pf-c-progress-stepper__step-icon--ZIndex", "description": "Z-index for step icon", "default": "var(--pf-global--ZIndex--xs, 100)" }, { "name": "--pf-global--ZIndex--xs", "default": "100" }, { "name": "--pf-c-progress-stepper__step-icon--Height", "description": "Height of the step icon", "default": "var(--pf-c-progress-stepper__step-icon--Width)" }, { "name": "--pf-c-progress-stepper__step-icon--Width", "description": "Width of the step icon", "default": "1.75rem" }, { "name": "--pf-c-progress-stepper__step-icon--FontSize", "description": "Font size of the step icon", "default": "var(--pf-global--FontSize--md, 1rem)" }, { "name": "--pf-c-progress-stepper__step-icon--Color", "description": "Color of the step icon", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-progress-stepper__step-icon--BackgroundColor", "description": "Background color of the step icon", "default": "var(--pf-global--BackgroundColor--light-200, #fafafa)" }, { "name": "--pf-global--BackgroundColor--light-200", "default": "#fafafa" }, { "name": "--pf-c-progress-stepper__step-icon--BorderWidth", "description": "Border width of the step icon", "default": "var(--pf-global--BorderWidth--md, 2px)" }, { "name": "--pf-global--BorderWidth--md", "default": "2px" }, { "name": "--pf-c-progress-stepper__step-icon--BorderColor", "description": "Border color of the step icon", "default": "var(--pf-global--BorderColor--100, #d2d2d2)" }, { "name": "--pf-global--BorderColor--100", "default": "#d2d2d2" }, { "name": "--pf-c-progress-stepper__pficon--MarginTop", "description": "Top margin for pficon", "default": "3px" }, { "name": "--pf-c-progress-stepper__fa-exclamation-triangle--MarginTop", "description": "Top margin for exclamation triangle icon", "default": "-5px" }, { "name": "--pf-c-progress-stepper__step-title--Color", "description": "Color of the step title", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-progress-stepper__step-title--TextAlign", "description": "Text alignment of the step title", "default": "left" }, { "name": "--pf-c-progress-stepper__step-title--FontSize", "description": "Font size of the step title", "default": "var(--pf-global--FontSize--md, 1rem)" }, { "name": "--pf-global--FontSize--md", "default": "1rem" }, { "name": "--pf-c-progress-stepper__step-title--FontWeight", "description": "Font weight of the step title", "default": "var(--pf-global--FontWeight--normal, 400)" }, { "name": "--pf-global--FontWeight--normal", "default": "400" }, { "name": "--pf-c-progress-stepper__step--m-current__step-title--FontWeight", "description": "Font weight for current step title", "default": "var(--pf-global--FontWeight--bold, 700)" }, { "name": "--pf-global--FontWeight--bold", "default": "700" }, { "name": "--pf-c-progress-stepper__step--m-current__step-title--Color", "description": "Color for current step title", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-progress-stepper__step--m-pending__step-title--Color", "description": "Color for pending step title", "default": "var(--pf-global--Color--200, #6a6e73)" }, { "name": "--pf-c-progress-stepper__step--m-danger__step-title--Color", "description": "Color for danger step title", "default": "var(--pf-global--danger-color--100, #c9190b)" }, { "name": "--pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor", "description": "Text decoration color for help text step title", "default": "var(--pf-global--BorderColor--200, #8a8d90)" }, { "name": "--pf-global--BorderColor--200", "default": "#8a8d90" }, { "name": "--pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness", "description": "Text decoration thickness for help text step title", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-global--BorderWidth--sm", "default": "1px" }, { "name": "--pf-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset", "description": "Text underline offset for help text step title", "default": "0.25rem" }, { "name": "--pf-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor", "description": "Text decoration color for help text step title on hover", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor", "description": "Text decoration color for help text step title on focus", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-progress-stepper__step-title--m-help-text--hover--Color", "description": "Color for help text step title on hover", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-progress-stepper__step-title--m-help-text--focus--Color", "description": "Color for help text step title on focus", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-global--Color--100", "default": "#151515" }, { "name": "--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color", "description": "Color for danger help text step title on hover", "default": "var(--pf-global--danger-color--200, #a30000)" }, { "name": "--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color", "description": "Color for danger help text step title on focus", "default": "var(--pf-global--danger-color--200, #a30000)" }, { "name": "--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor", "description": "Text decoration color for danger help text step title", "default": "var(--pf-global--danger-color--100, #c9190b)" }, { "name": "--pf-global--danger-color--100", "default": "#c9190b" }, { "name": "--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor", "description": "Text decoration color for danger help text step title on hover", "default": "var(--pf-global--danger-color--200, #a30000)" }, { "name": "--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecoerationColor", "description": "Text decoration color for danger help text step title on focus", "default": "var(--pf-global--danger-color--200, #a30000)" }, { "name": "--pf-global--danger-color--200", "default": "#a30000" }, { "name": "--pf-c-progress-stepper__step-description--MarginTop", "description": "Top margin for step description", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-global--spacer--xs", "default": "0.25rem" }, { "name": "--pf-c-progress-stepper__step-description--FontSize", "description": "Font size of the step description", "default": "var(--pf-global--FontSize--sm, 0.875rem)" }, { "name": "--pf-global--FontSize--sm", "default": "0.875rem" }, { "name": "--pf-c-progress-stepper__step-description--Color", "description": "Color of the step description", "default": "var(--pf-global--Color--200, #6a6e73)" }, { "name": "--pf-global--Color--200", "default": "#6a6e73" }, { "name": "--pf-c-progress-stepper__step-description--TextAlign", "description": "Text alignment of the step description", "default": "left" }, { "name": "--pf-c-progress-stepper__step-connector--before--Top", "description": "Top position for step connector pseudo-element (defaults to vertical)", "default": "var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top)" }, { "name": "--pf-c-progress-stepper--GridTemplateColumns", "description": "Grid template columns (defaults to vertical)", "default": "var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns)" }, { "name": "--pf-c-progress-stepper--GridTemplateRows", "description": "Grid template rows", "default": "auto 1fr" }, { "name": "--pf-c-progress-stepper--m-horizontal--GridAutoFlow", "description": "Grid auto flow for horizontal layout", "default": "column" }, { "name": "--pf-c-progress-stepper--m-horizontal--GridTemplateColumns", "description": "Grid template columns for horizontal layout", "default": "initial" }, { "name": "--pf-c-progress-stepper--m-horizontal__step-connector--before--Top", "description": "Top position for horizontal step connector pseudo-element", "default": "calc(var(--pf-c-progress-stepper__step-icon--Height) / 2)" }, { "name": "--pf-c-progress-stepper--m-horizontal__step-connector--before--Left", "description": "Left position for horizontal step connector pseudo-element", "default": "0" }, { "name": "--pf-c-progress-stepper--m-horizontal__step-connector--before--Width", "description": "Width for horizontal step connector pseudo-element", "default": "100%" }, { "name": "--pf-c-progress-stepper--m-horizontal__step-connector--before--Height", "description": "Height for horizontal step connector pseudo-element", "default": "auto" }, { "name": "--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth", "description": "Right border width for horizontal step connector pseudo-element", "default": "0" }, { "name": "--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor", "description": "Right border color for horizontal step connector pseudo-element", "default": "unset" }, { "name": "--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth", "description": "Bottom border width for horizontal step connector pseudo-element", "default": "var(--pf-global--BorderWidth--md, 2px)" }, { "name": "--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor", "description": "Bottom border color for horizontal step connector pseudo-element", "default": "var(--pf-global--BorderColor--100, #d2d2d2)" }, { "name": "--pf-c-progress-stepper--m-horizontal__step-connector--before--Transform", "description": "Transform for horizontal step connector pseudo-element", "default": "translateY(-50%)" }, { "name": "--pf-c-progress-stepper--m-horizontal__step-main--MarginTop", "description": "Top margin for horizontal step main content", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-progress-stepper--m-horizontal__step-main--MarginRight", "description": "Right margin for horizontal step main content", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-progress-stepper--m-horizontal__step-main--MarginBottom", "description": "Bottom margin for horizontal step main content", "default": "0" }, { "name": "--pf-c-progress-stepper--m-horizontal__step-main--MarginLeft", "description": "Left margin for horizontal step main content", "default": "0" }, { "name": "--pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns", "description": "Grid template columns for horizontal compact layout", "default": "repeat(auto-fill, 1.75rem)" }, { "name": "--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow", "description": "Grid row for horizontal compact step connector", "default": "2" }, { "name": "--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom", "description": "Padding bottom for horizontal compact step connector", "default": "0" }, { "name": "--pf-c-progress-stepper__step-connector--JustifyContent", "description": "Justify content for step connector", "default": "var(--pf-c-progress-stepper--m-center__step-connector--JustifyContent)" }, { "name": "--pf-c-progress-stepper--m-center__step-connector--JustifyContent", "description": "Justify content for centered step connector", "default": "center" }, { "name": "--pf-c-progress-stepper--m-center__step-main--MarginRight", "description": "Right margin for centered step main content", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-progress-stepper--m-center__step-main--MarginLeft", "description": "Left margin for centered step main content", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-progress-stepper--m-center__step-main--TextAlign", "description": "Text alignment for centered step main content", "default": "auto" }, { "name": "--pf-c-progress-stepper--m-center__step-title--TextAlign", "default": "auto" }, { "name": "--pf-c-progress-stepper--m-center__step-description--MarginRight", "description": "Right margin for centered step description", "default": "0" }, { "name": "--pf-c-progress-stepper--m-center__step-description--MarginLeft", "description": "Left margin for centered step description", "default": "0" }, { "name": "--pf-c-progress-stepper--m-center__step-description--TextAlign", "default": "auto" }, { "name": "--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight", "description": "Right margin for vertical centered step main content", "default": "0" }, { "name": "--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft", "description": "Left margin for vertical centered step main content", "default": "0" }, { "name": "--pf-c-progress-stepper--m-center--GridTemplateColumns", "description": "Grid template columns for centered layout", "default": "1fr" }, { "name": "--pf-c-progress-stepper__step-main--before--Content", "default": "var(--pf-c-progress-stepper--m-center__step-main--before--Content)" }, { "name": "--pf-c-progress-stepper--m-center__step-main--before--Content" }, { "name": "--pf-c-progress-stepper--m-center__step-connector--before--Content" }, { "name": "--pf-c-progress-stepper--GridAutoFlow", "description": "Grid auto flow (defaults to vertical)", "default": "var(--pf-c-progress-stepper--m-vertical--GridAutoFlow)" }, { "name": "--pf-c-progress-stepper--m-vertical--GridAutoFlow", "description": "Grid auto flow for vertical layout", "default": "row" }, { "name": "--pf-c-progress-stepper--m-vertical--GridTemplateColumns", "description": "Grid template columns for vertical layout", "default": "auto 1fr" }, { "name": "--pf-c-progress-stepper--m-vertical__step-connector--before--Top", "description": "Top position for vertical step connector pseudo-element", "default": "0" }, { "name": "--pf-c-progress-stepper--m-vertical__step-connector--before--Left", "description": "Left position for vertical step connector pseudo-element", "default": "calc(var(--pf-c-progress-stepper__step-icon--Width) / 2)" }, { "name": "--pf-c-progress-stepper--m-vertical__step-connector--before--Width", "description": "Width for vertical step connector pseudo-element", "default": "auto" }, { "name": "--pf-c-progress-stepper--m-vertical__step-connector--before--Height", "description": "Height for vertical step connector pseudo-element", "default": "100%" }, { "name": "--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth", "description": "Right border width for vertical step connector pseudo-element", "default": "var(--pf-global--BorderWidth--md, 2px)" }, { "name": "--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor", "description": "Right border color for vertical step connector pseudo-element", "default": "var(--pf-global--BorderColor--100, #d2d2d2)" }, { "name": "--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth", "description": "Bottom border width for vertical step connector pseudo-element", "default": "0" }, { "name": "--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor", "description": "Bottom border color for vertical step connector pseudo-element", "default": "transparent" }, { "name": "--pf-c-progress-stepper--m-vertical__step-connector--before--Transform", "description": "Transform for vertical step connector pseudo-element", "default": "translateX(-50%)" }, { "name": "--pf-c-progress-stepper--m-vertical__step-main--MarginTop", "description": "Top margin for vertical step main content", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-progress-stepper--m-vertical__step-main--MarginRight", "description": "Right margin for vertical step main content", "default": "0" }, { "name": "--pf-c-progress-stepper--m-vertical__step-main--MarginBottom", "description": "Bottom margin for vertical step main content", "default": "var(--pf-global--spacer--xl, 2rem)" }, { "name": "--pf-c-progress-stepper--m-vertical__step-main--MarginLeft", "description": "Left margin for vertical step main content", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns", "description": "Grid template columns for vertical compact layout", "default": "1fr" }, { "name": "--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow", "description": "Grid row for vertical compact step connector", "default": "auto" }, { "name": "--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom", "description": "Padding bottom for vertical compact step connector", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-progress-stepper__step-connector--before--Left", "default": "var(--pf-c-progress-stepper--m-center__step-connector--before--Left)" }, { "name": "--pf-c-progress-stepper--m-center__step-connector--before--Left", "description": "Left position for centered step connector pseudo-element", "default": "50%" }, { "name": "--pf-c-progress-stepper__step-main--MarginTop", "default": "var(--pf-c-progress-stepper--m-compact__step-main--MarginTop)" }, { "name": "--pf-c-progress-stepper--m-compact__step-main--MarginTop", "description": "Top margin for compact step main content", "default": "0" }, { "name": "--pf-c-progress-stepper--m-compact__step-main--MarginBottom", "description": "Bottom margin for compact step main content", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-progress-stepper--m-compact__step-icon--Width", "description": "Width for compact step icon", "default": "1.125rem" }, { "name": "--pf-c-progress-stepper--m-compact__step-icon--FontSize", "description": "Font size for compact step icon", "default": "var(--pf-global--icon--FontSize--sm, 0.625rem)" }, { "name": "--pf-c-progress-stepper--m-compact__step-title--FontSize", "description": "Font size for compact step title", "default": "var(--pf-global--FontSize--sm, 0.875rem)" }, { "name": "--pf-c-progress-stepper--m-compact__step-title--FontWeight", "description": "Font weight for compact step title", "default": "var(--pf-global--FontWeight--normal, 400)" }, { "name": "--pf-c-progress-stepper--m-compact__pficon--MarginTop", "description": "Top margin for compact pficon", "default": "2px" }, { "name": "--pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop", "description": "Top margin for compact exclamation triangle icon", "default": "-3px" }, { "name": "--pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginLeft" }, { "name": "--pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight", "description": "Right margin for vertical compact step main content", "default": "0" }, { "name": "--pf-c-progress-stepper--m-compact--GridTemplateColumns" }, { "name": "--pf-c-progress-stepper--m-compact--GridAutoFlow", "description": "Grid auto flow for compact layout", "default": "row" } ], "demos": [ { "url": "https://patternflyelements.org/components/progress-stepper/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-progress-stepper/demo/index.html" } }, { "url": "https://patternflyelements.org/components/progress-stepper/demo/alignment/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-progress-stepper/demo/alignment.html" } }, { "url": "https://patternflyelements.org/components/progress-stepper/demo/compact/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-progress-stepper/demo/compact.html" } }, { "url": "https://patternflyelements.org/components/progress-stepper/demo/custom-icons/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-progress-stepper/demo/custom-icons.html" } }, { "url": "https://patternflyelements.org/components/progress-stepper/demo/danger/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-progress-stepper/demo/danger.html" } }, { "url": "https://patternflyelements.org/components/progress-stepper/demo/info/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-progress-stepper/demo/info.html" } }, { "url": "https://patternflyelements.org/components/progress-stepper/demo/step-descriptions/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-progress-stepper/demo/step-descriptions.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-progress-stepper", "declaration": { "name": "PfProgressStepper", "module": "pf-progress-stepper/pf-progress-stepper.js" } }, { "kind": "js", "name": "PfProgressStepper", "declaration": { "name": "PfProgressStepper", "module": "pf-progress-stepper/pf-progress-stepper.js" } } ] }, { "kind": "javascript-module", "path": "pf-progress/pf-progress.js", "declarations": [ { "name": "PfProgress", "summary": "Display completion status of ongoing process or task.", "description": "A progress bar gives the user a visual representation of their completion status of an ongoing process or task.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "value", "description": "Represents the value of the progress bar", "type": { "text": "number" }, "default": "0", "kind": "field", "attribute": "value", "reflects": true }, { "name": "description", "description": "Description (title) above the progress bar", "type": { "text": "string" }, "kind": "field", "attribute": "description" }, { "name": "descriptionTruncated", "description": "Indicate whether to truncate the string description (title)", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "description-truncated", "reflects": true }, { "name": "max", "description": "Maximum value for the progress bar", "type": { "text": "number" }, "default": "100", "kind": "field", "attribute": "max", "reflects": true }, { "name": "min", "description": "Minimum value for the progress bar", "type": { "text": "number" }, "default": "0", "kind": "field", "attribute": "min", "reflects": true }, { "name": "size", "description": "Size of the progress bar (height)", "type": { "text": "'sm' | 'lg'" }, "kind": "field", "attribute": "size" }, { "name": "measureLocation", "description": "Where the percentage will be displayed with the progress element", "type": { "text": "'outside' | 'inside' | 'none'" }, "kind": "field", "attribute": "measure-location" }, { "name": "variant", "description": "Variant of the progress bar", "type": { "text": "'success' | 'danger' | 'warning'" }, "kind": "field", "attribute": "variant" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-progress/pf-progress.ts#L23" }, "kind": "class", "tagName": "pf-progress", "attributes": [ { "name": "value", "description": "Represents the value of the progress bar", "type": { "text": "number" }, "default": "0", "fieldName": "value" }, { "name": "description", "description": "Description (title) above the progress bar", "type": { "text": "string" }, "fieldName": "description" }, { "name": "description-truncated", "description": "Indicate whether to truncate the string description (title)", "type": { "text": "boolean" }, "default": "false", "fieldName": "descriptionTruncated" }, { "name": "max", "description": "Maximum value for the progress bar", "type": { "text": "number" }, "default": "100", "fieldName": "max" }, { "name": "min", "description": "Minimum value for the progress bar", "type": { "text": "number" }, "default": "0", "fieldName": "min" }, { "name": "size", "description": "Size of the progress bar (height)", "type": { "text": "'sm' | 'lg'" }, "fieldName": "size" }, { "name": "measure-location", "description": "Where the percentage will be displayed with the progress element", "type": { "text": "'outside' | 'inside' | 'none'" }, "fieldName": "measureLocation" }, { "name": "variant", "description": "Variant of the progress bar", "type": { "text": "'success' | 'danger' | 'warning'" }, "fieldName": "variant" } ], "cssProperties": [ { "name": "--pf-global--primary-color--100", "default": "#0066cc" }, { "name": "--pf-global--spacer--md", "default": "1rem" }, { "name": "--pf-global--BackgroundColor--light-100", "default": "#ffffff" }, { "name": "--pf-global--Color--100", "default": "#151515" }, { "name": "--pf-global--success-color--100", "default": "#3e8635" }, { "name": "--pf-global--warning-color--100", "default": "#f0ab00" }, { "name": "--pf-global--danger-color--100", "default": "#c9190b" }, { "name": "--pf-global--Color--light-100", "default": "#ffffff" }, { "name": "--pf-global--spacer--sm", "default": "0.5rem" }, { "name": "--pf-global--FontSize--sm", "default": "0.875rem" }, { "name": "--pf-global--spacer--lg", "default": "1.5rem" }, { "name": "--pf-c-progress--GridGap" }, { "name": "--pf-c-progress--m-sm__bar--Height" }, { "name": "--pf-c-progress--m-sm__description--FontSize" }, { "name": "--pf-c-progress--m-lg__bar--Height" }, { "name": "--pf-c-progress--m-outside__measure--FontSize" }, { "name": "--pf-c-progress--m-success__bar--BackgroundColor" }, { "name": "--pf-c-progress--m-success__status-icon--Color" }, { "name": "--pf-c-progress--m-warning__bar--BackgroundColor" }, { "name": "--pf-c-progress--m-warning__status-icon--Color" }, { "name": "--pf-c-progress--m-danger__bar--BackgroundColor" }, { "name": "--pf-c-progress--m-danger__status-icon--Color" }, { "name": "--pf-c-progress__status-icon--MarginLeft" }, { "name": "--pf-c-progress__status-icon--Color" }, { "name": "--pf-c-progress__bar--BackgroundColor" }, { "name": "--pf-c-progress__indicator--Height" }, { "name": "--pf-c-progress__indicator--BackgroundColor" }, { "name": "--pf-c-progress--m-success--m-inside__measure--Color" }, { "name": "--pf-c-progress__bar--Height" }, { "name": "--pf-c-progress__bar--before--BackgroundColor" } ], "demos": [ { "url": "https://patternflyelements.org/components/progress/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-progress/demo/index.html" } }, { "url": "https://patternflyelements.org/components/progress/demo/kitchen-sink/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-progress/demo/kitchen-sink.html" } }, { "url": "https://patternflyelements.org/components/progress/demo/truncated-description/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-progress/demo/truncated-description.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-progress", "declaration": { "name": "PfProgress", "module": "pf-progress/pf-progress.js" } }, { "kind": "js", "name": "PfProgress", "declaration": { "name": "PfProgress", "module": "pf-progress/pf-progress.js" } } ] }, { "kind": "javascript-module", "path": "pf-search-input/pf-search-input.js", "declarations": [ { "name": "PfSearchChangeEvent", "description": "Fired when a `\u003cpf-search-input\u003e` element's value changes", "superclass": { "name": "Event", "package": "global:" }, "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-search-input/pf-search-input.ts#L21" }, "kind": "class" }, { "name": "PfSearchInput", "summary": "Allows users to search through a list for specific search terms", "description": "A search input lets users type in words to find specific items or information.\nAs they type, it can show matching results to help them quickly find what they are looking for.\n\nA search input consists of a text field where users can type to find specific content or items.\nUnlike selects or dropdowns, which offer predefined options, a search input lets users enter\ntheir own keywords to filter or locate results. It includes a clear (×) button to easily\nremove the current input, allowing users to start a new search quickly.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "accessibleLabel", "description": "Accessible label for the search input", "type": { "text": "string" }, "kind": "field", "attribute": "accessible-label" }, { "name": "disabled", "description": "Whether the search input is disabled", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "disabled", "reflects": true }, { "name": "expanded", "description": "Whether the search input's listbox is expanded", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "expanded", "reflects": true }, { "name": "value", "description": "Current form value", "type": { "text": "string" }, "kind": "field", "attribute": "value" }, { "name": "placeholder", "description": "Placeholder entry. Overridden by the `placeholder` slot", "type": { "text": "string" }, "kind": "field", "attribute": "placeholder" }, { "name": "position", "description": "Indicates initial popover position.\nThere are 6 options: `bottom`, `top`, `top-start`, `top-end`, `bottom-start`, `bottom-end`.\nDefault is `bottom`.", "type": { "text": "Placement" }, "default": "'bottom'", "kind": "field", "attribute": "position", "reflects": true }, { "name": "options", "description": "List of options", "type": { "text": "PfOption[]" }, "readonly": true, "kind": "field" }, { "name": "disabledChanged", "kind": "method", "privacy": "private" }, { "parameters": [ { "name": "old", "type": { "text": "boolean" } }, { "name": "expanded", "type": { "text": "boolean" } } ], "name": "expandedChanged", "kind": "method", "privacy": "private" }, { "name": "valueChanged", "kind": "method", "privacy": "private" }, { "return": { "type": { "text": "Promise\u003cvoid\u003e" } }, "name": "show", "description": "Opens the dropdown", "kind": "method" }, { "return": { "type": { "text": "Promise\u003cvoid\u003e" } }, "name": "hide", "description": "Closes listbox", "kind": "method" }, { "return": { "type": { "text": "Promise\u003cvoid\u003e" } }, "name": "toggle", "description": "toggles popup based on current state", "kind": "method" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-search-input/pf-search-input.ts#L43" }, "kind": "class", "tagName": "pf-search-input", "attributes": [ { "name": "accessible-label", "description": "Accessible label for the search input", "type": { "text": "string" }, "fieldName": "accessibleLabel" }, { "name": "disabled", "description": "Whether the search input is disabled", "type": { "text": "boolean" }, "default": "false", "fieldName": "disabled" }, { "name": "expanded", "description": "Whether the search input's listbox is expanded", "type": { "text": "boolean" }, "default": "false", "fieldName": "expanded" }, { "name": "value", "description": "Current form value", "type": { "text": "string" }, "fieldName": "value" }, { "name": "placeholder", "description": "Placeholder entry. Overridden by the `placeholder` slot", "type": { "text": "string" }, "fieldName": "placeholder" }, { "name": "position", "description": "Indicates initial popover position.\nThere are 6 options: `bottom`, `top`, `top-start`, `top-end`, `bottom-start`, `bottom-end`.\nDefault is `bottom`.", "type": { "text": "Placement" }, "default": "'bottom'", "fieldName": "position" } ], "events": [ { "name": "open", "description": "when the menu toggles open" }, { "name": "close", "description": "when the menu toggles closed" } ], "slots": [ { "name": "", "description": "insert `\u003cpf-option\u003e` and/or `\u003cpf-option-groups\u003e` here" } ], "cssProperties": [ { "name": "--pf-global--spacer--form-element", "default": "0.375rem" }, { "name": "--pf-global--target-size--MinWidth", "default": "44px" }, { "name": "--pf-global--FontSize--md", "default": "1rem" }, { "name": "--pf-global--FontWeight--normal", "default": "400" }, { "name": "--pf-global--LineHeight--md", "default": "1.5" }, { "name": "--pf-global--BorderColor--200", "default": "#8a8d90" }, { "name": "--pf-global--BorderColor--300", "default": "#f0f0f0" }, { "name": "--pf-global--active-color--100", "default": "#06c" }, { "name": "--pf-global--disabled-color--300", "default": "#f0f0f0" }, { "name": "--pf-global--danger-color--100", "default": "#c9190b" }, { "name": "--pf-global--success-color--100", "default": "#3e8635" }, { "name": "--pf-global--BorderWidth--md", "default": "2px" }, { "name": "--pf-global--warning-color--100", "default": "#f0ab00" }, { "name": "--pf-global--spacer--lg", "default": "1.5rem" }, { "name": "--pf-global--Color--200", "default": "#6a6e73" }, { "name": "--pf-global--Color--100", "default": "#151515" }, { "name": "--pf-theme--color--surface--lightest", "default": "#fff" }, { "name": "--pf-c-search-input__menu-content--MaxHeight", "default": "20rem" }, { "name": "--pf-c-list__item-icon--Color", "default": "#6a6e73" }, { "name": "--pf-c-search-input__toggle--BackgroundColor", "default": "#fff" }, { "name": "--pf-global--FontFamily--sans-serif", "default": "\"RedHatTextUpdated\", \"Overpass\", overpass, helvetica, arial, sans-serif" }, { "name": "--pf-c-search-input__toggle--FontSize", "default": "1rem" }, { "name": "--pf-c-search-input__toggle--FontWeight", "default": "400" }, { "name": "--pf-c-search-input__toggle--LineHeight", "default": "1.5" }, { "name": "--pf-theme--color--text", "default": "#151515" }, { "name": "--pf-global--Color--dark-200", "default": "#6a6e73" }, { "name": "--pf-theme--color--surface--lighter", "default": "#f0f0f0" }, { "name": "--pf-global--spacer--sm", "default": "0.5rem" }, { "name": "--pf-global--BorderWidth--sm", "default": "1px" }, { "name": "--pf-c-divider--BackgroundColor" }, { "name": "--pf-global--BorderColor--100", "default": "#d2d2d2" }, { "name": "--pf-c-divider--BorderColor--base" }, { "name": "--pf-c-divider--Height" }, { "name": "--pf-c-divider--BorderWidth--base" }, { "name": "--pf-c-divider--m-horizontal--Display" }, { "name": "--pf-c-divider--m-horizontal--FlexDirection" }, { "name": "--pf-c-divider--m-horizontal--after--Width" }, { "name": "--pf-c-divider--m-horizontal--after--Height" }, { "name": "--pf-c-divider--Display", "default": "flex" }, { "name": "--pf-c-divider--FlexDirection" }, { "name": "--pf-c-search-input-menu--c-divider--MarginTop" }, { "name": "--pf-c-search-input-menu--c-divider--MarginBottom" }, { "name": "--pf-c-divider--after--Width", "default": "100%" }, { "name": "--pf-c-divider--after--Height", "default": "1px" }, { "name": "--pf-c-divider--after--BackgroundColor" }, { "name": "--pf-global--spacer--md", "default": "1rem" }, { "name": "--pf-global--spacer--xs", "default": "0.125rem" }, { "name": "--pf-theme--color--accent", "default": "#0066cc" }, { "name": "--pf-global--BackgroundColor--100", "default": "#fff" } ], "demos": [ { "url": "https://patternflyelements.org/components/search-input/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-search-input/demo/index.html" } }, { "url": "https://patternflyelements.org/components/search-input/demo/disabled/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-search-input/demo/disabled.html" } }, { "url": "https://patternflyelements.org/components/search-input/demo/pf-search-input-with-submit/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-search-input/demo/pf-search-input-with-submit.html" } } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "PfSearchChangeEvent", "declaration": { "name": "PfSearchChangeEvent", "module": "pf-search-input/pf-search-input.js" } }, { "kind": "custom-element-definition", "name": "pf-search-input", "declaration": { "name": "PfSearchInput", "module": "pf-search-input/pf-search-input.js" } }, { "kind": "js", "name": "PfSearchInput", "declaration": { "name": "PfSearchInput", "module": "pf-search-input/pf-search-input.js" } } ] }, { "kind": "javascript-module", "path": "pf-select/pf-option-group.js", "declarations": [ { "name": "PfOptionGroup", "description": "Group of options within a listbox", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "label", "description": "Group description. Overridden by `label` slot.", "type": { "text": "string" }, "kind": "field", "attribute": "label" }, { "name": "disabled", "description": "whether group is disabled", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "disabled", "reflects": true } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-select/pf-option-group.ts#L16" }, "kind": "class", "tagName": "pf-option-group", "attributes": [ { "name": "label", "description": "Group description. Overridden by `label` slot.", "type": { "text": "string" }, "fieldName": "label" }, { "name": "disabled", "description": "whether group is disabled", "type": { "text": "boolean" }, "default": "false", "fieldName": "disabled" } ], "slots": [ { "name": "label", "description": "Group label. Overrides the `label` attribute." }, { "name": "", "description": "`\u003cpf-option\u003e` or `\u003chr\u003e` elements" } ], "cssProperties": [ { "name": "--pf-global--BorderColor--100", "default": "#d2d2d2" }, { "name": "--pf-theme--color--surface--lighter", "default": "#f0f0f0" }, { "name": "--pf-global--Color--200", "default": "#6a6e73" }, { "name": "--pf-global--FontSize--xs", "default": "0.75rem" }, { "name": "--pf-global--Color--dark-200", "default": "#6a6e73" }, { "name": "--pf-global--spacer--md", "default": "1rem" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-option-group", "declaration": { "name": "PfOptionGroup", "module": "pf-select/pf-option-group.js" } }, { "kind": "js", "name": "PfOptionGroup", "declaration": { "name": "PfOptionGroup", "module": "pf-select/pf-option-group.js" } } ] }, { "kind": "javascript-module", "path": "pf-select/pf-option.js", "declarations": [ { "name": "PfOption", "description": "Option within a listbox", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "disabled", "description": "whether option is disabled", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "disabled", "reflects": true }, { "name": "value", "description": "form value for this option", "kind": "field", "attribute": "value", "reflects": true }, { "name": "selected", "description": "whether option is selected", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "selected", "reflects": true }, { "name": "active", "description": "whether option is active descendant", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "active", "reflects": true }, { "name": "description", "description": "Optional option description; overridden by description slot.", "type": { "text": "string" }, "default": "''", "kind": "field", "attribute": "description" }, { "name": "posInSet", "description": "this option's position relative to the other options", "kind": "field" }, { "name": "setSize", "description": "total number of options", "kind": "field" }, { "name": "selectedChanged", "kind": "method", "privacy": "private" }, { "name": "disabledChanged", "kind": "method", "privacy": "private" }, { "name": "optionText", "description": "text content within option (used for filtering)", "type": { "text": "string" }, "readonly": true, "kind": "field" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-select/pf-option.ts#L23" }, "kind": "class", "tagName": "pf-option", "attributes": [ { "name": "disabled", "description": "whether option is disabled", "type": { "text": "boolean" }, "default": "false", "fieldName": "disabled" }, { "name": "value", "description": "form value for this option", "fieldName": "value" }, { "name": "selected", "description": "whether option is selected", "type": { "text": "boolean" }, "default": "false", "fieldName": "selected" }, { "name": "active", "description": "whether option is active descendant", "type": { "text": "boolean" }, "default": "false", "fieldName": "active" }, { "name": "description", "description": "Optional option description; overridden by description slot.", "type": { "text": "string" }, "default": "''", "fieldName": "description" } ], "slots": [ { "name": "icon", "description": "icon\noptional icon" }, { "name": "create" }, { "name": "", "description": "option text" }, { "name": "description", "description": "description\noptional description" } ], "cssProperties": [ { "name": "--rh-color-gray-20", "default": "#e0e0e0" }, { "name": "--pf-global--spacer--sm", "default": "0.5rem" }, { "name": "--pf-global--spacer--md", "default": "1rem" }, { "name": "--pf-theme--color--surface--lighter", "default": "#f0f0f0" }, { "name": "--pf-c-select__menu-item-icon--FontSize", "default": "var(--pf-global--icon--FontSize--sm, 0.675rem)" }, { "name": "--pf-global--icon--FontSize--sm", "default": "0.675rem" }, { "name": "--pf-theme--color--accent", "default": "#0066cc" }, { "name": "--pf-global--FontSize--xs", "default": "0.75rem" }, { "name": "--pf-global--Color--dark-200", "default": "#6a6e73" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-option", "declaration": { "name": "PfOption", "module": "pf-select/pf-option.js" } }, { "kind": "js", "name": "PfOption", "declaration": { "name": "PfOption", "module": "pf-select/pf-option.js" } } ] }, { "kind": "javascript-module", "path": "pf-select/pf-select.js", "declarations": [ { "name": "PfSelectChangeEvent", "superclass": { "name": "Event", "package": "global:" }, "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-select/pf-select.ts#L27" }, "kind": "class" }, { "name": "PfSelect", "description": "A select list enables users to select one or more items from a list.\n\nA select component consists of a toggle control to open and close a menu of actions or links.\nSelects differ from dropdowns in that they persist selection,\nwhereas dropdowns are typically used to present a list of actions or links.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "variant", "description": "Variant of rendered Select", "type": { "text": "'single' | 'checkbox' | 'typeahead' | 'typeaheadmulti'" }, "default": "'single'", "kind": "field", "attribute": "variant" }, { "name": "accessibleLabel", "description": "Accessible label for the select", "type": { "text": "string" }, "kind": "field", "attribute": "accessible-label" }, { "name": "accessibleCurrentSelectionsLabel", "description": "Accessible label for chip group used to describe chips", "type": { "text": "string" }, "default": "'Current selections'", "kind": "field", "attribute": "accessible-current-selections-label" }, { "name": "itemsSelectedText", "description": "Multi listbox button text", "type": { "text": "string" }, "default": "'items selected'", "kind": "field", "attribute": "items-selected-text" }, { "name": "disabled", "description": "Whether the select is disabled", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "disabled", "reflects": true }, { "name": "expanded", "description": "Whether the select listbox is expanded", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "expanded", "reflects": true }, { "name": "enableFlip", "description": "Enable to flip listbox when it reaches boundary", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "enable-flip" }, { "name": "value", "description": "Current form value", "type": { "text": "string" }, "kind": "field", "attribute": "value" }, { "name": "placeholder", "description": "Placeholder entry. Overridden by the `placeholder` slot", "type": { "text": "string" }, "kind": "field", "attribute": "placeholder" }, { "name": "position", "description": "Indicates initial popover position.\nThere are 6 options: `bottom`, `top`, `top-start`, `top-end`, `bottom-start`, `bottom-end`.\nDefault is `bottom`.", "type": { "text": "Placement" }, "default": "'bottom'", "kind": "field", "attribute": "position", "reflects": true }, { "name": "checkboxSelectionBadgeHidden", "description": "Flag indicating if selection badge should be hidden for checkbox variant,default false", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "checkbox-selection-badge-hidden" }, { "name": "selected", "description": "Single select option value for single select menus,\nor array of select option values for multi select.", "type": { "text": "PfOption[]" }, "kind": "field" }, { "name": "options", "description": "List of options", "type": { "text": "PfOption[]" }, "readonly": true, "kind": "field" }, { "name": "disabledChanged", "kind": "method", "privacy": "private" }, { "parameters": [ { "name": "old", "type": { "text": "boolean" } }, { "name": "expanded", "type": { "text": "boolean" } } ], "name": "expandedChanged", "kind": "method", "privacy": "private" }, { "parameters": [ { "name": "_", "type": { "text": "PfOption[]" } }, { "name": "selected", "type": { "text": "PfOption[]" } } ], "name": "selectedChanged", "kind": "method", "privacy": "private" }, { "name": "variantChanged", "kind": "method", "privacy": "private" }, { "name": "valueChanged", "kind": "method", "privacy": "private" }, { "return": { "type": { "text": "void" } }, "name": "focusChips", "kind": "method", "privacy": "private" }, { "return": { "type": { "text": "Promise\u003cvoid\u003e" } }, "name": "show", "description": "Opens the dropdown", "kind": "method" }, { "return": { "type": { "text": "Promise\u003cvoid\u003e" } }, "name": "hide", "description": "Closes listbox", "kind": "method" }, { "return": { "type": { "text": "Promise\u003cvoid\u003e" } }, "name": "toggle", "description": "toggles popup based on current state", "kind": "method" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-select/pf-select.ts#L44" }, "kind": "class", "tagName": "pf-select", "attributes": [ { "name": "variant", "description": "Variant of rendered Select", "type": { "text": "'single' | 'checkbox' | 'typeahead' | 'typeaheadmulti'" }, "default": "'single'", "fieldName": "variant" }, { "name": "accessible-label", "description": "Accessible label for the select", "type": { "text": "string" }, "fieldName": "accessibleLabel" }, { "name": "accessible-current-selections-label", "description": "Accessible label for chip group used to describe chips", "type": { "text": "string" }, "default": "'Current selections'", "fieldName": "accessibleCurrentSelectionsLabel" }, { "name": "items-selected-text", "description": "Multi listbox button text", "type": { "text": "string" }, "default": "'items selected'", "fieldName": "itemsSelectedText" }, { "name": "disabled", "description": "Whether the select is disabled", "type": { "text": "boolean" }, "default": "false", "fieldName": "disabled" }, { "name": "expanded", "description": "Whether the select listbox is expanded", "type": { "text": "boolean" }, "default": "false", "fieldName": "expanded" }, { "name": "enable-flip", "description": "Enable to flip listbox when it reaches boundary", "type": { "text": "boolean" }, "default": "false", "fieldName": "enableFlip" }, { "name": "value", "description": "Current form value", "type": { "text": "string" }, "fieldName": "value" }, { "name": "placeholder", "description": "Placeholder entry. Overridden by the `placeholder` slot", "type": { "text": "string" }, "fieldName": "placeholder" }, { "name": "position", "description": "Indicates initial popover position.\nThere are 6 options: `bottom`, `top`, `top-start`, `top-end`, `bottom-start`, `bottom-end`.\nDefault is `bottom`.", "type": { "text": "Placement" }, "default": "'bottom'", "fieldName": "position" }, { "name": "checkbox-selection-badge-hidden", "description": "Flag indicating if selection badge should be hidden for checkbox variant,default false", "type": { "text": "boolean" }, "default": "false", "fieldName": "checkboxSelectionBadgeHidden" } ], "events": [ { "name": "open", "description": "when the menu toggles open" }, { "name": "close", "description": "when the menu toggles closed" } ], "slots": [ { "name": "placeholder", "description": "placeholder text for the select. Overrides the `placeholder` attribute." }, { "name": "", "description": "insert `pf-option` and/or `pf-option-groups` here" } ], "cssProperties": [ { "name": "--rh-color-gray-20", "default": "#e0e0e0" }, { "name": "--pf-c-select__toggle--PaddingTop", "description": "Select toggle top padding", "default": "var(--pf-global--spacer--form-element, 0.375rem)" }, { "name": "--pf-c-select__toggle--PaddingRight", "description": "Select toggle right padding", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-select__toggle--PaddingBottom", "description": "Select toggle bottom padding", "default": "var(--pf-global--spacer--form-element, 0.375rem)" }, { "name": "--pf-c-select__toggle--PaddingLeft", "description": "Select toggle left padding", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-select__toggle--MinWidth", "description": "Select toggle minimum width", "default": "var(--pf-global--target-size--MinWidth, 44px)" }, { "name": "--pf-global--target-size--MinWidth", "default": "44px" }, { "name": "--pf-c-select__toggle--FontSize", "description": "Select toggle font size", "default": "var(--pf-global--FontSize--md, 1rem)" }, { "name": "--pf-c-select__toggle--FontWeight", "description": "Select toggle font weight", "default": "var(--pf-global--FontWeight--normal, 400)" }, { "name": "--pf-c-select__toggle--LineHeight", "description": "Select toggle line height", "default": "var(--pf-global--LineHeight--md, 1.5)" }, { "name": "--pf-c-select__toggle--BackgroundColor", "description": "Select toggle background color", "default": "var(--pf-global--BackgroundColor--100, #fff)" }, { "name": "--pf-global--BackgroundColor--100", "default": "#fff" }, { "name": "--pf-c-select__toggle--before--BorderTopWidth", "description": "Select toggle border top width", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-c-select__toggle--before--BorderRightWidth", "description": "Select toggle border right width", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-c-select__toggle--before--BorderBottomWidth", "description": "Select toggle border bottom width", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-c-select__toggle--before--BorderLeftWidth", "description": "Select toggle border left width", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-c-select__toggle--before--BorderWidth", "description": "Select toggle border width", "default": "initial" }, { "name": "--pf-c-select__toggle--before--BorderTopColor", "description": "Select toggle border top color", "default": "var(--pf-global--BorderColor--300, #f0f0f0)" }, { "name": "--pf-c-select__toggle--before--BorderRightColor", "description": "Select toggle border right color", "default": "var(--pf-global--BorderColor--300, #f0f0f0)" }, { "name": "--pf-c-select__toggle--before--BorderBottomColor", "description": "Select toggle border bottom color", "default": "var(--pf-global--BorderColor--200, #8a8d90)" }, { "name": "--pf-global--BorderColor--200", "default": "#8a8d90" }, { "name": "--pf-c-select__toggle--before--BorderLeftColor", "description": "Select toggle border left color", "default": "var(--pf-global--BorderColor--300, #f0f0f0)" }, { "name": "--pf-global--BorderColor--300", "default": "#f0f0f0" }, { "name": "--pf-c-select__toggle--Color", "description": "Select toggle text color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-select__toggle--hover--before--BorderBottomColor", "description": "Select toggle hover border bottom color", "default": "var(--pf-global--active-color--100, #06c)" }, { "name": "--pf-c-select__toggle--active--before--BorderBottomColor", "description": "Select toggle active border bottom color", "default": "var(--pf-global--active-color--100, #06c)" }, { "name": "--pf-c-select__toggle--active--before--BorderBottomWidth", "description": "Select toggle active border bottom width", "default": "var(--pf-global--BorderWidth--md, 2px)" }, { "name": "--pf-c-select__toggle--m-expanded--before--BorderBottomColor", "description": "Select toggle expanded border bottom color", "default": "var(--pf-global--active-color--100, #06c)" }, { "name": "--pf-c-select__toggle--m-expanded--before--BorderBottomWidth", "description": "Select toggle expanded border bottom width", "default": "var(--pf-global--BorderWidth--md, 2px)" }, { "name": "--pf-c-select__toggle--disabled--BackgroundColor", "description": "Select toggle disabled background color", "default": "var(--pf-global--disabled-color--300, #f0f0f0)" }, { "name": "--pf-global--disabled-color--300", "default": "#f0f0f0" }, { "name": "--pf-c-select__toggle--m-plain--before--BorderColor", "description": "Select toggle plain border color", "default": "transparent" }, { "name": "--pf-c-select__toggle--m-placeholder--Color", "description": "Select toggle placeholder color", "default": "transparent" }, { "name": "--pf-c-select--m-invalid__toggle--before--BorderBottomColor", "description": "Select invalid state toggle border bottom color", "default": "var(--pf-global--danger-color--100, #c9190b)" }, { "name": "--pf-c-select--m-invalid__toggle--before--BorderBottomWidth", "description": "Select invalid state toggle border bottom width", "default": "var(--pf-global--BorderWidth--md, 2px)" }, { "name": "--pf-c-select--m-invalid__toggle--hover--before--BorderBottomColor", "description": "Select invalid state toggle hover border bottom color", "default": "var(--pf-global--danger-color--100, #c9190b)" }, { "name": "--pf-c-select--m-invalid__toggle--focus--before--BorderBottomColor", "description": "Select invalid state toggle focus border bottom color", "default": "var(--pf-global--danger-color--100, #c9190b)" }, { "name": "--pf-c-select--m-invalid__toggle--active--before--BorderBottomColor", "description": "Select invalid state toggle active border bottom color", "default": "var(--pf-global--danger-color--100, #c9190b)" }, { "name": "--pf-c-select--m-invalid__toggle--m-expanded--before--BorderBottomColor", "description": "Select invalid state toggle expanded border bottom color", "default": "var(--pf-global--danger-color--100, #c9190b)" }, { "name": "--pf-c-select--m-invalid__toggle-status-icon--Color", "description": "Select invalid state toggle status icon color", "default": "var(--pf-global--danger-color--100, #c9190b)" }, { "name": "--pf-global--danger-color--100", "default": "#c9190b" }, { "name": "--pf-c-select--m-success__toggle--before--BorderBottomColor", "description": "Select success state toggle border bottom color", "default": "var(--pf-global--success-color--100, #3e8635)" }, { "name": "--pf-c-select--m-success__toggle--before--BorderBottomWidth", "description": "Select success state toggle border bottom width", "default": "var(--pf-global--BorderWidth--md, 2px)" }, { "name": "--pf-c-select--m-success__toggle--hover--before--BorderBottomColor", "description": "Select success state toggle hover border bottom color", "default": "var(--pf-global--success-color--100, #3e8635)" }, { "name": "--pf-c-select--m-success__toggle--focus--before--BorderBottomColor", "description": "Select success state toggle focus border bottom color", "default": "var(--pf-global--success-color--100, #3e8635)" }, { "name": "--pf-c-select--m-success__toggle--active--before--BorderBottomColor", "description": "Select success state toggle active border bottom color", "default": "var(--pf-global--success-color--100, #3e8635)" }, { "name": "--pf-c-select--m-success__toggle--m-expanded--before--BorderBottomColor", "description": "Select success state toggle expanded border bottom color", "default": "var(--pf-global--success-color--100, #3e8635)" }, { "name": "--pf-c-select--m-success__toggle-status-icon--Color", "description": "Select success state toggle status icon color", "default": "var(--pf-global--success-color--100, #3e8635)" }, { "name": "--pf-global--success-color--100", "default": "#3e8635" }, { "name": "--pf-c-select--m-warning__toggle--before--BorderBottomColor", "description": "Select warning state toggle border bottom color", "default": "var(--pf-global--warning-color--100, #f0ab00)" }, { "name": "--pf-c-select--m-warning__toggle--before--BorderBottomWidth", "description": "Select warning state toggle border bottom width", "default": "var(--pf-global--BorderWidth--md, 2px)" }, { "name": "--pf-c-select--m-warning__toggle--hover--before--BorderBottomColor", "description": "Select warning state toggle hover border bottom color", "default": "var(--pf-global--warning-color--100, #f0ab00)" }, { "name": "--pf-c-select--m-warning__toggle--focus--before--BorderBottomColor", "description": "Select warning state toggle focus border bottom color", "default": "var(--pf-global--warning-color--100, #f0ab00)" }, { "name": "--pf-c-select--m-warning__toggle--active--before--BorderBottomColor", "description": "Select warning state toggle active border bottom color", "default": "var(--pf-global--warning-color--100, #f0ab00)" }, { "name": "--pf-c-select--m-warning__toggle--m-expanded--before--BorderBottomColor", "description": "Select warning state toggle expanded border bottom color", "default": "var(--pf-global--warning-color--100, #f0ab00)" }, { "name": "--pf-c-select--m-warning__toggle-status-icon--Color", "description": "Select warning state toggle status icon color", "default": "var(--pf-global--warning-color--100, #f0ab00)" }, { "name": "--pf-global--warning-color--100", "default": "#f0ab00" }, { "name": "--pf-c-select__toggle-wrapper--not-last-child--MarginRight", "description": "Select toggle wrapper not last child right margin", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-select__toggle-wrapper--MaxWidth", "description": "Select toggle wrapper maximum width", "default": "calc(100% - var(--pf-global--spacer--lg, 1.5rem))" }, { "name": "--pf-global--spacer--lg", "default": "1.5rem" }, { "name": "--pf-c-select__toggle-wrapper--c-chip-group--MarginTop", "description": "Select toggle wrapper chip group top margin", "default": "0.3125rem" }, { "name": "--pf-c-select__toggle-wrapper--c-chip-group--MarginBottom", "description": "Select toggle wrapper chip group bottom margin", "default": "0.3125rem" }, { "name": "--pf-c-select__toggle-typeahead--FlexBasis", "description": "Select typeahead toggle flex basis", "default": "10em" }, { "name": "--pf-c-select__toggle-typeahead--BackgroundColor", "description": "Select typeahead toggle background color", "default": "transparent" }, { "name": "--pf-c-select__toggle-typeahead--BorderTop", "description": "Select typeahead toggle top border", "default": "var(--pf-global--BorderWidth--sm, 1px) solid transparent" }, { "name": "--pf-c-select__toggle-typeahead--BorderRight", "description": "Select typeahead toggle right border", "default": "none" }, { "name": "--pf-c-select__toggle-typeahead--BorderLeft", "description": "Select typeahead toggle left border", "default": "none" }, { "name": "--pf-c-select__toggle-typeahead--MinWidth", "description": "Select typeahead toggle minimum width", "default": "7.5rem" }, { "name": "--pf-c-select__toggle-typeahead--focus--PaddingBottom", "description": "Select typeahead toggle focus bottom padding", "default": "calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--md))" }, { "name": "--pf-global--spacer--form-element", "default": "0.375rem" }, { "name": "--pf-global--BorderWidth--md", "default": "2px" }, { "name": "--pf-c-select__toggle--m-placeholder__toggle-text--Color", "description": "Select toggle placeholder text color", "default": "var(--pf-global--Color--dark-200, #6a6e73)" }, { "name": "--pf-c-select__toggle-icon--toggle-text--MarginLeft", "description": "Select toggle icon left margin", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-select__toggle-badge--PaddingLeft", "description": "Select toggle badge left padding", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-select__toggle-status-icon--MarginLeft", "description": "Select toggle status icon left margin", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-select__toggle-status-icon--Color", "description": "Select toggle status icon color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-select__toggle-arrow--MarginLeft", "description": "Select toggle arrow left margin", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-select__toggle-arrow--MarginRight", "description": "Select toggle arrow right margin", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-select__toggle-arrow--with-clear--MarginLeft", "description": "Select toggle arrow with clear left margin", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-select__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate", "description": "Select toggle arrow top expanded rotation", "default": "180deg" }, { "name": "--pf-c-select--m-plain__toggle-arrow--Color", "description": "Select plain toggle arrow color", "default": "var(--pf-global--Color--200, #6a6e73)" }, { "name": "--pf-c-select--m-plain--hover__toggle-arrow--Color", "description": "Select plain hover toggle arrow color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-select__toggle-clear--PaddingRight", "description": "Select toggle clear right padding", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-select__toggle-clear--PaddingLeft", "description": "Select toggle clear left padding", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-select__toggle-clear--toggle-button--PaddingLeft", "description": "Select toggle clear button left padding", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-select__toggle-button--Color", "description": "Select toggle button text color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-select__menu--BackgroundColor", "description": "Select menu background color", "default": "var(--pf-global--BackgroundColor--light-100, #fff)" }, { "name": "--pf-global--BackgroundColor--light-100", "default": "#fff" }, { "name": "--pf-c-select__menu--BoxShadow", "description": "Select menu box shadow", "default": "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))" }, { "name": "--pf-global--BoxShadow--md", "default": "0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)" }, { "name": "--pf-c-select__menu--PaddingTop", "description": "Select menu top padding", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-select__menu--PaddingBottom", "description": "Select menu bottom padding", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-select__menu--Top", "description": "Select menu top position", "default": "calc(100% + var(--pf-global--spacer--xs, 0.25rem))" }, { "name": "--pf-c-select__menu--ZIndex", "description": "Select menu z-index", "default": "var(--pf-global--ZIndex--sm, 200)" }, { "name": "--pf-global--ZIndex--sm", "default": "200" }, { "name": "--pf-c-select__menu--Width", "description": "Select menu width", "default": "auto" }, { "name": "--pf-c-select__menu--MinWidth", "description": "Select menu minimum width", "default": "100%" }, { "name": "--pf-c-select__menu--m-top--TranslateY", "description": "Select menu top transform Y", "default": "calc(-100% - var(--pf-global--spacer--xs, 0.25rem))" }, { "name": "--pf-c-select__list-item--m-loading--PaddingTop", "description": "Select list item loading top padding", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-global--spacer--2xl", "default": "3rem" }, { "name": "--pf-c-select__menu-item--FontWeight", "description": "Select menu item font weight", "default": "var(--pf-global--FontWeight--normal, 400)" }, { "name": "--pf-global--LineHeight--md", "default": "1.5" }, { "name": "--pf-c-select__menu-item--Color", "description": "Select menu item text color", "default": "var(--pf-global--Color--dark-100, #151515)" }, { "name": "--pf-global--Color--dark-100", "default": "#151515" }, { "name": "--pf-c-select__menu-item--disabled--Color", "description": "Select menu item disabled text color", "default": "var(--pf-global--Color--dark-200, #6a6e73)" }, { "name": "--pf-c-select__menu-item--Width", "description": "Select menu item width", "default": "100%" }, { "name": "--pf-c-select__menu-item--hover--BackgroundColor", "description": "Select menu item hover background color", "default": "var(--pf-global--BackgroundColor--light-300, #f0f0f0)" }, { "name": "--pf-c-select__menu-item--focus--BackgroundColor", "description": "Select menu item focus background color", "default": "var(--pf-global--BackgroundColor--light-300, #f0f0f0)" }, { "name": "--pf-global--BackgroundColor--light-300", "default": "#f0f0f0" }, { "name": "--pf-c-select__menu-item--disabled--BackgroundColor", "description": "Select menu item disabled background color", "default": "transparent" }, { "name": "--pf-c-select__menu-item--m-link--Width", "description": "Select menu item link width", "default": "auto" }, { "name": "--pf-c-select__menu-item--m-link--hover--BackgroundColor", "description": "Select menu item link hover background color", "default": "transparent" }, { "name": "--pf-c-select__menu-item--m-link--focus--BackgroundColor", "description": "Select menu item link focus background color", "default": "transparent" }, { "name": "--pf-c-select__menu-item--m-action--Color", "description": "Select menu item action color", "default": "var(--pf-global--Color--200, #6a6e73)" }, { "name": "--pf-c-select__menu-item--m-action--hover--Color", "description": "Select menu item action hover color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-select__menu-item--m-action--focus--Color", "description": "Select menu item action focus color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-select__menu-item--m-action--disabled--Color", "description": "Select menu item action disabled color", "default": "var(--pf-global--disabled-color--200, #d2d2d2)" }, { "name": "--pf-global--disabled-color--200", "default": "#d2d2d2" }, { "name": "--pf-c-select__menu-item--m-action--Width", "description": "Select menu item action width", "default": "auto" }, { "name": "--pf-c-select__menu-item--m-action--FontSize", "description": "Select menu item action font size", "default": "var(--pf-global--icon--FontSize--sm, 0.625rem)" }, { "name": "--pf-c-select__menu-item--m-action--hover--BackgroundColor", "description": "Select menu item action hover background color", "default": "transparent" }, { "name": "--pf-c-select__menu-item--m-action--focus--BackgroundColor", "description": "Select menu item action focus background color", "default": "transparent" }, { "name": "--pf-c-select__menu-item--hover__menu-item--m-action--Color", "description": "Select menu item hover action color", "default": "var(--pf-global--Color--200, #6a6e73)" }, { "name": "--pf-c-select__menu-item--m-favorite-action--Color", "description": "Select menu item favorite action color", "default": "var(--pf-global--Color--200, #6a6e73)" }, { "name": "--pf-c-select__menu-item--m-favorite-action--hover--Color", "description": "Select menu item favorite action hover color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-select__menu-item--m-favorite-action--focus--Color", "description": "Select menu item favorite action focus color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-global--Color--100", "default": "#151515" }, { "name": "--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color", "description": "Select menu wrapper favorite action color", "default": "var(--pf-global--palette--gold-400, #f0ab00)" }, { "name": "--pf-global--palette--gold-400", "default": "#f0ab00" }, { "name": "--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color", "description": "Select menu wrapper favorite action hover color", "default": "var(--pf-global--palette--gold-500, #c58c00)" }, { "name": "--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color", "description": "Select menu wrapper favorite action focus color", "default": "var(--pf-global--palette--gold-500, #c58c00)" }, { "name": "--pf-global--palette--gold-500", "default": "#c58c00" }, { "name": "--pf-c-select__menu-item--m-load--Color", "description": "Select menu item load color", "default": "var(--pf-global--link--Color, #06c)" }, { "name": "--pf-global--link--Color", "default": "#06c" }, { "name": "--pf-c-select__menu-item-icon--Color", "description": "Select menu item icon color", "default": "var(--pf-global--active-color--100, #06c)" }, { "name": "--pf-global--active-color--100", "default": "#06c" }, { "name": "--pf-c-select__menu-item-icon--FontSize", "description": "Select menu item icon font size", "default": "var(--pf-global--icon--FontSize--sm, 0.625rem)" }, { "name": "--pf-global--icon--FontSize--sm", "default": "0.625rem" }, { "name": "--pf-c-select__menu-item-icon--Right", "description": "Select menu item icon right position", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-select__menu-item-icon--Top", "description": "Select menu item icon top position", "default": "50%" }, { "name": "--pf-c-select__menu-item-icon--TranslateY", "description": "Select menu item icon transform Y", "default": "-50%" }, { "name": "--pf-c-select__menu-item-action-icon--MinHeight", "description": "Select menu item action icon minimum height", "default": "calc(var(--pf-c-select__menu-item--FontSize) * var(--pf-c-select__menu-item--LineHeight))" }, { "name": "--pf-c-select__menu-item--FontSize", "description": "Select menu item font size", "default": "var(--pf-global--FontSize--md, 1rem)" }, { "name": "--pf-c-select__menu-item--LineHeight", "description": "Select menu item line height", "default": "var(--pf-global--LineHeight--md, 1.5)" }, { "name": "--pf-c-select__menu-item--match--FontWeight", "description": "Select menu item match font weight", "default": "var(--pf-global--FontWeight--bold, 700)" }, { "name": "--pf-global--FontWeight--bold", "default": "700" }, { "name": "--pf-c-select__menu-search--PaddingTop", "description": "Select menu search top padding", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-select__menu-search--PaddingRight", "description": "Select menu search right padding", "default": "var(--pf-c-select__menu-item--PaddingRight)" }, { "name": "--pf-c-select__menu-search--PaddingBottom", "description": "Select menu search bottom padding", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-select__menu-search--PaddingLeft", "description": "Select menu search left padding", "default": "var(--pf-c-select__menu-item--PaddingLeft)" }, { "name": "--pf-c-select__menu-group--menu-group--PaddingTop", "description": "Select menu group top padding", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-select__menu-group-title--PaddingTop", "description": "Select menu group title top padding", "default": "var(--pf-c-select__menu-item--PaddingTop)" }, { "name": "--pf-c-select__menu-item--PaddingTop", "description": "Select menu item top padding", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-select__menu-group-title--PaddingRight", "description": "Select menu group title right padding", "default": "var(--pf-c-select__menu-item--PaddingRight)" }, { "name": "--pf-c-select__menu-group-title--PaddingBottom", "description": "Select menu group title bottom padding", "default": "var(--pf-c-select__menu-item--PaddingBottom)" }, { "name": "--pf-c-select__menu-item--PaddingBottom", "description": "Select menu item bottom padding", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-select__menu-group-title--PaddingLeft", "description": "Select menu group title left padding", "default": "var(--pf-c-select__menu-item--PaddingLeft)" }, { "name": "--pf-c-select__menu-item--PaddingLeft", "description": "Select menu item left padding", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-select__menu-group-title--FontSize", "description": "Select menu group title font size", "default": "var(--pf-global--FontSize--xs, 0.75rem)" }, { "name": "--pf-c-select__menu-group-title--FontWeight", "description": "Select menu group title font weight", "default": "var(--pf-global--FontWeight--normal, 400)" }, { "name": "--pf-c-select__menu-group-title--Color", "description": "Select menu group title color", "default": "var(--pf-global--Color--dark-200, #6a6e73)" }, { "name": "--pf-c-select__menu-item-count--MarginLeft", "description": "Select menu item count left margin", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-select__menu-item-count--FontSize", "description": "Select menu item count font size", "default": "var(--pf-global--FontSize--sm, 0.875rem)" }, { "name": "--pf-global--FontSize--sm", "default": "0.875rem" }, { "name": "--pf-c-select__menu-item-count--Color", "description": "Select menu item count color", "default": "var(--pf-global--Color--200, #6a6e73)" }, { "name": "--pf-c-select__menu-item--disabled__menu-item-count--Color", "description": "Select menu item disabled count color", "default": "var(--pf-global--Color--dark-200, #6a6e73)" }, { "name": "--pf-c-select__menu-item-description--FontSize", "description": "Select menu item description font size", "default": "var(--pf-global--FontSize--xs, 0.75rem)" }, { "name": "--pf-global--FontSize--xs", "default": "0.75rem" }, { "name": "--pf-c-select__menu-item-description--Color", "description": "Select menu item description color", "default": "var(--pf-global--Color--200, #6a6e73)" }, { "name": "--pf-global--Color--200", "default": "#6a6e73" }, { "name": "--pf-c-select__menu-item-description--PaddingRight", "description": "Select menu item description right padding", "default": "var(--pf-c-select__menu-item--PaddingRight)" }, { "name": "--pf-c-select__menu-item-main--PaddingRight", "description": "Select menu item main right padding", "default": "var(--pf-c-select__menu-item--PaddingRight)" }, { "name": "--pf-c-select__menu-item--PaddingRight", "description": "Select menu item right padding", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-select__menu-item--m-selected__menu-item-main--PaddingRight", "description": "Select menu item selected main right padding", "default": "var(--pf-c-select__menu-item--m-selected--PaddingRight)" }, { "name": "--pf-c-select__menu-item--m-selected--PaddingRight", "description": "Select menu item selected right padding", "default": "var(--pf-global--spacer--2xl, 3rem)" }, { "name": "--pf-c-select__menu-footer--BoxShadow", "description": "Select menu footer box shadow", "default": "var(--pf-global--BoxShadow--sm-top, 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16))" }, { "name": "--pf-global--BoxShadow--sm-top", "default": "0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)" }, { "name": "--pf-c-select__menu-footer--PaddingTop", "description": "Select menu footer top padding", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-select__menu-footer--PaddingRight", "description": "Select menu footer right padding", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-select__menu-footer--PaddingBottom", "description": "Select menu footer bottom padding", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-select__menu-footer--PaddingLeft", "description": "Select menu footer left padding", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-global--spacer--md", "default": "1rem" }, { "name": "--pf-c-select__menu-footer--MarginTop", "description": "Select menu footer top margin", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-select__menu-footer--MarginBottom", "description": "Select menu footer bottom margin", "default": "calc(var(--pf-global--spacer--sm, 0.5rem) * -1)" }, { "name": "--pf-c-list__item-icon--Color", "default": "#6a6e73" }, { "name": "--pf-theme--color--surface--lightest", "default": "#fff" }, { "name": "--pf-global--FontFamily--sans-serif", "default": "\"RedHatTextUpdated\", \"Overpass\", overpass, helvetica, arial, sans-serif" }, { "name": "--pf-global--FontSize--md", "default": "16px" }, { "name": "--pf-global--FontWeight--normal", "default": "400" }, { "name": "--pf-theme--color--text", "default": "#151515" }, { "name": "--pf-theme--color--accent", "default": "#0066cc" }, { "name": "--pf-global--Color--dark-200", "default": "#6a6e73" }, { "name": "--pf-theme--color--surface--lighter", "default": "#f0f0f0" }, { "name": "--pf-global--spacer--xs", "default": "0.25rem" }, { "name": "--pf-global--spacer--sm", "default": "0.5rem" }, { "name": "--pf-c-select__toggle--focus--before--BorderBottomColor", "description": "Select toggle focus border bottom color", "default": "var(--pf-global--active-color--100, #06c)" }, { "name": "--pf-c-select__toggle--focus--before--BorderBottomWidth", "description": "Select toggle focus border bottom width", "default": "var(--pf-global--BorderWidth--md, 2px)" }, { "name": "--pf-global--BorderWidth--sm", "default": "1px" }, { "name": "--pf-c-divider--BackgroundColor" }, { "name": "--pf-global--BorderColor--100", "default": "#d2d2d2" }, { "name": "--pf-c-divider--BorderColor--base" }, { "name": "--pf-c-divider--Height" }, { "name": "--pf-c-divider--BorderWidth--base" }, { "name": "--pf-c-divider--m-horizontal--Display" }, { "name": "--pf-c-divider--m-horizontal--FlexDirection" }, { "name": "--pf-c-divider--m-horizontal--after--Width" }, { "name": "--pf-c-divider--m-horizontal--after--Height" }, { "name": "--pf-c-divider--Display", "default": "flex" }, { "name": "--pf-c-divider--FlexDirection" }, { "name": "--pf-c-select-menu--c-divider--MarginTop", "description": "Select menu divider top margin", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-select-menu--c-divider--MarginBottom", "description": "Select menu divider bottom margin", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-divider--after--Width", "default": "100%" }, { "name": "--pf-c-divider--after--Height", "default": "1px" }, { "name": "--pf-c-divider--after--BackgroundColor" } ], "demos": [ { "url": "https://patternflyelements.org/components/select/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-select/demo/index.html" } }, { "url": "https://patternflyelements.org/components/select/demo/checkbox-input-no-badge/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-select/demo/checkbox-input-no-badge.html" } }, { "url": "https://patternflyelements.org/components/select/demo/checkbox-input/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-select/demo/checkbox-input.html" } }, { "url": "https://patternflyelements.org/components/select/demo/grouped-checkbox-input/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-select/demo/grouped-checkbox-input.html" } }, { "url": "https://patternflyelements.org/components/select/demo/grouped-single/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-select/demo/grouped-single.html" } }, { "url": "https://patternflyelements.org/components/select/demo/single-with-description/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-select/demo/single-with-description.html" } }, { "url": "https://patternflyelements.org/components/select/demo/typeahead/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-select/demo/typeahead.html" } } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "PfSelectChangeEvent", "declaration": { "name": "PfSelectChangeEvent", "module": "pf-select/pf-select.js" } }, { "kind": "custom-element-definition", "name": "pf-select", "declaration": { "name": "PfSelect", "module": "pf-select/pf-select.js" } }, { "kind": "js", "name": "PfSelect", "declaration": { "name": "PfSelect", "module": "pf-select/pf-select.js" } } ] }, { "kind": "javascript-module", "path": "pf-spinner/pf-spinner.js", "declarations": [ { "name": "PfSpinner", "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.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "size", "description": "Preset sizes for the spinner", "type": { "text": "'sm' | 'md' | 'lg' | 'xl'" }, "default": "'xl'", "kind": "field", "attribute": "size", "reflects": true }, { "name": "diameter", "description": "Custom diameter of spinner set as CSS variable", "type": { "text": "`${string}${'px' | '%' | 'rem' | 'em' | 'fr' | 'pt'}`" }, "kind": "field", "attribute": "diameter", "reflects": true } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-spinner/pf-spinner.ts#L17" }, "kind": "class", "tagName": "pf-spinner", "attributes": [ { "name": "size", "description": "Preset sizes for the spinner", "type": { "text": "'sm' | 'md' | 'lg' | 'xl'" }, "default": "'xl'", "fieldName": "size" }, { "name": "diameter", "description": "Custom diameter of spinner set as CSS variable", "type": { "text": "`${string}${'px' | '%' | 'rem' | 'em' | 'fr' | 'pt'}`" }, "fieldName": "diameter" } ], "cssProperties": [ { "name": "--pf-c-spinner--Width", "description": "Width for spinner", "default": "var(--pf-c-spinner--diameter,\n var(--pf-global--icon--FontSize--xl, 3.375rem))" }, { "name": "--pf-c-spinner--Height", "description": "Height for spinner", "default": "var(--pf-c-spinner--diameter,\n var(--pf-global--icon--FontSize--xl, 3.375rem))" }, { "name": "--pf-c-spinner--diameter", "description": "Diameter for spinner", "default": "var(--pf-global--icon--FontSize--xl, 3.375rem)" }, { "name": "--pf-c-spinner--AnimationTimingFunction", "description": "Animation timing function for spinner", "default": "linear" }, { "name": "--pf-c-spinner--Color", "description": "Color for spinner", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-global--primary-color--100", "default": "#06c" }, { "name": "--pf-c-spinner--stroke-width", "description": "Stroke width for spinner", "default": "10" }, { "name": "--pf-c-spinner--AnimationDuration", "default": "1.4s" }, { "name": "--pf-c-spinner__path--AnimationTimingFunction", "description": "Path animation timing function for spinner", "default": "ease-in-out" }, { "name": "--pf-c-spinner--m-sm--diameter", "default": "var(--pf-global--icon--FontSize--sm, 0.625rem)" }, { "name": "--pf-global--icon--FontSize--sm", "default": "0.625rem" }, { "name": "--pf-c-spinner--m-md--diameter", "default": "var(--pf-global--icon--FontSize--md, 1.125rem)" }, { "name": "--pf-global--icon--FontSize--md", "default": "1.125rem" }, { "name": "--pf-c-spinner--m-lg--diameter", "default": "var(--pf-global--icon--FontSize--lg, 1.5rem)" }, { "name": "--pf-global--icon--FontSize--lg", "default": "1.5rem" }, { "name": "--pf-c-spinner--m-xl--diameter", "default": "var(--pf-global--icon--FontSize--xl, 3.375rem)" }, { "name": "--pf-global--icon--FontSize--xl", "default": "3.375rem" }, { "name": "--pf-c-spinner__path--StrokeWidth", "default": "10" } ], "demos": [ { "url": "https://patternflyelements.org/components/spinner/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-spinner/demo/index.html" } }, { "url": "https://patternflyelements.org/components/spinner/demo/diameter/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-spinner/demo/diameter.html" } }, { "url": "https://patternflyelements.org/components/spinner/demo/size/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-spinner/demo/size.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-spinner", "declaration": { "name": "PfSpinner", "module": "pf-spinner/pf-spinner.js" } }, { "kind": "js", "name": "PfSpinner", "declaration": { "name": "PfSpinner", "module": "pf-spinner/pf-spinner.js" } } ] }, { "kind": "javascript-module", "path": "pf-switch/pf-switch.js", "declarations": [ { "name": "PfSwitch", "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.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "shadowRoot", "type": { "text": "ShadowRoot" }, "kind": "field" }, { "name": "label", "description": "Accessible label text for the switch", "type": { "text": "string" }, "kind": "field", "attribute": "label", "reflects": true }, { "name": "showCheckIcon", "description": "Flag to show if the switch has a check icon.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "show-check-icon", "reflects": true }, { "name": "checked", "description": "Flag to show if the switch is checked.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "checked", "reflects": true }, { "name": "disabled", "description": "Flag to show if the switch is disabled.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "disabled", "reflects": true }, { "name": "labels", "type": { "text": "NodeListOf\u003cHTMLLabelElement\u003e" }, "readonly": true, "kind": "field" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-switch/pf-switch.ts#L18" }, "kind": "class", "tagName": "pf-switch", "attributes": [ { "name": "label", "description": "Accessible label text for the switch", "type": { "text": "string" }, "fieldName": "label" }, { "name": "show-check-icon", "description": "Flag to show if the switch has a check icon.", "type": { "text": "boolean" }, "default": "false", "fieldName": "showCheckIcon" }, { "name": "checked", "description": "Flag to show if the switch is checked.", "type": { "text": "boolean" }, "default": "false", "fieldName": "checked" }, { "name": "disabled", "description": "Flag to show if the switch is disabled.", "type": { "text": "boolean" }, "default": "false", "fieldName": "disabled" } ], "events": [ { "name": "change", "description": "Fires when the switch selection changes.", "type": { "text": "Event" } } ], "cssProperties": [ { "name": "--pf-c-switch__input--checked__label--Color", "default": "var(--pf-global--Color--dark-100, #151515)" }, { "name": "--pf-global--Color--dark-100", "default": "#151515" }, { "name": "--pf-c-switch__input--checked__toggle--BackgroundColor", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-c-switch__input--focus__toggle--OutlineWidth", "default": "var(--pf-global--BorderWidth--md, 2px)" }, { "name": "--pf-global--BorderWidth--md", "default": "2px" }, { "name": "--pf-c-switch__input--focus__toggle--OutlineColor", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-global--primary-color--100", "default": "#06c" }, { "name": "--pf-c-switch__input--focus__toggle--OutlineOffset", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-global--spacer--sm", "default": "0.5rem" }, { "name": "--pf-c-switch__input--disabled__label--Color", "default": "var(--pf-global--disabled-color--100, #6a6e73)" }, { "name": "--pf-global--disabled-color--100", "default": "#6a6e73" }, { "name": "--pf-c-switch__input--disabled__toggle--BackgroundColor", "default": "var(--pf-global--disabled-color--200, #d2d2d2)" }, { "name": "--pf-global--disabled-color--200", "default": "#d2d2d2" }, { "name": "--pf-c-switch__input--disabled__toggle--before--BackgroundColor", "default": "var(--pf-global--palette--black-150, #f5f5f5)" }, { "name": "--pf-global--palette--black-150", "default": "#f5f5f5" }, { "name": "--pf-c-switch__input--checked__toggle--before--TranslateX", "default": "calc(100% + var(--pf-c-switch__toggle-icon--Offset, 0.125rem))" }, { "name": "--pf-c-switch__toggle--Width", "description": "Width of the toggle", "default": "calc(var(--pf-c-switch__toggle--Height,\n calc(var(--pf-c-switch--FontSize,\n var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,\n var(--pf-global--LineHeight--md, 1.5)))) + var(--pf-c-switch__toggle-icon--Offset, 0.125rem) + var(--pf-c-switch__toggle--before--Width,\n calc(var(--pf-c-switch--FontSize,\n var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem))))" }, { "name": "--pf-c-switch__toggle--BackgroundColor", "description": "Background color of the toggle", "default": "var(--pf-global--palette--black-500, #8a8d90)" }, { "name": "--pf-global--palette--black-500", "default": "#8a8d90" }, { "name": "--pf-c-switch__toggle--BorderRadius", "description": "Border radius of the toggle", "default": "var(--pf-c-switch__toggle--Height, calc(var(--pf-c-switch--FontSize,\n var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,\n var(--pf-global--LineHeight--md, 1.5))))" }, { "name": "--pf-c-switch__toggle--before--Left", "description": "Left position of the toggle knob", "default": "var(--pf-c-switch__toggle--before--Top,\n calc((var(--pf-c-switch__toggle--Height,\n calc(var(--pf-c-switch--FontSize,\n var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,\n var(--pf-global--LineHeight--md, 1.5)))) - var(--pf-c-switch__toggle--before--Height,\n var(--pf-c-switch__toggle--before--Width,\n calc(var(--pf-c-switch--FontSize,\n var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem))))) / 2))" }, { "name": "--pf-c-switch__toggle--before--Top", "description": "Top position of the toggle knob", "default": "calc((var(--pf-c-switch__toggle--Height,\n calc(var(--pf-c-switch--FontSize,\n var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,\n var(--pf-global--LineHeight--md, 1.5)))) - var(--pf-c-switch__toggle--before--Height,\n var(--pf-c-switch__toggle--before--Width,\n calc(var(--pf-c-switch--FontSize,\n var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem))))) / 2)" }, { "name": "--pf-c-switch__toggle--Height", "default": "calc(var(--pf-c-switch--FontSize,\n var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,\n var(--pf-global--LineHeight--md, 1.5)))" }, { "name": "--pf-c-switch--LineHeight", "default": "var(--pf-global--LineHeight--md, 1.5)" }, { "name": "--pf-global--LineHeight--md", "default": "1.5" }, { "name": "--pf-c-switch__toggle--before--Height", "description": "Height of the toggle knob", "default": "var(--pf-c-switch__toggle--before--Width,\n calc(var(--pf-c-switch--FontSize,\n var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem)))" }, { "name": "--pf-c-switch__toggle--before--Width", "description": "Width of the toggle knob", "default": "calc(var(--pf-c-switch--FontSize,\n var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem))" }, { "name": "--pf-c-switch__toggle-icon--Offset", "default": "0.125rem" }, { "name": "--pf-c-switch__toggle--before--backgroundcolor", "description": "Background color of the toggle knob", "default": "var(--pf-global--backgroundcolor--100, #fff)" }, { "name": "--pf-global--backgroundcolor--100", "default": "#fff" }, { "name": "--pf-c-switch__toggle--before--BorderRadius", "description": "Border radius of the toggle knob", "default": "var(--pf-global--BorderRadius--lg, 30em)" }, { "name": "--pf-global--BorderRadius--lg", "default": "30em" }, { "name": "--pf-c-switch__toggle--before--BoxShadow", "description": "Box shadow of the toggle knob", "default": "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))" }, { "name": "--pf-global--BoxShadow--md", "default": "0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)" }, { "name": "--pf-c-switch__toggle--before--Transition", "description": "Transition of the toggle knob", "default": "translate .25s ease 0s" }, { "name": "--pf-c-switch__toggle-icon--Left", "description": "Horizontal margin of the toggle icon", "default": "calc(var(--pf-c-switch--FontSize,\n var(--pf-global--FontSize--md, 1rem)) * .4)" }, { "name": "--pf-c-switch__toggle-icon--FontSize", "description": "Font size of the toggle icon", "default": "calc(var(--pf-c-switch--FontSize,\n var(--pf-global--FontSize--md, 1rem)) * .625)" }, { "name": "--pf-c-switch--FontSize", "default": "var(--pf-global--FontSize--md, 1rem)" }, { "name": "--pf-global--FontSize--md", "default": "1rem" }, { "name": "--pf-c-switch__toggle-icon--Color", "description": "Color of the toggle icon", "default": "var(--pf-global--Color--light-100, #fff)" }, { "name": "--pf-global--Color--light-100", "default": "#fff" } ], "demos": [ { "url": "https://patternflyelements.org/components/switch/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-switch/demo/index.html" } }, { "url": "https://patternflyelements.org/components/switch/demo/checked/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-switch/demo/checked.html" } }, { "url": "https://patternflyelements.org/components/switch/demo/disabled/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-switch/demo/disabled.html" } }, { "url": "https://patternflyelements.org/components/switch/demo/nested-in-label/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-switch/demo/nested-in-label.html" } }, { "url": "https://patternflyelements.org/components/switch/demo/reversed/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-switch/demo/reversed.html" } }, { "url": "https://patternflyelements.org/components/switch/demo/without-label/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-switch/demo/without-label.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-switch", "declaration": { "name": "PfSwitch", "module": "pf-switch/pf-switch.js" } }, { "kind": "js", "name": "PfSwitch", "declaration": { "name": "PfSwitch", "module": "pf-switch/pf-switch.js" } } ] }, { "kind": "javascript-module", "path": "pf-table/context.js", "declarations": [ { "name": "thRoleContext", "type": { "text": ": {\n __context__: unknown;\n}" }, "kind": "variable", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-table/context.ts#L3" } } ], "exports": [ { "kind": "js", "name": "thRoleContext", "declaration": { "name": "thRoleContext", "module": "pf-table/context.js" } } ] }, { "kind": "javascript-module", "path": "pf-table/pf-caption.js", "declarations": [ { "name": "PfCaption", "description": "Caption", "superclass": { "name": "LitElement", "package": "lit" }, "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-table/pf-caption.ts#L11" }, "kind": "class", "tagName": "pf-caption", "slots": [ { "name": "", "description": "Place element content here" } ], "cssProperties": [ { "name": "--pf-c-table-caption--PaddingTop", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-table-caption--PaddingRight", "default": "var(--pf-global--spacer--lg, 1.5rem)" }, { "name": "--pf-c-table-caption--PaddingBottom", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-global--spacer--md", "default": "1rem" }, { "name": "--pf-c-table-caption--PaddingLeft", "default": "var(--pf-global--spacer--lg, 1.5rem)" }, { "name": "--pf-global--spacer--lg", "default": "1.5rem" }, { "name": "--pf-c-table-caption--FontSize", "default": "var(--pf-global--FontSize--sm, 0.875rem)" }, { "name": "--pf-global--FontSize--sm", "default": "0.875rem" }, { "name": "--pf-c-table-caption--Color", "default": "var(--pf-global--Color--200, #6a6e73)" }, { "name": "--pf-global--Color--200", "default": "#6a6e73" }, { "name": "--pf-c-table--BackgroundColor" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-caption", "declaration": { "name": "PfCaption", "module": "pf-table/pf-caption.js" } }, { "kind": "js", "name": "PfCaption", "declaration": { "name": "PfCaption", "module": "pf-table/pf-caption.js" } } ] }, { "kind": "javascript-module", "path": "pf-table/pf-table.js", "declarations": [ { "name": "PfTable", "description": "A **table** is used to display large data sets that can be easily laid out in a simple grid with column headers.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "rows", "type": { "text": "NodeListOf\u003cPfTr\u003e" }, "readonly": true, "kind": "field" }, { "parameters": [ { "name": "columnIndexToSort", "type": { "text": "number" } }, { "name": "node", "type": { "text": "Element" } } ], "name": "getNodeContentForSort", "kind": "method", "static": true, "privacy": "private" }, { "parameters": [ { "name": "direction", "type": { "text": "'asc' | 'desc'" } }, { "name": "a", "type": { "text": "{ content: string }" } }, { "name": "b", "type": { "text": "{ content: string }" } } ], "name": "sortByContent", "kind": "method", "static": true, "privacy": "private" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-table/pf-table.ts#L34" }, "kind": "class", "tagName": "pf-table", "slots": [ { "name": "", "description": "The default slot can hold an optional `pf-caption` element and a combination of `pf-tr`, `pf-thead`, or `pf-tbody` elements." } ], "cssProperties": [ { "name": "--pf-c-table--BackgroundColor", "description": "Table background color", "default": "var(--pf-global--BackgroundColor--100, #fff)" }, { "name": "--pf-c-table--BorderColor", "description": "Table border color", "default": "var(--pf-global--BorderColor--100, #d2d2d2)" }, { "name": "--pf-c-table-caption--FontSize", "description": "Table caption font size", "default": "var(--pf-global--FontSize--sm, 0.875rem)" }, { "name": "--pf-c-table-caption--Color", "description": "Table caption color", "default": "var(--pf-global--Color--200, #6a6e73)" }, { "name": "--pf-c-table-caption--PaddingTop", "description": "Table caption top padding", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-table-caption--PaddingRight", "description": "Table caption right padding", "default": "var(--pf-global--spacer--lg, 1.5rem)" }, { "name": "--pf-c-table-caption--PaddingBottom", "description": "Table caption bottom padding", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-table-caption--PaddingLeft", "description": "Table caption left padding", "default": "var(--pf-global--spacer--lg, 1.5rem)" }, { "name": "--pf-c-table-caption--xl--PaddingRight", "description": "Table XL caption right padding", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-table-caption--xl--PaddingLeft", "description": "Table XL caption left padding", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-table--thead--cell--FontSize", "description": "Table head cell font size", "default": "var(--pf-global--FontSize--sm, 0.875rem)" }, { "name": "--pf-c-table--thead--cell--FontWeight", "description": "Table head cell font weight", "default": "var(--pf-global--FontWeight--bold, 700)" }, { "name": "--pf-global--FontWeight--bold", "default": "700" }, { "name": "--pf-c-table--tbody--cell--PaddingTop", "description": "Table body cell padding top", "default": "var(--pf-global--spacer--lg, 1.5rem)" }, { "name": "--pf-c-table--tbody--cell--PaddingBottom", "description": "Table body cell padding bottom", "default": "var(--pf-global--spacer--lg)" }, { "name": "--pf-c-table--cell--FontSize", "description": "Table cell font size", "default": "var(--pf-global--FontSize--md, 1rem)" }, { "name": "--pf-c-table--cell--FontWeight", "description": "Table cell font weight", "default": "var(--pf-global--FontWeight--normal, 400)" }, { "name": "--pf-global--FontWeight--normal", "default": "400" }, { "name": "--pf-c-table--cell--Color", "description": "Table cell color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-table--cell--first-last-child--PaddingLeft", "description": "Table cell last child left padding", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-table--cell--first-last-child--PaddingRight", "description": "Table cell last child right padding", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-table--cell--first-last-child--xl--PaddingLeft", "description": "Table XL cell last child left padding", "default": "var(--pf-global--spacer--lg, 1.5rem)" }, { "name": "--pf-c-table--cell--first-last-child--xl--PaddingRight", "description": "Table XL cell last child right padding", "default": "var(--pf-global--spacer--lg, 1.5rem)" }, { "name": "--pf-c-table--tr--m-first-cell-offset-reset--cell--PaddingLeft", "description": "Table row first cell offset reset cell left padding", "default": "var(--pf-c-table--cell--Padding--base)" }, { "name": "--pf-c-table--cell--Padding--base", "description": "Table cell base padding", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-table--cell--MinWidth", "description": "Table cell min width", "default": "0" }, { "name": "--pf-c-table--cell--MaxWidth", "description": "Table cell max width", "default": "none" }, { "name": "--pf-c-table--cell--Width", "description": "Table cell width", "default": "auto" }, { "name": "--pf-c-table--cell--Overflow", "description": "Table cell overflow", "default": "visible" }, { "name": "--pf-c-table--cell--TextOverflow", "description": "Table cell text overflow", "default": "clip" }, { "name": "--pf-c-table--cell--WhiteSpace", "description": "Table cell white space", "default": "normal" }, { "name": "--pf-c-table--cell--WordBreak", "description": "Table cell word break", "default": "normal" }, { "name": "--pf-c-table--cell--m-border-right--before--BorderRightWidth", "description": "Table cell before right border width", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-c-table--cell--m-border-right--before--BorderRightColor", "description": "Table cell before right border color", "default": "var(--pf-global--BorderColor--100, #d2d2d2)" }, { "name": "--pf-c-table--cell--m-border-left--before--BorderLeftWidth", "description": "Table cell before left border width", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-c-table--cell--m-border-left--before--BorderLeftColor", "description": "Table cell before left border color", "default": "var(--pf-global--BorderColor--100, #d2d2d2)" }, { "name": "--pf-c-table--cell--m-help--MinWidth", "description": "Help cell minimum width", "default": "11ch" }, { "name": "--pf-c-table--m-truncate--cell--MaxWidth", "description": "Help cell maximum width", "default": "1px" }, { "name": "--pf-c-table--m-truncate--cell--MinWidth", "description": "Truncated cell minimum width", "default": "calc(5ch + var(--pf-c-table--cell--PaddingRight) + var(--pf-c-table--cell--PaddingLeft))" }, { "name": "--pf-c-table--cell--hidden-visible--Display", "description": "Cell visible display", "default": "table-cell" }, { "name": "--pf-c-table__toggle--c-button--MarginTop", "description": "Toggle button top margin", "default": "calc(0.375rem * -1)" }, { "name": "--pf-c-table__toggle--c-button--MarginBottom", "description": "Toggle button bottom margin", "default": "calc(0.375rem * -1)" }, { "name": "--pf-c-table__toggle--c-button__toggle-icon--Rotate", "description": "Toggle button icon rotation", "default": "270deg" }, { "name": "--pf-c-table__toggle--c-button__toggle-icon--Transition", "description": "Toggle button icon transition", "default": ".2s ease-in 0s" }, { "name": "--pf-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate", "description": "Expanded toggle button icon rotation", "default": "360deg" }, { "name": "--pf-c-table__button--BackgroundColor", "description": "Button background color", "default": "transparent" }, { "name": "--pf-c-table__button--Color", "description": "Button color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-table__button--hover--Color", "description": "Button hover color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-table__button--focus--Color", "description": "Button focus color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-table__button--active--Color", "description": "Button active color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-table__button--OutlineOffset", "description": "Button outline offset", "default": "calc(var(--pf-global--BorderWidth--lg, 3px) * -1)" }, { "name": "--pf-c-table--m-compact__toggle--PaddingTop", "description": "Compact toggle top padding", "default": "0" }, { "name": "--pf-c-table--m-compact__toggle--PaddingBottom", "description": "Compact toggle bottom padding", "default": "0" }, { "name": "--pf-c-table__check--input--MarginTop", "description": "Check input top margin", "default": "0.25rem" }, { "name": "--pf-c-table__check--input--FontSize", "description": "Check input font size", "default": "var(--pf-global--FontSize--md, 1rem)" }, { "name": "--pf-global--FontSize--md", "default": "1rem" }, { "name": "--pf-c-table--cell--m-favorite--Color", "description": "Favorite cell color", "default": "var(--pf-global--Color--light-300, #d2d2d2)" }, { "name": "--pf-c-table__favorite--c-button--Color", "description": "Favorite button color", "default": "var(--pf-global--Color--light-300, #d2d2d2)" }, { "name": "--pf-global--Color--light-300", "default": "#d2d2d2" }, { "name": "--pf-c-table__favorite--c-button--FontSize", "description": "Favorite button font size", "default": "var(--pf-global--FontSize--sm, 0.875rem)" }, { "name": "--pf-c-table__favorite--m-favorited--c-button--Color", "description": "Favorited button color", "default": "var(--pf-global--palette--gold-400, #f0ab00)" }, { "name": "--pf-global--palette--gold-400", "default": "#f0ab00" }, { "name": "--pf-c-table__sort--m-favorite__button__text--Color", "description": "Favorite sort button text color", "default": "var(--pf-global--Color--200, #6a6e73)" }, { "name": "--pf-c-table__sort--m-favorite__button--hover__text--Color", "description": "Favorite sort button hover text color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-table__sort--m-favorite__button--focus__text--Color", "description": "Favorite sort button focus text color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-table__sort--m-favorite__button--active__text--Color", "description": "Favorite sort button active text color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-table__draggable--c-button--MarginTop", "description": "Draggable button top margin", "default": "calc(var(--pf-global--spacer--form-element, 0.375rem) * -1)" }, { "name": "--pf-c-table__draggable--c-button--MarginRight", "description": "Draggable button right margin", "default": "calc(var(--pf-global--spacer--md, 1rem) * -1)" }, { "name": "--pf-c-table__draggable--c-button--MarginBottom", "description": "Draggable button bottom margin", "default": "calc(var(--pf-global--spacer--form-element, 0.375rem) * -1)" }, { "name": "--pf-c-table__draggable--c-button--MarginLeft", "description": "Draggable button left margin", "default": "calc(var(--pf-global--spacer--md, 1rem) * -1)" }, { "name": "--pf-c-table__tr--m-ghost-row--Opacity", "description": "Ghost row opacity", "default": ".4" }, { "name": "--pf-c-table__tr--m-ghost-row--BackgroundColor", "description": "Ghost row background color", "default": "var(--pf-global--BackgroundColor--100, #fff)" }, { "name": "--pf-c-table__action--PaddingTop", "description": "Action top padding", "default": "0" }, { "name": "--pf-c-table__action--PaddingRight", "description": "Action right padding", "default": "0" }, { "name": "--pf-c-table__action--PaddingBottom", "description": "Action bottom padding", "default": "0" }, { "name": "--pf-c-table__action--PaddingLeft", "description": "Action left padding", "default": "0" }, { "name": "--pf-c-table__inline-edit-action--PaddingTop", "description": "Inline edit action top padding", "default": "0" }, { "name": "--pf-c-table__inline-edit-action--PaddingRight", "description": "Inline edit action right padding", "default": "0" }, { "name": "--pf-c-table__inline-edit-action--PaddingBottom", "description": "Inline edit action bottom padding", "default": "0" }, { "name": "--pf-c-table__inline-edit-action--PaddingLeft", "description": "Inline edit action left padding", "default": "0" }, { "name": "--pf-c-table__expandable-row--Transition", "description": "Expandable row transition", "default": "var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1))" }, { "name": "--pf-c-table__expandable-row--MaxHeight", "description": "Expandable row max height", "default": "28.125rem" }, { "name": "--pf-c-table__expandable-row-content--Transition", "description": "Expandable row content transition", "default": "var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1))" }, { "name": "--pf-global--Transition", "default": "all 250ms cubic-bezier(0.42, 0, 0.58, 1)" }, { "name": "--pf-c-table__expandable-row-content--PaddingTop", "description": "Expandable row content top padding", "default": "var(--pf-global--spacer--lg, 1.5rem)" }, { "name": "--pf-c-table__expandable-row-content--PaddingBottom", "description": "Expandable row content bottom padding", "default": "var(--pf-global--spacer--lg, 1.5rem)" }, { "name": "--pf-c-table__expandable-row--after--Top", "description": "Expandable row after top", "default": "calc(var(--pf-c-table--border-width--base) * -1)" }, { "name": "--pf-c-table__expandable-row--after--Bottom", "description": "Expandable row after bottom", "default": "calc(var(--pf-c-table--border-width--base) * -1)" }, { "name": "--pf-c-table--border-width--base", "description": "Table border base width", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-c-table__expandable-row--after--BorderLeftWidth", "description": "Expandable row after left border width", "default": "0" }, { "name": "--pf-c-table__expandable-row--after--BorderColor", "description": "Expandable row after border color", "default": "var(--pf-global--active-color--100, #06c)" }, { "name": "--pf-c-table__icon-inline--MarginRight", "description": "Inline icon right margin", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-table__sort--MinWidth", "description": "Sort button minimum width", "default": "calc(6ch + var(--pf-c-table--cell--PaddingRight) + var(--pf-c-table--cell--PaddingLeft) + var(--pf-c-table__sort-indicator--MarginLeft))" }, { "name": "--pf-c-table__sort__button--PaddingRight", "description": "Sort button right padding", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-table__sort__button--MarginTop", "description": "Sort button top margin", "default": "calc(var(--pf-c-table__sort__button--PaddingTop) * -1)" }, { "name": "--pf-c-table__sort__button--PaddingTop", "description": "Sort button top padding", "default": "var(--pf-global--spacer--form-element, 0.375rem)" }, { "name": "--pf-c-table__sort__button--MarginBottom", "description": "Sort button bottom margin", "default": "calc(var(--pf-c-table__sort__button--PaddingBottom) * -1)" }, { "name": "--pf-c-table__sort__button--PaddingBottom", "description": "Sort button bottom padding", "default": "var(--pf-global--spacer--form-element, 0.375rem)" }, { "name": "--pf-c-table__sort__button--MarginLeft", "description": "Sort button left margin", "default": "calc(var(--pf-c-table__sort__button--PaddingLeft) * -1)" }, { "name": "--pf-c-table__sort__button--PaddingLeft", "description": "Sort button left padding", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-table__sort__button--Color", "description": "Sort button color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-table__sort--m-selected__button--Color", "description": "Selected sort button color", "default": "var(--pf-global--active-color--100, #06c)" }, { "name": "--pf-c-table__sort--m-help--MinWidth", "description": "Help button minimum width", "default": "15ch" }, { "name": "--pf-c-table__sort__button__text--Color", "description": "Sort button text color", "default": "currentcolor" }, { "name": "--pf-c-table__sort__button--hover__text--Color", "description": "Sort button hover text color", "default": "currentcolor" }, { "name": "--pf-c-table__sort__button--focus__text--Color", "description": "Sort button focus text color", "default": "currentcolor" }, { "name": "--pf-c-table__sort__button--active__text--Color", "description": "Sort button active text color", "default": "currentcolor" }, { "name": "--pf-c-table__sort-indicator--Color", "description": "Sort indicator color", "default": "var(--pf-global--disabled-color--200, #d2d2d2)" }, { "name": "--pf-global--disabled-color--200", "default": "#d2d2d2" }, { "name": "--pf-c-table__sort-indicator--MarginLeft", "description": "Sort indicator left margin", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-table__sort--m-selected__sort-indicator--Color", "description": "Selected sort indicator color", "default": "var(--pf-global--active-color--100, #06c)" }, { "name": "--pf-c-table__sort__button--hover__sort-indicator--Color", "description": "Sort button hover sort indicator color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-table__sort__button--active__sort-indicator--Color", "description": "Sort button active sort indicator color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-table__sort__button--focus__sort-indicator--Color", "description": "Sort button focus sort indicator color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-table--th--m-help--MinWidth", "description": "Header cell help minimum width", "default": "11ch" }, { "name": "--pf-c-table__column-help--MarginLeft", "description": "Help column left margin", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-table__column-help--TranslateY", "description": "Help column translate y axis", "default": "0.125rem" }, { "name": "--pf-c-table__column-help--c-button--MarginTop", "description": "Help column button top margin", "default": "calc(var(--pf-global--spacer--form-element, 0.375rem) * -1)" }, { "name": "--pf-c-table__column-help--c-button--MarginBottom", "description": "Help column button bottom margin", "default": "calc(var(--pf-global--spacer--form-element, 0.375rem) * -1)" }, { "name": "--pf-global--spacer--form-element", "default": "0.375rem" }, { "name": "--pf-c-table__column-help--c-button--PaddingRight", "description": "Help column button right padding", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-table__column-help--c-button--PaddingLeft", "description": "Help column button left margin", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-table__compound-expansion-toggle__button--Color", "description": "Compound expansion toggle button color", "default": "var(--pf-global--active-color--100, #06c)" }, { "name": "--pf-c-table__compound-expansion-toggle__button--hover--Color", "description": "Compound expansion hover toggle button color", "default": "var(--pf-global--link--Color--hover, #004080)" }, { "name": "--pf-c-table__compound-expansion-toggle__button--focus--Color", "description": "Compound expansion focus toggle button color", "default": "var(--pf-global--link--Color--hover, #004080)" }, { "name": "--pf-c-table__compound-expansion-toggle__button--active--Color", "description": "Compound expansion active toggle button color", "default": "var(--pf-global--link--Color--hover, #004080)" }, { "name": "--pf-global--link--Color--hover", "default": "#004080" }, { "name": "--pf-global--BorderWidth--sm", "default": "1px" }, { "name": "--pf-c-table__compound-expansion-toggle__button--before--BorderColor", "description": "Compound expansion toggle button before border color", "default": "var(--pf-global--BorderColor--100, #d2d2d2)" }, { "name": "--pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth", "description": "Compound expansion toggle button before right border width", "default": "0" }, { "name": "--pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth", "description": "Compound expansion toggle button before left border width", "default": "0" }, { "name": "--pf-c-table__compound-expansion-toggle__button--before--Bottom", "description": "Compound expansion toggle button before bottom", "default": "calc(var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base) * -1)" }, { "name": "--pf-c-table__compound-expansion-toggle__button--before--Left", "description": "Compound expansion toggle button before left", "default": "calc(var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base) * -1)" }, { "name": "--pf-c-table__compound-expansion-toggle__button--after--border-width--base", "description": "Compound expansion toggle button after base border width", "default": "var(--pf-global--BorderWidth--lg, 3px)" }, { "name": "--pf-global--BorderWidth--lg", "default": "3px" }, { "name": "--pf-c-table__compound-expansion-toggle__button--after--BorderColor", "description": "Compound expansion toggle button after border color", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-global--primary-color--100", "default": "#06c" }, { "name": "--pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth", "description": "Compound expansion toggle button after top border width", "default": "0" }, { "name": "--pf-c-table__compound-expansion-toggle__button--after--Top", "description": "Compound expansion toggle button after top", "default": "calc(var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base) * -1)" }, { "name": "--pf-c-table__compound-expansion-toggle__button--after--Left", "description": "Compound expansion toggle button after left", "default": "calc(var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base) * -1)" }, { "name": "--pf-c-table__compound-expansion-toggle__button--before--border-width--base", "description": "Compound expansion toggle button before border width", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-c-table--m-compact-th--PaddingTop", "description": "Compact header cell top padding", "default": "calc(var(--pf-global--spacer--sm, 0.5rem) + var(--pf-global--spacer--xs))" }, { "name": "--pf-c-table--m-compact-th--PaddingBottom", "description": "Compact header cell bottom padding", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-table--m-compact--cell--PaddingTop", "description": "Compact cell top padding", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-table--m-compact--cell--PaddingRight", "description": "Compact cell right padding", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-table--m-compact--cell--PaddingBottom", "description": "Compact cell bottom padding", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-table--m-compact--cell--PaddingLeft", "description": "Compact cell left padding", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-global--spacer--sm", "default": "0.5rem" }, { "name": "--pf-global--spacer--md", "default": "1rem" }, { "name": "--pf-c-table--m-compact--cell--first-last-child--xl--PaddingLeft", "description": "Compact cell first child XL left padding", "default": "var(--pf-global--spacer--lg, 1.5rem)" }, { "name": "--pf-c-table--m-compact--cell--first-last-child--xl--PaddingRight", "description": "Compact cell first child XL right padding", "default": "var(--pf-global--spacer--lg, 1.5rem)" }, { "name": "--pf-c-table--m-compact--FontSize", "description": "Compact font size", "default": "var(--pf-global--FontSize--sm, 0.875rem)" }, { "name": "--pf-global--FontSize--sm", "default": "0.875rem" }, { "name": "--pf-c-table--m-compact__expandable-row-content--PaddingTop", "description": "Compact expandable row content top padding", "default": "var(--pf-global--spacer--lg, 1.5rem)" }, { "name": "--pf-c-table--m-compact__expandable-row-content--PaddingRight", "description": "Compact expandable row content right padding", "default": "var(--pf-global--spacer--lg, 1.5rem)" }, { "name": "--pf-c-table--m-compact__expandable-row-content--PaddingBottom", "description": "Compact expandable row content bottom padding", "default": "var(--pf-global--spacer--lg, 1.5rem)" }, { "name": "--pf-c-table--m-compact__expandable-row-content--PaddingLeft", "description": "Compact expandable row content left padding", "default": "var(--pf-global--spacer--lg, 1.5rem)" }, { "name": "--pf-global--spacer--lg", "default": "1.5rem" }, { "name": "--pf-c-table--nested--first-last-child--PaddingRight", "description": "Nested first child right padding", "default": "var(--pf-c-table--m-compact--cell--first-last-child--PaddingLeft)" }, { "name": "--pf-c-table--m-compact--cell--first-last-child--PaddingLeft", "description": "Compact cell first child left padding", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-table--nested--first-last-child--PaddingLeft", "description": "Nested first child left padding", "default": "var(--pf-c-table--m-compact--cell--first-last-child--PaddingRight)" }, { "name": "--pf-c-table--m-compact--cell--first-last-child--PaddingRight", "description": "Compact cell first child right padding", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-table__expandable-row--m-expanded--BorderBottomColor", "description": "Expandable row expanded bottom border color", "default": "var(--pf-global--BorderColor--100, #d2d2d2)" }, { "name": "--pf-global--BorderColor--100", "default": "#d2d2d2" }, { "name": "--pf-c-table--tr--m-hoverable--BackgroundColor", "description": "Hoverable table row background color", "default": "transparent" }, { "name": "--pf-c-table--tr--m-hoverable--BoxShadow", "description": "Hoverable table row box shadow", "default": "none" }, { "name": "--pf-c-table--tr--m-hoverable--OutlineOffset", "description": "Hoverable table row outline offset", "default": "calc(-1 * var(--pf-global--spacer--xs, 0.25rem))" }, { "name": "--pf-c-table--tr--m-hoverable--hover--BoxShadow", "description": "Hoverable table row hover box shadow", "default": "var(--pf-c-table--tr--m-hoverable--BoxShadow--top)" }, { "name": "--pf-c-table--tr--m-hoverable--hover--BackgroundColor", "description": "Hoverable table row hover background color", "default": "var(--pf-global--BackgroundColor--100, #fff)" }, { "name": "--pf-c-table--tr--m-hoverable--focus--BoxShadow", "description": "Hoverable table row focus box shadow", "default": "var(--pf-c-table--tr--m-hoverable--BoxShadow--top)" }, { "name": "--pf-c-table--tr--m-hoverable--focus--BackgroundColor", "description": "Hoverable table row focus background color", "default": "var(--pf-global--BackgroundColor--100, #fff)" }, { "name": "--pf-c-table--tr--m-hoverable--active--BoxShadow", "description": "Hoverable table row active box shadow", "default": "var(--pf-c-table--tr--m-hoverable--BoxShadow--top)" }, { "name": "--pf-c-table--tr--m-hoverable--BoxShadow--top", "description": "Hoverable table row top box shadow", "default": "var(--pf-c-table--tr--BoxShadow--top--base)" }, { "name": "--pf-c-table--tr--m-hoverable--active--BackgroundColor", "description": "Hoverable table row active background color", "default": "var(--pf-global--BackgroundColor--100, #fff)" }, { "name": "--pf-c-table--tr--m-hoverable--m-selected--BoxShadow", "description": "Hoverable table row selected box shadow", "default": "var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)) inset" }, { "name": "--pf-c-table--tr--m-selected--BackgroundColor", "description": "Selected table row background color", "default": "var(--pf-global--BackgroundColor--100, #fff)" }, { "name": "--pf-c-table--tr--m-selected--BoxShadow", "description": "Selected table row box shadow", "default": "var(--pf-c-table--tr--m-selected--BoxShadow--top)" }, { "name": "--pf-c-table--tr--m-selected--OutlineOffset", "description": "Selected table row outline offset", "default": "calc(-1 * var(--pf-global--spacer--xs, 0.25rem))" }, { "name": "--pf-c-table--tr--m-selected--after--BorderLeftWidth", "description": "Selected table row after left border width", "default": "var(--pf-c-table__expandable-row--after--border-width--base)" }, { "name": "--pf-c-table--tr--m-selected--after--BorderLeftColor", "description": "Selected table row after left border color", "default": "var(--pf-global--active-color--100, #06c)" }, { "name": "--pf-c-table--tr--m-selected--m-selected--BoxShadow", "description": "Selected table row box shadow", "default": "var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16))" }, { "name": "--pf-c-table--tr--m-selected--hover--m-selected--BoxShadow", "description": "Selected table row hover box shadow", "default": "var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)) inset" }, { "name": "--pf-c-table--tr--m-selected--tr--m-selected--hover--BoxShadow", "description": "Selected table row hover box shadow", "default": "var(--pf-c-table--tr--m-selected--BoxShadow--top)" }, { "name": "--pf-c-table--tbody--m-hoverable--BoxShadow", "description": "Hoverable table body box shadow", "default": "none" }, { "name": "--pf-c-table--tbody--m-hoverable--BackgroundColor", "description": "Hoverable table body background color", "default": "transparent" }, { "name": "--pf-c-table--tbody--m-hoverable--OutlineOffset", "description": "Hoverable table body outline offset", "default": "calc(-1 * var(--pf-global--spacer--xs, 0.25rem))" }, { "name": "--pf-c-table--tbody--m-hoverable--hover--BoxShadow", "description": "Hoverable table body hover box shadow", "default": "var(--pf-c-table--tbody--m-hoverable--BoxShadow--top)" }, { "name": "--pf-c-table--tbody--m-hoverable--hover--BackgroundColor", "description": "Hoverable table body hover background color", "default": "var(--pf-global--BackgroundColor--100, #fff)" }, { "name": "--pf-c-table--tbody--m-hoverable--focus--BoxShadow", "description": "Hoverable table body focus box shadow", "default": "var(--pf-c-table--tbody--m-hoverable--BoxShadow--top)" }, { "name": "--pf-c-table--tbody--m-hoverable--focus--BackgroundColor", "description": "Hoverable table body focus background color", "default": "var(--pf-global--BackgroundColor--100, #fff)" }, { "name": "--pf-c-table--tbody--m-hoverable--active--BoxShadow", "description": "Hoverable table body active box shadow", "default": "var(--pf-c-table--tbody--m-hoverable--BoxShadow--top)" }, { "name": "--pf-c-table--tbody--m-hoverable--BoxShadow--top", "description": "Hoverable table body top box shadow", "default": "var(--pf-c-table--tr--BoxShadow--top--base)" }, { "name": "--pf-c-table--tbody--m-hoverable--active--BackgroundColor", "description": "Hoverable table body active background color", "default": "var(--pf-global--BackgroundColor--100, #fff)" }, { "name": "--pf-c-table--tbody--m-hoverable--m-expanded--BorderColor", "description": "Hoverable table body expanded border color", "default": "var(--pf-global--active-color--400, #73bcf7)" }, { "name": "--pf-global--active-color--400", "default": "#73bcf7" }, { "name": "--pf-c-table--tbody--m-hoverable--m-selected--hover--tr--BoxShadow", "description": "Hoverable table body selected table row box shadow", "default": "var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)) inset" }, { "name": "--pf-c-table--tbody--m-selected--BackgroundColor", "description": "Selected table body background color", "default": "var(--pf-global--BackgroundColor--100, #fff)" }, { "name": "--pf-global--BackgroundColor--100", "default": "#fff" }, { "name": "--pf-c-table--tr--BoxShadow--top--base", "description": "Table row top base box shadow", "default": "0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)" }, { "name": "--pf-c-table--tbody--m-selected--BoxShadow", "description": "Selected table body box shadow", "default": "var(--pf-c-table--tbody--m-selected--BoxShadow--top)" }, { "name": "--pf-c-table--tbody--m-selected--BoxShadow--top", "description": "Selected table body top box shadow", "default": "var(--pf-c-table--tr--BoxShadow--top--base)" }, { "name": "--pf-c-table--tbody--m-selected--OutlineOffset", "description": "Selected table body outline offset", "default": "calc(-1 * var(--pf-global--spacer--xs, 0.25rem))" }, { "name": "--pf-c-table--tbody--m-selected--after--BorderLeftWidth", "description": "Selected table body after left border width", "default": "var(--pf-c-table__expandable-row--after--border-width--base)" }, { "name": "--pf-c-table__expandable-row--after--border-width--base", "description": "Expandable row after base border width", "default": "var(--pf-global--BorderWidth--lg, 3px)" }, { "name": "--pf-c-table--tbody--m-selected--after--BorderLeftColor", "description": "Selected table body after left border color", "default": "var(--pf-global--active-color--100, #06c)" }, { "name": "--pf-global--active-color--100", "default": "#06c" }, { "name": "--pf-c-table--tbody--m-selected--m-selected--BoxShadow", "description": "Selected table body selected box shadow", "default": "var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16))" }, { "name": "--pf-c-table--tbody--m-selected--hover--tbody--m-selected--BoxShadow", "description": "Selected table body hover selected box shadow", "default": "var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)) inset" }, { "name": "--pf-c-table--tbody--m-selected--tbody--m-selected--hover--BoxShadow", "description": "Selected table body hover box shadow", "default": "var(--pf-c-table--tr--m-selected--BoxShadow--top)" }, { "name": "--pf-c-table--tr--m-selected--BoxShadow--top", "description": "Selected table row top box shadow", "default": "var(--pf-c-table--tr--BoxShadow--top--base)" }, { "name": "--pf-global--BoxShadow--sm-bottom", "default": "0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)" }, { "name": "--pf-c-table--thead--m-nested-column-header--button--OutlineOffset", "description": "Table head nested column header button outline offset", "default": "-0.1875rem" }, { "name": "--pf-c-table--thead--m-nested-column-header--tr--PaddingTop", "description": "Table head nested column header row top padding", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom", "description": "Table head nested column header row bottom padding", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-global--spacer--xs", "default": "0.25rem" }, { "name": "--pf-c-table__subhead--Color", "description": "Subhead color", "default": "var(--pf-global--Color--200, #6a6e73)" }, { "name": "--pf-global--Color--200", "default": "#6a6e73" }, { "name": "--pf-c-table--m-striped__tr--BackgroundColor", "description": "Striped row background color", "default": "var(--pf-global--BackgroundColor--light-200)" }, { "name": "--pf-global--BackgroundColor--light-200" }, { "name": "--pf-global--Color--100", "default": "#151515" }, { "name": "--pf-c-table--cell--PaddingTop", "description": "Table cell top padding\n\nCell top padding", "default": "var(--pf-c-table--m-grid--cell--PaddingTop, 0)" }, { "name": "--pf-c-table--m-grid--cell--PaddingTop", "default": "0" }, { "name": "--pf-c-table--cell--PaddingRight", "description": "Table cell right padding\n\nCell right padding", "default": "var(--pf-c-table--m-grid--cell--PaddingRight, 0)" }, { "name": "--pf-c-table--m-grid--cell--PaddingRight", "default": "0" }, { "name": "--pf-c-table--cell--PaddingBottom", "description": "Table cell bottom padding\n\nCell bottom padding", "default": "var(--pf-c-table--m-grid--cell--PaddingBottom, 0)" }, { "name": "--pf-c-table--m-grid--cell--PaddingBottom", "default": "0" }, { "name": "--pf-c-table--cell--PaddingLeft", "description": "Table cell left padding\n\nCell left padding", "default": "var(--pf-c-table--m-grid--cell--PaddingLeft, 0)" }, { "name": "--pf-c-table--m-grid--cell--PaddingLeft", "default": "0" }, { "name": "--pf-c-table__favorite--c-button--MarginTop", "description": "Favorite button top margin\n\nFavorite button top margin", "default": "auto" }, { "name": "--pf-c-table__favorite--c-button--MarginRight", "description": "Favorite button right margin\n\nFavorite button right margin", "default": "auto" }, { "name": "--pf-c-table__favorite--c-button--MarginBottom", "description": "Favorite button bottom margin\n\nFavorite button bottom margin", "default": "auto" }, { "name": "--pf-c-table__favorite--c-button--MarginLeft", "description": "Favorite button left margin\n\nFavorite button left margin", "default": "auto" } ], "demos": [ { "url": "https://patternflyelements.org/components/table/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-table/demo/index.html" } }, { "url": "https://patternflyelements.org/components/table/demo/expandable-rows-compound/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-table/demo/expandable-rows-compound.html" } }, { "url": "https://patternflyelements.org/components/table/demo/expandable-rows/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-table/demo/expandable-rows.html" } }, { "url": "https://patternflyelements.org/components/table/demo/sortable/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-table/demo/sortable.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-table", "declaration": { "name": "PfTable", "module": "pf-table/pf-table.js" } }, { "kind": "js", "name": "PfTable", "declaration": { "name": "PfTable", "module": "pf-table/pf-table.js" } } ] }, { "kind": "javascript-module", "path": "pf-table/pf-tbody.js", "declarations": [ { "name": "PfTbody", "description": "Table body", "superclass": { "name": "LitElement", "package": "lit" }, "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-table/pf-tbody.ts#L11" }, "kind": "class", "tagName": "pf-tbody", "slots": [ { "name": "", "description": "Place element content here" } ], "cssProperties": [ { "name": "--pf-c-table--cell--PaddingTop", "default": "var(--pf-c-table--tbody--cell--PaddingTop)" }, { "name": "--pf-c-table--tbody--cell--PaddingTop" }, { "name": "--pf-c-table--tbody--cell--PaddingBottom" }, { "name": "--pf-c-table--border-width--base" }, { "name": "--pf-c-table--BorderColor" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-tbody", "declaration": { "name": "PfTbody", "module": "pf-table/pf-tbody.js" } }, { "kind": "js", "name": "PfTbody", "declaration": { "name": "PfTbody", "module": "pf-table/pf-tbody.js" } } ] }, { "kind": "javascript-module", "path": "pf-table/pf-td.js", "declarations": [ { "name": "PfTd", "description": "Table data cell", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "compoundExpand", "type": { "text": "string" }, "kind": "field", "attribute": "compound-expand" }, { "name": "expanded", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "expanded", "reflects": true } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-table/pf-td.ts#L13" }, "kind": "class", "tagName": "pf-td", "attributes": [ { "name": "compound-expand", "type": { "text": "string" }, "fieldName": "compoundExpand" }, { "name": "expanded", "type": { "text": "boolean" }, "default": "false", "fieldName": "expanded" } ], "slots": [ { "name": "", "description": "Place element content here" } ], "cssProperties": [ { "name": "--pf-c-table__button--OutlineOffset" }, { "name": "--pf-c-table__compound-expansion-toggle__button--after--border-width--base" }, { "name": "--pf-c-table--cell--PaddingTop" }, { "name": "--pf-c-table--cell--PaddingRight" }, { "name": "--pf-c-table--cell--PaddingBottom" }, { "name": "--pf-c-table--cell--PaddingLeft" }, { "name": "--pf-c-table__button--Color" }, { "name": "--pf-c-table__button--BackgroundColor" }, { "name": "--pf-c-table__compound-expansion-toggle__button--before--Bottom" }, { "name": "--pf-c-table__compound-expansion-toggle__button--before--Left" }, { "name": "--pf-c-table__compound-expansion-toggle__button--before--BorderColor" }, { "name": "--pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth" }, { "name": "--pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth", "default": "var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base)" }, { "name": "--pf-c-table--BackgroundColor" }, { "name": "--pf-c-table__compound-expansion-toggle__button--before--border-width--base" }, { "name": "--pf-c-table__compound-expansion-toggle__button--after--Top" }, { "name": "--pf-c-table__compound-expansion-toggle__button--after--Left" }, { "name": "--pf-c-table__compound-expansion-toggle__button--after--BorderColor" }, { "name": "--pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth" }, { "name": "--pf-c-table__button--active--Color" }, { "name": "--pf-c-table__button--focus--Color" }, { "name": "--pf-c-table__button--hover--Color" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-td", "declaration": { "name": "PfTd", "module": "pf-table/pf-td.js" } }, { "kind": "js", "name": "PfTd", "declaration": { "name": "PfTd", "module": "pf-table/pf-td.js" } } ] }, { "kind": "javascript-module", "path": "pf-table/pf-th.js", "declarations": [ { "name": "RequestSortEvent", "superclass": { "name": "Event", "package": "global:" }, "members": [ { "name": "key", "type": { "text": "string" }, "kind": "field" }, { "name": "direction", "type": { "text": "'asc' | 'desc'" }, "kind": "field" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-table/pf-th.ts#L16" }, "kind": "class" }, { "name": "PfTh", "description": "Table header cell", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "sortable", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "sortable", "reflects": true }, { "name": "selected", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "selected", "reflects": true }, { "name": "sortDirection", "type": { "text": "'asc' | 'desc'" }, "kind": "field", "attribute": "sort-direction", "reflects": true }, { "name": "key", "type": { "text": "string" }, "kind": "field", "attribute": "key" }, { "return": { "type": { "text": "void" } }, "name": "sort", "kind": "method" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-table/pf-th.ts#L39" }, "kind": "class", "tagName": "pf-th", "attributes": [ { "name": "sortable", "type": { "text": "boolean" }, "default": "false", "fieldName": "sortable" }, { "name": "selected", "type": { "text": "boolean" }, "default": "false", "fieldName": "selected" }, { "name": "sort-direction", "type": { "text": "'asc' | 'desc'" }, "fieldName": "sortDirection" }, { "name": "key", "type": { "text": "string" }, "fieldName": "key" } ], "slots": [ { "name": "", "description": "Place element content here" } ], "cssParts": [ { "name": "sort-button" } ], "cssProperties": [ { "name": "--pf-c-table--cell--PaddingTop" }, { "name": "--pf-c-table--cell--PaddingRight" }, { "name": "--pf-c-table--cell--PaddingBottom" }, { "name": "--pf-c-table--cell--PaddingLeft" }, { "name": "--pf-c-table__button--Color" }, { "name": "--pf-c-table__button--BackgroundColor" }, { "name": "--pf-c-table__sort__button--hover__sort-indicator--Color" }, { "name": "--pf-c-table__sort__button--hover__text--Color" }, { "name": "--pf-c-table__sort__button--active__sort-indicator--Color" }, { "name": "--pf-c-table__sort__button--active__text--Color" }, { "name": "--pf-c-table__sort__button--focus__sort-indicator--Color" }, { "name": "--pf-c-table__sort__button--focus__text--Color" }, { "name": "--pf-c-table__sort__button--PaddingTop" }, { "name": "--pf-c-table__sort__button--PaddingRight" }, { "name": "--pf-c-table__sort__button--PaddingBottom" }, { "name": "--pf-c-table__sort__button--PaddingLeft" }, { "name": "--pf-c-table__sort__button--MarginTop" }, { "name": "--pf-c-table__sort__button--MarginBottom" }, { "name": "--pf-c-table__sort__button--MarginLeft" }, { "name": "--pf-c-table__sort--m-selected__sort-indicator--Color" }, { "name": "--pf-c-table__sort--m-selected__button__text--Color" }, { "name": "--pf-c-table__sort--m-selected__button--Color" }, { "name": "--pf-c-table__sort-indicator--Color" } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "RequestSortEvent", "declaration": { "name": "RequestSortEvent", "module": "pf-table/pf-th.js" } }, { "kind": "custom-element-definition", "name": "pf-th", "declaration": { "name": "PfTh", "module": "pf-table/pf-th.js" } }, { "kind": "js", "name": "PfTh", "declaration": { "name": "PfTh", "module": "pf-table/pf-th.js" } } ] }, { "kind": "javascript-module", "path": "pf-table/pf-thead.js", "declarations": [ { "name": "PfThead", "description": "Table head", "superclass": { "name": "LitElement", "package": "lit" }, "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-table/pf-thead.ts#L14" }, "kind": "class", "tagName": "pf-thead", "slots": [ { "name": "", "description": "Place element content here" } ], "cssProperties": [ { "name": "--pf-c-table--cell--MinWidth", "default": "var(--pf-c-table--m-truncate--cell--MinWidth)" }, { "name": "--pf-c-table--m-truncate--cell--MinWidth" }, { "name": "--pf-c-table--m-truncate--cell--MaxWidth" }, { "name": "--pf-c-table--thead--cell--FontSize", "default": "var(--pf-global--FontSize--sm, 0.875rem)" }, { "name": "--pf-global--FontSize--sm", "default": "0.875rem" }, { "name": "--pf-c-table--thead--cell--FontWeight", "default": "var(--pf-global--FontWeight--bold, 700)" }, { "name": "--pf-global--FontWeight--bold", "default": "700" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-thead", "declaration": { "name": "PfThead", "module": "pf-table/pf-thead.js" } }, { "kind": "js", "name": "PfThead", "declaration": { "name": "PfThead", "module": "pf-table/pf-thead.js" } } ] }, { "kind": "javascript-module", "path": "pf-table/pf-tr.js", "declarations": [ { "name": "RequestExpandEvent", "superclass": { "name": "Event", "package": "global:" }, "members": [ { "name": "compoundExpanded", "description": "if provided, the slot name for the compound-expanded cell", "type": { "text": "string | boolean" }, "default": "false", "kind": "field" }, { "name": "row", "description": "if compoundExpanded is provided, a reference to the row\nmust also be provided.", "type": { "text": "PfTr" }, "kind": "field" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-table/pf-tr.ts#L11" }, "kind": "class" }, { "name": "PfTr", "description": "Table row", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "expandable", "type": { "text": "boolean | 'compound'" }, "default": "false", "kind": "field", "attribute": "expandable", "reflects": true }, { "name": "expanded", "type": { "text": "boolean | string" }, "default": "false", "kind": "field", "attribute": "expanded", "reflects": true }, { "name": "switch", "kind": "method" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-table/pf-tr.ts#L79" }, "kind": "class", "tagName": "pf-tr", "attributes": [ { "name": "expandable", "type": { "text": "boolean | 'compound'" }, "default": "false", "fieldName": "expandable" }, { "name": "expanded", "type": { "text": "boolean | string" }, "default": "false", "fieldName": "expanded" } ], "slots": [ { "name": "", "description": "Place element content here" } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "RequestExpandEvent", "declaration": { "name": "RequestExpandEvent", "module": "pf-table/pf-tr.js" } }, { "kind": "custom-element-definition", "name": "pf-tr", "declaration": { "name": "PfTr", "module": "pf-table/pf-tr.js" } }, { "kind": "js", "name": "PfTr", "declaration": { "name": "PfTr", "module": "pf-table/pf-tr.js" } } ] }, { "kind": "javascript-module", "path": "pf-tabs/context.js", "declarations": [ { "name": "context", "type": { "text": ": Context\u003cunknown, PfTabsContext\u003e" }, "kind": "variable", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tabs/context.ts#L23" } }, { "name": "TabExpandEvent", "superclass": { "name": "Event", "package": "global:" }, "members": [ { "name": "tab", "type": { "text": "Tab" }, "kind": "field" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tabs/context.ts#L15" }, "kind": "class" } ], "exports": [ { "kind": "js", "name": "TabExpandEvent", "declaration": { "name": "TabExpandEvent", "module": "pf-tabs/context.js" } }, { "kind": "js", "name": "context", "declaration": { "name": "context", "module": "pf-tabs/context.js" } } ] }, { "kind": "javascript-module", "path": "pf-tabs/pf-tab-panel.js", "declarations": [ { "name": "PfTabPanel", "superclass": { "name": "LitElement", "package": "lit" }, "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tabs/pf-tab-panel.ts#L16" }, "kind": "class", "tagName": "pf-tab-panel", "slots": [ { "name": "", "description": "Tab panel content" } ], "cssParts": [ { "name": "container", "description": "container for the panel content" } ], "cssProperties": [ { "name": "--pf-c-tab-content--m-light-300", "description": "Background color for light tab content", "default": "var(--pf-global--BackgroundColor--light-300, #f0f0f0)" }, { "name": "--pf-global--BackgroundColor--light-300", "default": "#f0f0f0" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-tab-panel", "declaration": { "name": "PfTabPanel", "module": "pf-tabs/pf-tab-panel.js" } }, { "kind": "js", "name": "PfTabPanel", "declaration": { "name": "PfTabPanel", "module": "pf-tabs/pf-tab-panel.js" } } ] }, { "kind": "javascript-module", "path": "pf-tabs/pf-tab.js", "declarations": [ { "name": "PfTab", "description": "Tab", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "active", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "active", "reflects": true }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "disabled", "reflects": true }, { "name": "ctx", "type": { "text": "PfTabsContext" }, "kind": "field", "privacy": "private" }, { "parameters": [ { "name": "old", "type": { "text": "boolean" } }, { "name": "active", "type": { "text": "boolean" } } ], "return": { "type": { "text": "void" } }, "name": "activeChanged", "kind": "method", "privacy": "protected" }, { "return": { "type": { "text": "void" } }, "name": "disabledChanged", "kind": "method", "privacy": "protected" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tabs/pf-tab.ts#L22" }, "kind": "class", "tagName": "pf-tab", "attributes": [ { "name": "active", "type": { "text": "boolean" }, "default": "false", "fieldName": "active" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "fieldName": "disabled" } ], "events": [ { "name": "expand", "description": "when a tab expands", "type": { "text": "TabExpandEvent" } } ], "slots": [ { "name": "icon", "summary": "Can contain an `\u003csvg\u003e` or `\u003cpf-icon\u003e`" }, { "name": "", "summary": "Tab title text" } ], "cssParts": [ { "name": "button", "description": "button element" }, { "name": "icon", "summary": "container for the icon" }, { "name": "text", "summary": "container for the tab text" } ], "cssProperties": [ { "name": "--pf-c-tabs__item--ScrollSnapAlign", "default": "end" }, { "name": "--pf-c-tabs__item--m-current__link--Color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-tabs__item--m-current__link--after--BorderColor", "default": "var(--pf-global--active-color--100, #06c)" }, { "name": "--pf-global--active-color--100", "default": "#06c" }, { "name": "--pf-c-tabs__item--m-current__link--after--BorderWidth", "default": "var(--pf-global--BorderWidth--lg, 3px)" }, { "name": "--pf-c-tabs__link--child--MarginRight", "description": "Tab icon and text spacing", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-global--LineHeight--md", "default": "1.5" }, { "name": "--pf-global--Color--100", "default": "#151515" }, { "name": "--pf-c-tabs__link--PaddingTop", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-tabs__link--PaddingRight", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-tabs__link--PaddingBottom", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-global--spacer--sm", "default": "0.5rem" }, { "name": "--pf-c-tabs__link--PaddingLeft", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-global--spacer--md", "default": "1rem" }, { "name": "--pf-c-tabs__link--FontSize", "description": "Tab font size", "default": "var(--pf-global--FontSize--md, 1rem)" }, { "name": "--pf-global--FontSize--md", "default": "1rem" }, { "name": "--pf-c-tabs__link--Color", "description": "Tab text color", "default": "var(--pf-global--Color--200, #6a6e73)" }, { "name": "--pf-global--Color--200", "default": "#6a6e73" }, { "name": "--pf-c-tabs__link--OutlineOffset", "description": "Tab outline offset", "default": "calc(-1 * 0.375rem)" }, { "name": "--pf-c-tabs__link--BackgroundColor", "description": "Tab background color", "default": "transparent" }, { "name": "--pf-c-tabs__link--before--BorderTopWidth", "description": "Tab top border width", "default": "0" }, { "name": "--pf-c-tabs__link--before--BorderRightWidth", "description": "Tab right border width", "default": "0" }, { "name": "--pf-c-tabs__link--before--BorderBottomWidth", "description": "Tab bottom border width", "default": "0" }, { "name": "--pf-c-tabs__link--before--BorderLeftWidth", "description": "Tab left border width", "default": "0" }, { "name": "--pf-c-tabs__link--before--BorderTopColor", "description": "Tab top border color", "default": "var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2))" }, { "name": "--pf-c-tabs__link--before--BorderRightColor", "description": "Tab right border color", "default": "var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2))" }, { "name": "--pf-c-tabs__link--before--BorderBottomColor", "description": "Tab bottom border color", "default": "var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2))" }, { "name": "--pf-c-tabs__link--before--BorderLeftColor", "description": "Tab left border color", "default": "var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2))" }, { "name": "--pf-c-tabs__link--after--Top", "description": "Tab after element top position", "default": "auto" }, { "name": "--pf-c-tabs__link--after--Right", "description": "Tab after element right position", "default": "0" }, { "name": "--pf-c-tabs__link--after--Bottom", "description": "Tab after element bottom position", "default": "0" }, { "name": "--pf-c-tabs__link--before--Left", "description": "Tab before element left position", "default": "0" }, { "name": "--pf-global--BorderColor--light-100", "default": "#b8bbbe" }, { "name": "--pf-c-tabs__link--after--BorderTopWidth", "description": "Tab after element top border width", "default": "0" }, { "name": "--pf-c-tabs__link--after--BorderRightWidth", "description": "Tab after element right border width", "default": "0" }, { "name": "--pf-c-tabs__link--after--BorderBottomWidth", "description": "Tab after element bottom border width" }, { "name": "--pf-c-tabs__link--after--BorderLeftWidth", "description": "Tab after element left border width" }, { "name": "--pf-c-tabs__link--hover__toggle-icon--Color" }, { "name": "--pf-c-tabs__link--hover--after--BorderWidth", "default": "var(--pf-global--BorderWidth--lg, 3px)" }, { "name": "--pf-c-tabs__link--after--BorderColor", "description": "Tab after element border color", "default": "#06c" }, { "name": "--pf-c-tabs__link--focus--after--BorderWidth", "default": "var(--pf-global--BorderWidth--lg, 3px)" }, { "name": "--pf-c-tabs__link--active--after--BorderWidth", "default": "var(--pf-global--BorderWidth--lg, 3px)" }, { "name": "--pf-global--BorderWidth--lg", "default": "3px" }, { "name": "--pf-c-tabs__link--after--BorderWidth", "default": "0" }, { "name": "--pf-c-tabs__item--m-current__link--BackgroundColor", "default": "var(--pf-global--BackgroundColor--100, #ffffff)" }, { "name": "--pf-global--BackgroundColor--100", "default": "#ffffff" }, { "name": "--pf-c-tabs__link--before--border-color--base", "default": "var(--pf-global--BorderColor--100, #d2d2d2)" }, { "name": "--pf-global--BorderColor--100", "default": "#d2d2d2" }, { "name": "--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderTopWidth", "default": "var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px))" }, { "name": "--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth", "default": "var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px))" }, { "name": "--pf-c-tabs__link--before--border-width--base", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth", "default": "var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px))" }, { "name": "--pf-c-tabs__link--disabled--Color", "default": "var(--pf-global--disabled-color--100, #6a6e73)" }, { "name": "--pf-global--disabled-color--100", "default": "#6a6e73" }, { "name": "--pf-c-tabs__link--disabled--BackgroundColor", "default": "var(--pf-global--palette--black-150, #f5f5f5)" }, { "name": "--pf-global--palette--black-150", "default": "#f5f5f5" }, { "name": "--pf-c-tabs__link--disabled--before--BorderRightWidth", "default": "0" }, { "name": "--pf-c-tabs__link--disabled--before--BorderBottomWidth", "default": "var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px))" }, { "name": "--pf-c-tabs--before--border-width--base", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-global--BorderWidth--sm", "default": "1px" }, { "name": "--pf-c-tabs__link--disabled--before--BorderLeftWidth", "default": "0" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-tab", "declaration": { "name": "PfTab", "module": "pf-tabs/pf-tab.js" } }, { "kind": "js", "name": "PfTab", "declaration": { "name": "PfTab", "module": "pf-tabs/pf-tab.js" } } ] }, { "kind": "javascript-module", "path": "pf-tabs/pf-tabs.js", "declarations": [ { "name": "PfTabs", "description": "Tabs** allow users to navigate between views within the same page or context.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "scrollTimeoutDelay", "type": { "text": "number" }, "default": "150", "readonly": true, "kind": "field", "static": true, "privacy": "protected" }, { "parameters": [ { "name": "event", "type": { "text": "Event" } } ], "name": "isExpandEvent", "kind": "method", "static": true }, { "name": "labelScrollLeft", "description": "Aria Label for the left scroll button", "type": { "text": "string" }, "default": "'Scroll left'", "kind": "field", "attribute": "label-scroll-left" }, { "name": "labelScrollRight", "description": "Aria Label for the right scroll button", "type": { "text": "string" }, "default": "'Scroll left'", "kind": "field", "attribute": "label-scroll-right" }, { "name": "box", "description": "Box styling on tabs. Defaults to null", "type": { "text": "'light' | 'dark' | null" }, "default": "null", "kind": "field", "attribute": "box", "reflects": true }, { "name": "vertical", "description": "Set to true to enable vertical tab styling.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "vertical", "reflects": true }, { "name": "fill", "description": "Set to true to enable filled tab styling.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "fill", "reflects": true }, { "name": "borderBottom", "description": "Border bottom tab styling on tabs. To remove the bottom border, set this prop to false.", "type": { "text": "'true' | 'false'" }, "default": "'true'", "kind": "field", "attribute": "border-bottom" }, { "name": "manual", "description": "Set's the tabs to be manually activated. This means that the tabs will not automatically select\nunless a user clicks on them or uses the keyboard space or enter key to select them. Roving\ntabindex will still update allowing user to keyboard navigate through the tabs with arrow keys.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "manual", "reflects": true }, { "name": "activeIndex", "description": "The index of the active tab", "kind": "field", "attribute": "active-index", "reflects": true }, { "name": "activeTab", "type": { "text": "PfTab" }, "kind": "field" }, { "name": "tabs", "type": { "text": "PfTab[]" }, "readonly": true, "kind": "field" }, { "parameters": [ { "name": "old", "type": { "text": "PfTab" } }, { "name": "activeTab", "type": { "text": "PfTab" } } ], "return": { "type": { "text": "void" } }, "name": "activeTabChanged", "kind": "method", "privacy": "protected" }, { "return": { "type": { "text": "void" } }, "name": "firstUpdated", "kind": "method", "privacy": "protected" }, { "parameters": [ { "name": "tab", "type": { "text": "PfTab | number" } } ], "return": { "type": { "text": "void" } }, "name": "select", "kind": "method" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tabs/pf-tabs.ts#L30" }, "kind": "class", "tagName": "pf-tabs", "attributes": [ { "name": "label-scroll-left", "description": "Aria Label for the left scroll button", "type": { "text": "string" }, "default": "'Scroll left'", "fieldName": "labelScrollLeft" }, { "name": "label-scroll-right", "description": "Aria Label for the right scroll button", "type": { "text": "string" }, "default": "'Scroll left'", "fieldName": "labelScrollRight" }, { "name": "box", "description": "Box styling on tabs. Defaults to null", "type": { "text": "'light' | 'dark' | null" }, "default": "null", "fieldName": "box" }, { "name": "vertical", "description": "Set to true to enable vertical tab styling.", "type": { "text": "boolean" }, "default": "false", "fieldName": "vertical" }, { "name": "fill", "description": "Set to true to enable filled tab styling.", "type": { "text": "boolean" }, "default": "false", "fieldName": "fill" }, { "name": "border-bottom", "description": "Border bottom tab styling on tabs. To remove the bottom border, set this prop to false.", "type": { "text": "'true' | 'false'" }, "default": "'true'", "fieldName": "borderBottom" }, { "name": "manual", "description": "Set's the tabs to be manually activated. This means that the tabs will not automatically select\nunless a user clicks on them or uses the keyboard space or enter key to select them. Roving\ntabindex will still update allowing user to keyboard navigate through the tabs with arrow keys.", "type": { "text": "boolean" }, "default": "false", "fieldName": "manual" }, { "name": "active-index", "description": "The index of the active tab", "fieldName": "activeIndex" } ], "slots": [ { "name": "tab", "description": "Must contain one or more `\u003cpf-tab\u003e`" }, { "name": "", "summary": "Must contain one or more `\u003cpf-panel\u003e`" } ], "cssParts": [ { "name": "container", "description": "outer container" }, { "name": "tabs-container", "description": "tabs container" }, { "name": "tabs", "description": "tablist" }, { "name": "panels", "summary": "panels" } ], "cssProperties": [ { "name": "--pf-c-tabs--Width", "description": "Width of the tabs container", "default": "auto" }, { "name": "--pf-c-tabs--before--BorderTopWidth", "description": "Top border width", "default": "0" }, { "name": "--pf-c-tabs--before--BorderRightWidth", "description": "Right border width", "default": "0" }, { "name": "--pf-c-tabs--before--BorderBottomWidth", "description": "Bottom border width", "default": "var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px))" }, { "name": "--pf-c-tabs--before--BorderLeftWidth", "description": "Left border width", "default": "0" }, { "name": "--pf-c-tabs--m-box__link--BackgroundColor", "default": "var(--pf-global--BackgroundColor--200, #f0f0f0)" }, { "name": "--pf-global--BackgroundColor--200", "default": "#f0f0f0" }, { "name": "--pf-c-tabs--m-box__link--disabled--BackgroundColor", "default": "var(--pf-global--disabled-color--200, #d2d2d2)" }, { "name": "--pf-c-tabs--m-color-scheme--light-300__link--BackgroundColor", "default": "transparent" }, { "name": "--pf-c-tabs--m-color-scheme--light-300__item--m-current__link--BackgroundColor", "default": "var(--pf-global--BackgroundColor--light-300, #f0f0f0)" }, { "name": "--pf-global--BackgroundColor--light-300", "default": "#f0f0f0" }, { "name": "--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor", "default": "var(--pf-global--palette--black-150, #f5f5f5)" }, { "name": "--pf-global--palette--black-150", "default": "#f5f5f5" }, { "name": "--pf-c-tabs--m-vertical--Width", "default": "100%" }, { "name": "--pf-c-tabs--m-vertical--inset", "default": "var(--pf-global--spacer--lg, 1.5rem)" }, { "name": "--pf-global--spacer--lg", "default": "1.5rem" }, { "name": "--pf-c-tabs--m-vertical__link--PaddingTop", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-c-tabs--m-vertical__link--PaddingBottom", "default": "var(--pf-global--spacer--md, 1rem)" }, { "name": "--pf-global--spacer--md", "default": "1rem" }, { "name": "--pf-c-tabs--m-vertical--MaxWidth", "default": "15.625rem" }, { "name": "--pf-c-tabs--m-vertical__list--before--BorderColor", "default": "var(--pf-c-tabs--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2))" }, { "name": "--pf-c-tabs--m-vertical__list--before--BorderTopWidth", "default": "0" }, { "name": "--pf-c-tabs--m-vertical__list--before--BorderRightWidth", "default": "0" }, { "name": "--pf-c-tabs--m-vertical__list--before--BorderBottomWidth", "default": "0" }, { "name": "--pf-c-tabs--m-vertical__list--before--BorderLeftWidth", "default": "var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px))" }, { "name": "--pf-c-tabs--inset", "description": "Inset spacing for tabs\n\nInset spacing for tabs", "default": "0" }, { "name": "--pf-c-tabs--m-vertical--m-box--inset", "default": "var(--pf-global--spacer--xl, 2rem)" }, { "name": "--pf-global--spacer--xl", "default": "2rem" }, { "name": "--pf-c-tabs--before--border-width--base", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-c-tabs__item--m-current__link--BackgroundColor", "default": "var(--pf-global--BackgroundColor--100, #ffffff)" }, { "name": "--pf-c-tabs__link--before--border-color--base", "default": "var(--pf-global--BorderColor--100, #d2d2d2)" }, { "name": "--pf-c-tabs__link--before--border-width--base", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-c-tabs__list--Display", "description": "Display type for the tabs list", "default": "flex" }, { "name": "--pf-c-tabs__scroll-button--Color", "description": "Color of the scroll buttons", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-global--Color--100", "default": "#151515" }, { "name": "--pf-c-tabs__scroll-button--BackgroundColor", "description": "Background color of the scroll buttons", "default": "var(--pf-global--BackgroundColor--100, #ffffff)" }, { "name": "--pf-global--BackgroundColor--100", "default": "#ffffff" }, { "name": "--pf-c-tabs__scroll-button--OutlineOffset", "description": "Outline offset for scroll buttons", "default": "calc(-1 * var(--pf-global--spacer--xs, 0.25rem))" }, { "name": "--pf-global--spacer--xs", "default": "0.25rem" }, { "name": "--pf-c-tabs__scroll-button--TransitionDuration--margin", "default": ".125s" }, { "name": "--pf-c-tabs__scroll-button--TransitionDuration--transform", "default": ".125s" }, { "name": "--pf-c-tabs__scroll-button--TransitionDuration--opacity", "default": ".125s" }, { "name": "--pf-c-tabs__scroll-button--hover--Color", "default": "var(--pf-global--active-color--100, #06c)" }, { "name": "--pf-global--active-color--100", "default": "#06c" }, { "name": "--pf-c-tabs__scroll-button--before--BorderColor", "description": "Border color for scroll button pseudo-elements", "default": "var(--pf-c-tabs--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2))" }, { "name": "--pf-c-tabs--before--BorderColor", "description": "Border color for tabs container pseudo-element", "default": "var(--pf-global--BorderColor--100, #d2d2d2)" }, { "name": "--pf-global--BorderColor--100", "default": "#d2d2d2" }, { "name": "--pf-c-tabs__scroll-button--before--BorderRightWidth", "description": "Right border width for scroll button pseudo-elements", "default": "0" }, { "name": "--pf-c-tabs__scroll-button--before--BorderBottomWidth", "description": "Bottom border width for scroll button pseudo-elements", "default": "var(--pf-c-tabs__scroll-button--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px))" }, { "name": "--pf-c-tabs__scroll-button--before--BorderLeftWidth", "description": "Left border width for scroll button pseudo-elements", "default": "0" }, { "name": "--pf-c-tabs__scroll-button--before--border-width--base", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-global--BorderWidth--sm", "default": "1px" }, { "name": "--pf-c-tabs__scroll-button--Width", "description": "Width of the scroll buttons", "default": "var(--pf-global--spacer--2xl, 3rem)" }, { "name": "--pf-global--spacer--2xl", "default": "3rem" }, { "name": "--pf-c-tabs__scroll-button--disabled--Color", "default": "var(--pf-global--disabled-color--200, #d2d2d2)" }, { "name": "--pf-global--disabled-color--200", "default": "#d2d2d2" } ], "demos": [ { "url": "https://patternflyelements.org/components/tabs/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tabs/demo/index.html" } }, { "url": "https://patternflyelements.org/components/tabs/demo/active-tab-disabled/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tabs/demo/active-tab-disabled.html" } }, { "url": "https://patternflyelements.org/components/tabs/demo/active-tab-is-disabled/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tabs/demo/active-tab-is-disabled.html" } }, { "url": "https://patternflyelements.org/components/tabs/demo/box/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tabs/demo/box.html" } }, { "url": "https://patternflyelements.org/components/tabs/demo/dynamic-tabs/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tabs/demo/dynamic-tabs.html" } }, { "url": "https://patternflyelements.org/components/tabs/demo/filled-with-icons/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tabs/demo/filled-with-icons.html" } }, { "url": "https://patternflyelements.org/components/tabs/demo/filled/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tabs/demo/filled.html" } }, { "url": "https://patternflyelements.org/components/tabs/demo/icons-and-text/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tabs/demo/icons-and-text.html" } }, { "url": "https://patternflyelements.org/components/tabs/demo/inset/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tabs/demo/inset.html" } }, { "url": "https://patternflyelements.org/components/tabs/demo/manual-activation/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tabs/demo/manual-activation.html" } }, { "url": "https://patternflyelements.org/components/tabs/demo/nested/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tabs/demo/nested.html" } }, { "url": "https://patternflyelements.org/components/tabs/demo/overflow/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tabs/demo/overflow.html" } }, { "url": "https://patternflyelements.org/components/tabs/demo/tabs-first-in-markup/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tabs/demo/tabs-first-in-markup.html" } }, { "url": "https://patternflyelements.org/components/tabs/demo/vertical/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tabs/demo/vertical.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-tabs", "declaration": { "name": "PfTabs", "module": "pf-tabs/pf-tabs.js" } }, { "kind": "js", "name": "PfTabs", "declaration": { "name": "PfTabs", "module": "pf-tabs/pf-tabs.js" } } ] }, { "kind": "javascript-module", "path": "pf-text-area/pf-text-area.js", "declarations": [ { "name": "PfTextArea", "description": "A **text area** component is used for entering a paragraph of text that is longer than one line.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "accessibleLabel", "description": "Accessible label for the input when no `\u003clabel\u003e` element is provided.", "type": { "text": "string" }, "kind": "field", "attribute": "accessible-label", "reflects": true }, { "name": "validated", "description": "Value to indicate if the input is modified to show that validation state.\nIf set to success, input will be modified to indicate valid state.\nIf set to warning, input will be modified to indicate warning state.\nInvalid inputs will display an error state", "type": { "text": "'success' | 'warning'" }, "kind": "field", "attribute": "validated", "reflects": true }, { "name": "disabled", "description": "Flag to show if the input is disabled.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "disabled", "reflects": true }, { "name": "required", "description": "Flag to show if the text area is required.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "required", "reflects": true }, { "name": "readonly", "description": "Flag to show if the input is read only.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "readonly", "reflects": true }, { "name": "placeholder", "description": "Input placeholder.", "type": { "text": "string" }, "kind": "field", "attribute": "placeholder" }, { "name": "value", "description": "Value of the input.", "type": { "text": "string" }, "default": "''", "kind": "field", "attribute": "value" }, { "name": "resize", "description": "Sets the orientation to limit the resize to", "type": { "text": "'horizontal' | 'vertical' | 'both'" }, "kind": "field", "attribute": "resize" }, { "name": "autoResize", "description": "Flag to modify height based on contents.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "auto-resize" }, { "return": { "type": { "text": "void" } }, "name": "firstUpdated", "kind": "method" }, { "parameters": [ { "name": "message", "type": { "text": "string" } } ], "return": { "type": { "text": "void" } }, "name": "setCustomValidity", "kind": "method" }, { "return": { "type": { "text": "boolean" } }, "name": "checkValidity", "kind": "method" }, { "return": { "type": { "text": "boolean" } }, "name": "reportValidity", "kind": "method" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-text-area/pf-text-area.ts#L17" }, "kind": "class", "tagName": "pf-text-area", "attributes": [ { "name": "accessible-label", "description": "Accessible label for the input when no `\u003clabel\u003e` element is provided.", "type": { "text": "string" }, "fieldName": "accessibleLabel" }, { "name": "validated", "description": "Value to indicate if the input is modified to show that validation state.\nIf set to success, input will be modified to indicate valid state.\nIf set to warning, input will be modified to indicate warning state.\nInvalid inputs will display an error state", "type": { "text": "'success' | 'warning'" }, "fieldName": "validated" }, { "name": "disabled", "description": "Flag to show if the input is disabled.", "type": { "text": "boolean" }, "default": "false", "fieldName": "disabled" }, { "name": "required", "description": "Flag to show if the text area is required.", "type": { "text": "boolean" }, "default": "false", "fieldName": "required" }, { "name": "readonly", "description": "Flag to show if the input is read only.", "type": { "text": "boolean" }, "default": "false", "fieldName": "readonly" }, { "name": "placeholder", "description": "Input placeholder.", "type": { "text": "string" }, "fieldName": "placeholder" }, { "name": "value", "description": "Value of the input.", "type": { "text": "string" }, "default": "''", "fieldName": "value" }, { "name": "resize", "description": "Sets the orientation to limit the resize to", "type": { "text": "'horizontal' | 'vertical' | 'both'" }, "fieldName": "resize" }, { "name": "auto-resize", "description": "Flag to modify height based on contents.", "type": { "text": "boolean" }, "default": "false", "fieldName": "autoResize" } ], "cssProperties": [ { "name": "--pf-global--FontSize--md", "default": "1rem" }, { "name": "--pf-global--LineHeight--md", "default": "1.5" }, { "name": "--pf-global--BorderColor--300", "default": "#f0f0f0" }, { "name": "--pf-global--BackgroundColor--100", "default": "#fff" }, { "name": "--pf-c-form-control--Height", "description": "Form control height", "default": "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))" }, { "name": "--pf-c-form-control--m-expanded--BorderBottomWidth", "description": "Form control expanded bottom border width", "default": "var(--pf-global--BorderWidth--md, 2px)" }, { "name": "--pf-c-form-control--m-expanded--PaddingBottom", "description": "Form control expanded bottom padding", "default": "calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--focus--BorderBottomWidth))" }, { "name": "--pf-c-form-control--m-expanded--BorderBottomColor", "description": "Form control expanded bottom border color", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-global--primary-color--100", "default": "#06c" }, { "name": "--pf-global--Color--dark-200", "default": "#6a6e73" }, { "name": "--pf-c-form-control--placeholder--child--Color", "description": "Form control placeholder child color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-global--Color--100", "default": "#151515" }, { "name": "--pf-global--disabled-color--100", "default": "#6a6e73" }, { "name": "--pf-global--disabled-color--300", "default": "#f0f0f0" }, { "name": "--pf-c-form-control--readonly--hover--BorderBottomColor", "description": "Form control readonly hover bottom border color", "default": "var(--pf-global--BorderColor--200, #8a8d90)" }, { "name": "--pf-c-form-control--readonly--focus--PaddingBottom", "description": "Form control readonly focus bottom padding", "default": "calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm))" }, { "name": "--pf-c-form-control--readonly--focus--BorderBottomWidth", "description": "Form control readonly focus bottom border width", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-global--BorderWidth--sm", "default": "1px" }, { "name": "--pf-c-form-control--readonly--focus--BorderBottomColor", "description": "Form control readonly focus bottom border color", "default": "var(--pf-global--BorderColor--200, #8a8d90)" }, { "name": "--pf-global--BorderColor--200", "default": "#8a8d90" }, { "name": "--pf-c-form-control--readonly--m-plain--BackgroundColor", "description": "Form control readonly plain background color", "default": "transparent" }, { "name": "--pf-c-form-control--readonly--m-plain--inset--base", "description": "Form control readonly plain base inset", "default": "0" }, { "name": "--pf-c-form-control--success--PaddingBottom", "description": "Form control success bottom padding", "default": "calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--success--BorderBottomWidth))" }, { "name": "--pf-c-form-control--success--BorderBottomWidth", "description": "Form control success bottom border width", "default": "var(--pf-global--BorderWidth--md, 2px)" }, { "name": "--pf-c-form-control--success--BorderBottomColor", "description": "Form control success bottom border color", "default": "var(--pf-global--success-color--100, #3e8635)" }, { "name": "--pf-global--success-color--100", "default": "#3e8635" }, { "name": "--pf-c-form-control--success--PaddingRight", "description": "Form control success right padding", "default": "var(--pf-global--spacer--xl, 2rem)" }, { "name": "--pf-c-form-control--success--BackgroundPositionX", "description": "Form control success background X position", "default": "calc(100% - var(--pf-c-form-control--PaddingLeft))" }, { "name": "--pf-c-form-control--success--BackgroundPositionY", "description": "Form control success background Y position", "default": "center" }, { "name": "--pf-c-form-control--success--BackgroundSizeX", "description": "Form control success background X size", "default": "var(--pf-c-form-control--FontSize)" }, { "name": "--pf-c-form-control--success--BackgroundSizeY", "description": "Form control success background Y size", "default": "var(--pf-c-form-control--FontSize)" }, { "name": "--pf-c-form-control--m-warning--PaddingBottom", "description": "Form control warning bottom padding", "default": "calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--m-warning--BorderBottomWidth))" }, { "name": "--pf-c-form-control--m-warning--BorderBottomWidth", "description": "Form control warning bottom border width", "default": "var(--pf-global--BorderWidth--md, 2px)" }, { "name": "--pf-c-form-control--m-warning--BorderBottomColor", "description": "Form control warning bottom border color", "default": "var(--pf-global--warning-color--100, #f0ab00)" }, { "name": "--pf-global--warning-color--100", "default": "#f0ab00" }, { "name": "--pf-c-form-control--m-warning--PaddingRight", "description": "Form control warning right padding", "default": "var(--pf-global--spacer--xl, 2rem)" }, { "name": "--pf-c-form-control--m-warning--BackgroundPositionX", "description": "Form control warning background X position", "default": "calc(100% - calc(var(--pf-c-form-control--PaddingLeft) - 0.0625rem))" }, { "name": "--pf-c-form-control--m-warning--BackgroundPositionY", "description": "Form control warning background Y position", "default": "center" }, { "name": "--pf-c-form-control--m-warning--BackgroundSizeX", "description": "Form control warning background X size", "default": "1.25rem" }, { "name": "--pf-c-form-control--m-warning--BackgroundSizeY", "description": "Form control warning background Y size", "default": "var(--pf-c-form-control--FontSize)" }, { "name": "--pf-global--BorderWidth--md", "default": "2px" }, { "name": "--pf-global--spacer--form-element", "default": "0.375rem" }, { "name": "--pf-global--danger-color--100", "default": "#c9190b" }, { "name": "--pf-c-form-control--invalid--BackgroundPositionX", "description": "Form control invalid background X position", "default": "calc(100% - var(--pf-c-form-control--PaddingLeft))" }, { "name": "--pf-c-form-control--invalid--BackgroundPositionY", "description": "Form control invalid background Y position", "default": "center" }, { "name": "--pf-c-form-control--invalid--BackgroundSizeY", "description": "Form control invalid background Y size", "default": "var(--pf-c-form-control--FontSize)" }, { "name": "--pf-c-form-control--invalid--Background", "description": "Form control invalid background", "default": "var(--pf-c-form-control--BackgroundColor) var(--pf-c-form-control--invalid--exclamation--Background)" }, { "name": "--pf-c-form-control--invalid--exclamation--Background", "description": "Form control invalid exclamation background", "default": "var(--pf-c-form-control--invalid--BackgroundUrl) var(--pf-c-form-control--invalid--BackgroundPosition) / var(--pf-c-form-control--invalid--BackgroundSize) no-repeat" }, { "name": "--pf-c-form-control--m-search--PaddingLeft", "description": "Form control search left padding", "default": "var(--pf-global--spacer--xl, 2rem)" }, { "name": "--pf-global--spacer--xl", "default": "2rem" }, { "name": "--pf-c-form-control--m-search--BackgroundPosition", "description": "Form control search background position", "default": "var(--pf-c-form-control--PaddingRight)" }, { "name": "--pf-c-form-control--m-search--BackgroundSize", "description": "Form control search background size", "default": "var(--pf-c-form-control--FontSize) var(--pf-c-form-control--FontSize)" }, { "name": "--pf-c-form-control--m-search--BackgroundUrl", "description": "Form control search background URL", "default": "url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E\")" }, { "name": "--pf-c-form-control--m-icon--PaddingRight", "description": "Form control icon right padding", "default": "calc(var(--pf-c-form-control--inset--base) + var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer))" }, { "name": "--pf-c-form-control--m-icon--icon--PaddingRight", "description": "Form control icon padding right", "default": "calc(var(--pf-c-form-control--inset--base) + var(--pf-c-form-control--invalid--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer) + var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer))" }, { "name": "--pf-c-form-control--inset--base", "description": "Form control base inset", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-form-control--m-icon--BackgroundPositionX", "description": "Form control icon background X position", "default": "calc(100% - var(--pf-c-form-control--inset--base))" }, { "name": "--pf-c-form-control--m-icon--icon--spacer", "description": "Form control icon spacer", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-form-control--invalid--BackgroundSizeX", "description": "Form control invalid background X size", "default": "var(--pf-c-form-control--FontSize)" }, { "name": "--pf-c-form-control--m-icon--invalid--BackgroundUrl", "description": "Form control icon invalid background URL", "default": "var(--pf-c-form-control--invalid--BackgroundUrl)" }, { "name": "--pf-c-form-control--m-icon--invalid--BackgroundPosition", "description": "Form control icon invalid background position", "default": "var(--pf-c-form-control--invalid--BackgroundPosition)" }, { "name": "--pf-c-form-control--m-icon--invalid--BackgroundSize", "description": "Form control icon invalid background size", "default": "var(--pf-c-form-control--invalid--BackgroundSize)" }, { "name": "--pf-c-form-control--m-icon--success--BackgroundUrl", "description": "Form control icon success background URL", "default": "var(--pf-c-form-control--success--BackgroundUrl)" }, { "name": "--pf-c-form-control--success--BackgroundUrl", "description": "Form control success background URL", "default": "url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%235ba352' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E\")" }, { "name": "--pf-c-form-control--m-icon--success--BackgroundPosition", "description": "Form control icon success background position", "default": "var(--pf-c-form-control--success--BackgroundPosition)" }, { "name": "--pf-c-form-control--success--BackgroundPosition", "description": "Form control success background position", "default": "var(--pf-c-form-control--success--BackgroundPositionX) var(--pf-c-form-control--success--BackgroundPositionY)" }, { "name": "--pf-c-form-control--m-icon--success--BackgroundSize", "description": "Form control icon success background size", "default": "var(--pf-c-form-control--success--BackgroundSize)" }, { "name": "--pf-c-form-control--success--BackgroundSize", "description": "Form control success background size", "default": "var(--pf-c-form-control--success--BackgroundSizeX) var(--pf-c-form-control--success--BackgroundSizeY)" }, { "name": "--pf-c-form-control--m-icon--m-warning--BackgroundUrl", "description": "Form control icon warning background URL", "default": "var(--pf-c-form-control--m-warning--BackgroundUrl)" }, { "name": "--pf-c-form-control--m-warning--BackgroundUrl", "description": "Form control warning background URL", "default": "url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23f0ab00' d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E\")" }, { "name": "--pf-c-form-control--m-icon--BackgroundUrl", "description": "Form control icon background URL", "default": "none" }, { "name": "--pf-c-form-control--m-icon--m-warning--BackgroundPosition", "description": "Form control icon warning background position", "default": "var(--pf-c-form-control--m-warning--BackgroundPosition)" }, { "name": "--pf-c-form-control--m-warning--BackgroundPosition", "description": "Form control warning background position", "default": "var(--pf-c-form-control--m-warning--BackgroundPositionX) var(--pf-c-form-control--m-warning--BackgroundPositionY)" }, { "name": "--pf-c-form-control--m-icon--icon--BackgroundPositionX", "description": "Form control icon background X position", "default": "calc(var(--pf-c-form-control--m-icon--BackgroundPositionX) - var(--pf-c-form-control--m-icon--icon--spacer) - var(--pf-c-form-control--invalid--BackgroundSizeX))" }, { "name": "--pf-c-form-control--m-icon--BackgroundPositionY", "description": "Form control icon background Y position", "default": "center" }, { "name": "--pf-c-form-control--m-icon--m-warning--BackgroundSize", "description": "Form control icon warning background size", "default": "var(--pf-c-form-control--m-warning--BackgroundSize)" }, { "name": "--pf-c-form-control--m-warning--BackgroundSize", "description": "Form control warning background size", "default": "var(--pf-c-form-control--m-warning--BackgroundSizeX) var(--pf-c-form-control--m-warning--BackgroundSizeY)" }, { "name": "--pf-c-form-control--m-icon--BackgroundSizeX", "description": "Form control icon background X size", "default": "var(--pf-c-form-control--FontSize)" }, { "name": "--pf-c-form-control--m-icon--BackgroundSizeY", "description": "Form control icon background Y size", "default": "var(--pf-c-form-control--FontSize)" }, { "name": "--pf-c-form-control--m-calendar--BackgroundUrl", "description": "Form control calendar background URL", "default": "url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E\")" }, { "name": "--pf-c-form-control--m-clock--BackgroundUrl", "description": "Form control clock background URL", "default": "url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E\")" }, { "name": "--pf-c-form-control__select--PaddingRight", "description": "Form control select right padding", "default": "calc(var(--pf-global--spacer--lg, 1.5rem) + var(--pf-c-form-control--BorderWidth) + var(--pf-c-form-control--BorderWidth))" }, { "name": "--pf-c-form-control__select--PaddingLeft", "description": "Form control select left padding", "default": "calc(var(--pf-global--spacer--sm, 0.5rem) - var(--pf-c-form-control--BorderWidth))" }, { "name": "--pf-global--spacer--sm", "default": "0.5rem" }, { "name": "--pf-c-form-control__select--BackgroundUrl", "description": "Form control select background URL", "default": "url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E\")" }, { "name": "--pf-c-form-control__select--BackgroundSize", "description": "Form control select background size", "default": ".625em" }, { "name": "--pf-c-form-control__select--BackgroundPosition", "description": "Form control select background position", "default": "var(--pf-c-form-control__select--BackgroundPositionX) var(--pf-c-form-control__select--BackgroundPositionY)" }, { "name": "--pf-c-form-control__select--BackgroundPositionY", "description": "Form control select background Y position", "default": "center" }, { "name": "--pf-c-form-control__select--success--PaddingRight", "description": "Form control select success right padding", "default": "var(--pf-global--spacer--3xl, 4rem)" }, { "name": "--pf-c-form-control__select--success--BackgroundPosition", "description": "Form control select success background position", "default": "calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem))" }, { "name": "--pf-c-form-control__select--m-warning--PaddingRight", "description": "Form control select warning right padding", "default": "var(--pf-global--spacer--3xl, 4rem)" }, { "name": "--pf-c-form-control__select--m-warning--BackgroundPosition", "description": "Form control select warning background position", "default": "calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem) + 0.0625rem)" }, { "name": "--pf-c-form-control__select--invalid--PaddingRight", "description": "Form control select invalid right padding", "default": "var(--pf-global--spacer--3xl, 4rem)" }, { "name": "--pf-global--spacer--3xl", "default": "4rem" }, { "name": "--pf-c-form-control__select--invalid--BackgroundPosition", "description": "Form control select invalid background position", "default": "calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem))" }, { "name": "--pf-c-form-control__select--BackgroundPositionX", "description": "Form control select background X position", "default": "calc(100% - var(--pf-global--spacer--md, 1rem) + 1px)" }, { "name": "--pf-c-form-control--m-icon-sprite--success--BackgroundUrl", "description": "Form control icon sprite success background URL", "default": "url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#success" }, { "name": "--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl", "description": "Form control icon sprite warning background URL", "default": "url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#warning" }, { "name": "--pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl", "description": "Form control icon sprite invalid background URL", "default": "url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#invalid" }, { "name": "--pf-c-form-control--m-icon-sprite__select--BackgroundUrl", "description": "Form control icon sprite select background URL", "default": "url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#select" }, { "name": "--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl", "description": "Form control icon sprite search background URL", "default": "url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#search" }, { "name": "--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl", "description": "Form control icon sprite calendar background URL", "default": "url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#calendar" }, { "name": "--pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl", "description": "Form control icon sprite clock background URL", "default": "url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#clock" }, { "name": "--pf-c-form-control--m-icon-sprite__select--BackgroundSize", "description": "Form control icon sprite select background size", "default": "var(--pf-c-form-control--FontSize)" }, { "name": "--pf-c-form-control--m-icon-sprite__select--BackgroundPositionX", "description": "Form control icon sprite select background X position", "default": "calc(100% - var(--pf-global--spacer--md, 1rem) + 7px)" }, { "name": "--pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition", "description": "Form control icon sprite select success background position", "default": "calc(100% - var(--pf-global--spacer--md, 1rem) + 1px - var(--pf-global--spacer--lg))" }, { "name": "--pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition", "description": "Form control icon sprite select warning background position", "default": "calc(100% - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg) + 0.0625rem)" }, { "name": "--pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition", "description": "Form control icon sprite select invalid background position", "default": "calc(100% - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg))" }, { "name": "--pf-global--spacer--md", "default": "1rem" }, { "name": "--pf-global--spacer--lg", "default": "1.5rem" }, { "name": "--pf-c-form-control--textarea--success--BackgroundPositionY", "description": "Form control textarea success background Y position", "default": "var(--pf-c-form-control--PaddingLeft)" }, { "name": "--pf-c-form-control--textarea--invalid--BackgroundPositionY", "description": "Form control textarea invalid background Y position", "default": "var(--pf-c-form-control--PaddingLeft)" }, { "name": "--pf-c-form-control--textarea--m-warning--BackgroundPositionY", "description": "Form control textarea warning background Y position", "default": "var(--pf-c-form-control--PaddingLeft)" }, { "name": "--pf-c-form-control--textarea--Width", "description": "Form control textarea width", "default": "var(--pf-c-form-control--Width)" }, { "name": "--pf-c-form-control--textarea--Height", "description": "Form control textarea height", "default": "auto" }, { "name": "--pf-c-form-control--Color", "description": "Form control text color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-form-control--Width", "description": "Form control width", "default": "100%" }, { "name": "--pf-c-form-control--PaddingTop", "description": "Form control top padding", "default": "calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm))" }, { "name": "--pf-c-form-control--PaddingRight", "description": "Form control right padding", "default": "var(--pf-c-form-control--inset--base)" }, { "name": "--pf-c-form-control--PaddingBottom", "description": "Form control bottom padding", "default": "calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm))" }, { "name": "--pf-c-form-control--PaddingLeft", "description": "Form control left padding", "default": "var(--pf-c-form-control--inset--base)" }, { "name": "--pf-c-form-control--FontSize", "description": "Form control font size", "default": "var(--pf-global--FontSize--md, 1rem)" }, { "name": "--pf-c-form-control--LineHeight", "description": "Form control line height", "default": "var(--pf-global--LineHeight--md, 1.5)" }, { "name": "--pf-c-form-control--BackgroundColor", "description": "Form control background color", "default": "var(--pf-global--BackgroundColor--100, #fff)" }, { "name": "--pf-c-form-control--BorderWidth", "description": "Form control border width", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-c-form-control--BorderTopColor", "description": "Form control top border color", "default": "var(--pf-global--BorderColor--300, #f0f0f0)" }, { "name": "--pf-c-form-control--BorderRightColor", "description": "Form control right border color", "default": "var(--pf-global--BorderColor--300, #f0f0f0)" }, { "name": "--pf-c-form-control--BorderBottomColor", "description": "Form control bottom border color", "default": "var(--pf-global--BorderColor--200, #8a8d90)" }, { "name": "--pf-c-form-control--BorderLeftColor", "description": "Form control left border color", "default": "var(--pf-global--BorderColor--300, #f0f0f0)" }, { "name": "--pf-c-form-control--BorderRadius", "description": "Form control border radius", "default": "0" }, { "name": "--pf-c-form-control--placeholder--Color", "description": "Form control placeholder color", "default": "var(--pf-global--Color--dark-200, #6a6e73)" }, { "name": "--pf-c-form-control--hover--BorderBottomColor", "description": "Form control hover bottom border color", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-c-form-control--focus--BorderBottomColor", "description": "Form control focus bottom border color", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-c-form-control--focus--PaddingBottom", "description": "Form control focus bottom padding", "default": "calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--focus--BorderBottomWidth))" }, { "name": "--pf-c-form-control--focus--BorderBottomWidth", "description": "Form control focus bottom border width", "default": "var(--pf-global--BorderWidth--md, 2px)" }, { "name": "--pf-c-form-control--invalid--PaddingRight", "description": "Form control invalid right padding", "default": "var(--pf-global--spacer--xl, 2rem)" }, { "name": "--pf-c-form-control--invalid--BorderBottomColor", "description": "Form control invalid bottom border color", "default": "var(--pf-global--danger-color--100, #c9190b)" }, { "name": "--pf-c-form-control--invalid--PaddingBottom", "description": "Form control invalid bottom padding", "default": "calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--invalid--BorderBottomWidth))" }, { "name": "--pf-c-form-control--invalid--BackgroundUrl", "description": "Form control invalid background URL", "default": "url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fe5142' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E\")" }, { "name": "--pf-c-form-control--invalid--BackgroundPosition", "description": "Form control invalid background position", "default": "var(--pf-c-form-control--invalid--BackgroundPositionX) var(--pf-c-form-control--invalid--BackgroundPositionY)" }, { "name": "--pf-c-form-control--invalid--BackgroundSize", "description": "Form control invalid background size", "default": "var(--pf-c-form-control--invalid--BackgroundSizeX) var(--pf-c-form-control--invalid--BackgroundSizeY)" }, { "name": "--pf-c-form-control--invalid--BorderBottomWidth", "description": "Form control invalid bottom border width", "default": "var(--pf-global--BorderWidth--md, 2px)" }, { "name": "--pf-c-form-control--disabled--BackgroundColor", "description": "Form control disabled background color", "default": "var(--pf-global--disabled-color--300, #f0f0f0)" }, { "name": "--pf-c-form-control--disabled--Color", "description": "Form control disabled color", "default": "var(--pf-global--disabled-color--100, #6a6e73)" }, { "name": "--pf-c-form-control--disabled--BorderColor", "description": "Form control disabled border color", "default": "transparent" }, { "name": "--pf-c-form-control--readonly--BackgroundColor", "description": "Form control readonly background color", "default": "var(--pf-global--disabled-color--300, #f0f0f0)" } ], "demos": [ { "url": "https://patternflyelements.org/components/text-area/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-text-area/demo/index.html" } }, { "url": "https://patternflyelements.org/components/text-area/demo/auto-resizing/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-text-area/demo/auto-resizing.html" } }, { "url": "https://patternflyelements.org/components/text-area/demo/disabled/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-text-area/demo/disabled.html" } }, { "url": "https://patternflyelements.org/components/text-area/demo/horizontally-resizable/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-text-area/demo/horizontally-resizable.html" } }, { "url": "https://patternflyelements.org/components/text-area/demo/invalid/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-text-area/demo/invalid.html" } }, { "url": "https://patternflyelements.org/components/text-area/demo/readonly/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-text-area/demo/readonly.html" } }, { "url": "https://patternflyelements.org/components/text-area/demo/validated/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-text-area/demo/validated.html" } }, { "url": "https://patternflyelements.org/components/text-area/demo/vertically-resizable/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-text-area/demo/vertically-resizable.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-text-area", "declaration": { "name": "PfTextArea", "module": "pf-text-area/pf-text-area.js" } }, { "kind": "js", "name": "PfTextArea", "declaration": { "name": "PfTextArea", "module": "pf-text-area/pf-text-area.js" } } ] }, { "kind": "javascript-module", "path": "pf-text-input/pf-text-input.js", "declarations": [ { "name": "PfTextInput", "description": "A **text input** is used to gather free-form text from a user.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "leftTruncated", "description": "Trim text on left", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "left-truncated", "reflects": true }, { "name": "validated", "description": "Value to indicate if the input is modified to show that validation state.\nIf set to success, input will be modified to indicate valid state.\nIf set to warning, input will be modified to indicate warning state.\nInvalid inputs will display an error state", "type": { "text": "'success' | 'warning'" }, "kind": "field", "attribute": "validated", "reflects": true }, { "name": "icon", "description": "icon variant", "type": { "text": "'calendar' | 'clock' | 'search'" }, "kind": "field", "attribute": "icon", "reflects": true }, { "name": "accessibleLabel", "description": "Accessible label for the input when no `\u003clabel\u003e` element is provided.", "type": { "text": "string" }, "kind": "field", "attribute": "accessible-label", "reflects": true }, { "name": "customIconUrl", "description": "Custom icon url to set as the text input's background-image", "type": { "text": "string" }, "kind": "field", "attribute": "custom-icon-url", "reflects": true }, { "name": "customIconDimensions", "description": "Dimensions for the custom icon set as the text input's background-size", "type": { "text": "string" }, "kind": "field", "attribute": "custom-icon-dimensions", "reflects": true }, { "name": "plain", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "plain", "reflects": true }, { "name": "type", "description": "Type that the input accepts.", "type": { "text": "| 'text'\n | 'date'\n | 'datetime-local'\n | 'email'\n | 'month'\n | 'number'\n | 'password'\n | 'search'\n | 'tel'\n | 'time'\n | 'url'" }, "kind": "field", "attribute": "type", "reflects": true }, { "name": "disabled", "description": "Flag to show if the input is disabled.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "disabled", "reflects": true }, { "name": "required", "description": "Flag to show if the input is required.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "required", "reflects": true }, { "name": "pattern", "description": "Validation pattern, like `\u003cinput\u003e`", "type": { "text": "string" }, "kind": "field", "attribute": "pattern" }, { "name": "readonly", "description": "Flag to show if the input is read only.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "readonly", "reflects": true }, { "name": "helperText", "description": "Helper text is text below a form field that helps a user provide the right information, like \"Enter a unique name\".", "type": { "text": "string" }, "kind": "field", "attribute": "helper-text" }, { "name": "validateOn", "description": "If set to 'blur', will validate when focus leaves the input", "type": { "text": "'blur'" }, "kind": "field", "attribute": "validate-on" }, { "name": "errorText", "description": "Displayed when validation fails", "type": { "text": "string" }, "kind": "field", "attribute": "error-text" }, { "name": "placeholder", "description": "Input placeholder.", "type": { "text": "string" }, "kind": "field", "attribute": "placeholder" }, { "name": "value", "description": "Value of the input.", "type": { "text": "string" }, "default": "''", "kind": "field", "attribute": "value" }, { "parameters": [ { "name": "message", "type": { "text": "string" } } ], "return": { "type": { "text": "void" } }, "name": "setCustomValidity", "kind": "method" }, { "return": { "type": { "text": "boolean" } }, "name": "checkValidity", "kind": "method" }, { "return": { "type": { "text": "boolean" } }, "name": "reportValidity", "kind": "method" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-text-input/pf-text-input.ts#L16" }, "kind": "class", "tagName": "pf-text-input", "attributes": [ { "name": "left-truncated", "description": "Trim text on left", "type": { "text": "boolean" }, "default": "false", "fieldName": "leftTruncated" }, { "name": "validated", "description": "Value to indicate if the input is modified to show that validation state.\nIf set to success, input will be modified to indicate valid state.\nIf set to warning, input will be modified to indicate warning state.\nInvalid inputs will display an error state", "type": { "text": "'success' | 'warning'" }, "fieldName": "validated" }, { "name": "icon", "description": "icon variant", "type": { "text": "'calendar' | 'clock' | 'search'" }, "fieldName": "icon" }, { "name": "accessible-label", "description": "Accessible label for the input when no `\u003clabel\u003e` element is provided.", "type": { "text": "string" }, "fieldName": "accessibleLabel" }, { "name": "custom-icon-url", "description": "Custom icon url to set as the text input's background-image", "type": { "text": "string" }, "fieldName": "customIconUrl" }, { "name": "custom-icon-dimensions", "description": "Dimensions for the custom icon set as the text input's background-size", "type": { "text": "string" }, "fieldName": "customIconDimensions" }, { "name": "plain", "type": { "text": "boolean" }, "default": "false", "fieldName": "plain" }, { "name": "type", "description": "Type that the input accepts.", "type": { "text": "| 'text'\n | 'date'\n | 'datetime-local'\n | 'email'\n | 'month'\n | 'number'\n | 'password'\n | 'search'\n | 'tel'\n | 'time'\n | 'url'" }, "fieldName": "type" }, { "name": "disabled", "description": "Flag to show if the input is disabled.", "type": { "text": "boolean" }, "default": "false", "fieldName": "disabled" }, { "name": "required", "description": "Flag to show if the input is required.", "type": { "text": "boolean" }, "default": "false", "fieldName": "required" }, { "name": "pattern", "description": "Validation pattern, like `\u003cinput\u003e`", "type": { "text": "string" }, "fieldName": "pattern" }, { "name": "readonly", "description": "Flag to show if the input is read only.", "type": { "text": "boolean" }, "default": "false", "fieldName": "readonly" }, { "name": "helper-text", "description": "Helper text is text below a form field that helps a user provide the right information, like \"Enter a unique name\".", "type": { "text": "string" }, "fieldName": "helperText" }, { "name": "validate-on", "description": "If set to 'blur', will validate when focus leaves the input", "type": { "text": "'blur'" }, "fieldName": "validateOn" }, { "name": "error-text", "description": "Displayed when validation fails", "type": { "text": "string" }, "fieldName": "errorText" }, { "name": "placeholder", "description": "Input placeholder.", "type": { "text": "string" }, "fieldName": "placeholder" }, { "name": "value", "description": "Value of the input.", "type": { "text": "string" }, "default": "''", "fieldName": "value" } ], "cssProperties": [ { "name": "--pf-global--FontSize--md", "default": "1rem" }, { "name": "--pf-global--LineHeight--md", "default": "1.5" }, { "name": "--pf-global--BorderColor--300", "default": "#f0f0f0" }, { "name": "--pf-global--BackgroundColor--100", "default": "#fff" }, { "name": "--pf-c-form-control--focus--PaddingBottom", "description": "Form control focus bottom padding", "default": "calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--focus--BorderBottomWidth))" }, { "name": "--pf-c-form-control--focus--BorderBottomColor", "description": "Form control focus bottom border color", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-c-form-control--m-expanded--BorderBottomWidth", "description": "Form control expanded bottom border width", "default": "var(--pf-global--BorderWidth--md, 2px)" }, { "name": "--pf-c-form-control--m-expanded--PaddingBottom", "description": "Form control expanded bottom padding", "default": "calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--focus--BorderBottomWidth))" }, { "name": "--pf-c-form-control--focus--BorderBottomWidth", "description": "Form control focus bottom border width", "default": "var(--pf-global--BorderWidth--md, 2px)" }, { "name": "--pf-c-form-control--m-expanded--BorderBottomColor", "description": "Form control expanded bottom border color", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-global--primary-color--100", "default": "#06c" }, { "name": "--pf-global--Color--dark-200", "default": "#6a6e73" }, { "name": "--pf-c-form-control--placeholder--child--Color", "description": "Form control placeholder child color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-global--Color--100", "default": "#151515" }, { "name": "--pf-global--disabled-color--100", "default": "#6a6e73" }, { "name": "--pf-global--disabled-color--300", "default": "#f0f0f0" }, { "name": "--pf-c-form-control--readonly--hover--BorderBottomColor", "description": "Form control readonly hover bottom border color", "default": "var(--pf-global--BorderColor--200, #8a8d90)" }, { "name": "--pf-c-form-control--readonly--focus--PaddingBottom", "description": "Form control readonly focus bottom padding", "default": "calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px))" }, { "name": "--pf-c-form-control--readonly--focus--BorderBottomWidth", "description": "Form control readonly focus bottom border width", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-global--BorderWidth--sm", "default": "1px" }, { "name": "--pf-c-form-control--readonly--focus--BorderBottomColor", "description": "Form control readonly focus bottom border color", "default": "var(--pf-global--BorderColor--200, #8a8d90)" }, { "name": "--pf-global--BorderColor--200", "default": "#8a8d90" }, { "name": "--pf-global--success-color--100", "default": "#3e8635" }, { "name": "--pf-c-form-control--success--BackgroundPositionX", "description": "Form control success background X position", "default": "calc(100% - var(--pf-c-form-control--PaddingLeft))" }, { "name": "--pf-c-form-control--success--BackgroundPositionY", "description": "Form control success background Y position", "default": "center" }, { "name": "--pf-c-form-control--success--BackgroundSizeX", "description": "Form control success background X size", "default": "var(--pf-c-form-control--FontSize)" }, { "name": "--pf-c-form-control--success--BackgroundSizeY", "description": "Form control success background Y size", "default": "var(--pf-c-form-control--FontSize)" }, { "name": "--pf-global--warning-color--100", "default": "#f0ab00" }, { "name": "--pf-c-form-control--m-warning--BackgroundPositionX", "description": "Form control warning background X position", "default": "calc(100% - calc(var(--pf-c-form-control--PaddingLeft) - 0.0625rem))" }, { "name": "--pf-c-form-control--m-warning--BackgroundPositionY", "description": "Form control warning background Y position", "default": "center" }, { "name": "--pf-c-form-control--m-warning--BackgroundSizeX", "description": "Form control warning background X size", "default": "1.25rem" }, { "name": "--pf-c-form-control--m-warning--BackgroundSizeY", "description": "Form control warning background Y size", "default": "var(--pf-c-form-control--FontSize)" }, { "name": "--pf-global--BorderWidth--md", "default": "2px" }, { "name": "--pf-global--spacer--form-element", "default": "0.375rem" }, { "name": "--pf-c-form-control--invalid--BackgroundPositionX", "description": "Form control invalid background X position", "default": "calc(100% - var(--pf-c-form-control--PaddingLeft))" }, { "name": "--pf-c-form-control--invalid--BackgroundPositionY", "description": "Form control invalid background Y position", "default": "center" }, { "name": "--pf-c-form-control--invalid--BackgroundSizeY", "description": "Form control invalid background Y size", "default": "var(--pf-c-form-control--FontSize)" }, { "name": "--pf-c-form-control--invalid--Background", "description": "Form control invalid background", "default": "var(--pf-c-form-control--BackgroundColor) var(--pf-c-form-control--invalid--exclamation--Background)" }, { "name": "--pf-c-form-control--invalid--exclamation--Background", "description": "Form control invalid exclamation background", "default": "var(--pf-c-form-control--invalid--BackgroundUrl) var(--pf-c-form-control--invalid--BackgroundPosition) / var(--pf-c-form-control--invalid--BackgroundSize) no-repeat" }, { "name": "--pf-c-form-control--m-search--PaddingLeft", "description": "Form control search left padding", "default": "var(--pf-global--spacer--xl, 2rem)" }, { "name": "--pf-global--spacer--xl", "default": "2rem" }, { "name": "--pf-c-form-control--m-search--BackgroundPosition", "description": "Form control search background position", "default": "var(--pf-c-form-control--PaddingRight)" }, { "name": "--pf-c-form-control--m-search--BackgroundSize", "description": "Form control search background size", "default": "var(--pf-c-form-control--FontSize) var(--pf-c-form-control--FontSize)" }, { "name": "--pf-c-form-control--m-search--BackgroundUrl", "description": "Form control search background URL", "default": "url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E\")" }, { "name": "--pf-c-form-control--m-icon--icon--PaddingRight", "description": "Form control icon right padding with validation", "default": "calc(var(--pf-c-form-control--inset--base) + var(--pf-c-form-control--invalid--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer) + var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer))" }, { "name": "--pf-c-form-control--inset--base", "description": "Form control base inset", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-form-control--m-icon--icon--spacer", "description": "Form control icon spacer", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-form-control--invalid--BackgroundSizeX", "description": "Form control invalid background X size", "default": "var(--pf-c-form-control--FontSize)" }, { "name": "--pf-c-form-control--m-icon--invalid--BackgroundUrl", "description": "Form control icon invalid background URL", "default": "var(--pf-c-form-control--invalid--BackgroundUrl)" }, { "name": "--pf-c-form-control--m-icon--invalid--BackgroundPosition", "description": "Form control icon invalid background position", "default": "var(--pf-c-form-control--invalid--BackgroundPosition)" }, { "name": "--pf-c-form-control--m-icon--invalid--BackgroundSize", "description": "Form control icon invalid background size", "default": "var(--pf-c-form-control--invalid--BackgroundSize)" }, { "name": "--pf-c-form-control--m-icon--success--BackgroundUrl", "description": "Form control icon success background URL", "default": "var(--pf-c-form-control--success--BackgroundUrl)" }, { "name": "--pf-c-form-control--m-icon--success--BackgroundPosition", "description": "Form control icon success background position", "default": "var(--pf-c-form-control--success--BackgroundPosition)" }, { "name": "--pf-c-form-control--m-icon--success--BackgroundSize", "description": "Form control icon success background size", "default": "var(--pf-c-form-control--success--BackgroundSize)" }, { "name": "--pf-c-form-control--m-icon--m-warning--BackgroundUrl", "description": "Form control icon warning background URL", "default": "var(--pf-c-form-control--m-warning--BackgroundUrl)" }, { "name": "--pf-c-form-control--m-icon--m-warning--BackgroundPosition", "description": "Form control icon warning background position", "default": "var(--pf-c-form-control--m-warning--BackgroundPosition)" }, { "name": "--pf-c-form-control--m-icon--icon--BackgroundPositionX", "description": "Form control icon background X position with validation", "default": "calc(var(--pf-c-form-control--m-icon--BackgroundPositionX) - var(--pf-c-form-control--m-icon--icon--spacer) - var(--pf-c-form-control--invalid--BackgroundSizeX))" }, { "name": "--pf-c-form-control--m-icon--m-warning--BackgroundSize", "description": "Form control icon warning background size", "default": "var(--pf-c-form-control--m-warning--BackgroundSize)" }, { "name": "--pf-c-form-control__select--PaddingRight", "description": "Select right padding", "default": "calc(var(--pf-global--spacer--lg, 1.5rem) + var(--pf-c-form-control--BorderWidth) + var(--pf-c-form-control--BorderWidth))" }, { "name": "--pf-c-form-control__select--PaddingLeft", "description": "Select left padding", "default": "calc(var(--pf-global--spacer--sm, 0.5rem) - var(--pf-c-form-control--BorderWidth))" }, { "name": "--pf-global--spacer--sm", "default": "0.5rem" }, { "name": "--pf-c-form-control__select--BackgroundUrl", "description": "Select background URL", "default": "url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E\")" }, { "name": "--pf-c-form-control__select--BackgroundSize", "description": "Select background size", "default": ".625em" }, { "name": "--pf-c-form-control__select--BackgroundPosition", "description": "Select background position", "default": "var(--pf-c-form-control__select--BackgroundPositionX) var(--pf-c-form-control__select--BackgroundPositionY)" }, { "name": "--pf-c-form-control__select--BackgroundPositionY", "description": "Select background Y position", "default": "center" }, { "name": "--pf-c-form-control__select--success--PaddingRight", "description": "Select success right padding", "default": "var(--pf-global--spacer--3xl, 4rem)" }, { "name": "--pf-c-form-control__select--success--BackgroundPosition", "description": "Select success background position", "default": "calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem))" }, { "name": "--pf-c-form-control__select--m-warning--PaddingRight", "description": "Select warning right padding", "default": "var(--pf-global--spacer--3xl, 4rem)" }, { "name": "--pf-c-form-control__select--m-warning--BackgroundPosition", "description": "Select warning background position", "default": "calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem) + 0.0625rem)" }, { "name": "--pf-c-form-control__select--invalid--PaddingRight", "description": "Select invalid right padding", "default": "var(--pf-global--spacer--3xl, 4rem)" }, { "name": "--pf-global--spacer--3xl", "default": "4rem" }, { "name": "--pf-c-form-control__select--invalid--BackgroundPosition", "description": "Select invalid background position", "default": "calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem))" }, { "name": "--pf-c-form-control__select--BackgroundPositionX", "description": "Select background X position", "default": "calc(100% - var(--pf-global--spacer--md, 1rem) + 1px)" }, { "name": "--pf-c-form-control--textarea--Width", "description": "Textarea width", "default": "var(--pf-c-form-control--Width)" }, { "name": "--pf-c-form-control--textarea--Height", "description": "Textarea height", "default": "auto" }, { "name": "--pf-c-form-control--textarea--success--BackgroundPositionY", "description": "Textarea success background Y position", "default": "var(--pf-c-form-control--PaddingLeft)" }, { "name": "--pf-c-form-control--textarea--m-warning--BackgroundPositionY", "description": "Textarea warning background Y position", "default": "var(--pf-c-form-control--PaddingLeft)" }, { "name": "--pf-c-form-control--textarea--invalid--BackgroundPositionY", "description": "Textarea invalid background Y position", "default": "var(--pf-c-form-control--PaddingLeft)" }, { "name": "--pf-c-form-control--m-icon-sprite--success--BackgroundUrl", "description": "Icon sprite success background URL", "default": "url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#success" }, { "name": "--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl", "description": "Icon sprite warning background URL", "default": "url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#warning" }, { "name": "--pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl", "description": "Icon sprite invalid background URL", "default": "url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#invalid" }, { "name": "--pf-c-form-control--m-icon-sprite__select--BackgroundUrl", "description": "Icon sprite select background URL", "default": "url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#select" }, { "name": "--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl", "description": "Icon sprite search background URL", "default": "url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#search" }, { "name": "--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl", "description": "Icon sprite calendar background URL", "default": "url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#calendar" }, { "name": "--pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl", "description": "Icon sprite clock background URL", "default": "url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#clock" }, { "name": "--pf-c-form-control--m-icon-sprite__select--BackgroundSize", "description": "Icon sprite select background size", "default": "var(--pf-c-form-control--FontSize)" }, { "name": "--pf-c-form-control--m-icon-sprite__select--BackgroundPositionX", "description": "Icon sprite select background X position", "default": "calc(100% - var(--pf-global--spacer--md, 1rem) + 7px)" }, { "name": "--pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition", "description": "Icon sprite select success background position", "default": "calc(100% - var(--pf-global--spacer--md, 1rem) + 1px - var(--pf-global--spacer--lg, 1.5rem))" }, { "name": "--pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition", "description": "Icon sprite select warning background position", "default": "calc(100% - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg, 1.5rem) + 0.0625rem)" }, { "name": "--pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition", "description": "Icon sprite select invalid background position", "default": "calc(100% - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg, 1.5rem))" }, { "name": "--pf-global--spacer--md", "default": "1rem" }, { "name": "--pf-global--spacer--lg", "default": "1.5rem" }, { "name": "--pf-global--danger-color--100", "default": "#c9190b" }, { "name": "--pf-c-form-control--Color", "description": "Form control text color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-c-form-control--Width", "description": "Form control width", "default": "100%" }, { "name": "--pf-c-form-control--PaddingTop", "description": "Form control top padding", "default": "calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px))" }, { "name": "--pf-c-form-control--PaddingBottom", "description": "Form control bottom padding", "default": "calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px))" }, { "name": "--pf-c-form-control--PaddingLeft", "description": "Form control left padding", "default": "var(--pf-c-form-control--inset--base)" }, { "name": "--pf-c-form-control--FontSize", "description": "Form control font size", "default": "var(--pf-global--FontSize--md, 1rem)" }, { "name": "--pf-c-form-control--LineHeight", "description": "Form control line height", "default": "var(--pf-global--LineHeight--md, 1.5)" }, { "name": "--pf-c-form-control--BackgroundColor", "description": "Form control background color", "default": "var(--pf-global--BackgroundColor--100, #fff)" }, { "name": "--pf-c-form-control--BorderWidth", "description": "Form control border width", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-c-form-control--BorderTopColor", "description": "Form control top border color", "default": "var(--pf-global--BorderColor--300, #f0f0f0)" }, { "name": "--pf-c-form-control--BorderRightColor", "description": "Form control right border color", "default": "var(--pf-global--BorderColor--300, #f0f0f0)" }, { "name": "--pf-c-form-control--BorderBottomColor", "description": "Form control bottom border color", "default": "var(--pf-global--BorderColor--200, #8a8d90)" }, { "name": "--pf-c-form-control--BorderLeftColor", "description": "Form control left border color", "default": "var(--pf-global--BorderColor--300, #f0f0f0)" }, { "name": "--pf-c-form-control--BorderRadius", "description": "Form control border radius", "default": "0" }, { "name": "--pf-c-form-control--Height", "description": "Form control height", "default": "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))" }, { "name": "--pf-c-form-control--disabled--BackgroundColor", "description": "Form control disabled background color", "default": "var(--pf-global--disabled-color--300, #f0f0f0)" }, { "name": "--pf-c-form-control--disabled--Color", "description": "Form control disabled color", "default": "var(--pf-global--disabled-color--100, #6a6e73)" }, { "name": "--pf-c-form-control--disabled--BorderColor", "description": "Form control disabled border color", "default": "transparent" }, { "name": "--pf-c-form-control--hover--BorderBottomColor", "description": "Form control hover bottom border color", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-c-form-control--placeholder--Color", "description": "Form control placeholder color", "default": "var(--pf-global--Color--dark-200, #6a6e73)" }, { "name": "--pf-c-form-control__error-text--m-status--Color", "description": "Error text status color", "default": "var(--pf-global--danger-color--100, #c9190b)" }, { "name": "--pf-c-form-control--readonly--BackgroundColor", "description": "Form control readonly background color", "default": "var(--pf-c-form-control--readonly--m-plain--BackgroundColor)" }, { "name": "--pf-c-form-control--readonly--m-plain--BackgroundColor", "description": "Form control readonly plain background color", "default": "transparent" }, { "name": "--pf-c-form-control--readonly--m-plain--inset--base", "description": "Form control readonly plain base inset", "default": "0" }, { "name": "--pf-c-form-control--invalid--PaddingRight", "description": "Form control invalid right padding", "default": "var(--pf-global--spacer--xl, 2rem)" }, { "name": "--pf-c-form-control--invalid--BorderBottomColor", "description": "Form control invalid bottom border color", "default": "var(--pf-global--danger-color--100, #c9190b)" }, { "name": "--pf-c-form-control--invalid--PaddingBottom", "description": "Form control invalid bottom padding", "default": "calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--invalid--BorderBottomWidth))" }, { "name": "--pf-c-form-control--invalid--BackgroundUrl", "description": "Form control invalid background URL", "default": "url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fe5142' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E\")" }, { "name": "--pf-c-form-control--invalid--BackgroundPosition", "description": "Form control invalid background position", "default": "var(--pf-c-form-control--invalid--BackgroundPositionX) var(--pf-c-form-control--invalid--BackgroundPositionY)" }, { "name": "--pf-c-form-control--invalid--BackgroundSize", "description": "Form control invalid background size", "default": "var(--pf-c-form-control--invalid--BackgroundSizeX) var(--pf-c-form-control--invalid--BackgroundSizeY)" }, { "name": "--pf-c-form-control--invalid--BorderBottomWidth", "description": "Form control invalid bottom border width", "default": "var(--pf-global--BorderWidth--md, 2px)" }, { "name": "--pf-c-form-control--m-icon--PaddingRight", "description": "Form control icon right padding", "default": "calc(var(--pf-c-form-control--inset--base) + var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer))" }, { "name": "--pf-c-form-control--m-icon--BackgroundPositionX", "description": "Form control icon background X position", "default": "calc(100% - var(--pf-c-form-control--inset--base))" }, { "name": "--pf-c-form-control--m-icon--BackgroundPositionY", "description": "Form control icon background Y position", "default": "center" }, { "name": "--pf-c-form-control--m-icon--BackgroundSizeX", "description": "Form control icon background X size", "default": "var(--pf-c-form-control--FontSize)" }, { "name": "--pf-c-form-control--m-icon--BackgroundSizeY", "description": "Form control icon background Y size", "default": "var(--pf-c-form-control--FontSize)" }, { "name": "--pf-c-form-control--m-calendar--BackgroundUrl", "description": "Form control calendar background URL", "default": "url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E\")" }, { "name": "--pf-c-form-control--m-icon--BackgroundUrl", "description": "Form control icon background URL", "default": "var(--pf-c-form-control--m-clock--BackgroundUrl)" }, { "name": "--pf-c-form-control--m-clock--BackgroundUrl", "description": "Form control clock background URL", "default": "url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E\")" }, { "name": "--pf-c-form-control--success--PaddingRight", "description": "Form control success right padding", "default": "var(--pf-global--spacer--xl, 2rem)" }, { "name": "--pf-c-form-control--success--BorderBottomColor", "description": "Form control success bottom border color", "default": "var(--pf-global--success-color--100, #3e8635)" }, { "name": "--pf-c-form-control--success--PaddingBottom", "description": "Form control success bottom padding", "default": "calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--success--BorderBottomWidth))" }, { "name": "--pf-c-form-control--success--BackgroundUrl", "description": "Form control success background URL", "default": "url('data:image/svg+xml;charset=utf8,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"%3E%3Cpath fill=\"%235ba352\" d=\"M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z\"/%3E%3C/svg%3E')" }, { "name": "--pf-c-form-control--success--BackgroundPosition", "description": "Form control success background position", "default": "var(--pf-c-form-control--success--BackgroundPositionX) var(--pf-c-form-control--success--BackgroundPositionY)" }, { "name": "--pf-c-form-control--success--BackgroundSize", "description": "Form control success background size", "default": "var(--pf-c-form-control--success--BackgroundSizeX) var(--pf-c-form-control--success--BackgroundSizeY)" }, { "name": "--pf-c-form-control--success--BorderBottomWidth", "description": "Form control success bottom border width", "default": "var(--pf-global--BorderWidth--md, 2px)" }, { "name": "--pf-c-form-control--PaddingRight", "description": "Form control right padding", "default": "var(--pf-c-form-control--m-warning--PaddingRight)" }, { "name": "--pf-c-form-control--m-warning--PaddingRight", "description": "Form control warning right padding", "default": "var(--pf-global--spacer--xl, 2rem)" }, { "name": "--pf-c-form-control--m-warning--BorderBottomColor", "description": "Form control warning bottom border color", "default": "var(--pf-global--warning-color--100, #f0ab00)" }, { "name": "--pf-c-form-control--m-warning--PaddingBottom", "description": "Form control warning bottom padding", "default": "calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--m-warning--BorderBottomWidth))" }, { "name": "--pf-c-form-control--m-warning--BackgroundUrl", "description": "Form control warning background URL", "default": "url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23f0ab00' d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E\")" }, { "name": "--pf-c-form-control--m-warning--BackgroundPosition", "description": "Form control warning background position", "default": "var(--pf-c-form-control--m-warning--BackgroundPositionX) var(--pf-c-form-control--m-warning--BackgroundPositionY)" }, { "name": "--pf-c-form-control--m-warning--BackgroundSize", "description": "Form control warning background size", "default": "var(--pf-c-form-control--m-warning--BackgroundSizeX) var(--pf-c-form-control--m-warning--BackgroundSizeY)" }, { "name": "--pf-c-form-control--m-warning--BorderBottomWidth", "description": "Form control warning bottom border width", "default": "var(--pf-global--BorderWidth--md, 2px)" } ], "demos": [ { "url": "https://patternflyelements.org/components/text-input/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-text-input/demo/index.html" } }, { "url": "https://patternflyelements.org/components/text-input/demo/disabled/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-text-input/demo/disabled.html" } }, { "url": "https://patternflyelements.org/components/text-input/demo/form-submission/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-text-input/demo/form-submission.html" } }, { "url": "https://patternflyelements.org/components/text-input/demo/icon-variants/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-text-input/demo/icon-variants.html" } }, { "url": "https://patternflyelements.org/components/text-input/demo/invalid/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-text-input/demo/invalid.html" } }, { "url": "https://patternflyelements.org/components/text-input/demo/kitchen-sink/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-text-input/demo/kitchen-sink.html" } }, { "url": "https://patternflyelements.org/components/text-input/demo/left-truncated/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-text-input/demo/left-truncated.html" } }, { "url": "https://patternflyelements.org/components/text-input/demo/read-only/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-text-input/demo/read-only.html" } }, { "url": "https://patternflyelements.org/components/text-input/demo/validation/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-text-input/demo/validation.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-text-input", "declaration": { "name": "PfTextInput", "module": "pf-text-input/pf-text-input.js" } }, { "kind": "js", "name": "PfTextInput", "declaration": { "name": "PfTextInput", "module": "pf-text-input/pf-text-input.js" } } ] }, { "kind": "javascript-module", "path": "pf-tile/pf-tile.js", "declarations": [ { "name": "PfTile", "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.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "selected", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "selected", "reflects": true }, { "name": "stacked", "type": { "text": "StackedSize" }, "kind": "field", "attribute": "stacked", "reflects": true } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tile/pf-tile.ts#L23" }, "kind": "class", "tagName": "pf-tile", "attributes": [ { "name": "selected", "description": "selected variant", "type": { "text": "'boolean'" } }, { "name": "stacked", "description": "stacked variant", "type": { "text": "'md'|'lg'|null" } }, { "name": "selected", "type": { "text": "boolean" }, "default": "false", "fieldName": "selected" }, { "name": "stacked", "type": { "text": "StackedSize" }, "fieldName": "stacked" } ], "slots": [ { "name": "icon", "description": "Icon expects a `\u003cpf-icon\u003e` or `\u003csvg\u003e`" }, { "name": "title", "description": "the title of the tile should be a heading" }, { "name": "", "description": "The content should be a paragraph" } ], "cssParts": [ { "name": "header" }, { "name": "icon", "description": "container for the icon" }, { "name": "title", "description": "container for the title" }, { "name": "body", "description": "container for the body content" } ], "cssProperties": [ { "name": "--pf-c-tile--PaddingTop", "description": "Top padding for tile", "default": "var(--pf-global--spacer--lg, 1.5rem)" }, { "name": "--pf-c-tile--PaddingRight", "description": "Right padding for tile", "default": "var(--pf-global--spacer--lg, 1.5rem)" }, { "name": "--pf-c-tile--PaddingBottom", "description": "Bottom padding for tile", "default": "var(--pf-global--spacer--lg, 1.5rem)" }, { "name": "--pf-c-tile--PaddingLeft", "description": "Left padding for tile", "default": "var(--pf-global--spacer--lg, 1.5rem)" }, { "name": "--pf-global--spacer--lg", "default": "1.5rem" }, { "name": "--pf-global--BackgroundColor--100", "default": "var(--pf-global--BackgroundColor--light-100), #ffffff" }, { "name": "--pf-global--BackgroundColor--light-100" }, { "name": "--pf-c-tile--Transition", "description": "Transition animation for tile", "default": "none" }, { "name": "--pf-c-tile--TranslateY", "default": "0" }, { "name": "--pf-c-tile--before--BorderWidth", "description": "Border width for tile", "default": "var(--pf-global--BorderWidth--sm, 1px)" }, { "name": "--pf-global--BorderWidth--sm", "default": "1px" }, { "name": "--pf-c-tile--before--BorderColor", "description": "Border color for tile", "default": "var(--pf-global--BorderColor--100, #d2d2d2)" }, { "name": "--pf-global--BorderColor--100", "default": "#d2d2d2" }, { "name": "--pf-c-tile--after--Height", "default": "var(--pf-global--BorderWidth--lg, 3px)" }, { "name": "--pf-c-tile--after--BackgroundColor", "default": "transparent" }, { "name": "--pf-c-tile--after--Transition", "default": "none" }, { "name": "--pf-c-tile--after--ScaleY", "default": "1" }, { "name": "--pf-c-tile--after--TranslateY", "default": "0" }, { "name": "--pf-c-tile--hover__title--Color", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-c-tile--hover__icon--Color", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-c-tile--hover--after--BackgroundColor", "default": "var(--pf-global--active-color--400, #73bcf7)" }, { "name": "--pf-c-tile--focus__title--Color", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-c-tile--focus__icon--Color", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-c-tile--focus--after--BackgroundColor", "default": "var(--pf-global--active-color--400, #73bcf7)" }, { "name": "--pf-global--active-color--400", "default": "#73bcf7" }, { "name": "--pf-c-tile--m-selected__title--Color", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-c-tile--m-selected__icon--Color", "default": "var(--pf-global--primary-color--100, #06c)" }, { "name": "--pf-global--primary-color--100", "default": "#06c" }, { "name": "--pf-c-tile--m-selected--TranslateY", "default": "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)))" }, { "name": "--pf-c-tile--m-selected--Transition", "default": "var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1))" }, { "name": "--pf-c-tile--m-selected--after--Height", "default": "var(--pf-global--BorderWidth--lg, 3px)" }, { "name": "--pf-global--BorderWidth--lg", "default": "3px" }, { "name": "--pf-c-tile--m-selected--after--BackgroundColor", "default": "var(--pf-global--active-color--100, #06c)" }, { "name": "--pf-global--active-color--100", "default": "#06c" }, { "name": "--pf-c-tile--m-selected--after--Transition", "default": "var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1))" }, { "name": "--pf-global--Transition", "default": "all 250ms cubic-bezier(0.42, 0, 0.58, 1)" }, { "name": "--pf-c-tile--m-selected--after--ScaleY", "default": "2" }, { "name": "--pf-c-tile--BackgroundColor", "description": "Background color for tile", "default": "var(--pf-c-tile--m-disabled--BackgroundColor, var( --pf-global--disabled-color--300, #f0f0f0))" }, { "name": "--pf-c-tile--m-disabled--BackgroundColor", "default": "var( --pf-global--disabled-color--300, #f0f0f0)" }, { "name": "--pf-global--disabled-color--300", "default": "#f0f0f0" }, { "name": "--pf-c-tile--m-disabled__title--Color", "default": "var(--pf-global--disabled-color--100, #6a6e73)" }, { "name": "--pf-c-tile--m-disabled__body--Color", "default": "var(--pf-global--disabled-color--100, #6a6e73)" }, { "name": "--pf-c-tile--m-disabled__icon--Color", "default": "var(--pf-global--disabled-color--100, #6a6e73)" }, { "name": "--pf-global--disabled-color--100", "default": "#6a6e73" }, { "name": "--pf-c-tile__title--Color", "description": "Color for tile title", "default": "var(--pf-global--Color--100, var(--pf-global--Color--dark-100, #151515))" }, { "name": "--pf-global--Color--dark-100", "default": "#151515" }, { "name": "--pf-c-tile__body--FontSize", "default": "var(--pf-global--FontSize--xs, 0.75rem)" }, { "name": "--pf-global--FontSize--xs", "default": "0.75rem" }, { "name": "--pf-c-tile__body--Color", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-global--icon--FontSize--md", "default": "1.125rem" }, { "name": "--pf-c-tile__icon--MarginRight", "description": "Right margin for tile icon", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-global--spacer--sm", "default": "0.5rem" }, { "name": "--pf-c-tile__icon--Color", "description": "Color for tile icon", "default": "var(--pf-global--Color--100, #151515)" }, { "name": "--pf-global--Color--100", "default": "#151515" }, { "name": "--pf-c-tile__header--m-stacked__icon--FontSize", "default": "var(--pf-global--icon--FontSize--lg, 1.5rem)" }, { "name": "--pf-global--icon--FontSize--lg", "default": "1.5rem" }, { "name": "--pf-c-tile__icon--FontSize", "description": "Font size for tile icon", "default": "var(--pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize, var(--pf-global--icon--FontSize--xl, 3.375rem))" }, { "name": "--pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize", "default": "var(--pf-global--icon--FontSize--xl, 3.375rem)" }, { "name": "--pf-global--icon--FontSize--xl", "default": "3.375rem" }, { "name": "--pf-c-tile__header--m-stacked__icon--MarginBottom", "default": "var(--pf-global--spacer--xs, 0.25rem)" }, { "name": "--pf-global--spacer--xs", "default": "0.25rem" } ], "demos": [ { "url": "https://patternflyelements.org/components/tile/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tile/demo/index.html" } }, { "url": "https://patternflyelements.org/components/tile/demo/extra-content/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tile/demo/extra-content.html" } }, { "url": "https://patternflyelements.org/components/tile/demo/icon/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tile/demo/icon.html" } }, { "url": "https://patternflyelements.org/components/tile/demo/keyboard-interaction/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tile/demo/keyboard-interaction.html" } }, { "url": "https://patternflyelements.org/components/tile/demo/stacked-icon/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tile/demo/stacked-icon.html" } }, { "url": "https://patternflyelements.org/components/tile/demo/stacked-large-icon/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tile/demo/stacked-large-icon.html" } }, { "url": "https://patternflyelements.org/components/tile/demo/subtext/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tile/demo/subtext.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-tile", "declaration": { "name": "PfTile", "module": "pf-tile/pf-tile.js" } }, { "kind": "js", "name": "PfTile", "declaration": { "name": "PfTile", "module": "pf-tile/pf-tile.js" } } ] }, { "kind": "javascript-module", "path": "pf-timestamp/pf-timestamp.js", "declarations": [ { "name": "PfTimestamp", "description": "A **timestamp** provides consistent formats for displaying date and time values.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "dateFormat", "type": { "text": "DateTimeFormat" }, "kind": "field", "attribute": "date-format", "reflects": true }, { "name": "timeFormat", "type": { "text": "DateTimeFormat" }, "kind": "field", "attribute": "time-format", "reflects": true }, { "name": "customFormat", "type": { "text": "object" }, "kind": "field" }, { "name": "displaySuffix", "type": { "text": "string" }, "kind": "field", "attribute": "display-suffix", "reflects": true }, { "name": "locale", "type": { "text": "string" }, "kind": "field", "attribute": "locale", "reflects": true }, { "name": "relative", "type": { "text": "boolean" }, "kind": "field", "attribute": "relative", "reflects": true }, { "name": "utc", "type": { "text": "boolean" }, "kind": "field", "attribute": "utc", "reflects": true }, { "name": "hour12", "type": { "text": "boolean" }, "kind": "field", "attribute": "hour-12", "reflects": true }, { "name": "date", "type": { "text": "string" }, "kind": "field", "attribute": "date", "reflects": true }, { "name": "isoString", "type": { "text": "string" }, "readonly": true, "kind": "field" }, { "name": "time", "type": { "text": "string" }, "readonly": true, "kind": "field" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-timestamp/pf-timestamp.ts#L25" }, "kind": "class", "tagName": "pf-timestamp", "attributes": [ { "name": "date-format", "type": { "text": "DateTimeFormat" }, "fieldName": "dateFormat" }, { "name": "time-format", "type": { "text": "DateTimeFormat" }, "fieldName": "timeFormat" }, { "name": "display-suffix", "type": { "text": "string" }, "fieldName": "displaySuffix" }, { "name": "locale", "type": { "text": "string" }, "fieldName": "locale" }, { "name": "relative", "type": { "text": "boolean" }, "fieldName": "relative" }, { "name": "utc", "type": { "text": "boolean" }, "fieldName": "utc" }, { "name": "hour-12", "type": { "text": "boolean" }, "fieldName": "hour12" }, { "name": "date", "type": { "text": "string" }, "fieldName": "date" } ], "demos": [ { "url": "https://patternflyelements.org/components/timestamp/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-timestamp/demo/index.html" } }, { "url": "https://patternflyelements.org/components/timestamp/demo/basic-formats/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-timestamp/demo/basic-formats.html" } }, { "url": "https://patternflyelements.org/components/timestamp/demo/custom-format/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-timestamp/demo/custom-format.html" } }, { "url": "https://patternflyelements.org/components/timestamp/demo/custom-tooltip/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-timestamp/demo/custom-tooltip.html" } }, { "url": "https://patternflyelements.org/components/timestamp/demo/relative-format-with-tooltip/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-timestamp/demo/relative-format-with-tooltip.html" } }, { "url": "https://patternflyelements.org/components/timestamp/demo/relative-format/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-timestamp/demo/relative-format.html" } }, { "url": "https://patternflyelements.org/components/timestamp/demo/tooltip/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-timestamp/demo/tooltip.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-timestamp", "declaration": { "name": "PfTimestamp", "module": "pf-timestamp/pf-timestamp.js" } }, { "kind": "js", "name": "PfTimestamp", "declaration": { "name": "PfTimestamp", "module": "pf-timestamp/pf-timestamp.js" } } ] }, { "kind": "javascript-module", "path": "pf-tooltip/pf-tooltip.js", "declarations": [ { "name": "PfTooltip", "summary": "Toggle the visibility of helpful or contextual information.", "description": "A **tooltip** is in-app messaging used to identify elements on a page with short,\nclarifying text.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "position", "description": "The position of the tooltip, relative to the invoking content", "type": { "text": "Placement" }, "default": "'top'", "kind": "field", "attribute": "position" }, { "name": "content", "description": "Tooltip content. Overridden by the content slot", "type": { "text": "string" }, "kind": "field", "attribute": "content" }, { "name": "noFlip", "description": "If false, prevents the tooltip from trying to remain in view by flipping itself when necessary", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "no-flip" }, { "name": "trigger", "type": { "text": "string | Element" }, "kind": "field", "attribute": "trigger" }, { "name": "flipBehavior", "description": "The flip order when flip is enabled and the initial position is not possible.\nThere are 12 options: `top`, `bottom`, `left`, `right`, `top-start`, `top-end`,\n`bottom-start`, `bottom-end`, `left-start`, `left-end`,`right-start`, `right-end`.\nThe default is [oppositePlacement], where only the opposite placement is tried.", "type": { "text": "Placement[]" }, "kind": "field", "attribute": "flip-behavior" }, { "return": { "type": { "text": "Promise\u003cvoid\u003e" } }, "name": "show", "kind": "method" }, { "return": { "type": { "text": "Promise\u003cvoid\u003e" } }, "name": "hide", "kind": "method" } ], "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tooltip/pf-tooltip.ts#L29" }, "kind": "class", "tagName": "pf-tooltip", "attributes": [ { "name": "position", "description": "The position of the tooltip, relative to the invoking content", "type": { "text": "Placement" }, "default": "'top'", "fieldName": "position" }, { "name": "content", "description": "Tooltip content. Overridden by the content slot", "type": { "text": "string" }, "fieldName": "content" }, { "name": "no-flip", "description": "If false, prevents the tooltip from trying to remain in view by flipping itself when necessary", "type": { "text": "boolean" }, "default": "false", "fieldName": "noFlip" }, { "name": "trigger", "type": { "text": "string | Element" }, "fieldName": "trigger" }, { "name": "flip-behavior", "description": "The flip order when flip is enabled and the initial position is not possible.\nThere are 12 options: `top`, `bottom`, `left`, `right`, `top-start`, `top-end`,\n`bottom-start`, `bottom-end`, `left-start`, `left-end`,`right-start`, `right-end`.\nThe default is [oppositePlacement], where only the opposite placement is tried.", "type": { "text": "Placement[]" }, "fieldName": "flipBehavior" } ], "slots": [ { "name": "", "description": "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." }, { "name": "content", "description": "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." } ], "cssProperties": [ { "name": "--pf-c-tooltip__arrow--Width", "description": "Tooltip arrow width", "default": "0.5rem" }, { "name": "--pf-c-tooltip--line-height", "description": "Sets the font color for the tooltip content", "default": "1.5" }, { "name": "--pf-c-tooltip--MaxWidth", "description": "Maximum width for the tooltip", "default": "18.75rem" }, { "name": "--pf-c-tooltip--BoxShadow", "description": "Box shadow for the tooltip", "default": "var(--pf-global--BoxShadow--md,\n 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12),\n 0 0 0.25rem 0 rgba(3, 3, 3, 0.06))" }, { "name": "--pf-global--BoxShadow--md", "default": "0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)" }, { "name": "--pf-c-tooltip__content--PaddingTop", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-tooltip__content--PaddingRight", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-tooltip__content--PaddingBottom", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-c-tooltip__content--PaddingLeft", "default": "var(--pf-global--spacer--sm, 0.5rem)" }, { "name": "--pf-global--spacer--sm", "default": "0.5rem" }, { "name": "--pf-c-tooltip__content--FontSize", "description": "Font size for the tooltip content", "default": "var(--pf-global--FontSize--sm, 0.875rem)" }, { "name": "--pf-global--FontSize--sm", "default": "0.875rem" }, { "name": "--pf-c-tooltip__content--Color", "description": "Sets the font color for the tooltip content", "default": "var(--pf-global--Color--light-100, #ffffff)" }, { "name": "--pf-global--Color--light-100", "default": "#ffffff" }, { "name": "--pf-c-tooltip__content--BackgroundColor", "description": "Sets the background color for the tooltip content", "default": "var(--pf-global--BackgroundColor--dark-100, #151515)" }, { "name": "--pf-global--BackgroundColor--dark-100", "default": "#151515" } ], "demos": [ { "url": "https://patternflyelements.org/components/tooltip/demo/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tooltip/demo/index.html" } }, { "url": "https://patternflyelements.org/components/tooltip/demo/block-triggers/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tooltip/demo/block-triggers.html" } }, { "url": "https://patternflyelements.org/components/tooltip/demo/custom-styles/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tooltip/demo/custom-styles.html" } }, { "url": "https://patternflyelements.org/components/tooltip/demo/flip/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tooltip/demo/flip.html" } }, { "url": "https://patternflyelements.org/components/tooltip/demo/performance/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tooltip/demo/performance.html" } }, { "url": "https://patternflyelements.org/components/tooltip/demo/placement/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tooltip/demo/placement.html" } }, { "url": "https://patternflyelements.org/components/tooltip/demo/slotted-content/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tooltip/demo/slotted-content.html" } }, { "url": "https://patternflyelements.org/components/tooltip/demo/trigger/", "source": { "href": "https://github.com/patternfly/patternfly-elements/tree/main/pf-tooltip/demo/trigger.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "pf-tooltip", "declaration": { "name": "PfTooltip", "module": "pf-tooltip/pf-tooltip.js" } }, { "kind": "js", "name": "PfTooltip", "declaration": { "name": "PfTooltip", "module": "pf-tooltip/pf-tooltip.js" } } ] } ] }