@rhds/elements
Version:
Red Hat Design System Elements
1,141 lines • 801 kB
JSON
{
"schemaVersion": "2.1.0",
"modules": [
{
"kind": "javascript-module",
"path": "rh-accordion/rh-accordion-header.js",
"declarations": [
{
"name": "AccordionHeaderChangeEvent",
"superclass": {
"name": "Event",
"package": "global:"
},
"members": [
{
"name": "target",
"type": {
"text": "RhAccordionHeader"
},
"kind": "field"
},
{
"name": "expanded",
"type": {
"text": "boolean"
},
"kind": "field"
},
{
"name": "toggle",
"type": {
"text": "RhAccordionHeader"
},
"kind": "field"
}
],
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-accordion/rh-accordion-header.ts#L22"
},
"kind": "class"
},
{
"name": "RhAccordionHeader",
"description": "Accordion Header\nWe expect the light DOM of the rh-accordion-header to be a heading level tag (h1, h2, h3, h4, h5, h6)",
"superclass": {
"name": "LitElement",
"package": "lit"
},
"members": [
{
"name": "expanded",
"type": {
"text": "boolean"
},
"default": "false",
"kind": "field",
"attribute": "expanded",
"reflects": true
},
{
"name": "ctx",
"type": {
"text": "RhAccordionContext"
},
"kind": "field",
"privacy": "private"
},
{
"name": "expandedChanged",
"kind": "method",
"privacy": "private"
}
],
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-accordion/rh-accordion-header.ts#L39"
},
"kind": "class",
"tagName": "rh-accordion-header",
"attributes": [
{
"name": "expanded",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "expanded"
}
],
"events": [
{
"name": "change",
"description": "when the open panels change",
"type": {
"text": "AccordionHeaderChangeEvent"
}
}
],
"slots": [
{
"name": "",
"summary": "accordion toggle content"
},
{
"name": "accents",
"summary": "decorations like icons or tags",
"description": "These elements will appear inline by default with the header title, between the header and the chevron\n(or after the chevron and header in disclosure mode). There is an option to set the accents placement to bottom"
}
],
"cssParts": [
{
"name": "text",
"summary": "inline element containing the heading text or slotted heading content"
},
{
"name": "accents",
"summary": "container for accents within the header"
}
],
"cssProperties": [
{
"name": "--rh-space-lg",
"description": "16px spacer",
"default": "16px",
"syntax": "\u003clength\u003e"
},
{
"name": "--rh-space-xl",
"description": "24px spacer",
"default": "24px",
"syntax": "\u003clength\u003e"
},
{
"name": "--rh-border-width-sm",
"description": "1px border width; Example: Secondary CTA or Button",
"default": "1px",
"syntax": "\u003clength\u003e"
},
{
"name": "--rh-color-border-subtle",
"description": "Responsive `border-subtle` color value. Typically read-only - use a themable container, e.g. `\u003crh-surface\u003e`. Resolves to `--rh-color-border-subtle-on-light` on a themable container with a light color palette and `--rh-color-border-subtle-on-dark` on a themable container with a dark color palette.",
"default": "1px",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-font-family-body-text",
"description": "Body text font family",
"default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif",
"syntax": "\u003cfont-family\u003e"
},
{
"name": "--rh-color-surface-lighter",
"description": "Tertiary surface (light theme)",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-surface-dark",
"description": "Tertiary surface (dark theme)",
"default": "#383838",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-text-primary",
"description": "Responsive `text-primary` color value. Typically read only - use a themable container e.g. `\u003crh-surface\u003e` Resolves to `--rh-color-text-primary-on-light` on a themable container with a light color palette and `--rh-color-text-primary-on-dark` on a themable container with a dark color palette.",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-interactive-primary-default",
"description": "Responsive `interactive-primary` (e.g. link) color value. Typically read only - use a themable container e.g. `\u003crh-surface\u003e`. Resolves to `--rh-color-interactive-primary-default-on-light` on a themable container with a light color palette and `--rh-color-interactive-primary-default-on-dark` on a themable container with a dark color palette.",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-border-width-lg",
"description": "3px border width: Example: Expanded Accordion panel",
"default": "3px",
"syntax": "\u003clength\u003e"
},
{
"name": "--rh-color-accent-brand",
"description": "Responsive `accent-brand` color value. Typically read only - use a themable container e.g. `\u003crh-surface\u003e`. Resolves to `--rh-color-accent-brand-on-light` on a themable container with a light color palette and `--rh-color-accent-brand-on-dark` on a themable container with a dark color palette.",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-font-weight-body-text-medium",
"description": "Medium font weight",
"default": "500",
"syntax": "\u003cnumber\u003e"
},
{
"name": "--rh-space-md",
"description": "8px spacer",
"default": "8px",
"syntax": "\u003clength\u003e"
}
],
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "AccordionHeaderChangeEvent",
"declaration": {
"name": "AccordionHeaderChangeEvent",
"module": "rh-accordion/rh-accordion-header.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-accordion-header",
"declaration": {
"name": "RhAccordionHeader",
"module": "rh-accordion/rh-accordion-header.js"
}
},
{
"kind": "js",
"name": "RhAccordionHeader",
"declaration": {
"name": "RhAccordionHeader",
"module": "rh-accordion/rh-accordion-header.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-accordion/rh-accordion-panel.js",
"declarations": [
{
"name": "RhAccordionPanel",
"description": "Accordion Panel",
"superclass": {
"name": "LitElement",
"package": "lit"
},
"members": [
{
"name": "expanded",
"type": {
"text": "boolean"
},
"default": "false",
"kind": "field",
"attribute": "expanded",
"reflects": true
},
{
"name": "ctx",
"type": {
"text": "RhAccordionContext"
},
"kind": "field",
"privacy": "private"
},
{
"name": "expandedChanged",
"kind": "method",
"privacy": "private"
}
],
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-accordion/rh-accordion-panel.ts#L21"
},
"kind": "class",
"tagName": "rh-accordion-panel",
"attributes": [
{
"name": "expanded",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "expanded"
}
],
"slots": [
{
"name": "",
"description": "The content of the accordion panel can be any basic markup including but not limited\nto div, paragraph, or nested accordion panels."
}
],
"cssParts": [
{
"name": "container"
}
],
"cssProperties": [
{
"name": "--rh-space-xl",
"description": "24px spacer",
"default": "24px",
"syntax": "\u003clength\u003e"
},
{
"name": "--rh-space-md",
"description": "8px spacer",
"default": "8px",
"syntax": "\u003clength\u003e"
},
{
"name": "--rh-space-lg",
"description": "16px spacer",
"default": "16px",
"syntax": "\u003clength\u003e"
},
{
"name": "--rh-color-border-subtle",
"description": "Responsive `border-subtle` color value. Typically read-only - use a themable container, e.g. `\u003crh-surface\u003e`. Resolves to `--rh-color-border-subtle-on-light` on a themable container with a light color palette and `--rh-color-border-subtle-on-dark` on a themable container with a dark color palette.",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-border-width-lg",
"description": "3px border width: Example: Expanded Accordion panel",
"default": "3px",
"syntax": "\u003clength\u003e"
},
{
"name": "--rh-color-accent-brand",
"description": "Responsive `accent-brand` color value. Typically read only - use a themable container e.g. `\u003crh-surface\u003e`. Resolves to `--rh-color-accent-brand-on-light` on a themable container with a light color palette and `--rh-color-accent-brand-on-dark` on a themable container with a dark color palette.",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-text-primary",
"description": "Responsive `text-primary` color value. Typically read only - use a themable container e.g. `\u003crh-surface\u003e` Resolves to `--rh-color-text-primary-on-light` on a themable container with a light color palette and `--rh-color-text-primary-on-dark` on a themable container with a dark color palette.",
"syntax": "\u003ccolor\u003e"
}
],
"customElement": true
}
],
"exports": [
{
"kind": "custom-element-definition",
"name": "rh-accordion-panel",
"declaration": {
"name": "RhAccordionPanel",
"module": "rh-accordion/rh-accordion-panel.js"
}
},
{
"kind": "js",
"name": "RhAccordionPanel",
"declaration": {
"name": "RhAccordionPanel",
"module": "rh-accordion/rh-accordion-panel.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-accordion/rh-accordion.js",
"declarations": [
{
"name": "AccordionExpandEvent",
"superclass": {
"name": "ComposedEvent"
},
"members": [
{
"name": "toggle",
"type": {
"text": "RhAccordionHeader"
},
"kind": "field"
},
{
"name": "panel",
"type": {
"text": "RhAccordionPanel"
},
"kind": "field"
}
],
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-accordion/rh-accordion.ts#L25"
},
"kind": "class"
},
{
"name": "AccordionCollapseEvent",
"superclass": {
"name": "ComposedEvent"
},
"members": [
{
"name": "toggle",
"type": {
"text": "RhAccordionHeader"
},
"kind": "field"
},
{
"name": "panel",
"type": {
"text": "RhAccordionPanel"
},
"kind": "field"
}
],
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-accordion/rh-accordion.ts#L34"
},
"kind": "class"
},
{
"name": "RhAccordion",
"summary": "Expands or collapses a stacked list of panels",
"description": "An accordion is a stacked list of panels which allows users to expand or collapse information\nwhen selected. They feature panels that consist of a section text label and a caret icon that\ncollapses or expands to reveal more information.",
"superclass": {
"name": "LitElement",
"package": "lit"
},
"members": [
{
"parameters": [
{
"name": "target",
"type": {
"text": "EventTarget | null"
}
}
],
"name": "isAccordion",
"kind": "method",
"static": true
},
{
"parameters": [
{
"name": "target",
"type": {
"text": "EventTarget | null"
}
}
],
"name": "isHeader",
"kind": "method",
"static": true
},
{
"parameters": [
{
"name": "target",
"type": {
"text": "EventTarget | null"
}
}
],
"name": "isPanel",
"kind": "method",
"static": true
},
{
"parameters": [
{
"name": "event",
"type": {
"text": "Event"
}
}
],
"name": "isAccordionChangeEvent",
"kind": "method",
"static": true
},
{
"name": "accents",
"description": "Sets accordion header's accents position to inline or bottom",
"type": {
"text": "'inline' | 'bottom'"
},
"kind": "field",
"attribute": "accents",
"reflects": true
},
{
"name": "large",
"description": "If this accordion uses large styles",
"type": {
"text": "boolean"
},
"default": "false",
"kind": "field",
"attribute": "large",
"reflects": true
},
{
"name": "colorPalette",
"description": "Color Palette for this accordion.",
"type": {
"text": "ColorPalette"
},
"kind": "field",
"attribute": "color-palette",
"reflects": true
},
{
"name": "hasChanged",
"kind": "method"
},
{
"name": "expandedIndex",
"description": "Sets and reflects the currently expanded accordion 0-based indexes.\nUse commas to separate multiple indexes.\n```html\n\u003crh-accordion expanded-index=\"1,2\"\u003e\n...\n\u003c/rh-accordion\u003e\n```",
"kind": "field",
"attribute": "expanded-index"
},
{
"name": "headers",
"description": "All headers for this accordion",
"readonly": true,
"kind": "field"
},
{
"name": "panels",
"description": "All panels for this accordion",
"readonly": true,
"kind": "field"
},
{
"name": "updateExpanded",
"kind": "method",
"privacy": "private"
},
{
"name": "contextChanged",
"kind": "method",
"privacy": "private"
},
{
"name": "updateAccessibility",
"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",
"kind": "method",
"privacy": "public"
},
{
"parameters": [
{
"name": "index",
"type": {
"text": "number"
}
}
],
"name": "toggle",
"description": "Accepts a 0-based index value (integer) for the set of accordion items to expand or collapse.",
"kind": "method",
"privacy": "public"
},
{
"parameters": [
{
"name": "index",
"type": {
"text": "number"
}
},
{
"name": "parentAccordion",
"type": {
"text": "RhAccordion"
}
}
],
"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"
},
{
"name": "expandAll",
"description": "Expands all accordion items.",
"kind": "method",
"privacy": "public"
},
{
"parameters": [
{
"name": "index",
"type": {
"text": "number"
}
}
],
"name": "collapse",
"description": "Accepts a 0-based index value (integer) for the set of accordion items to collapse.",
"kind": "method",
"privacy": "public"
},
{
"name": "collapseAll",
"description": "Collapses all accordion items.",
"kind": "method",
"privacy": "public"
}
],
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-accordion/rh-accordion.ts#L59"
},
"kind": "class",
"tagName": "rh-accordion",
"attributes": [
{
"name": "accents",
"default": "inline"
},
{
"name": "accents",
"description": "Sets accordion header's accents position to inline or bottom",
"type": {
"text": "'inline' | 'bottom'"
},
"fieldName": "accents"
},
{
"name": "large",
"description": "If this accordion uses large styles",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "large"
},
{
"name": "color-palette",
"description": "Color Palette for this accordion.",
"type": {
"text": "ColorPalette"
},
"fieldName": "colorPalette"
},
{
"name": "expanded-index",
"description": "Sets and reflects the currently expanded accordion 0-based indexes.\nUse commas to separate multiple indexes.\n```html\n\u003crh-accordion expanded-index=\"1,2\"\u003e\n...\n\u003c/rh-accordion\u003e\n```",
"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 `rh-accordion-header` and `rh-accordion-panel` elements here."
}
],
"cssProperties": [
{
"name": "--rh-color-text-primary",
"description": "Responsive `text-primary` color value. Typically read only - use a themable container e.g. `\u003crh-surface\u003e` Resolves to `--rh-color-text-primary-on-light` on a themable container with a light color palette and `--rh-color-text-primary-on-dark` on a themable container with a dark color palette.",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-surface-lightest",
"description": "Primary surface (light theme)",
"default": "#ffffff",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-surface-darkest",
"description": "Primary surface (dark theme)",
"default": "#151515",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-surface",
"description": "Responsive `surface` color value. Typically read-only - use a themable container, e.g. `\u003crh-surface\u003e`. Resolves to the surface color corresponding to the surface' color palette.",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-font-size-body-text-md",
"description": "16px font size",
"default": "1rem",
"syntax": "\u003clength\u003e"
},
{
"name": "--rh-font-size-body-text-lg",
"description": "18px font size",
"default": "1.125rem",
"syntax": "\u003clength\u003e"
},
{
"name": "--rh-color-border-subtle",
"description": "Responsive `border-subtle` color value. Typically read-only - use a themable container, e.g. `\u003crh-surface\u003e`. Resolves to `--rh-color-border-subtle-on-light` on a themable container with a light color palette and `--rh-color-border-subtle-on-dark` on a themable container with a dark color palette.",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-box-shadow-sm",
"description": "Small box shadow",
"default": "0 2px 4px 0 rgba(21, 21, 21, 0.2)",
"syntax": "\u003cshadow\u003e"
}
],
"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/index.html"
}
},
{
"url": "https://ux.redhat.com/elements/accordion/demo/accents-bottom/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-accordion/demo/accents-bottom.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/expanded-attribute/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-accordion/demo/expanded-attribute.html"
}
},
{
"url": "https://ux.redhat.com/elements/accordion/demo/expanded-index/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-accordion/demo/expanded-index.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"
}
}
],
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "AccordionExpandEvent",
"declaration": {
"name": "AccordionExpandEvent",
"module": "rh-accordion/rh-accordion.js"
}
},
{
"kind": "js",
"name": "AccordionCollapseEvent",
"declaration": {
"name": "AccordionCollapseEvent",
"module": "rh-accordion/rh-accordion.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-accordion",
"declaration": {
"name": "RhAccordion",
"module": "rh-accordion/rh-accordion.js"
}
},
{
"kind": "js",
"name": "RhAccordion",
"declaration": {
"name": "RhAccordion",
"module": "rh-accordion/rh-accordion.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-alert/rh-alert.js",
"declarations": [
{
"name": "AlertCloseEvent",
"superclass": {
"name": "Event",
"package": "global:"
},
"members": [
{
"name": "action",
"type": {
"text": "'close' | 'confirm' | 'dismiss' | string"
},
"kind": "field"
}
],
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-alert/rh-alert.ts#L47"
},
"kind": "class"
},
{
"name": "RhAlert",
"summary": "Notifies a user without blocking their workflow",
"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.",
"superclass": {
"name": "LitElement",
"package": "lit"
},
"members": [
{
"name": "toast",
"description": "Toast a message with an rh-alert",
"kind": "method",
"static": true,
"privacy": "public"
},
{
"name": "state",
"description": "Communicates the urgency of a message and is denoted by various styling configurations.\n\n- `neutral` - Indicates generic information or a message with no severity.\n- `danger` - Indicates a danger state, like an error that is blocking a user from completing a task.\n- `warning` - Indicates a warning state, like a non-blocking error that might need to be fixed.\n- `caution` - Indicates an action or notice which should immediately draw the attention\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\nNote: 'note', 'default', and 'error' will also work, but are deprecated",
"type": {
"text": "| 'danger'\n | 'warning'\n | 'caution'\n | 'neutral'\n | 'info'\n | 'success'"
},
"default": "'neutral'",
"kind": "field",
"attribute": "state",
"reflects": true
},
{
"name": "variant",
"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.",
"type": {
"text": "'alternate' | 'toast' | 'inline'"
},
"kind": "field",
"attribute": "variant",
"reflects": true
},
{
"name": "dismissable",
"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.",
"type": {
"text": "boolean"
},
"default": "false",
"kind": "field",
"attribute": "dismissable",
"reflects": true
}
],
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-alert/rh-alert.ts#L70"
},
"kind": "class",
"tagName": "rh-alert",
"attributes": [
{
"name": "state",
"description": "Communicates the urgency of a message and is denoted by various styling configurations.\n\n- `neutral` - Indicates generic information or a message with no severity.\n- `danger` - Indicates a danger state, like an error that is blocking a user from completing a task.\n- `warning` - Indicates a warning state, like a non-blocking error that might need to be fixed.\n- `caution` - Indicates an action or notice which should immediately draw the attention\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\nNote: 'note', 'default', and 'error' will also work, but are deprecated",
"type": {
"text": "| 'danger'\n | 'warning'\n | 'caution'\n | 'neutral'\n | 'info'\n | 'success'"
},
"default": "'neutral'",
"fieldName": "state"
},
{
"name": "variant",
"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.",
"type": {
"text": "'alternate' | 'toast' | 'inline'"
},
"fieldName": "variant"
},
{
"name": "dismissable",
"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.",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "dismissable"
}
],
"events": [
{
"name": "close",
"description": "when the dismissable alert closes",
"type": {
"text": "AlertCloseEvent"
}
}
],
"slots": [
{
"name": "actions",
"description": "Provide actions that the user can take for the alert"
},
{
"name": "header",
"description": "Provide a header for the alert message."
},
{
"name": "",
"description": "Provide a description for the alert message"
}
],
"cssProperties": [
{
"name": "--rh-space-xl",
"description": "24px spacer",
"default": "24px",
"syntax": "\u003clength\u003e"
},
{
"name": "--rh-color-interactive-primary-default",
"description": "Responsive `interactive-primary` (e.g. link) color value. Typically read only - use a themable container e.g. `\u003crh-surface\u003e`. Resolves to `--rh-color-interactive-primary-default-on-light` on a themable container with a light color palette and `--rh-color-interactive-primary-default-on-dark` on a themable container with a dark color palette.",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-interactive-primary-hover",
"description": "Responsive `interactive-primary` (e.g. link) color value. Typically read only - use a themable container e.g. `\u003crh-surface\u003e`. Resolves to `--rh-color-interactive-primary-hover-on-light` on a themable container with a light color palette\n and to `--rh-color-interactive-primary-hover-on-dark` on a themable container with a dark color palette.",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-teal-10",
"description": "Alert - Default background",
"default": "#daf2f2",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-teal-50",
"description": "Alert - Default accent",
"default": "#37a3a3",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-border-width-md",
"description": "2px border width: Example: Alert",
"default": "2px",
"syntax": "\u003clength\u003e"
},
{
"name": "--rh-color-surface-dark",
"description": "Tertiary surface (dark theme)",
"default": "#383838",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-space-lg",
"description": "16px spacer",
"default": "16px",
"syntax": "\u003clength\u003e"
},
{
"name": "--rh-font-weight-body-text-regular",
"description": "Regular font weight",
"default": "400",
"syntax": "\u003cnumber\u003e"
},
{
"name": "--rh-font-family-body-text",
"description": "Body text font family",
"default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif",
"syntax": "\u003cfont-family\u003e"
},
{
"name": "--rh-font-weight-body-text-medium",
"description": "Medium font weight",
"default": "500",
"syntax": "\u003cnumber\u003e"
},
{
"name": "--rh-line-height-body-text",
"description": "Line height for body text",
"default": "1.5"
},
{
"name": "--rh-font-size-body-text-sm",
"description": "14px font size",
"default": "0.875rem",
"syntax": "\u003clength\u003e"
},
{
"name": "--rh-color-status-neutral",
"description": "Responsive `status-neutral` color value. Typically read-only - use a themable container, e.g. `\u003crh-surface\u003e`. Resolves to `--rh-color-status-neutral-on-light` on a themable container with a light color palette and `--rh-color-status-neutral-on-dark` on a themable container with a dark color palette.",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-icon-status-neutral",
"description": "Responsive `icon-status-neutral` color value. Typically read-only - use a themable container, e.g. `\u003crh-surface\u003e`. Resolves to `--rh-color-icon-status-neutral-on-light` on a themable container with a light color palette and `--rh-color-icon-status-neutral-on-dark` on a themable container with a dark color palette.",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-surface-status-neutral",
"description": "Responsive `surface-status-neutral` color value. Typically read-only - use a themable container, e.g. `\u003crh-surface\u003e`. Resolves to `--rh-color-surface-status-neutral-on-light` on a themable container with a light color palette and `--rh-color-surface-status-neutral-on-dark` on a themable container with a dark color palette.",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-status-info",
"description": "Responsive `status-info` color value. Typically read-only - use a themable container, e.g. `\u003crh-surface\u003e`. Resolves to `--rh-color-status-info-on-light` on a themable container with a light color palette and `--rh-color-status-info-on-dark` on a themable container with a dark color palette.",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-icon-status-info",
"description": "Responsive `icon-status-info` color value. Typically read-only - use a themable container, e.g. `\u003crh-surface\u003e`. Resolves to `--rh-color-icon-status-info-on-light` on a themable container with a light color palette and `--rh-color-icon-status-info-on-dark` on a themable container with a dark color palette.",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-surface-status-info",
"description": "Responsive `surface-status-info` color value. Typically read-only - use a themable container, e.g. `\u003crh-surface\u003e`. Resolves to `--rh-color-surface-status-info-on-light` on a themable container with a light color palette and `--rh-color-surface-status-info-on-dark` on a themable container with a dark color palette.",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-status-success",
"description": "Responsive `status-success` color value. Typically read-only - use a themable container, e.g. `\u003crh-surface\u003e`. Resolves to `--rh-color-status-success-on-light` on a themable container with a light color palette and `--rh-color-status-success-on-dark` on a themable container with a dark color palette.",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-icon-status-success",
"description": "Responsive `icon-status-success` color value. Typically read-only - use a themable container, e.g. `\u003crh-surface\u003e`. Resolves to `--rh-color-icon-status-success-on-light` on a themable container with a light color palette and `--rh-color-icon-status-success-on-dark` on a themable container with a dark color palette.",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-surface-status-success",
"description": "Responsive `surface-status-success` color value. Typically read-only - use a themable container, e.g. `\u003crh-surface\u003e`. Resolves to `--rh-color-surface-status-success-on-light` on a themable container with a light color palette and `--rh-color-surface-status-success-on-dark` on a themable container with a dark color palette.",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-status-caution",
"description": "Responsive `status-caution` color value. Typically read-only - use a themable container, e.g. `\u003crh-surface\u003e`. Resolves to `--rh-color-status-caution-on-light` on a themable container with a light color palette and `--rh-color-status-caution-on-dark` on a themable container with a dark color palette.",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-icon-status-caution",
"description": "Responsive `icon-status-caution` color value. Typically read-only - use a themable container, e.g. `\u003crh-surface\u003e`. Resolves to `--rh-color-icon-status-caution-on-light` on a themable container with a light color palette and `--rh-color-icon-status-caution-on-dark` on a themable container with a dark color palette.",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-surface-status-caution",
"description": "Responsive `surface-status-caution` color value. Typically read-only - use a themable container, e.g. `\u003crh-surface\u003e`. Resolves to `--rh-color-surface-status-caution-on-light` on a themable container with a light color palette and `--rh-color-surface-status-caution-on-dark` on a themable container with a dark color palette.",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-status-warning",
"description": "Responsive `status-warning` color value. Typically read-only - use a themable container, e.g. `\u003crh-surface\u003e`. Resolves to `--rh-color-status-warning-on-light` on a themable container with a light color palette and `--rh-color-status-warning-on-dark` on a themable container with a dark color palette.",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-icon-status-warning",
"description": "Responsive `icon-status-warning` color value. Typically read-only - use a themable container, e.g. `\u003crh-surface\u003e`. Resolves to `--rh-color-icon-status-warning-on-light` on a themable container with a light color palette and `--rh-color-icon-status-warning-on-dark` on a themable container with a dark color palette.",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-surface-status-warning",
"description": "Responsive `surface-status-warning` color value. Typically read-only - use a themable container, e.g. `\u003crh-surface\u003e`. Resolves to `--rh-color-surface-status-warning-on-light` on a themable container with a light color palette and `--rh-color-surface-status-warning-on-dark` on a themable container with a dark color palette.",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-status-danger",
"description": "Responsive `status-danger` color value. Typically read-only – use a themable container, e.g. `\u003crh-surface\u003e`. Resolves to `--rh-color-status-danger-on-light` on a themable container with a light color palette and `--rh-color-status-danger-on-dark` on a themable container with a dark color palette.",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-icon-status-danger",
"description": "Responsive `icon-status-danger` color value. Typically read-only - use a themable container, e.g. `\u003crh-surface\u003e`. Resolves to `--rh-color-icon-status-danger-on-light` on a themable container with a light color palette and `--rh-color-icon-status-danger-on-dark` on a themable container with a dark color palette.",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-surface-status-danger",
"description": "Responsive `surface-status-danger` color value. Typically read-only - use a themable container, e.g. `\u003crh-surface\u003e`. Resolves to `--rh-color-surface-status-danger-on-light` on a themable container with a light color palette and `--rh-color-surface-status-danger-on-dark` on a themable container with a dark color palette.",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-surface-lightest",
"description": "Primary surface (light theme)",
"default": "#ffffff",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-box-shadow-xl",
"description": "Extra large box shadow",
"default": "0 8px 24px 3px rgba(21, 21, 21, 0.35)",
"syntax": "\u003cshadow\u003e"
},
{
"name": "--rh-space-xs",
"description": "4px spacer",
"default": "4px",
"syntax": "\u003clength\u003e"
},
{
"name": "--rh-size-icon-02",
"description": "24px icon box",
"default": "24px",
"syntax": "\u003clength\u003e"
},
{
"name": "--rh-color-text-secondary",
"description": "Responsive `text-secondary` color value. Typically read only - use a themable container e.g. `\u003crh-surface\u003e` Resolves to `--rh-color-text-secondary-on-light` on a themable container with a light color palette and `--rh-color-text-secondary-on-dark` on a themable container with a dark color palette.",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-length-xl",
"description": "24px length token",
"default": "24px",
"syntax": "\u003clength\u003e"
},
{
"name": "--rh-color-text-primary",
"description": "Responsive `text-primary` color value. Typically read only - use a themable container e.g. `\u003crh-surface\u003e` Resolves to `--rh-color-text-primary-on-light` on a themable container with a light color palette and `--rh-color-text-primary-on-dark` on a themable container with a dark color palette.",
"syntax": "\u003ccolor\u003e"
}
],
"demos": [
{
"url": "https://ux.redhat.com/elements/alert/demo/",
"source": {
"href": "http