@rhds/elements
Version:
Red Hat Design System Elements
1,696 lines (1,695 loc) • 676 kB
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",
"default": "16px"
},
{
"name": "--rh-context-demo-padding",
"default": "var(--rh-space-xl, 24px)"
},
{
"name": "--rh-space-xl",
"default": "24px"
}
],
"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",
"default": "#151515"
},
{
"name": "--rh-color-surface-darker",
"default": "#1f1f1f"
},
{
"name": "--rh-color-surface-lighter",
"default": "#f2f2f2"
},
{
"name": "--rh-color-surface-lightest",
"default": "#ffffff"
},
{
"name": "--rh-color-surface-light",
"default": "#e0e0e0"
},
{
"name": "--rh-color-surface-dark",
"default": "#383838"
},
{
"name": "--rh-size-icon-03",
"default": "32px"
},
{
"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": "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",
"default": "16px"
},
{
"name": "--rh-space-xl",
"default": "24px"
},
{
"name": "--rh-border-width-sm",
"default": "1px"
},
{
"name": "--rh-color-border-subtle",
"default": "1px"
},
{
"name": "--rh-font-family-body-text",
"default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif"
},
{
"name": "--rh-color-surface-lighter"
},
{
"name": "--rh-color-surface-dark",
"default": "#383838"
},
{
"name": "--rh-color-text-primary"
},
{
"name": "--rh-color-interactive-primary-default"
},
{
"name": "--rh-border-width-lg",
"default": "3px"
},
{
"name": "--rh-color-accent-brand"
},
{
"name": "--rh-font-weight-body-text-medium",
"default": "500"
},
{
"name": "--rh-space-md",
"default": "8px"
}
],
"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",
"default": "24px"
},
{
"name": "--rh-space-md",
"default": "8px"
},
{
"name": "--rh-space-lg",
"default": "16px"
},
{
"name": "--rh-color-border-subtle"
},
{
"name": "--rh-border-width-lg",
"default": "3px"
},
{
"name": "--rh-color-accent-brand"
},
{
"name": "--rh-color-text-primary"
}
],
"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": "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": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'",
"references": [
{
"name": "ColorPalette",
"module": "lib/color-palettes.js"
}
]
},
"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",
"description": "Sets accordion header's accents position to inline or bottom",
"type": {
"text": "'inline' | 'bottom'"
},
"default": "inline",
"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": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'",
"references": [
{
"name": "ColorPalette",
"module": "lib/color-palettes.js"
}
]
},
"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"
},
{
"name": "--rh-color-surface-lightest",
"default": "#ffffff"
},
{
"name": "--rh-color-surface-darkest",
"default": "#151515"
},
{
"name": "--rh-color-surface"
},
{
"name": "--rh-font-size-body-text-md",
"default": "1rem"
},
{
"name": "--rh-font-size-body-text-lg",
"default": "1.125rem"
},
{
"name": "--rh-color-border-subtle"
},
{
"name": "--rh-box-shadow-sm",
"default": "0 2px 4px 0 rgba(21, 21, 21, 0.2)"
}
],
"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": {