@rhds/elements
Version:
Red Hat Design System Elements
1,524 lines (1,523 loc) • 1.04 MB
JSON
{
"schemaVersion": "2.1.0",
"modules": [
{
"kind": "javascript-module",
"path": "lib/I18nController.js",
"declarations": [
{
"name": "I18nController",
"members": [
{
"name": "language",
"default": "this.#defaultLanguage",
"kind": "field"
},
{
"name": "host",
"type": {
"text": "ReactiveElement"
},
"kind": "field",
"privacy": "private"
},
{
"return": {
"type": {
"text": "void"
}
},
"name": "hostConnected",
"kind": "method"
},
{
"return": {
"type": {
"text": "void"
}
},
"name": "hostDisconnected",
"kind": "method"
},
{
"name": "update",
"kind": "method"
},
{
"parameters": [
{
"name": "url",
"type": {
"text": "URL"
}
},
{
"name": "lang",
"type": {
"text": "string",
"references": [
{
"name": "LanguageCode",
"module": "lib/I18nController.js"
}
]
}
}
],
"name": "loadTranslation",
"kind": "method"
},
{
"parameters": [
{
"name": "key",
"type": {
"text": "string"
}
},
{
"name": "lang",
"type": {
"text": "string",
"references": [
{
"name": "LanguageCode",
"module": "lib/I18nController.js"
}
]
}
}
],
"name": "get",
"kind": "method"
},
{
"parameters": [
{
"name": "key",
"type": {
"text": "string"
}
},
{
"name": "value",
"type": {
"text": "string"
}
},
{
"name": "lang",
"type": {
"text": "string",
"references": [
{
"name": "LanguageCode",
"module": "lib/I18nController.js"
}
]
}
}
],
"name": "set",
"kind": "method"
},
{
"parameters": [
{
"name": "lang",
"type": {
"text": "string",
"references": [
{
"name": "LanguageCode",
"module": "lib/I18nController.js"
}
]
}
}
],
"name": "clear",
"kind": "method"
},
{
"name": "clearAll",
"kind": "method"
},
{
"parameters": [
{
"name": "key",
"type": {
"text": "string"
}
},
{
"name": "lang",
"type": {
"text": "string",
"references": [
{
"name": "LanguageCode",
"module": "lib/I18nController.js"
}
]
}
}
],
"name": "delete",
"kind": "method"
},
{
"parameters": [
{
"name": "obj",
"type": {
"text": "Microcopy[LanguageCode]"
}
},
{
"name": "lang",
"type": {
"text": "string",
"references": [
{
"name": "LanguageCode",
"module": "lib/I18nController.js"
}
]
}
}
],
"name": "join",
"kind": "method"
},
{
"name": "toJSON",
"kind": "method"
}
],
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/lib/I18nController.ts#L9"
},
"kind": "class"
}
],
"exports": [
{
"kind": "js",
"name": "I18nController",
"declaration": {
"name": "I18nController",
"module": "lib/I18nController.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "lib/ScreenSizeController.js",
"declarations": [
{
"name": "ScreenSizeController",
"members": [
{
"name": "instances",
"default": "new Set\u003cScreenSizeController\u003e()",
"kind": "field",
"static": true
},
{
"name": "queries",
"type": {
"text": "Map\u003cBreakpointKey, MediaQueryList\u003e"
},
"default": "isServer ? new Map()\\n : new Map(Object.entries(BREAKPOINTS).map(([k, v]) =\u003e\\n [k as BreakpointKey, getMediaQueryListForToken(v)]))",
"kind": "field",
"static": true
},
{
"name": "mobile",
"default": "ScreenSizeController.queries.get('2xs')?.matches ?? false",
"kind": "field"
},
{
"name": "size",
"type": {
"text": "Omit\u003cBreakpointKey, 'mobile'\u003e"
},
"kind": "field"
},
{
"name": "matches",
"default": "new Set\u003cBreakpointKey\u003e()",
"kind": "field"
},
{
"name": "host",
"description": "reference to the host element using this controller",
"type": {
"text": "ReactiveControllerHost"
},
"kind": "field"
},
{
"name": "breakpoint",
"type": {
"text": "'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | void",
"references": [
{
"name": "BreakpointKey",
"module": "lib/ScreenSizeController.js"
}
]
},
"kind": "field",
"privacy": "private"
},
{
"name": "hostConnected",
"kind": "method"
},
{
"name": "hostDisconnected",
"kind": "method"
},
{
"name": "evaluate",
"description": "Requests a render and calls the onChange callback",
"kind": "method"
}
],
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/lib/ScreenSizeController.ts#L47"
},
"kind": "class"
}
],
"exports": [
{
"kind": "js",
"name": "ScreenSizeController",
"declaration": {
"name": "ScreenSizeController",
"module": "lib/ScreenSizeController.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "lib/color-palettes.js",
"declarations": [
{
"parameters": [
{
"name": "supportedPalettes",
"description": "list of supported color palettes",
"type": {
"text": "ColorPalette[]"
},
"rest": true
}
],
"name": "colorPalettes",
"description": "Makes this element a [color scheme provider](https://ux.redhat.com/themeing/color-palettes)\nLimits the element to the specified color palettes, if provided.",
"kind": "function",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/lib/color-palettes.ts#L97"
}
},
{
"parameters": [
{
"name": "klass",
"type": {
"text": "ColorPaletteConstructor"
}
}
],
"name": "colorPalettes",
"kind": "function",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/lib/color-palettes.ts#L98"
}
},
{
"parameters": [
{
"name": "args",
"type": {
"text": "ColorPalette[] | [klass: ColorPaletteConstructor]"
},
"rest": true
}
],
"name": "colorPalettes",
"kind": "function",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/lib/color-palettes.ts#L99"
}
},
{
"name": "PaletteController",
"members": [
{
"return": {
"type": {
"text": "void"
}
},
"name": "hostUpdate",
"kind": "method"
}
],
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/lib/color-palettes.ts#L44"
},
"kind": "class"
}
],
"exports": [
{
"kind": "js",
"name": "colorPalettes",
"declaration": {
"name": "colorPalettes",
"module": "lib/color-palettes.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "lib/context/headings/consumer.js",
"declarations": [
{
"name": "HeadingLevelContextConsumer",
"description": "Determines which heading level immediately precedes the host element,\nand provides templates for shadow headings.",
"superclass": {
"name": "ContextConsumer",
"module": "@lit/context"
},
"members": [
{
"name": "offset",
"type": {
"text": "number"
},
"default": "0",
"kind": "field"
},
{
"name": "level",
"readonly": true,
"kind": "field"
},
{
"parameters": [
{
"name": "content",
"type": {
"text": "unknown"
}
},
{
"name": "options",
"type": {
"text": "HeadingLevelTemplateOptions"
}
}
],
"return": {
"type": {
"text": "TemplateResult"
}
},
"name": "wrap",
"description": "Wraps any renderable content in a heading, based on heading level",
"kind": "method"
}
],
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/lib/context/headings/consumer.ts#L23"
},
"kind": "class"
}
],
"exports": [
{
"kind": "js",
"name": "HeadingLevelContextConsumer",
"declaration": {
"name": "HeadingLevelContextConsumer",
"module": "lib/context/headings/consumer.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "lib/context/headings/provider.js",
"declarations": [
{
"name": "context",
"kind": "variable",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/lib/context/headings/provider.ts#L16"
}
},
{
"name": "HeadingLevelContextProvider",
"description": "Determines which heading level immediately precedes the host element,\nand provides templates for shadow headings.",
"superclass": {
"name": "ContextProvider",
"module": "@lit/context"
},
"members": [
{
"name": "host",
"type": {
"text": "LitElement"
},
"kind": "field"
},
{
"parameters": [
{
"name": "ctx",
"type": {
"text": "Partial\u003cHeadingContext\u003e"
}
}
],
"name": "setValue",
"kind": "method"
},
{
"name": "hostConnected",
"kind": "method"
}
],
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/lib/context/headings/provider.ts#L47"
},
"kind": "class"
}
],
"exports": [
{
"kind": "js",
"name": "context",
"declaration": {
"name": "context",
"module": "lib/context/headings/provider.js"
}
},
{
"kind": "js",
"name": "HeadingLevelContextProvider",
"declaration": {
"name": "HeadingLevelContextProvider",
"module": "lib/context/headings/provider.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "lib/elements/rh-context-demo/rh-context-demo.js",
"declarations": [
{
"name": "RhContextDemo",
"superclass": {
"name": "LitElement",
"package": "lit"
},
"members": [
{
"name": "label",
"type": {
"text": "string"
},
"default": "'Color Palette'",
"kind": "field",
"attribute": "label"
},
{
"name": "colorPalette",
"type": {
"text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'",
"references": [
{
"name": "ColorPalette",
"module": "lib/color-palettes.js"
}
]
},
"default": "'darkest'",
"kind": "field",
"attribute": "color-palette",
"reflects": true
},
{
"name": "colorPaletteChanged",
"kind": "method",
"privacy": "protected"
}
],
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/lib/elements/rh-context-demo/rh-context-demo.ts#L15"
},
"kind": "class",
"tagName": "rh-context-demo",
"attributes": [
{
"name": "label",
"type": {
"text": "string"
},
"default": "'Color Palette'",
"fieldName": "label"
},
{
"name": "color-palette",
"type": {
"text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'",
"references": [
{
"name": "ColorPalette",
"module": "lib/color-palettes.js"
}
]
},
"default": "'darkest'",
"fieldName": "colorPalette"
}
],
"slots": [
{
"name": "controls"
},
{
"name": ""
}
],
"cssParts": [
{
"name": "demo"
}
],
"cssProperties": [
{
"name": "--rh-color-text-primary"
},
{
"name": "--rh-color-surface"
},
{
"name": "--rh-space-lg",
"description": "16px spacer",
"default": "16px",
"syntax": "\u003clength\u003e"
},
{
"name": "--rh-context-demo-padding",
"default": "var(--rh-space-xl, 24px)"
},
{
"name": "--rh-space-xl",
"description": "24px spacer",
"default": "24px",
"syntax": "\u003clength\u003e"
}
],
"customElement": true
}
],
"exports": [
{
"kind": "custom-element-definition",
"name": "rh-context-demo",
"declaration": {
"name": "RhContextDemo",
"module": "lib/elements/rh-context-demo/rh-context-demo.js"
}
},
{
"kind": "js",
"name": "RhContextDemo",
"declaration": {
"name": "RhContextDemo",
"module": "lib/elements/rh-context-demo/rh-context-demo.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "lib/elements/rh-context-picker/rh-context-picker.js",
"declarations": [
{
"name": "ColorPaletteListConverter",
"type": {
"text": ": ComplexAttributeConverter"
},
"kind": "variable",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/lib/elements/rh-context-picker/rh-context-picker.ts#L36"
}
},
{
"name": "paletteMap",
"kind": "variable",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/lib/elements/rh-context-picker/rh-context-picker.ts#L47"
}
},
{
"name": "paletteNames",
"kind": "variable",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/lib/elements/rh-context-picker/rh-context-picker.ts#L56"
}
},
{
"name": "ContextChangeEvent",
"superclass": {
"name": "Event",
"package": "global:"
},
"members": [
{
"name": "colorPalette",
"type": {
"text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'",
"references": [
{
"name": "ColorPalette",
"module": "lib/color-palettes.js"
}
]
},
"kind": "field"
},
{
"name": "provider",
"description": "the context provider targeted by this element",
"type": {
"text": "HTMLElement | null"
},
"kind": "field"
}
],
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/lib/elements/rh-context-picker/rh-context-picker.ts#L26"
},
"kind": "class"
},
{
"name": "RhContextPicker",
"superclass": {
"name": "LitElement",
"package": "lit"
},
"members": [
{
"name": "shadowRoot",
"type": {
"text": "ShadowRoot"
},
"kind": "field"
},
{
"name": "target",
"description": "ID of context element to toggle (same root)",
"type": {
"text": "string | HTMLElement"
},
"kind": "field",
"attribute": "target"
},
{
"name": "value",
"type": {
"text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'",
"references": [
{
"name": "ColorPalette",
"module": "lib/color-palettes.js"
}
]
},
"default": "'darkest'",
"kind": "field",
"attribute": "value"
},
{
"name": "allow",
"default": "paletteNames",
"kind": "field",
"attribute": "allow"
},
{
"name": "firstUpdated",
"kind": "method"
},
{
"name": "focus",
"kind": "method"
},
{
"name": "sync",
"kind": "method"
}
],
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/lib/elements/rh-context-picker/rh-context-picker.ts#L60"
},
"kind": "class",
"tagName": "rh-context-picker",
"attributes": [
{
"name": "target",
"description": "ID of context element to toggle (same root)",
"type": {
"text": "string | HTMLElement"
},
"fieldName": "target"
},
{
"name": "value",
"type": {
"text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'",
"references": [
{
"name": "ColorPalette",
"module": "lib/color-palettes.js"
}
]
},
"default": "'darkest'",
"fieldName": "value"
},
{
"name": "allow",
"default": "paletteNames",
"fieldName": "allow"
}
],
"cssProperties": [
{
"name": "--rh-color-interactive-primary-default"
},
{
"name": "--rh-color-surface-darkest",
"description": "Primary surface (dark theme)",
"default": "#151515",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-surface-darker",
"description": "Secondary surface (dark theme)",
"default": "#1f1f1f",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-surface-lighter",
"description": "Tertiary surface (light theme)",
"default": "#f2f2f2",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-surface-lightest",
"description": "Primary surface (light theme)",
"default": "#ffffff",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-surface-light",
"description": "Secondary surface (light theme)",
"default": "#e0e0e0",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-surface-dark",
"description": "Tertiary surface (dark theme)",
"default": "#383838",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-size-icon-03",
"description": "32px icon box",
"default": "32px",
"syntax": "\u003clength\u003e"
},
{
"name": "--c"
},
{
"name": "--alt-color"
},
{
"name": "--thumb-color"
}
],
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "ContextChangeEvent",
"declaration": {
"name": "ContextChangeEvent",
"module": "lib/elements/rh-context-picker/rh-context-picker.js"
}
},
{
"kind": "js",
"name": "ColorPaletteListConverter",
"declaration": {
"name": "ColorPaletteListConverter",
"module": "lib/elements/rh-context-picker/rh-context-picker.js"
}
},
{
"kind": "js",
"name": "paletteMap",
"declaration": {
"name": "paletteMap",
"module": "lib/elements/rh-context-picker/rh-context-picker.js"
}
},
{
"kind": "js",
"name": "paletteNames",
"declaration": {
"name": "paletteNames",
"module": "lib/elements/rh-context-picker/rh-context-picker.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-context-picker",
"declaration": {
"name": "RhContextPicker",
"module": "lib/elements/rh-context-picker/rh-context-picker.js"
}
},
{
"kind": "js",
"name": "RhContextPicker",
"declaration": {
"name": "RhContextPicker",
"module": "lib/elements/rh-context-picker/rh-context-picker.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "lib/environment.js"
},
{
"kind": "javascript-module",
"path": "lib/functions.js",
"declarations": [
{
"parameters": [
{
"name": "node",
"type": {
"text": "Node | null"
}
}
],
"return": {
"type": {
"text": "boolean"
}
},
"name": "isHeadingElement",
"description": "Checks if the given `node` is an instanceof HTMLHeadingElemnt",
"kind": "function",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/lib/functions.ts#L5"
}
}
],
"exports": [
{
"kind": "js",
"name": "isHeadingElement",
"declaration": {
"name": "isHeadingElement",
"module": "lib/functions.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "lib/ssr-controller.js",
"declarations": [
{
"name": "RHDSSSRController",
"description": "This is experimental and may change at any time without warning",
"members": [
{
"name": "isRHDSSSRController",
"type": {
"text": "boolean"
},
"default": "true",
"kind": "field"
},
{
"name": "host",
"type": {
"text": "ReactiveElement"
},
"kind": "field"
}
],
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/lib/ssr-controller.ts#L5"
},
"kind": "class"
}
],
"exports": [
{
"kind": "js",
"name": "RHDSSSRController",
"declaration": {
"name": "RHDSSSRController",
"module": "lib/ssr-controller.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "lib/themable.js",
"declarations": [
{
"parameters": [
{
"name": "klass",
"description": "element constructor",
"type": {
"text": "T"
}
}
],
"name": "themable",
"description": "Ensures this element is [themable](https://ux.redhat.com/theming/).",
"kind": "function",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/lib/themable.ts#L22"
}
}
],
"exports": [
{
"kind": "js",
"name": "themable",
"declaration": {
"name": "themable",
"module": "lib/themable.js"
}
}
]
},
{
"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": "Clickable toggle for an accordion panel. Each header controls the visibility\nof its adjacent `rh-accordion-panel` sibling. Renders as an accessible button\nwith `role=\"heading\"` at the appropriate aria-level.\n\nMust be a direct child of `rh-accordion`. Should contain concise title text\n(max 65 characters). Avoid writing titles that sound like calls to action.\n\nSupports keyboard activation with `Enter` or `Space`. Automatically manages\n`aria-expanded` and `aria-controls` for its associated panel.",
"superclass": {
"name": "LitElement",
"package": "lit"
},
"members": [
{
"name": "expanded",
"description": "Whether this header's associated panel is expanded. When true, the caret\nicon rotates upward and the panel content is visible. Managed automatically\nby the parent `rh-accordion` — set `expanded-index` on the accordion to\ncontrol initial state declaratively.",
"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#L49"
},
"kind": "class",
"tagName": "rh-accordion-header",
"attributes": [
{
"name": "expanded",
"description": "Whether this header's associated panel is expanded. When true, the caret\nicon rotates upward and the panel content is visible. Managed automatically\nby the parent `rh-accordion` — set `expanded-index` on the accordion to\ncontrol initial state declaratively.",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "expanded"
}
],
"events": [
{
"name": "change",
"description": "Fires when the header's expanded\nstate changes, either by user click or programmatic toggle. The event\n`expanded` property indicates the new state.",
"type": {
"text": "AccordionHeaderChangeEvent"
}
}
],
"slots": [
{
"name": "",
"summary": "panel's title text or heading content",
"description": "Contains the primary label that describes what content will be revealed when the panel expands.\nTitle text should be written concisely (max 65 characters) so users know what to expect.\nAvoid writing titles that sound like calls to action - make it easy for users to understand\nthe content within. Title text that is too long should be broken into separate sections, and\ntext that is too vague may not help users understand the panel content.\n\n@see [Title text](https://ux.redhat.com/elements/accordion/guidelines/#title-text) in Guidelines documentation"
},
{
"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",
"description": "inline element containing the heading text or slotted heading content"
},
{
"name": "accents",
"description": "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",
"default": "1px"
},
{
"name": "--rh-font-family-body-text",
"description": "Header toggle typeface\n\nBody text font family",
"default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif",
"syntax": "\u003ccustom-ident\u003e+"
},
{
"name": "--rh-color-surface-lighter",
"description": "Tertiary surface (light theme)",
"default": "#f2f2f2",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-surface-dark",
"description": "Tertiary surface (dark theme)",
"default": "#383838",
"syntax": "\u003ccolor\u003e"
},
{
"name": "--rh-color-text-primary",
"description": "Header toggle text color"
},
{
"name": "--rh-color-interactive-primary-default",
"description": "Focus ring color on header toggle"
},
{
"name": "--rh-border-width-lg",
"description": "Accent bar thickness\n\n3px border width: Example: Expanded Accordion panel",
"default": "3px",
"syntax": "\u003clength\u003e"
},
{
"name": "--rh-color-accent-brand"
},
{
"name": "--rh-font-weight-body-text-medium",
"description": "Header toggle text weight\n\nHeader title text weight\n\nMedium font weight",
"default": "500",
"syntax": "\u003cnumber\u003e"
},
{
"name": "--rh-space-md",
"description": "Gap between title and accents\n\nSpacing between accent items\n\n8px 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": "Collapsible content region within an accordion, paired with an\n`rh-accordion-header`. Renders with `role=\"region\"` and\n`aria-labelledby` linking to its header for screen reader context.\n\nMust be a direct child of `rh-accordion`, immediately following its\ncorresponding `rh-accordion-header`. Panel content can include text,\ncards, images, or nested accordions. Text blocks should not exceed\n750px width for optimal readability.",
"superclass": {
"name": "LitElement",
"package": "lit"
},
"members": [
{
"name": "expanded",
"description": "Sets the initial visibility state of the panel content.\nWhen `true`, the panel is expanded and its content is visible.\nWhen `false` (default), the panel is collapsed and its content is hidden.\n\n#### Usage guidelines\n- Use to draw attention to important content that should be immediately visible\n- Set on the first panel in a FAQ or help section to show the most common question\n- Supports multiple panels being expanded simultaneously for content comparison\n- Users can expand and collapse panels one at a time by default, or multiple panels\nwhen implementing \"Expand all\" functionality\n\nBy default, all panels are collapsed (expanded=false). Users expand panels by clicking\nthe header, which animates the caret icon and reveals the content.\n\nSee [Expanding and collapsing panels](https://ux.redhat.com/elements/accordion/guidelines/#expanding-and-collapsing-panels) in Guidelines documentation",
"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#L28"
},
"kind": "class",
"tagName": "rh-accordion-panel",
"attributes": [
{
"name": "expanded",
"description": "Sets the initial visibility state of the panel content.\nWhen `true`, the panel is expanded and its content is visible.\nWhen `false` (default), the panel is collapsed and its content is hidden.\n\n#### Usage guidelines\n- Use to draw attention to important content that should be immediately visible\n- Set on the first panel in a FAQ or help section to show the most common question\n- Supports multiple panels being expanded simultaneously for content comparison\n- Users can expand and collapse panels one at a time by default, or multiple panels\nwhen implementing \"Expand all\" functionality\n\nBy default, all panels are collapsed (expanded=false). Users expand panels by clicking\nthe header, which animates the caret icon and reveals the content.\n\nSee [Expanding and collapsing panels](https://ux.redhat.com/elements/accordion/guidelines/#expanding-and-collapsing-panels) in Guidelines documentation",
"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",
"summary": "main wrapper region that contains the panel content",
"description": "The container part represents the structural element that holds the panel's body content.\nIt maintains the color scheme context to ensure proper text visibility and color contrast,\nand should match the color palette of the container it's in. This part defines the overall\nstyling and boundaries for the panel's revealed content area."
}
],
"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": "Panel trailing border"
},
{
"name": "--rh-border-width-lg",
"description": "Accent bar thickness\n\n3px border width: Example: Expanded Accordion panel",
"default": "3px",
"syntax": "\u003clength\u003e"
},
{
"name": "--rh-color-accent-brand",
"description": "Expanded panel accent bar color"
},
{
"name": "--rh-color-text-primary",
"description": "Panel content text color"
}
],
"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",
"module": "@patternfly/pfe-core"
},
"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",
"module": "@patternfly/pfe-core"
},
"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": "Organizes content into expandable sections users can open or close",
"description": "Organizes content into expandable panels for scanning and selective\ndisclosure. Must contain paired `rh-accordion-header` and\n`rh-accordion-panel` children. Should have two or more pairs; for a\nsingle section use `rh-disclosure`. Headers use ARIA `role=\"heading\"`\nwith `aria-expanded`/`aria-controls` for screen readers. Supports\nkeyboard navigation: Tab to move focus, Enter or Space to toggle.",
"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": "Position of accent slot content relative to the header title.\nDefaults to `inline`. Use `bottom` when accents are numerous or\nthe title needs more horizontal space.",
"type": {
"text": "'inline' | 'bottom'"
},
"kind": "field",
"attribute": "accents",
"reflects": true
},
{
"name": "large",
"description": "Switches the accordion to large size, increasing font size and padding.\nAvoid on viewports below 576px; the accordion automatically falls back\nto small size on mobile breakpoints. Use `large` for page-level content\nsections where the accordion is the primary content structure.",
"type": {
"text": "boolean"
},
"default": "false",
"kind": "field",
"attribute": "large",
"reflects": true
},
{
"name": "colorPalette",
"description": "Color palette for the accordion and its child headers and panels.\nMust match the surrounding surface color to ensure adequate text contrast.\nAvoid mixing light and dark palettes within the same page section.",
"type": {
"text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'",