@rhds/elements
Version:
Red Hat Design System Elements
1,511 lines • 561 kB
JSON
{
"schemaVersion": "1.0.0",
"readme": "",
"modules": [
{
"kind": "javascript-module",
"path": "elements/rh-accordion/rh-accordion-header.js",
"declarations": [
{
"kind": "class",
"description": "",
"name": "AccordionHeaderChangeEvent",
"members": [
{
"kind": "field",
"name": "target",
"type": {
"text": "RhAccordionHeader"
}
}
],
"superclass": {
"name": "Event",
"module": "elements/rh-accordion/rh-accordion-header.ts"
}
},
{
"kind": "class",
"description": "Accordion Header",
"name": "RhAccordionHeader",
"cssParts": [
{
"description": "inline element containing the heading text or slotted heading content",
"name": "text"
},
{
"description": "container for accents within the header",
"name": "accents"
},
{
"description": "caret icon",
"name": "icon"
}
],
"slots": [
{
"description": "We expect the light DOM of the rh-accordion-header to be a heading level tag (h1, h2, h3, h4, h5, h6)"
},
{
"description": "These elements will appear inline by default with the header title, between the header and the chevron (or after the chevron and header in disclosure mode). There is an option to set the accents placement to bottom",
"name": "accents"
}
],
"members": [
{
"kind": "field",
"name": "version",
"type": {
"text": "string"
},
"static": true,
"default": "1.4.1",
"readonly": true
},
{
"kind": "field",
"name": "shadowRootOptions",
"type": {
"text": "object"
},
"static": true,
"default": "{\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n }",
"readonly": true
},
{
"kind": "field",
"name": "expanded",
"type": {
"text": "boolean"
},
"default": "false",
"attribute": "expanded",
"reflects": true
},
{
"kind": "field",
"name": "headingText",
"type": {
"text": "string | undefined"
},
"attribute": "heading-text",
"reflects": true
},
{
"kind": "field",
"name": "headingTag",
"type": {
"text": "string | undefined"
},
"attribute": "heading-tag",
"reflects": true
},
{
"kind": "field",
"name": "icon",
"type": {
"text": "string"
},
"default": "'angle-down'",
"attribute": "icon",
"reflects": true
},
{
"kind": "field",
"name": "on",
"type": {
"text": "ColorTheme | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "ctx",
"type": {
"text": "RhAccordionContext | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "#generatedHtag",
"privacy": "private",
"type": {
"text": "HTMLHeadingElement | undefined"
}
},
{
"kind": "field",
"name": "#logger",
"privacy": "private",
"default": "new Logger(this)"
},
{
"kind": "field",
"name": "#header",
"privacy": "private",
"type": {
"text": "HTMLElement | undefined"
}
},
{
"kind": "field",
"name": "#dir",
"privacy": "private",
"default": "new DirController(this)"
},
{
"kind": "method",
"name": "#initHeader",
"privacy": "private"
},
{
"kind": "method",
"name": "#renderHeaderContent",
"privacy": "private"
},
{
"kind": "method",
"name": "#getOrCreateHeader",
"return": {
"type": {
"text": "HTMLElement | undefined"
}
},
"privacy": "private"
},
{
"kind": "method",
"name": "#onClick",
"parameters": [
{
"name": "event",
"type": {
"text": "MouseEvent"
}
}
],
"privacy": "private"
}
],
"events": [
{
"name": "expanded",
"type": {
"text": "AccordionHeaderChangeEvent"
}
},
{
"type": {
"text": "AccordionHeaderChangeEvent"
},
"description": "when the open panels change",
"name": "change"
}
],
"attributes": [
{
"name": "expanded",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "expanded"
},
{
"name": "heading-text",
"type": {
"text": "string | undefined"
},
"fieldName": "headingText"
},
{
"name": "heading-tag",
"type": {
"text": "string | undefined"
},
"fieldName": "headingTag"
},
{
"name": "icon",
"type": {
"text": "string"
},
"default": "'angle-down'",
"fieldName": "icon"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "rh-accordion-header",
"customElement": true,
"cssProperties": [
{
"name": "--rh-border-width-lg",
"description": "3px border width: Example: Expanded Accordion panel",
"syntax": "<length>",
"default": "3px"
},
{
"name": "--rh-border-width-sm",
"description": "1px border width; Example: Secondary CTA or Button",
"syntax": "<length>",
"default": "1px"
},
{
"name": "--rh-color-accent-brand-on-dark",
"description": "Brand red (dark theme)",
"syntax": "<color>",
"default": "#ee0000"
},
{
"name": "--rh-color-accent-brand-on-light",
"description": "Brand red (light theme)",
"syntax": "<color>",
"default": "#ee0000"
},
{
"name": "--rh-color-border-subtle-on-dark",
"description": "Subtle border color (dark theme)",
"syntax": "<color>",
"default": "#707070"
},
{
"name": "--rh-color-border-subtle-on-light",
"description": "Subtle border color (light theme)",
"syntax": "<color>",
"default": "#c7c7c7"
},
{
"name": "--rh-color-surface-darkest",
"description": "Primary surface (dark theme)",
"syntax": "<color>",
"default": "#151515"
},
{
"name": "--rh-color-surface-lightest",
"description": "Primary surface (light theme)",
"syntax": "<color>",
"default": "#ffffff"
},
{
"name": "--rh-color-text-primary-on-dark",
"description": "Primary text color for dark theme",
"syntax": "<color>",
"default": "#ffffff"
},
{
"name": "--rh-color-text-primary-on-light",
"description": "Primary text color for light theme",
"syntax": "<color>",
"default": "#151515"
},
{
"name": "--rh-font-family-body-text",
"description": "Body text font family",
"syntax": "[ <family-name> | <generic-family> ]# ",
"default": "RedHatText, \"Red Hat Text\", \"Noto Sans Arabic\", \"Noto Sans Hebrew\", \"Noto Sans JP\", \"Noto Sans KR\", \"Noto Sans Malayalam\", \"Noto Sans SC\", \"Noto Sans TC\", \"Noto Sans Thai\", Helvetica, Arial, sans-serif"
},
{
"name": "--rh-font-size-body-text-lg",
"description": "18px font size",
"syntax": "<length>",
"default": "1.125rem"
},
{
"name": "--rh-font-size-body-text-md",
"description": "16px font size",
"syntax": "<length>",
"default": "1rem"
},
{
"name": "--rh-font-weight-heading-medium",
"description": "Medium font weight for headings",
"syntax": "<font-weight-absolute> | bolder | lighter",
"default": "500"
},
{
"name": "--rh-space-lg",
"description": "16px spacer",
"syntax": "<length>",
"default": "16px"
},
{
"name": "--rh-space-md",
"description": "8px spacer",
"syntax": "<length>",
"default": "8px"
},
{
"name": "--rh-space-xl",
"description": "24px spacer",
"syntax": "<length>",
"default": "24px"
}
]
}
],
"exports": [
{
"kind": "js",
"name": "AccordionHeaderChangeEvent",
"declaration": {
"name": "AccordionHeaderChangeEvent",
"module": "elements/rh-accordion/rh-accordion-header.js"
}
},
{
"kind": "js",
"name": "RhAccordionHeader",
"declaration": {
"name": "RhAccordionHeader",
"module": "elements/rh-accordion/rh-accordion-header.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-accordion-header",
"declaration": {
"name": "RhAccordionHeader",
"module": "elements/rh-accordion/rh-accordion-header.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "elements/rh-accordion/rh-accordion-panel.js",
"declarations": [
{
"kind": "class",
"description": "Accordion Panel",
"name": "RhAccordionPanel",
"slots": [
{
"description": "The content of the accordion panel can be any basic markup including but not limited to div, paragraph, or nested accordion panels."
}
],
"members": [
{
"kind": "field",
"name": "version",
"type": {
"text": "string"
},
"static": true,
"default": "1.4.1",
"readonly": true
},
{
"kind": "field",
"name": "expanded",
"type": {
"text": "boolean"
},
"default": "false",
"attribute": "expanded",
"reflects": true
},
{
"kind": "field",
"name": "colorPalette",
"type": {
"text": "ColorPalette | undefined"
},
"attribute": "color-palette",
"reflects": true
},
{
"kind": "field",
"name": "on",
"type": {
"text": "ColorTheme | undefined"
},
"privacy": "private"
}
],
"attributes": [
{
"name": "expanded",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "expanded"
},
{
"name": "color-palette",
"type": {
"text": "ColorPalette | undefined"
},
"fieldName": "colorPalette"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "rh-accordion-panel",
"customElement": true,
"cssProperties": [
{
"name": "--rh-border-width-lg",
"description": "3px border width: Example: Expanded Accordion panel",
"syntax": "<length>",
"default": "3px"
},
{
"name": "--rh-color-accent-base-on-light",
"description": "Inline link (light theme)",
"syntax": "<color>",
"default": "#0066cc"
},
{
"name": "--rh-color-accent-brand-on-dark",
"description": "Brand red (dark theme)",
"syntax": "<color>",
"default": "#ee0000"
},
{
"name": "--rh-color-accent-brand-on-light",
"description": "Brand red (light theme)",
"syntax": "<color>",
"default": "#ee0000"
},
{
"name": "--rh-color-border-subtle-on-dark",
"description": "Subtle border color (dark theme)",
"syntax": "<color>",
"default": "#707070"
},
{
"name": "--rh-color-border-subtle-on-light",
"description": "Subtle border color (light theme)",
"syntax": "<color>",
"default": "#c7c7c7"
},
{
"name": "--rh-color-surface-darkest",
"description": "Primary surface (dark theme)",
"syntax": "<color>",
"default": "#151515"
},
{
"name": "--rh-color-surface-lightest",
"description": "Primary surface (light theme)",
"syntax": "<color>",
"default": "#ffffff"
},
{
"name": "--rh-color-text-primary-on-dark",
"description": "Primary text color for dark theme",
"syntax": "<color>",
"default": "#ffffff"
},
{
"name": "--rh-font-size-body-text-md",
"description": "16px font size",
"syntax": "<length>",
"default": "1rem"
},
{
"name": "--rh-font-size-body-text-sm",
"description": "14px font size",
"syntax": "<length>",
"default": "0.875rem"
},
{
"name": "--rh-space-lg",
"description": "16px spacer",
"syntax": "<length>",
"default": "16px"
},
{
"name": "--rh-space-md",
"description": "8px spacer",
"syntax": "<length>",
"default": "8px"
},
{
"name": "--rh-space-xl",
"description": "24px spacer",
"syntax": "<length>",
"default": "24px"
}
]
}
],
"exports": [
{
"kind": "js",
"name": "RhAccordionPanel",
"declaration": {
"name": "RhAccordionPanel",
"module": "elements/rh-accordion/rh-accordion-panel.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-accordion-panel",
"declaration": {
"name": "RhAccordionPanel",
"module": "elements/rh-accordion/rh-accordion-panel.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "elements/rh-accordion/rh-accordion.js",
"declarations": [
{
"kind": "class",
"description": "",
"name": "AccordionExpandEvent",
"superclass": {
"name": "ComposedEvent",
"package": "@patternfly/pfe-core"
}
},
{
"kind": "class",
"description": "",
"name": "AccordionCollapseEvent",
"superclass": {
"name": "ComposedEvent",
"package": "@patternfly/pfe-core"
}
},
{
"kind": "class",
"description": "An accordion is a stacked list of panels which allows users to expand or collapse information when selected. They feature panels that consist of a section text label and a caret icon that collapses or expands to reveal more information.",
"name": "RhAccordion",
"slots": [
{
"description": "Place the `rh-accordion-header` and `rh-accordion-panel` elements here."
}
],
"members": [
{
"kind": "field",
"name": "version",
"type": {
"text": "string"
},
"static": true,
"default": "1.4.1",
"readonly": true
},
{
"kind": "method",
"name": "isAccordion",
"static": true,
"return": {
"type": {
"text": "target is RhAccordion"
}
},
"parameters": [
{
"name": "target",
"type": {
"text": "EventTarget | null"
}
}
]
},
{
"kind": "method",
"name": "isHeader",
"static": true,
"return": {
"type": {
"text": "target is RhAccordionHeader"
}
},
"parameters": [
{
"name": "target",
"type": {
"text": "EventTarget | null"
}
}
]
},
{
"kind": "method",
"name": "isPanel",
"static": true,
"return": {
"type": {
"text": "target is RhAccordionPanel"
}
},
"parameters": [
{
"name": "target",
"type": {
"text": "EventTarget | null"
}
}
]
},
{
"kind": "method",
"name": "isAccordionChangeEvent",
"static": true,
"return": {
"type": {
"text": "event is AccordionHeaderChangeEvent"
}
},
"parameters": [
{
"name": "event",
"type": {
"text": "Event"
}
}
]
},
{
"kind": "field",
"name": "accents",
"type": {
"text": "'inline' | 'bottom' | undefined"
},
"description": "Sets accordion header's accents position to inline or bottom",
"attribute": "accents",
"reflects": true
},
{
"kind": "field",
"name": "expandedIndex",
"description": "Sets and reflects the currently expanded accordion 0-based indexes.\nUse commas to separate multiple indexes.\n```html\n<pf-accordion expanded-index=\"1,2\">\n...\n</pf-accordion>\n```",
"attribute": "expanded-index"
},
{
"kind": "field",
"name": "#ctx",
"privacy": "private",
"type": {
"text": "RhAccordionContext"
},
"readonly": true
},
{
"kind": "field",
"name": "large",
"type": {
"text": "boolean"
},
"default": "false",
"attribute": "large",
"reflects": true
},
{
"kind": "field",
"name": "bordered",
"type": {
"text": "boolean"
},
"default": "true",
"attribute": "bordered",
"reflects": true
},
{
"kind": "field",
"name": "colorPalette",
"type": {
"text": "ColorPalette | undefined"
},
"attribute": "color-palette",
"reflects": true
},
{
"kind": "field",
"name": "on",
"type": {
"text": "ColorTheme | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "expandedSets",
"privacy": "protected",
"default": "new Set<number>()"
},
{
"kind": "field",
"name": "#expandedIndex",
"privacy": "private",
"type": {
"text": "number[]"
},
"default": "[]"
},
{
"kind": "field",
"name": "#headerIndex",
"privacy": "private",
"default": "new RovingTabindexController<RhAccordionHeader>(this)"
},
{
"kind": "field",
"name": "#initialized",
"privacy": "private",
"type": {
"text": "boolean"
},
"default": "false"
},
{
"kind": "field",
"name": "#logger",
"privacy": "private",
"default": "new Logger(this)"
},
{
"kind": "field",
"name": "#mo",
"privacy": "private",
"default": "new MutationObserver(() => this.#init())"
},
{
"kind": "field",
"name": "ctx",
"privacy": "private"
},
{
"kind": "method",
"name": "#init",
"description": "Initialize the accordion by connecting headers and panels\nwith aria controls and labels; set up the default disclosure\nstate if not set by the author; and check the URL for default\nopen",
"privacy": "private"
},
{
"kind": "method",
"name": "getUpdateComplete",
"privacy": "protected",
"return": {
"type": {
"text": "Promise<boolean>"
}
}
},
{
"kind": "field",
"name": "#activeHeader",
"privacy": "private",
"readonly": true
},
{
"kind": "method",
"name": "#updateActiveHeader",
"privacy": "private"
},
{
"kind": "method",
"name": "#panelForHeader",
"parameters": [
{
"name": "header",
"type": {
"text": "RhAccordionHeader"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#expandHeader",
"parameters": [
{
"name": "header",
"type": {
"text": "RhAccordionHeader"
}
},
{
"name": "index",
"default": "this.#getIndex(header)"
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#expandPanel",
"parameters": [
{
"name": "panel",
"type": {
"text": "RhAccordionPanel"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#collapseHeader",
"parameters": [
{
"name": "header",
"type": {
"text": "RhAccordionHeader"
}
},
{
"name": "index",
"default": "this.#getIndex(header)"
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#collapsePanel",
"parameters": [
{
"name": "panel",
"type": {
"text": "RhAccordionPanel"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#onChange",
"parameters": [
{
"name": "event",
"type": {
"text": "AccordionHeaderChangeEvent"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#allHeaders",
"return": {
"type": {
"text": "RhAccordionHeader[]"
}
},
"parameters": [
{
"name": "accordion",
"default": "this",
"type": {
"text": "RhAccordion"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#allPanels",
"return": {
"type": {
"text": "RhAccordionPanel[]"
}
},
"parameters": [
{
"name": "accordion",
"default": "this",
"type": {
"text": "RhAccordion"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#getIndex",
"parameters": [
{
"name": "el",
"type": {
"text": "Element | null"
}
}
],
"privacy": "private"
},
{
"kind": "field",
"name": "headers",
"readonly": true
},
{
"kind": "field",
"name": "panels",
"readonly": true
},
{
"kind": "method",
"name": "updateAccessibility",
"privacy": "public"
},
{
"kind": "method",
"name": "toggle",
"privacy": "public",
"parameters": [
{
"name": "index",
"type": {
"text": "number"
}
}
],
"description": "Accepts a 0-based index value (integer) for the set of accordion items to expand or collapse."
},
{
"kind": "method",
"name": "expand",
"privacy": "public",
"parameters": [
{
"name": "index",
"type": {
"text": "number"
}
},
{
"name": "parentAccordion",
"optional": true,
"type": {
"text": "RhAccordion"
}
}
],
"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",
"name": "expandAll",
"privacy": "public",
"description": "Expands all accordion items."
},
{
"kind": "method",
"name": "collapse",
"privacy": "public",
"parameters": [
{
"name": "index",
"type": {
"text": "number"
}
}
],
"description": "Accepts a 0-based index value (integer) for the set of accordion items to collapse."
},
{
"kind": "method",
"name": "collapseAll",
"privacy": "public",
"description": "Collapses all accordion items."
}
],
"events": [
{
"name": "header",
"type": {
"text": "AccordionExpandEvent"
}
},
{
"type": {
"text": "AccordionExpandEvent"
},
"description": "when a panel expands",
"name": "expand"
},
{
"type": {
"text": "AccordionCollapseEvent"
},
"description": "when a panel collapses",
"name": "collapse"
}
],
"attributes": [
{
"description": "Sets accordion header's accents position to inline or bottom",
"name": "accents",
"type": {
"text": "'inline' | 'bottom' | undefined"
},
"fieldName": "accents"
},
{
"name": "expanded-index",
"description": "Sets and reflects the currently expanded accordion 0-based indexes.\nUse commas to separate multiple indexes.\n```html\n<pf-accordion expanded-index=\"1,2\">\n ...\n</pf-accordion>\n```",
"fieldName": "expandedIndex"
},
{
"name": "large",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "large"
},
{
"name": "bordered",
"type": {
"text": "boolean"
},
"default": "true",
"fieldName": "bordered"
},
{
"name": "color-palette",
"type": {
"text": "ColorPalette | undefined"
},
"fieldName": "colorPalette"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "Expands or collapses a stacked list of panels",
"tagName": "rh-accordion",
"customElement": true,
"demos": [
{
"url": "https://ux.redhat.com/elements/accordion/demo/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-accordion/demo/rh-accordion.html"
}
},
{
"url": "https://ux.redhat.com/elements/accordion/demo/accents/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-accordion/demo/accents.html"
}
},
{
"url": "https://ux.redhat.com/elements/accordion/demo/color-context/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-accordion/demo/color-context.html"
}
},
{
"url": "https://ux.redhat.com/elements/accordion/demo/large/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-accordion/demo/large.html"
}
},
{
"url": "https://ux.redhat.com/elements/accordion/demo/nested/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-accordion/demo/nested.html"
}
},
{
"url": "https://ux.redhat.com/elements/accordion/demo/right-to-left/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-accordion/demo/right-to-left.html"
}
}
],
"cssProperties": [
{
"name": "--rh-box-shadow-sm",
"description": "Small box shadow",
"syntax": "<shadow>",
"default": "0 2px 4px 0 rgba(21, 21, 21, 0.2)"
},
{
"name": "--rh-color-border-subtle-on-dark",
"description": "Subtle border color (dark theme)",
"syntax": "<color>",
"default": "#707070"
},
{
"name": "--rh-color-border-subtle-on-light",
"description": "Subtle border color (light theme)",
"syntax": "<color>",
"default": "#c7c7c7"
},
{
"name": "--rh-color-surface-lightest",
"description": "Primary surface (light theme)",
"syntax": "<color>",
"default": "#ffffff"
},
{
"name": "--rh-color-text-primary-on-light",
"description": "Primary text color for light theme",
"syntax": "<color>",
"default": "#151515"
}
]
}
],
"exports": [
{
"kind": "js",
"name": "AccordionExpandEvent",
"declaration": {
"name": "AccordionExpandEvent",
"module": "elements/rh-accordion/rh-accordion.js"
}
},
{
"kind": "js",
"name": "AccordionCollapseEvent",
"declaration": {
"name": "AccordionCollapseEvent",
"module": "elements/rh-accordion/rh-accordion.js"
}
},
{
"kind": "js",
"name": "RhAccordion",
"declaration": {
"name": "RhAccordion",
"module": "elements/rh-accordion/rh-accordion.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-accordion",
"declaration": {
"name": "RhAccordion",
"module": "elements/rh-accordion/rh-accordion.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "elements/rh-alert/rh-alert.js",
"declarations": [
{
"kind": "class",
"description": "",
"name": "AlertCloseEvent",
"superclass": {
"name": "Event",
"module": "elements/rh-alert/rh-alert.ts"
}
},
{
"kind": "class",
"description": "An alert is a banner used to notify a user about a change in status\nor communicate other information. It can be generated with or without\na user triggering an action first.",
"name": "RhAlert",
"slots": [
{
"description": "Provide a description for the alert message",
"name": ""
},
{
"description": "Provide a header for the alert message.",
"name": "header"
},
{
"description": "Provide actions that the user can take for the alert",
"name": "actions"
}
],
"members": [
{
"kind": "field",
"name": "version",
"type": {
"text": "string"
},
"static": true,
"default": "1.4.1",
"readonly": true
},
{
"kind": "field",
"name": "icon",
"privacy": "private",
"readonly": true
},
{
"kind": "field",
"name": "state",
"type": {
"text": "'default' | 'error' | 'success' | 'warning' | 'danger' | 'info'"
},
"default": "'default'",
"description": "Communicates the urgency of a message and is denoted by various styling configurations.\n\n- `default` - Indicates generic information or a message with no severity.\n- `info` - Indicates helpful information or a message with very little to no severity.\n- `success` - Indicates a success state, like if a process was completed without errors.\n- `warning` - Indicates a caution state, like a non-blocking error that might need to be fixed.\n- `danger` - Indicates a danger state, like an error that is blocking a user from completing a task.",
"attribute": "state",
"reflects": true
},
{
"kind": "field",
"name": "variant",
"type": {
"text": "'alternate' | 'toast' | 'inline' | undefined"
},
"description": "The alternate Inline alert style includes a border instead of a line which\ncan be used to express more urgency or better grab the attention of a user.\n\nA Toast alert is used to present a global message about an event,\nupdate, or confirmation, like the result of a user action that cannot\nbe presented within a specific layout or component.",
"attribute": "variant",
"reflects": true
},
{
"kind": "field",
"name": "toast",
"type": {
"text": "boolean"
},
"default": "false",
"attribute": "toast",
"reflects": true
},
{
"kind": "field",
"name": "dismissable",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Alert variants have different rules regarding their ability to be dismissed by a user.\nDefault, Info, and Success Inline alerts can be dismissed by a user selecting the close button.\nWarning and Danger Inline alerts can be dismissed by a user resolving the issues caused by the alert.\nAll Toast alerts can be dismissed by a user selecting the close button or waiting for them to time out.",
"attribute": "dismissable",
"reflects": true
},
{
"kind": "field",
"name": "#slots",
"privacy": "private",
"default": "new SlotController(this, 'header', null, 'actions')"
},
{
"kind": "method",
"name": "#closeHandler",
"privacy": "private"
}
],
"events": [
{
"type": {
"text": "AlertCloseEvent"
},
"description": "when the dismissable alert closes",
"name": "close"
}
],
"attributes": [
{
"name": "state",
"type": {
"text": "'default' | 'error' | 'success' | 'warning' | 'danger' | 'info'"
},
"default": "'default'",
"description": "Communicates the urgency of a message and is denoted by various styling configurations.\n\n - `default` - Indicates generic information or a message with no severity.\n - `info` - Indicates helpful information or a message with very little to no severity.\n - `success` - Indicates a success state, like if a process was completed without errors.\n - `warning` - Indicates a caution state, like a non-blocking error that might need to be fixed.\n - `danger` - Indicates a danger state, like an error that is blocking a user from completing a task.",
"fieldName": "state"
},
{
"name": "variant",
"type": {
"text": "'alternate' | 'toast' | 'inline' | undefined"
},
"description": "The alternate Inline alert style includes a border instead of a line which\ncan be used to express more urgency or better grab the attention of a user.\n\nA Toast alert is used to present a global message about an event,\nupdate, or confirmation, like the result of a user action that cannot\nbe presented within a specific layout or component.",
"fieldName": "variant"
},
{
"name": "toast",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "toast"
},
{
"name": "dismissable",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Alert variants have different rules regarding their ability to be dismissed by a user.\nDefault, Info, and Success Inline alerts can be dismissed by a user selecting the close button.\nWarning and Danger Inline alerts can be dismissed by a user resolving the issues caused by the alert.\nAll Toast alerts can be dismissed by a user selecting the close button or waiting for them to time out.",
"fieldName": "dismissable"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "Notifies a user without blocking their workflow",
"tagName": "rh-alert",
"customElement": true,
"demos": [
{
"url": "https://ux.redhat.com/elements/alert/demo/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-alert/demo/rh-alert.html"
}
},
{
"url": "https://ux.redhat.com/elements/alert/demo/alternate/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-alert/demo/alternate.html"
}
},
{
"url": "https://ux.redhat.com/elements/alert/demo/color-context/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-alert/demo/color-context.html"
}
},
{
"url": "https://ux.redhat.com/elements/alert/demo/dismissable/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-alert/demo/dismissable.html"
}
},
{
"url": "https://ux.redhat.com/elements/alert/demo/inline/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-alert/demo/inline.html"
}
},
{
"url": "https://ux.redhat.com/elements/alert/demo/states/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-alert/demo/states.html"
}
},
{
"url": "https://ux.redhat.com/elements/alert/demo/toast/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-alert/demo/toast.html"
}
}
],
"cssProperties": [
{
"name": "--rh-border-width-md",
"description": "2px border width: Example: Alert",
"syntax": "<length>",
"default": "2px"
},
{
"name": "--rh-box-shadow-lg",
"description": "Large box shadow",
"syntax": "<shadow>",
"default": "0 6px 8px 2px rgba(21, 21, 21, 0.3)"
},
{
"name": "--rh-color-blue-10",
"description": "Alert - Info background",
"syntax": "<color>",
"default": "#E0F0FF"
},
{
"name": "--rh-color-blue-40",
"description": "Alert - Info accent",
"syntax": "<color>",
"default": "#4394E5"
},
{
"name": "--rh-color-blue-70",
"description": "Alert - Info title text",
"syntax": "<color>",
"default": "#003366"
},
{
"name": "--rh-color-green-10",
"description": "Alert - success background",
"syntax": "<color>",
"default": "#E9F7DF"
},
{
"name": "--rh-color-green-60",
"description": "Alert - Success accent",
"syntax": "<color>",
"default": "#3D7317"
},
{
"name": "--rh-color-green-70",
"description": "Alert - Success title text",
"syntax": "<color>",
"default": "#204D00"
},
{
"name": "--rh-color-interactive-blue-darker",
"description": "Inline link (light theme)",
"syntax": "<color>",
"default": "#0066cc"
},
{
"name": "--rh-color-interactive-blue-darkest",
"description": "Inline link hover (light theme)",
"syntax": "<color>",
"default": "#003366"
},
{
"name": "--rh-color-red-10",
"description": null,
"syntax": "<color>",
"default": "#FCE3E3"
},
{
"name": "--rh-color-surface-lightest",
"description": "Primary surface (light theme)",
"syntax": "<color>",
"default": "#ffffff"
},
{
"name": "--rh-color-teal-10",
"description": "Alert - Default background",
"syntax": "<color>",
"default": "#DAF2F2"
},
{
"name": "--rh-color-teal-50",
"description": "Alert - Default accent",
"syntax": "<color>",
"default": "#37A3A3"
},
{
"name": "--rh-color-teal-70",
"description": "Alert - Default title text",
"syntax": "<color>",
"default": "#004D4D"
},
{
"name": "--rh-color-text-primary-on-light",
"description": "Primary text color for light theme",
"syntax": "<color>",
"default": "#151515"
},
{
"name": "--rh-color-text-secondary-on-light",
"description": "Secondary text color for light theme",
"syntax": "<color>",
"default": "#4d4d4d"
},
{
"name": "--rh-color-yellow-10",
"description": "Alert - Warning background",
"syntax": "<color>",
"default": "#FFF4CC"
},
{
"name": "--rh-color-yellow-40",
"description": "Alert - Warning accent",
"syntax": "<color>",
"default": "#DCA614"
},
{
"name": "--rh-color-yellow-7