{ "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'", "references": [ { "name": "ColorPalette", "module": "lib/color-palettes.js" } ] }, "kind": "field", "attribute": "color-palette", "reflects": true }, { "name": "hasChanged", "kind": "method" }, { "name": "expandedIndex", "description": "Comma-separated 0-based indexes of initially expanded panels.\nDefaults to none (all collapsed). Example: `expanded-index=\"0,2\"`\nexpands the first and third panels.", "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#L63" }, "kind": "class", "tagName": "rh-accordion", "attributes": [ { "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'" }, "fieldName": "accents" }, { "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", "fieldName": "large" }, { "name": "color-palette", "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'", "references": [ { "name": "ColorPalette", "module": "lib/color-palettes.js" } ] }, "fieldName": "colorPalette" }, { "name": "expanded-index", "description": "Comma-separated 0-based indexes of initially expanded panels.\nDefaults to none (all collapsed). Example: `expanded-index=\"0,2\"`\nexpands the first and third panels.", "fieldName": "expandedIndex" } ], "events": [ { "name": "expand", "description": "Fires when a panel expands.\nEvent detail: `toggle` (RhAccordionHeader), `panel` (RhAccordionPanel).", "type": { "text": "AccordionExpandEvent" } }, { "name": "collapse", "description": "Fires when a panel collapses.\nEvent detail: `toggle` (RhAccordionHeader), `panel` (RhAccordionPanel).", "type": { "text": "AccordionCollapseEvent" } } ], "slots": [ { "name": "", "summary": "Alternating rh-accordion-header and rh-accordion-panel pairs", "description": "Must contain paired rh-accordion-header and rh-accordion-panel elements\nin alternating order. Each header Must be immediately followed by its\ncorresponding panel. Should contain at least two pairs.\nHeaders provide aria-controls linking to their panel for screen readers." } ], "cssProperties": [ { "name": "--rh-color-text-primary", "description": "Accordion text color" }, { "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" }, { "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": "Top and bottom border on first header\n\nBottom border between accordion items\n\nBottom border on expanded panel" }, { "name": "--rh-box-shadow-sm", "description": "Depth shadow on expanded accordion group\n\nDepth shadow on expanded panel\n\nSmall box shadow", "default": "0 2px 4px 0 rgba(21, 21, 21, 0.2)", "syntax": "\u003cshadow\u003e" } ], "demos": [ { "description": "Default accordion with multiple collapsible panels.", "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" } }, { "description": "Accordion with accent content positioned below the header title text using `accents=\u0026quot;bottom\u0026quot;`.", "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" } }, { "description": "Accordion headers with inline accent slot content such as tags or badges alongside the title.", "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" } }, { "description": "Accordion rendered across different color palettes to demonstrate automatic theme adaptation.", "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" } }, { "description": "Accordion panel expanded on load using the `expanded` attribute directly on the header element.", "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" } }, { "description": "Accordion with specific panels expanded on initial render using the `expanded-index` attribute.", "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" } }, { "description": "Large size accordion with increased font size and padding for page-level content sections.", "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" } }, { "description": "Accordion panels containing nested accordion components for hierarchical content organization.", "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" } }, { "description": "Accordion in a right-to-left (RTL) text direction context, demonstrating correct layout mirroring.", "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", "description": "Event fired when a dismissable alert is closed, either by the close button\nor by an action button with a `data-action` attribute. The event is\ncancelable; calling `preventDefault()` will prevent the alert from being\nremoved from the DOM.", "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#L54" }, "kind": "class" }, { "name": "RhAlert", "summary": "Notifies a user without blocking their workflow", "description": "An alert provides a banner for status changes or messages.\nIt uses ARIA `role=\"alert\"` so screen readers must announce\nits content. Authors should provide a heading and must avoid\nnesting alerts. Users may Tab to interactive elements and\npress Enter to activate them. Meets WCAG 2.4.3.", "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' | 'warning' | 'caution' | 'neutral' | 'info' | '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. Toast alerts often\nappear away from what triggered them, may time out, automatically, and\ncan be hard to discover in linear reading order. Toast alerts pose\nsignificant accessibility concerns and are **not recommended for use**.", "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#L83" }, "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' | 'warning' | 'caution' | 'neutral' | 'info' | '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. Toast alerts often\nappear away from what triggered them, may time out, automatically, and\ncan be hard to discover in linear reading order. Toast alerts pose\nsignificant accessibility concerns and are **not recommended for use**.", "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": "Fires when dismissed via\nclose button or action click. `AlertCloseEvent.action`\ncontains the action string (e.g. 'close', 'confirm',\n'dismiss'). Cancelable: call `preventDefault()` to\nkeep the alert in the DOM.", "type": { "text": "AlertCloseEvent" } } ], "slots": [ { "name": "actions", "description": "Up to two `rh-button` action elements. Each\nmust have a `data-action` attribute. Buttons\nare keyboard-focusable via Tab and should use\nARIA labels when text is not descriptive." }, { "name": "header", "description": "Alert heading; must be a heading element\n(e.g. `\u003ch3\u003e`) so screen readers convey the\nalert's ARIA structure." }, { "name": "", "description": "Body content for the alert; accepts block\nelements like `\u003cp\u003e`. Should be concise so\nscreen reader users quickly understand it." } ], "cssProperties": [ { "name": "--rh-space-xl", "description": "Action button inline end margin\n\n24px spacer", "default": "24px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-interactive-primary-default", "description": "Action link color" }, { "name": "--rh-color-interactive-primary-hover", "description": "Action link hover/focus color" }, { "name": "--rh-color-teal-10", "description": "Default surface color\n\nAlert - Default background", "default": "#daf2f2", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-teal-50", "description": "Default border color\n\nDefault icon color\n\nAlert - Default accent", "default": "#37a3a3", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-border-width-md", "description": "Alert border width\n\n2px border width: Example: Alert", "default": "2px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-surface-dark", "description": "Alert dark mode surface color\n\nTertiary surface (dark theme)", "default": "#383838", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-space-lg", "description": "Footer block start margin\n\nAlert padding\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-weight-body-text-regular", "description": "Alert font weight\n\nRegular font weight", "default": "400", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-font-family-body-text", "description": "Alert font family\n\nHeader font family\n\nBody text font family", "default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-weight-body-text-medium", "description": "Header font weight\n\nMedium font weight", "default": "500", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-line-height-body-text", "description": "Alert line height\n\nHeader line height\n\nLine height for body text", "default": "1.5", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-font-size-body-text-sm", "description": "Action button font size\n\nAlert font size\n\nHeader font size\n\nDescription font size\n\n14px font size", "default": "0.875rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-status-neutral", "description": "Neutral state border color" }, { "name": "--rh-color-icon-status-neutral", "description": "Neutral state icon color" }, { "name": "--rh-color-surface-status-neutral", "description": "Neutral state surface color" }, { "name": "--rh-color-status-info", "description": "Info state border color" }, { "name": "--rh-color-icon-status-info", "description": "Info state icon color" }, { "name": "--rh-color-surface-status-info", "description": "Info state surface color" }, { "name": "--rh-color-status-success", "description": "Success state border color" }, { "name": "--rh-color-icon-status-success", "description": "Success state icon color" }, { "name": "--rh-color-surface-status-success", "description": "Success state surface color" }, { "name": "--rh-color-status-caution", "description": "Caution state border color" }, { "name": "--rh-color-icon-status-caution", "description": "Caution state icon color" }, { "name": "--rh-color-surface-status-caution", "description": "Caution state surface color" }, { "name": "--rh-color-status-warning", "description": "Warning state border color" }, { "name": "--rh-color-icon-status-warning", "description": "Warning state icon color" }, { "name": "--rh-color-surface-status-warning", "description": "Warning state surface color" }, { "name": "--rh-color-status-danger", "description": "Danger state border color" }, { "name": "--rh-color-icon-status-danger", "description": "Danger state icon color" }, { "name": "--rh-color-surface-status-danger", "description": "Danger state surface color" }, { "name": "--rh-color-surface-lightest", "description": "Toast surface color\n\nPrimary surface (light theme)", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-box-shadow-xl", "description": "Toast box shadow\n\nExtra large box shadow", "default": "0 8px 24px 3px rgba(21, 21, 21, 0.35)", "syntax": "\u003cshadow\u003e" }, { "name": "--rh-space-xs", "description": "Header block end margin\n\nGrid gap\n\nHeading block end padding\n\nClose button area inline end margin\n\n4px spacer", "default": "4px", "syntax": "\u003clength\u003e" }, { "name": "--rh-size-icon-02", "description": "Status icon inline size\n\nStatus icon block size\n\n24px icon box", "default": "24px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-text-secondary", "description": "Close button color" }, { "name": "--rh-length-xl", "description": "Close button block size\n\nClose button inline size\n\n24px length token", "default": "24px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-text-primary", "description": "Header text color\n\nClose button hover color" } ], "demos": [ { "description": "Default inline alert with header, body text, and action buttons.", "url": "https://ux.redhat.com/elements/alert/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-alert/demo/index.html" } }, { "description": "Alternate variant alerts with a full border in each state.", "url": "https://ux.redhat.com/elements/alert/demo/alternate/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-alert/demo/alternate.html" } }, { "description": "Alert rendered in multiple color contexts using rh-context-demo.", "url": "https://ux.redhat.com/elements/alert/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-alert/demo/color-context.html" } }, { "description": "Deprecated state aliases: error, default, and note.", "url": "https://ux.redhat.com/elements/alert/demo/deprecated-states/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-alert/demo/deprecated-states.html" } }, { "description": "Dismissable alerts with close buttons across inline, alternate, and toast variants.", "url": "https://ux.redhat.com/elements/alert/demo/dismissable/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-alert/demo/dismissable.html" } }, { "description": "Inline variant alerts in each available state.", "url": "https://ux.redhat.com/elements/alert/demo/inline/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-alert/demo/inline.html" } }, { "description": "Alert states: danger, warning, caution, neutral, info, and success.", "url": "https://ux.redhat.com/elements/alert/demo/states/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-alert/demo/states.html" } }, { "description": "Interactive toast alert demo with configurable state, persistence, and actions.", "url": "https://ux.redhat.com/elements/alert/demo/toast/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-alert/demo/toast.html" } } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "AlertCloseEvent", "declaration": { "name": "AlertCloseEvent", "module": "rh-alert/rh-alert.js" } }, { "kind": "custom-element-definition", "name": "rh-alert", "declaration": { "name": "RhAlert", "module": "rh-alert/rh-alert.js" } }, { "kind": "js", "name": "RhAlert", "declaration": { "name": "RhAlert", "module": "rh-alert/rh-alert.js" } } ] }, { "kind": "javascript-module", "path": "rh-announcement/rh-announcement.js", "declarations": [ { "name": "AnnouncementCloseEvent", "description": "Event fired when a user dismisses an announcement by clicking the close\nbutton. The event is cancelable; calling `preventDefault()` on it will\nprevent the announcement from being removed from the DOM: users must\nensure that an appropriate UI (e.g. a confirm dialog) appears.", "superclass": { "name": "Event", "package": "global:" }, "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-announcement/rh-announcement.ts#L21" }, "kind": "class" }, { "name": "RhAnnouncement", "summary": "Full-width promotional or informational banner", "description": "Announcements are flexible surfaces used to group information in a full width\nbanner layout, traditionally across the top of a page. They are used to\nannounce new features, promos, or news. Use `dismissable` to add a close\nbutton. Supports `color-palette` for light/dark themes. Keyboard users\nshould be able to tab to and activate interactive elements. Slotted content\nprovides screen reader context and should include meaningful text.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "colorPalette", "description": "Sets the color context for child components, overriding any inherited\nparent context. Valid values include `light`, `dark`, and other\npalette names defined by the design system. Determines surface and\ntext colors. Should contrast with adjacent surfaces (e.g., avoid\nusing a dark announcement above a dark navigation).", "type": { "text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'", "references": [ { "name": "ColorPalette", "module": "lib/color-palettes.js" } ] }, "kind": "field", "attribute": "color-palette", "reflects": true }, { "name": "dismissable", "description": "When true, renders a close button that allows the user to dismiss the\nannouncement. Pressing Enter or Space on the close button fires a\ncancelable `close` event. If the event is not canceled, the element is\nremoved from the DOM.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "dismissable", "reflects": true }, { "name": "imagePosition", "description": "Controls the position of the slotted image on mobile viewports.\n`inline-start` keeps the image beside the body text; `block-start`\nplaces it above. On wider viewports (768px+), images always appear\ninline. When unset, the image appears above content on mobile.", "type": { "text": "'inline-start' | 'block-start'" }, "kind": "field", "attribute": "image-position", "reflects": true } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-announcement/rh-announcement.ts#L47" }, "kind": "class", "tagName": "rh-announcement", "attributes": [ { "name": "color-palette", "description": "Sets the color context for child components, overriding any inherited\nparent context. Valid values include `light`, `dark`, and other\npalette names defined by the design system. Determines surface and\ntext colors. Should contrast with adjacent surfaces (e.g., avoid\nusing a dark announcement above a dark navigation).", "type": { "text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'", "references": [ { "name": "ColorPalette", "module": "lib/color-palettes.js" } ] }, "fieldName": "colorPalette" }, { "name": "dismissable", "description": "When true, renders a close button that allows the user to dismiss the\nannouncement. Pressing Enter or Space on the close button fires a\ncancelable `close` event. If the event is not canceled, the element is\nremoved from the DOM.", "type": { "text": "boolean" }, "default": "false", "fieldName": "dismissable" }, { "name": "image-position", "description": "Controls the position of the slotted image on mobile viewports.\n`inline-start` keeps the image beside the body text; `block-start`\nplaces it above. On wider viewports (768px+), images always appear\ninline. When unset, the image appears above content on mobile.", "type": { "text": "'inline-start' | 'block-start'" }, "fieldName": "imagePosition" } ], "events": [ { "name": "close", "description": "Fires when the user clicks the dismiss button.\nCancelling this event prevents the element from being removed from the page.\nWhen cancelling the event, you must ensure that some UI appears - e.g. a confirm\ndialog - to avoid confusing the user with a close button that does nothing.", "type": { "text": "AnnouncementCloseEvent" } } ], "slots": [ { "name": "image", "summary": "optional visual such as an icon, logo, or image", "description": "Accepts an `\u003cimg\u003e`, `\u003csvg\u003e`, or `\u003crh-icon\u003e` element.\nShould have explicit `width` and `height` attributes set.\nImages using this slot must follow accessibility best practices.\nMax recommended height is 48px for image logos/icons or 20-25px for text-based logos." }, { "name": "", "summary": "main body text content for the announcement", "description": "Use a `\u003cp\u003e` element for body text. Content should be\nconcise (65 characters max recommended). Screen readers\nwill read this content in DOM order. Avoid long or\nmulti-paragraph content." }, { "name": "cta", "summary": "call-to-action link for the announcement", "description": "Must contain an `\u003crh-cta\u003e` element with an `href`\nattribute. CTA text should follow established guidelines;\nideally keeping character counts to less than 25 characters." } ], "cssParts": [ { "name": "row", "description": "The row for the banner. Contains the image and content divs." }, { "name": "image", "description": "The image for the banner. Contains the image slot." } ], "cssProperties": [ { "name": "--rh-length-lg", "description": "Dismiss button icon size\n\n16px length token", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-surface", "description": "Banner background, adapts to color-palette" }, { "name": "--rh-color-text-primary", "description": "Banner text color, adapts to color-palette" }, { "name": "--rh-font-family-body-text", "description": "Banner body typeface\n\nBody text font family", "default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-line-height-body-text", "description": "Banner body line height\n\nLine height for body text", "default": "1.5", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-font-size-body-text-lg", "description": "Larger body text at desktop widths\n\n18px font size", "default": "1.125rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-2xl", "description": "Wider body text padding on large viewports\n\n32px spacer", "default": "32px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-md", "description": "Smaller body text on mobile\n\n16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-md", "description": "8px spacer", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-lg", "description": "Dismiss button touch target padding\n\nSpacing between image slot and body text\n\nBanner inner padding on all sides\n\nGap between body text and CTA when image is inline\n\nHorizontal spacing around body text at desktop\n\nTrailing padding to prevent text touching dismiss button\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" } ], "demos": [ { "description": "Basic announcement with an image slot, body text, and a call-to-action link.", "url": "https://ux.redhat.com/elements/announcement/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-announcement/demo/index.html" } }, { "description": "Announcement with a CSS background image positioned to the left, demonstrating the pattern described in the design guidelines.", "url": "https://ux.redhat.com/elements/announcement/demo/background-image/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-announcement/demo/background-image.html" } }, { "description": "Announcement wrapped in rh-context-demo to preview light and dark color palettes side by side.", "url": "https://ux.redhat.com/elements/announcement/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-announcement/demo/color-context.html" } }, { "description": "Dismissable announcements with a close button, shown in light, dark inline-start, and block-start variants.", "url": "https://ux.redhat.com/elements/announcement/demo/dismissable/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-announcement/demo/dismissable.html" } }, { "description": "Demonstrates the close event fired when the dismiss button is clicked, with a JavaScript listener that shows an alert dialog.", "url": "https://ux.redhat.com/elements/announcement/demo/events/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-announcement/demo/events.html" } }, { "description": "Shows the image-position attribute with inline-start (image beside text) and block-start (image above text) on mobile viewports.", "url": "https://ux.redhat.com/elements/announcement/demo/image-position/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-announcement/demo/image-position.html" } } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "AnnouncementCloseEvent", "declaration": { "name": "AnnouncementCloseEvent", "module": "rh-announcement/rh-announcement.js" } }, { "kind": "custom-element-definition", "name": "rh-announcement", "declaration": { "name": "RhAnnouncement", "module": "rh-announcement/rh-announcement.js" } }, { "kind": "js", "name": "RhAnnouncement", "declaration": { "name": "RhAnnouncement", "module": "rh-announcement/rh-announcement.js" } } ] }, { "kind": "javascript-module", "path": "rh-audio-player/rh-audio-player-about.js", "declarations": [ { "name": "RhAudioPlayerAbout", "summary": "Displays episode description and speaker attribution", "description": "Provides episode details and speaker attribution for `rh-audio-player`.\nUse when you need show notes or speaker profiles. Must be placed in\nthe `about` slot. Authors should provide a heading and may include up\nto two `rh-avatar` elements for attribution. Rendered inside an\nARIA dialog panel so screen readers can navigate its content.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "label", "description": "Default label content", "type": { "text": "string" }, "kind": "field", "attribute": "label" }, { "name": "mediaseries", "description": "Series this track belongs to, if applicable", "type": { "text": "string" }, "kind": "field", "attribute": "series" }, { "name": "mediatitle", "description": "Title of audio track", "type": { "text": "string" }, "kind": "field", "attribute": "mediatitle" }, { "name": "menuLabel", "type": { "text": "string" }, "kind": "field" }, { "name": "scrollText", "description": "Triggers the scrolling text animation on all panel headings that overflow their container.", "kind": "method" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-audio-player/rh-audio-player-about.ts#L28" }, "kind": "class", "tagName": "rh-audio-player-about", "attributes": [ { "name": "label", "description": "Default label content", "type": { "text": "string" }, "fieldName": "label" }, { "name": "series", "description": "Series this track belongs to, if applicable", "type": { "text": "string" }, "fieldName": "mediaseries" }, { "name": "mediatitle", "description": "Title of audio track", "type": { "text": "string" }, "fieldName": "mediatitle" } ], "slots": [ { "name": "heading", "summary": "Panel heading", "description": "Accepts a heading block element like `\u003ch3\u003e` for the panel\ntitle. Should use an appropriate heading level for the page\nso screen readers can navigate the panel hierarchy." }, { "name": "", "summary": "Episode description", "description": "Accepts block elements like `\u003cp\u003e` for episode show notes\nor description text. Content is focusable and scrollable\nso keyboard and screen reader users can read it." }, { "name": "profile", "summary": "Speaker attribution", "description": "Accepts up to two `\u003crh-avatar\u003e` block elements for speaker\nattribution. Additional elements beyond two are hidden.\n" } ], "cssParts": [ { "name": "heading", "description": "The panel heading container with scrolling overflow." }, { "name": "body", "description": "The scrollable description content area." }, { "name": "profile", "description": "panel profile / avatar" } ], "cssProperties": [ { "name": "--rh-avatar-size", "description": "Avatar size", "default": "var(--rh-size-icon-05, 48px)" }, { "name": "--rh-size-icon-05", "description": "48px icon box", "default": "48px", "syntax": "\u003clength\u003e" }, { "name": "--rh-letter-spacing-body-text", "description": "Series letter spacing\n\nExtra letter spacing for small body text sizes", "default": "0.0125rem", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-font-size-body-text-xs", "description": "Series font size\n\n12px font size", "default": "0.75rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-line-height-body-text", "description": "Series line height\n\nLine height for body text", "default": "1.5", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-font-family-body-text", "description": "Series font family\n\nBody text font family", "default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-weight-body-text-medium", "description": "Series font weight\n\nMedium font weight", "default": "500", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-font-size-heading-xs", "description": "Title font size\n\nh6 heading font size", "default": "1.25rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-family-heading", "description": "Title font family\n\nHeading font family", "default": "RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-weight-heading-medium", "description": "Title font weight\n\nMedium font weight for headings", "default": "500", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-line-height-heading", "description": "Title line height\n\nLine height for headings", "default": "1.3", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-space-md", "description": "Series block end margin\n\n8px spacer", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-lg", "description": "Title block end margin\n\nProfile grid gap\n\nProfile block start margin\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-audio-player-about", "declaration": { "name": "RhAudioPlayerAbout", "module": "rh-audio-player/rh-audio-player-about.js" } }, { "kind": "js", "name": "RhAudioPlayerAbout", "declaration": { "name": "RhAudioPlayerAbout", "module": "rh-audio-player/rh-audio-player-about.js" } } ] }, { "kind": "javascript-module", "path": "rh-audio-player/rh-audio-player-rate-stepper.js", "declarations": [ { "name": "RhAudioPlayerRateStepper", "summary": "Controls audio playback speed with step buttons and dropdown", "description": "Provides playback rate controls for `rh-audio-player`, allowing users\nto adjust audio speed between 0.25x and 2x. Renders step buttons\nflanking a `\u003cselect\u003e` dropdown with ARIA labels for screen readers.\nThis element is used internally by `rh-audio-player` and should not\nbe placed independently in user markup.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "pbrMin", "type": { "text": "number" }, "default": "0.25", "kind": "field", "static": true, "privacy": "private" }, { "name": "pbrMax", "type": { "text": "number" }, "default": "2", "kind": "field", "static": true, "privacy": "private" }, { "name": "pbrStep", "type": { "text": "number" }, "default": "0.25", "kind": "field", "static": true, "privacy": "private" }, { "name": "pbrFixed", "type": { "text": "number" }, "default": "2", "kind": "field", "static": true, "privacy": "private" }, { "name": "playbackRate", "description": "Current playback rate multiplier, from 0.25 to 2.", "type": { "text": "number" }, "default": "1", "kind": "field", "attribute": "playback-rate", "reflects": true }, { "name": "disabled", "description": "Whether the stepper controls are disabled.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "disabled", "reflects": true }, { "name": "label", "description": "Accessible label for the rate select dropdown.", "type": { "text": "string" }, "kind": "field", "attribute": "label" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-audio-player/rh-audio-player-rate-stepper.ts#L25" }, "kind": "class", "tagName": "rh-audio-player-rate-stepper", "attributes": [ { "name": "playback-rate", "description": "Current playback rate multiplier, from 0.25 to 2.", "type": { "text": "number" }, "default": "1", "fieldName": "playbackRate" }, { "name": "disabled", "description": "Whether the stepper controls are disabled.", "type": { "text": "boolean" }, "default": "false", "fieldName": "disabled" }, { "name": "label", "description": "Accessible label for the rate select dropdown.", "type": { "text": "string" }, "fieldName": "label" } ], "events": [ { "name": "playback-rate-select", "description": "Fired when the user changes the playback\nrate, either by clicking step buttons or selecting from the\ndropdown. The event's `playbackRate` property contains the new\nrate value.", "type": { "text": "Event", "references": [ { "name": "Event", "package": "global:" } ] } } ], "cssProperties": [ { "name": "--rh-font-size-code-md", "description": "Rate selector font size\n\n16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-family-code", "description": "Rate selector font family\n\nCode font family", "default": "RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace", "syntax": "\u003ccustom-ident\u003e+" } ], "customElement": true }, { "name": "RhAudioPlayerRateSelectEvent", "superclass": { "name": "Event", "package": "global:" }, "members": [ { "name": "playbackRate", "type": { "text": "number" }, "kind": "field" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-audio-player/rh-audio-player-rate-stepper.ts#L136" }, "kind": "class" } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-audio-player-rate-stepper", "declaration": { "name": "RhAudioPlayerRateStepper", "module": "rh-audio-player/rh-audio-player-rate-stepper.js" } }, { "kind": "js", "name": "RhAudioPlayerRateStepper", "declaration": { "name": "RhAudioPlayerRateStepper", "module": "rh-audio-player/rh-audio-player-rate-stepper.js" } }, { "kind": "js", "name": "RhAudioPlayerRateSelectEvent", "declaration": { "name": "RhAudioPlayerRateSelectEvent", "module": "rh-audio-player/rh-audio-player-rate-stepper.js" } } ] }, { "kind": "javascript-module", "path": "rh-audio-player/rh-audio-player-scrolling-text-overflow.js", "declarations": [ { "name": "RhAudioPlayerScrollingTextOverflow", "summary": "Scrolls overflowing text on hover or focus", "description": "Provides a scrolling text animation for `rh-audio-player` when content\noverflows. Reveals full text on hover or focus with a trailing fade\neffect. Animation duration scales with character count. Keyboard and\nscreen reader users can trigger scrolling via focus. Should not be\nplaced independently in user markup.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "firstUpdated", "kind": "method" }, { "name": "stopScrolling", "description": "Stops the scrolling text animation and resets to the initial position.", "kind": "method" }, { "name": "startScrolling", "description": "Starts the scrolling text animation if the content overflows the container.", "kind": "method" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.ts#L21" }, "kind": "class", "tagName": "rh-audio-player-scrolling-text-overflow", "slots": [ { "name": "", "summary": "Overflowing inline text", "description": "Accepts inline text content such as a heading or title.\nScreen readers announce the full text regardless of\nwhether the scroll animation is active." } ], "cssProperties": [ { "name": "--rh-color-surface-lightest", "description": "Fade overlay color in light mode\n\nPrimary surface (light theme)", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-audio-player-scrolling-text-overflow-background-color", "description": "Fade overlay color in light mode override\n\nFade overlay color in dark mode override", "default": "var(--rh-color-surface-darkest, #151515)" }, { "name": "--rh-color-surface-darkest", "description": "Fade overlay color in dark mode\n\nPrimary surface (dark theme)", "default": "#151515", "syntax": "\u003ccolor\u003e" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-audio-player-scrolling-text-overflow", "declaration": { "name": "RhAudioPlayerScrollingTextOverflow", "module": "rh-audio-player/rh-audio-player-scrolling-text-overflow.js" } }, { "kind": "js", "name": "RhAudioPlayerScrollingTextOverflow", "declaration": { "name": "RhAudioPlayerScrollingTextOverflow", "module": "rh-audio-player/rh-audio-player-scrolling-text-overflow.js" } } ] }, { "kind": "javascript-module", "path": "rh-audio-player/rh-audio-player-subscribe.js", "declarations": [ { "name": "RhAudioPlayerSubscribe", "summary": "Displays podcast subscription links in an expandable panel", "description": "Provides subscription links for podcast platforms within the audio\nplayer. Use this when you need to allow users to subscribe. Must be\nplaced in the `subscribe` slot of `rh-audio-player`. Rendered inside\nan ARIA dialog panel; keyboard users can Tab through links. Authors\nshould provide alt text on images so screen readers can identify\neach platform.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "heading", "description": "Custom heading text displayed at the top of the subscribe panel. Overridden by the `heading` slot.", "type": { "text": "string" }, "kind": "field", "attribute": "heading" }, { "name": "label", "description": "Accessible label for the panel, used as the menu item text when no heading slot is provided.", "type": { "text": "string" }, "kind": "field", "attribute": "label" }, { "name": "menuLabel", "type": { "text": "string" }, "kind": "field" }, { "name": "scrollText", "description": "Triggers the scrolling text animation on the panel heading if it overflows its container.", "kind": "method" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-audio-player/rh-audio-player-subscribe.ts#L29" }, "kind": "class", "tagName": "rh-audio-player-subscribe", "attributes": [ { "name": "heading", "description": "Custom heading text displayed at the top of the subscribe panel. Overridden by the `heading` slot.", "type": { "text": "string" }, "fieldName": "heading" }, { "name": "label", "description": "Accessible label for the panel, used as the menu item text when no heading slot is provided.", "type": { "text": "string" }, "fieldName": "label" } ], "slots": [ { "name": "heading", "summary": "Custom panel heading", "description": "Accepts a heading element for the subscribe panel title.\nShould use an appropriate heading level for the page so\nscreen readers can navigate the panel hierarchy." }, { "name": "", "summary": "Subscribe panel body content", "description": "Accepts descriptive text or rich content for the subscribe\npanel. Content is accessible to screen readers when the\npanel is expanded." }, { "name": "link", "summary": "Subscription platform link", "description": "Accepts anchor elements linking to podcast platforms. Each\nlink should include descriptive text or an image with alt\ntext so screen readers can identify the platform.\n" } ], "cssParts": [ { "name": "heading", "description": "The panel heading with scrolling text overflow." }, { "name": "body", "summary": "Subscribe panel body content", "description": "Accepts descriptive text or rich content for the subscribe\npanel. Content is accessible to screen readers when the\npanel is expanded." }, { "name": "links", "summary": "subscribe links", "description": "The container for subscription link elements." } ], "cssProperties": [ { "name": "--rh-font-family-heading", "description": "Panel heading font family\n\nHeading font family", "default": "RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-size-heading-xs", "description": "Panel heading font size\n\nh6 heading font size", "default": "1.25rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-line-height-heading", "description": "Panel heading line height\n\nLine height for headings", "default": "1.3", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-space-lg", "description": "Heading block margin\n\nTitle block end margin\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-letter-spacing-body-text", "description": "Series letter spacing\n\nExtra letter spacing for small body text sizes", "default": "0.0125rem", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-font-size-body-text-xs", "description": "Series font size\n\n12px font size", "default": "0.75rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-weight-heading-medium", "description": "Panel heading font weight\n\nSeries font weight\n\nMedium font weight for headings", "default": "500", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-space-md", "description": "Series block end margin\n\n8px spacer", "default": "8px", "syntax": "\u003clength\u003e" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-audio-player-subscribe", "declaration": { "name": "RhAudioPlayerSubscribe", "module": "rh-audio-player/rh-audio-player-subscribe.js" } }, { "kind": "js", "name": "RhAudioPlayerSubscribe", "declaration": { "name": "RhAudioPlayerSubscribe", "module": "rh-audio-player/rh-audio-player-subscribe.js" } } ] }, { "kind": "javascript-module", "path": "rh-audio-player/rh-audio-player.js", "declarations": [ { "name": "RhAudioPlayer", "summary": "Plays audio clips with playback controls, transcript, and panels", "description": "An audio player for podcasts and media clips. Users must provide an\n`\u003caudio\u003e` element in the `media` slot. Provides playback controls,\nseek timeline, and expandable panels. All buttons use ARIA labels\nand `rh-tooltip` for screen reader and keyboard accessibility.\nTab and Enter navigate and activate controls.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "instances", "default": "new Set\u003cRhAudioPlayer\u003e()", "kind": "field", "static": true, "privacy": "private" }, { "name": "enUS", "default": "{\\n 'play': 'Play',\\n 'pause': 'Pause',\\n 'seek': 'Seek',\\n 'rewind': 'Rewind 15 seconds',\\n 'advance': 'Advance 15 seconds',\\n 'speed': 'Speed',\\n 'mute': 'Mute',\\n 'unmute': 'Unmute',\\n 'volume': 'Volume',\\n 'menu': 'More options',\\n 'close': 'Close',\\n 'about': 'About the episode',\\n 'subscribe': 'Subscribe',\\n 'transcript': 'Transcript',\\n 'autoscroll': 'Autoscroll',\\n 'download': 'Download',\\n }", "kind": "field", "static": true }, { "name": "mediaseries", "description": "Audio series name, e.g. a podcast series title.", "type": { "text": "string" }, "kind": "field", "attribute": "mediaseries", "reflects": true }, { "name": "mediatitle", "description": "Audio track title, e.g. a podcast episode name.", "type": { "text": "string" }, "kind": "field", "attribute": "mediatitle", "reflects": true }, { "name": "layout", "description": "Player layout variant. Users should choose a layout appropriate to\nthe available width:\n- `mini` (default): play/pause and seek range only; volume and\nother controls are behind the \"more options\" menu.\n- `compact`: adds artwork, elapsed time, skip buttons, and volume.\n- `compact-wide`: like `compact` but stretches to fill container\nwidth.\n- `full`: maximal controls including artwork, rewind/forward,\nelapsed/duration display, and inline playback rate stepper.", "type": { "text": "'mini' | 'compact' | 'compact-wide' | 'full'" }, "default": "'mini'", "kind": "field", "attribute": "layout", "reflects": true }, { "name": "poster", "description": "URL to the audio track's artwork image.", "type": { "text": "string" }, "kind": "field", "attribute": "poster", "reflects": true }, { "name": "volume", "description": "Playback volume from 0 (muted) to 1 (max).", "type": { "text": "number" }, "default": "0.5", "kind": "field", "attribute": "volume", "reflects": true }, { "name": "playbackRate", "description": "Playback speed multiplier, from 0.25 to 2.", "type": { "text": "number" }, "default": "1", "kind": "field", "attribute": "playbackrate", "reflects": true }, { "name": "expanded", "description": "Whether the expandable content panel is open.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "expanded", "reflects": true }, { "name": "lang", "description": "Language code for i18n of control labels.", "type": { "text": "string" }, "kind": "field", "attribute": "lang", "reflects": true }, { "name": "microcopy", "description": "Custom microcopy overrides keyed by language code.", "default": "{}", "kind": "field" }, { "name": "colorPalette", "description": "Element's color palette.", "type": { "text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'", "references": [ { "name": "ColorPalette", "module": "lib/color-palettes.js" } ] }, "kind": "field", "attribute": "color-palette", "reflects": true }, { "name": "currentTime", "description": "elapsed time in seconds", "kind": "field" }, { "name": "duration", "description": "total time in seconds", "readonly": true, "kind": "field" }, { "name": "muted", "description": "whether audio is muted", "type": { "text": "boolean" }, "readonly": true, "kind": "field" }, { "name": "paused", "description": "whether media is paused", "type": { "text": "boolean" }, "readonly": true, "kind": "field" }, { "name": "readyState", "description": "media status", "type": { "text": "number" }, "readonly": true, "kind": "field" }, { "name": "firstUpdated", "kind": "method" }, { "name": "mute", "description": "Mutes media volume", "kind": "method" }, { "name": "unmute", "description": "Unmutes media volume", "kind": "method" }, { "name": "pause", "description": "Pauses playback", "kind": "method" }, { "name": "play", "description": "Starts or resumes playback", "kind": "method" }, { "parameters": [ { "name": "seconds", "type": { "text": "number" } } ], "name": "seek", "description": "Seeks media to a given point in seconds", "kind": "method" }, { "name": "seekFromCurrentTime", "description": "Seeks media a given number of secons from current elapsed time", "kind": "method" }, { "name": "rewind", "description": "Rewinds media by 15 seconds (default)", "kind": "method" }, { "name": "forward", "description": "Advances media by 15 seconds (default)", "kind": "method" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-audio-player/rh-audio-player.ts#L55" }, "kind": "class", "tagName": "rh-audio-player", "attributes": [ { "name": "mediaseries", "description": "Audio series name, e.g. a podcast series title.", "type": { "text": "string" }, "fieldName": "mediaseries" }, { "name": "mediatitle", "description": "Audio track title, e.g. a podcast episode name.", "type": { "text": "string" }, "fieldName": "mediatitle" }, { "name": "layout", "description": "Player layout variant. Users should choose a layout appropriate to\nthe available width:\n- `mini` (default): play/pause and seek range only; volume and\nother controls are behind the \"more options\" menu.\n- `compact`: adds artwork, elapsed time, skip buttons, and volume.\n- `compact-wide`: like `compact` but stretches to fill container\nwidth.\n- `full`: maximal controls including artwork, rewind/forward,\nelapsed/duration display, and inline playback rate stepper.", "type": { "text": "'mini' | 'compact' | 'compact-wide' | 'full'" }, "default": "'mini'", "fieldName": "layout" }, { "name": "poster", "description": "URL to the audio track's artwork image.", "type": { "text": "string" }, "fieldName": "poster" }, { "name": "volume", "description": "Playback volume from 0 (muted) to 1 (max).", "type": { "text": "number" }, "default": "0.5", "fieldName": "volume" }, { "name": "playbackrate", "description": "Playback speed multiplier, from 0.25 to 2.", "type": { "text": "number" }, "default": "1", "fieldName": "playbackRate" }, { "name": "expanded", "description": "Whether the expandable content panel is open.", "type": { "text": "boolean" }, "default": "false", "fieldName": "expanded" }, { "name": "lang", "description": "Language code for i18n of control labels.", "type": { "text": "string" }, "fieldName": "lang" }, { "name": "color-palette", "description": "Element's color palette.", "type": { "text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'", "references": [ { "name": "ColorPalette", "module": "lib/color-palettes.js" } ] }, "fieldName": "colorPalette" } ], "slots": [ { "name": "media" }, { "name": "series", "summary": "optional inline text for podcast series name", "description": "Accepts a `\u003cp\u003e` or inline text element. Screen readers\nannounce the series name before the title for context." }, { "name": "title", "summary": "optional heading element for episode title", "description": "Accepts a heading element like `\u003ch3\u003e`. Should use an\nappropriate heading level for the page. Screen readers\nuse this as the primary label for the player region." }, { "name": "about", "summary": "optional about panel block element", "description": "Accepts an `rh-audio-player-about` block element with\nepisode description and speaker attribution. Content\nis accessible to screen readers when the panel is expanded.\n" }, { "name": "subscribe", "summary": "optional subscribe panel block element", "description": "Accepts an `rh-audio-player-subscribe` block element with\nanchor links to podcast services. Each link should include\ndescriptive alt text on images for screen reader users.\n" }, { "name": "transcript", "summary": "optional transcript panel block element", "description": "Accepts an `rh-transcript` block element containing `rh-cue`\nchildren. The transcript provides accessible text content\nthat screen readers can navigate. Clicking cues seeks audio.\n" } ], "cssParts": [ { "name": "toolbar", "description": "main controls" }, { "name": "panel", "description": "expandable panel" }, { "name": "about", "description": "about the episode panel" }, { "name": "subscribe", "description": "subscribe panel" }, { "name": "transcript", "description": "transcript panel" } ], "cssProperties": [ { "name": "--rh-size-icon-03", "description": "32px icon box", "default": "32px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-code-md", "description": "Player base font size\n\n16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-box-shadow-md", "description": "Player box shadow in light mode\n\nMedium box shadow", "default": "0 4px 6px 1px rgba(21, 21, 21, 0.25)", "syntax": "\u003cshadow\u003e" }, { "name": "--rh-length-lg", "description": "Thumb height\n\n16px length token", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-audio-player-text-color", "description": "Player primary text color override", "default": "var(--rh-color-text-primary)" }, { "name": "--rh-length-xs", "description": "Track height\n\n4px length token", "default": "4px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-gray-30", "description": "Range track in light mode\n\nSubtle borders (light theme)", "default": "#c7c7c7", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-50", "description": "Range track in dark mode\n\nSubtle icon", "default": "#707070", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-border-interactive", "description": "Focus ring color" }, { "name": "--rh-color-accent-brand", "description": "Brand accent for thumb and progress fill" }, { "name": "--rh-border-width-md", "description": "Focus outline width\n\n2px border width: Example: Alert", "default": "2px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-text-secondary", "description": "Player secondary text color" }, { "name": "--rh-audio-player-range-thumb-color", "description": "Range slider thumb color", "default": "var(--_accent-color)" }, { "name": "--rh-audio-player-range-progress-color", "description": "Filled range track color", "default": "var(--_accent-color)" }, { "name": "--rh-color-border-subtle", "description": "Player border color\n\nStatic border color for panels\n\nCue text underline color" }, { "name": "--box-fill" }, { "name": "--rh-color-surface-dark", "description": "Active cue highlight in dark mode\n\nPanel focus surface in dark mode\n\nTertiary surface (dark theme)", "default": "#383838", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-audio-player-secondary-text-color", "description": "Player secondary text color override", "default": "var(--rh-color-text-primary)" }, { "name": "--rh-audio-player-secondary-opacity", "description": "Opacity for secondary UI elements", "default": "0.75" }, { "name": "--rh-color-interactive-primary-hover", "description": "Active cue highlight in light mode" }, { "name": "--rh-color-surface-light", "description": "Panel focus surface in light mode\n\nSecondary surface (light theme)", "default": "#e0e0e0", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-font-size-body-text-xs", "description": "Series font size\n\n12px font size", "default": "0.75rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-xl", "description": "Title font size\n\n20px font size", "default": "1.25rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-line-height-heading", "description": "Title line height\n\nLine height for headings", "default": "1.3", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-font-family-heading", "description": "Title font family\n\nMedia title font family\n\nHeading font family", "default": "RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-size-heading-xs", "description": "Media title font size\n\nh6 heading font size", "default": "1.25rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-weight-heading-medium", "description": "Series font weight\n\nTitle font weight\n\nMedia title font weight\n\nMedium font weight for headings", "default": "500", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-font-size-body-text-sm", "description": "Series name font size\n\n14px font size", "default": "0.875rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-weight-body-text-regular", "description": "Player base font weight\n\nSeries name font weight\n\nRegular font weight", "default": "400", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-letter-spacing-body-text", "description": "Series letter spacing\n\nSeries name letter spacing\n\nExtra letter spacing for small body text sizes", "default": "0.0125rem", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-font-family-code", "description": "Time display font family\n\nCode font family", "default": "RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-size-code-xs", "description": "Time display font size\n\n12px font size", "default": "0.75rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-line-height-code", "description": "Time display line height\n\nLine height for code", "default": "1.5", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-size-icon-01", "description": "16px icon box", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-icon-size" }, { "name": "--rh-audio-player-background-color", "description": "Player surface in light mode override\n\nPlayer surface in dark mode override", "default": "var(--_static-surface-color)" }, { "name": "--rh-space-lg", "description": "Player inline and block padding\n\nTitle block end margin\n\nSpacer inline end margin\n\nPlay button icon gap\n\nMenu item inline padding\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-md", "description": "Menu item font size\n\n16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-line-height-body-text", "description": "Player base line height\n\nMenu item line height\n\nLine height for body text", "default": "1.5", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-font-family-body-text", "description": "Player base font family\n\nSeries name font family\n\nMenu item font family\n\nBody text font family", "default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-color-text-primary", "description": "Player primary text color\n\nStatic text color for panels" }, { "name": "--rh-color-surface-lightest", "description": "Player surface in light mode\n\nStatic panel surface in light mode\n\nPlay button fill in dark mode\n\nPlay button icon in light mode\n\nPrimary surface (light theme)", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-surface-darkest", "description": "Player surface in dark mode\n\nStatic panel surface in dark mode\n\nPlay button fill in light mode\n\nPlay button icon in dark mode\n\nPrimary surface (dark theme)", "default": "#151515", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-border-radius-default", "description": "Toolbar and panel border radius\n\n3px border radius; Example: Card", "default": "3px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-space-md", "description": "Series block end margin\n\nSeries name block end margin\n\nToolbar inline end padding\n\nMenu item block padding\n\n8px spacer", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-size-icon-02", "description": "24px icon box", "default": "24px", "syntax": "\u003clength\u003e" }, { "name": "--rh-length-md", "description": "8px length token", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-xl", "description": "Gap between toolbar icon buttons\n\nSpacer width\n\n24px spacer", "default": "24px", "syntax": "\u003clength\u003e" } ], "demos": [ { "description": "Full layout audio player with poster artwork, about panel, subscribe links, and synchronized transcript.", "url": "https://ux.redhat.com/elements/audio-player/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-audio-player/demo/index.html" } }, { "description": "Audio player with color palette context controls for light and dark themes.", "url": "https://ux.redhat.com/elements/audio-player/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-audio-player/demo/color-context.html" } }, { "description": "Compact-wide layout audio player that stretches to fill the container width.", "url": "https://ux.redhat.com/elements/audio-player/demo/compact-wide/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-audio-player/demo/compact-wide.html" } }, { "description": "Compact layout audio player with poster artwork, about panel, subscribe links, and transcript.", "url": "https://ux.redhat.com/elements/audio-player/demo/compact/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-audio-player/demo/compact.html" } }, { "description": "Audio player with custom CSS color themes including purple and cyan variants.", "url": "https://ux.redhat.com/elements/audio-player/demo/customization/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-audio-player/demo/customization.html" } }, { "description": "Full layout audio player with a detailed, multi-speaker synchronized transcript.", "url": "https://ux.redhat.com/elements/audio-player/demo/detailed-transcript/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-audio-player/demo/detailed-transcript.html" } }, { "description": "Audio player demonstrating automatic heading level calculation from surrounding context.", "url": "https://ux.redhat.com/elements/audio-player/demo/heading-levels/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-audio-player/demo/heading-levels.html" } }, { "description": "Audio player with Spanish language localization, demonstrating i18n support for control labels.", "url": "https://ux.redhat.com/elements/audio-player/demo/language-localization/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-audio-player/demo/language-localization.html" } }, { "description": "Mini layout audio player with minimal controls and options behind a menu.", "url": "https://ux.redhat.com/elements/audio-player/demo/mini/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-audio-player/demo/mini.html" } }, { "description": "Multiple audio players demonstrating automatic pause of concurrent playback.", "url": "https://ux.redhat.com/elements/audio-player/demo/prevent-concurrent-playback/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-audio-player/demo/prevent-concurrent-playback.html" } }, { "description": "Audio player with right-to-left Hebrew content demonstrating bidirectional layout support.", "url": "https://ux.redhat.com/elements/audio-player/demo/right-to-left/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-audio-player/demo/right-to-left.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-audio-player", "declaration": { "name": "RhAudioPlayer", "module": "rh-audio-player/rh-audio-player.js" } }, { "kind": "js", "name": "RhAudioPlayer", "declaration": { "name": "RhAudioPlayer", "module": "rh-audio-player/rh-audio-player.js" } } ] }, { "kind": "javascript-module", "path": "rh-audio-player/rh-cue.js", "declarations": [ { "parameters": [ { "name": "seconds", "type": { "text": "Seconds" } } ], "name": "getFormattedTime", "description": "formats time in seconds as `mm:ss.ms` string", "kind": "function", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-audio-player/rh-cue.ts#L15" } }, { "parameters": [ { "name": "str", "type": { "text": "TimeString" } } ], "name": "getSeconds", "description": "gets seconds from a string formatted as `mm:ss.mss` or `hh:mm:ss.mss`", "kind": "function", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-audio-player/rh-cue.ts#L45" } }, { "name": "RhCue", "summary": "A timed transcript segment with optional speaker label", "description": "Provides a timed transcript segment for `rh-transcript`. Use this to\ndisplay spoken content with timestamps and optional speaker labels.\nCue links are focusable; pressing Enter seeks the audio to that\ntimestamp. The `active` attribute visually highlights the current\ncue. Screen readers can navigate cue links to browse the\ntranscript. Must be placed in the `cues` slot.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "start", "description": "Start time, in mm:ss.ms", "type": { "text": "string" }, "kind": "field", "attribute": "start" }, { "name": "end", "description": "End time, in mm:ss.ms", "type": { "text": "string" }, "kind": "field", "attribute": "end" }, { "name": "text", "description": "Text of this cue. Overridden by `text` slot", "type": { "text": "string" }, "kind": "field", "attribute": "text" }, { "name": "voice", "description": "Name of voice speaking this text. Overridden by `voice` slot", "type": { "text": "string" }, "kind": "field", "attribute": "voice", "reflects": true }, { "name": "active", "description": "Whether this cue is active right now", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "active", "reflects": true }, { "name": "startTime", "readonly": true, "kind": "field" }, { "name": "endTime", "readonly": true, "kind": "field" }, { "name": "downloadText", "readonly": true, "kind": "field" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-audio-player/rh-cue.ts#L73" }, "kind": "class", "tagName": "rh-cue", "attributes": [ { "name": "start", "description": "Start time, in mm:ss.ms", "type": { "text": "string" }, "fieldName": "start" }, { "name": "end", "description": "End time, in mm:ss.ms", "type": { "text": "string" }, "fieldName": "end" }, { "name": "text", "description": "Text of this cue. Overridden by `text` slot", "type": { "text": "string" }, "fieldName": "text" }, { "name": "voice", "description": "Name of voice speaking this text. Overridden by `voice` slot", "type": { "text": "string" }, "fieldName": "voice" }, { "name": "active", "description": "Whether this cue is active right now", "type": { "text": "boolean" }, "default": "false", "fieldName": "active" } ], "events": [ { "name": "cueseek", "description": "Fired when the user clicks a cue link. This is a plain\n`Event` with `bubbles: true` and no custom detail. The parent\n`rh-audio-player` handles it to seek to this cue's start time.", "type": { "text": "Event", "references": [ { "name": "Event", "package": "global:" } ] } } ], "slots": [ { "name": "", "summary": "Cue spoken text", "description": "Accepts inline text content for this cue's spoken words.\nScreen readers announce the text alongside the timestamp\nand voice label when navigating the transcript." } ], "cssProperties": [ { "name": "--rh-font-size-body-text-md", "description": "Cue default font size\n\nHeading font size override\n\n16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-family-heading", "description": "Speaker name font family\n\nHeading font family", "default": "RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-family-code", "description": "Timestamp font family\n\nCode font family", "default": "RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace", "syntax": "\u003ccustom-ident\u003e+" } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "getFormattedTime", "declaration": { "name": "getFormattedTime", "module": "rh-audio-player/rh-cue.js" } }, { "kind": "js", "name": "getSeconds", "declaration": { "name": "getSeconds", "module": "rh-audio-player/rh-cue.js" } }, { "kind": "custom-element-definition", "name": "rh-cue", "declaration": { "name": "RhCue", "module": "rh-audio-player/rh-cue.js" } }, { "kind": "js", "name": "RhCue", "declaration": { "name": "RhCue", "module": "rh-audio-player/rh-cue.js" } } ] }, { "kind": "javascript-module", "path": "rh-audio-player/rh-transcript.js", "declarations": [ { "name": "RhTranscript", "summary": "Displays synchronized, scrollable transcript with download", "description": "Provides a synchronized transcript panel for `rh-audio-player`. Use this\nwhen you need to display timed captions alongside audio playback. Must\nbe placed in the `transcript` slot. Authors should provide `rh-cue`\nblock elements with `start` and optionally `end` and `voice` attributes.\nActive cues are highlighted for screen reader and sighted users alike.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "heading", "description": "Custom heading text displayed at the top of the transcript panel. Overridden by the `heading` slot.", "type": { "text": "string" }, "kind": "field", "attribute": "heading" }, { "name": "label", "description": "Accessible label for the panel, used as the menu item text when no heading slot is provided.", "type": { "text": "string" }, "kind": "field", "attribute": "label" }, { "name": "lang", "description": "Language code for transcript content, used for text direction and localization.", "type": { "text": "string" }, "kind": "field", "attribute": "lang", "reflects": true }, { "name": "menuLabel", "description": "Text label shown in the parent player's menu for this panel.", "type": { "text": "string" }, "default": "'About the episode'", "kind": "field", "attribute": "menulabel" }, { "name": "downloadLabel", "description": "Text label for the download button and its tooltip.", "type": { "text": "string" }, "default": "'Download'", "kind": "field", "attribute": "downloadlabel" }, { "name": "autoscrollLabel", "description": "Text label for the autoscroll checkbox.", "type": { "text": "string" }, "default": "'Autoscroll'", "kind": "field", "attribute": "autoscrolllabel" }, { "name": "downloadText", "readonly": true, "kind": "field" }, { "name": "setActiveCues", "description": "Updates cue active states based on the current playback time.", "kind": "method" }, { "parameters": [ { "name": "mediaDuration", "type": { "text": "number" } } ], "name": "setDuration", "description": "Sets the total media duration and recalculates cue end times.", "kind": "method" }, { "name": "scrollText", "description": "Triggers the scrolling text animation on the panel heading if it overflows its container.", "kind": "method" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-audio-player/rh-transcript.ts#L39" }, "kind": "class", "tagName": "rh-transcript", "attributes": [ { "name": "heading", "description": "Custom heading text displayed at the top of the transcript panel. Overridden by the `heading` slot.", "type": { "text": "string" }, "fieldName": "heading" }, { "name": "label", "description": "Accessible label for the panel, used as the menu item text when no heading slot is provided.", "type": { "text": "string" }, "fieldName": "label" }, { "name": "lang", "description": "Language code for transcript content, used for text direction and localization.", "type": { "text": "string" }, "fieldName": "lang" }, { "name": "menulabel", "description": "Text label shown in the parent player's menu for this panel.", "type": { "text": "string" }, "default": "'About the episode'", "fieldName": "menuLabel" }, { "name": "downloadlabel", "description": "Text label for the download button and its tooltip.", "type": { "text": "string" }, "default": "'Download'", "fieldName": "downloadLabel" }, { "name": "autoscrolllabel", "description": "Text label for the autoscroll checkbox.", "type": { "text": "string" }, "default": "'Autoscroll'", "fieldName": "autoscrollLabel" } ], "events": [ { "name": "transcriptdownload", "description": "Fired when the user clicks the download\nbutton. This is a plain `Event` with `bubbles: true` and no\ncustom detail. The parent `rh-audio-player` handles it to\ngenerate a `.txt` file download of the full transcript.", "type": { "text": "Event", "references": [ { "name": "Event", "package": "global:" } ] } } ], "slots": [ { "name": "heading", "summary": "Panel heading", "description": "Accepts a heading block element like `\u003ch3\u003e` for the panel\ntitle. Should use an appropriate heading level for the page\nso screen readers can navigate the panel hierarchy." }, { "name": "", "summary": "Transcript cue elements", "description": "Accepts `\u003crh-cue\u003e` block elements with `start`, `end`, and\n`voice` attributes. Screen readers can navigate individual\ncues, and clicking a cue seeks the audio to that timestamp." } ], "cssParts": [ { "name": "heading", "description": "The panel heading with scrolling text overflow." }, { "name": "toolbar", "description": "toolbar area above cues list" } ], "cssProperties": [ { "name": "--rh-size-icon-03", "description": "32px icon box", "default": "32px", "syntax": "\u003clength\u003e" }, { "name": "--rh-border-width-md", "description": "Focus outline width\n\n2px border width: Example: Alert", "default": "2px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-border-interactive", "description": "Focus outline color", "default": "2px" }, { "name": "--rh-font-family-heading", "description": "Panel heading font family\n\nHeading font family", "default": "RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-icon-size", "description": "Default icon size", "default": "var(--rh-size-icon-03, 32px)" }, { "name": "--rh-space-md", "description": "Download button inline start margin\n\n8px spacer", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-heading-xs", "description": "Panel heading font size\n\nh6 heading font size", "default": "1.25rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-line-height-heading", "description": "Panel heading line height\n\nLine height for headings", "default": "1.3", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-space-lg", "description": "Heading block margin\n\nTitle block end margin\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-letter-spacing-body-text", "description": "Series letter spacing\n\nExtra letter spacing for small body text sizes", "default": "0.0125rem", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-font-size-body-text-xs", "description": "Series font size\n\n12px font size", "default": "0.75rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-weight-heading-medium", "description": "Panel heading font weight\n\nSeries font weight\n\nMedium font weight for headings", "default": "500", "syntax": "\u003cnumber\u003e" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-transcript", "declaration": { "name": "RhTranscript", "module": "rh-audio-player/rh-transcript.js" } }, { "kind": "js", "name": "RhTranscript", "declaration": { "name": "RhTranscript", "module": "rh-audio-player/rh-transcript.js" } } ] }, { "kind": "javascript-module", "path": "rh-avatar/rh-avatar.js", "declarations": [ { "name": "RhAvatar", "summary": "Circular user thumbnail for mastheads, navigation, and attribution", "description": "Provides a circular user thumbnail for mastheads, cards, and attribution when\nyou need to visually identify a person. Allows an image, a deterministic\npattern, or a default icon. Must not take focus or act as a control; images\ncarry `role=\"presentation\"`. Authors should provide a name via the\ndefault slot so screen readers have context.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "src", "description": "URL to a custom avatar image. Replaces the default icon and any\ngenerated pattern. The `\u003cimg\u003e` has `role=\"presentation\"`.", "type": { "text": "string" }, "kind": "field", "attribute": "src", "reflects": true }, { "name": "name", "description": "The user's display name. Falls back as default slot content and\nseeds the deterministic pattern generator when `pattern` is set.", "type": { "text": "string" }, "kind": "field", "attribute": "name", "reflects": true }, { "name": "subtitle", "description": "Auxiliary text such as job title or company. Falls back as default\ncontent in the `subtitle` slot.", "type": { "text": "string" }, "kind": "field", "attribute": "subtitle", "reflects": true }, { "name": "layout", "description": "Thumbnail position relative to text: `'inline'` (default, left of text)\nor `'block'` (stacked above). Both collapse to centered block below 576px.", "type": { "text": "'inline' | 'block'" }, "kind": "field", "attribute": "layout", "reflects": true }, { "name": "pattern", "description": "Type of geometric pattern (`'squares'` or `'triangles'`). Generated\ndeterministically from `name` so the same name always yields the same\npattern. Colors come from the `--_colors` CSS custom property.", "type": { "text": "'squares' | 'triangles'" }, "kind": "field", "attribute": "pattern", "reflects": true }, { "name": "plain", "description": "When true, visually hides the name and subtitle via CSS clip while\nkeeping them accessible to screen readers.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "plain", "reflects": true }, { "name": "variant", "description": "Adds a subtle border around the thumbnail when set to `'bordered'`.", "type": { "text": "'bordered'" }, "kind": "field", "attribute": "variant", "reflects": true }, { "name": "updatePattern", "description": "Re-renders the geometric pattern. Called automatically when `pattern`\nor `name` change; call manually after updating CSS custom properties.", "kind": "method", "deprecated": "a future version will remove this public method" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-avatar/rh-avatar.ts#L34" }, "kind": "class", "tagName": "rh-avatar", "attributes": [ { "name": "src", "description": "URL to a custom avatar image. Replaces the default icon and any\ngenerated pattern. The `\u003cimg\u003e` has `role=\"presentation\"`.", "type": { "text": "string" }, "fieldName": "src" }, { "name": "name", "description": "The user's display name. Falls back as default slot content and\nseeds the deterministic pattern generator when `pattern` is set.", "type": { "text": "string" }, "fieldName": "name" }, { "name": "subtitle", "description": "Auxiliary text such as job title or company. Falls back as default\ncontent in the `subtitle` slot.", "type": { "text": "string" }, "fieldName": "subtitle" }, { "name": "layout", "description": "Thumbnail position relative to text: `'inline'` (default, left of text)\nor `'block'` (stacked above). Both collapse to centered block below 576px.", "type": { "text": "'inline' | 'block'" }, "fieldName": "layout" }, { "name": "pattern", "description": "Type of geometric pattern (`'squares'` or `'triangles'`). Generated\ndeterministically from `name` so the same name always yields the same\npattern. Colors come from the `--_colors` CSS custom property.", "type": { "text": "'squares' | 'triangles'" }, "fieldName": "pattern" }, { "name": "plain", "description": "When true, visually hides the name and subtitle via CSS clip while\nkeeping them accessible to screen readers.", "type": { "text": "boolean" }, "default": "false", "fieldName": "plain" }, { "name": "variant", "description": "Adds a subtle border around the thumbnail when set to `'bordered'`.", "type": { "text": "'bordered'" }, "fieldName": "variant" } ], "slots": [ { "name": "", "description": "The subject's name. Should contain inline text, optionally wrapped in a link.\nWhen `plain` is set, the name and subtitle are used as accessible labels" }, { "name": "subtitle", "description": "Auxiliary information about the subject, e.g. job title. Should contain inline text, optional links.\nWhen `plain` is set, the name and subtitle are used as accessible labels" } ], "cssParts": [ { "name": "canvas", "description": "Target the canvas element" }, { "name": "img", "description": "Targets the img or svg element. Avoid using this part for theming" } ], "cssProperties": [ { "name": "--rh-avatar-size", "description": "Thumbnail width and height; capped at the `--rh-size-icon-06` token (64px).", "default": "var(--rh-size-icon-06, 64px)" }, { "name": "--rh-avatar-colors", "description": "Space-separated hex values overriding the built-in light-dark pattern color tokens." }, { "name": "--rh-border-radius-pill", "description": "Default avatar border radius\n\nPill border radius; Example: Label", "default": "64px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-font-family-heading", "description": "Avatar title font family\n\nHeading font family", "default": "RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-weight-heading-medium", "description": "Avatar title font weight\n\nMedium font weight for headings", "default": "500", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-font-weight-heading-regular", "description": "Avatar subtitle font weight\n\nRegular font weight for headings", "default": "400", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-font-size-body-text-sm", "description": "Avatar title font size\n\nAvatar subtitle font size\n\n14px font size", "default": "0.875rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-interactive-primary-default", "description": "Avatar link color" }, { "name": "--rh-color-interactive-primary-visited-default", "description": "Avatar visited slotted link color" }, { "name": "--rh-color-interactive-primary-hover", "description": "Avatar hovered or active slotted link color" }, { "name": "--rh-color-blue-30", "description": "Inline link (dark theme)", "default": "#92c5f9", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-teal-50", "description": "Alert - Default accent", "default": "#37a3a3", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-green-60", "description": "Alert - Success accent", "default": "#3d7317", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-red-40", "description": "Light brand red", "default": "#f56e6e", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-purple-60", "description": "Inline link visited (light theme)", "default": "#3d2785", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-blue-50", "description": "Label - Filled (Blue) accent color", "default": "#0066cc", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-teal-70", "description": "Alert - Default title text", "default": "#004d4d", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-green-70", "description": "Alert - Success title text", "default": "#204d00", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-red-50", "description": "Brand red (light and dark theme)", "default": "#ee0000", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-purple-70", "description": "Inline link visited hover (light theme)", "default": "#21134d", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-text-secondary", "description": "Avatar title/subtitle text color" }, { "name": "--rh-space-lg", "description": "Gap between the avatar and title/text in inline layouts\n\nAvatar blockwise end margin in block layouts\n\nAvatar blockwise end margin in block layouts\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-size-icon-06", "description": "Default avatar size\n\n64px icon box", "default": "64px", "syntax": "\u003clength\u003e" }, { "name": "--rh-border-width-sm", "description": "Avatar border width when `bordered` is true\n\n1px border width; Example: Secondary CTA or Button", "default": "1px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-border-subtle", "description": "Avatar border color when `bordered` is true", "default": "1px" } ], "demos": [ { "description": "Default avatar with a custom image source, name, and subtitle, plus a CSS `::part(img)` override for image positioning.", "url": "https://ux.redhat.com/elements/avatar/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-avatar/demo/index.html" } }, { "description": "Avatars rendered inside an rh-context-demo to show behavior across light and dark color schemes, including slotted content, plain variants, custom images, and generated patterns.", "url": "https://ux.redhat.com/elements/avatar/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-avatar/demo/color-context.html" } }, { "description": "Avatar using the block layout, which stacks the thumbnail above the name and subtitle text.", "url": "https://ux.redhat.com/elements/avatar/demo/layout-block/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-avatar/demo/layout-block.html" } }, { "url": "https://ux.redhat.com/elements/avatar/demo/layout-inline/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-avatar/demo/layout-inline.html" } }, { "url": "https://ux.redhat.com/elements/avatar/demo/layouts-in-narrow-containers/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-avatar/demo/layouts-in-narrow-containers.html" } }, { "description": "Avatars with anchor elements slotted in the name and subtitle slots, demonstrating interactive link color styles.", "url": "https://ux.redhat.com/elements/avatar/demo/links/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-avatar/demo/links.html" } }, { "description": "Generated geometric patterns (squares and triangles) that are deterministically derived from the user's name.", "url": "https://ux.redhat.com/elements/avatar/demo/pattern/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-avatar/demo/pattern.html" } }, { "description": "Plain variant avatars showing thumbnail-only display (name and subtitle visually hidden) for default icon, custom image, squares pattern, and triangles pattern.", "url": "https://ux.redhat.com/elements/avatar/demo/plain/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-avatar/demo/plain.html" } }, { "description": "Avatars at different sizes using the --rh-avatar-size custom property with various --rh-size-icon-* design tokens, including the maximum size cap.", "url": "https://ux.redhat.com/elements/avatar/demo/sizes/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-avatar/demo/sizes.html" } }, { "description": "Avatar with a long, multi-line subtitle slotted via a span element, demonstrating text wrapping behavior.", "url": "https://ux.redhat.com/elements/avatar/demo/subtitles/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-avatar/demo/subtitles.html" } }, { "description": "Bordered variant avatars showing the subtle border treatment on both a default silhouette and a custom image.", "url": "https://ux.redhat.com/elements/avatar/demo/variants/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-avatar/demo/variants.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-avatar", "declaration": { "name": "RhAvatar", "module": "rh-avatar/rh-avatar.js" } }, { "kind": "js", "name": "RhAvatar", "declaration": { "name": "RhAvatar", "module": "rh-avatar/rh-avatar.js" } } ] }, { "kind": "javascript-module", "path": "rh-back-to-top/rh-back-to-top.js", "declarations": [ { "name": "RhBackToTop", "summary": "Fixed anchor link for returning to page top on long pages", "description": "Provides a fixed-position anchor link for scrolling back to the top of\nlong pages. Appears after a configurable scroll threshold; should be\nlast in tab order. Renders an `\u003ca\u003e` element so screen readers announce\nit as a navigation link. Keyboard-accessible via Tab and Enter (WCAG 2.1.1).\nAvoid placing more than one instance per page.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "visible", "description": "Controls the visibility behavior of the back to top button.\n\n- `undefined` (default) - Button appears automatically after scrolling past `scroll-distance`\n- `always` - Button is always visible, ignoring scroll position\n\n## Usage guidelines\n- Use the default behavior for most cases to avoid cluttering the viewport\n- Use `visible=\"always\"` only for testing or special use cases where the button\nshould be permanently visible regardless of scroll position\n\n\u003cfigure\u003e\n\u003cfigcaption\u003eAlways visible\u003c/figcaption\u003e\n\n```html\n\u003crh-back-to-top visible=\"always\"\u003eBack to top\u003c/rh-back-to-top\u003e\n```\n\u003c/figure\u003e", "type": { "text": "'always' | undefined" }, "kind": "field", "attribute": "visible", "reflects": true }, { "name": "scrollableSelector", "description": "CSS selector for the element to monitor for scroll events.\n\nWhen not provided, the component monitors the window's scroll position (default behavior).\nWhen provided, monitors the specified element's scroll position instead.\n\n## Usage guidelines\n- Use the default (window scrolling) for standard page layouts\n- Set a selector when the main scrollable content is within a specific container element\n- The selector must point to a scrollable element (with overflow: auto or scroll)\n- Useful for single-page applications with scrollable panels\n\n\u003cfigure\u003e\n\u003cfigcaption\u003eMonitor a specific container\u003c/figcaption\u003e\n\n```html\n\u003crh-back-to-top scrollable-selector=\"#main-content\"\u003eBack to top\u003c/rh-back-to-top\u003e\n```\n\u003c/figure\u003e", "type": { "text": "string" }, "kind": "field", "attribute": "scrollable-selector", "reflects": true }, { "name": "scrollDistance", "description": "Distance in pixels from the top of the scrollable element to trigger button visibility.\n\nThe button appears when the user scrolls past this threshold and disappears when\nscrolling back above it. Default is 400px.\n\n## Usage guidelines\n- Default 400px works well for most standard page layouts\n- Increase for longer pages where users need more scroll before the button appears\n- Decrease for shorter pages or containers where users reach the bottom quickly\n- Consider page fold height and content length when customizing\n\n\u003cfigure\u003e\n\u003cfigcaption\u003eCustom scroll threshold\u003c/figcaption\u003e\n\n```html\n\u003crh-back-to-top scroll-distance=\"800\"\u003eBack to top\u003c/rh-back-to-top\u003e\n```\n\u003c/figure\u003e", "type": { "text": "number" }, "default": "400", "kind": "field", "attribute": "scroll-distance" }, { "name": "href", "description": "Page fragment identifier (anchor) for the target element to scroll to.\n\nMust be a hash link pointing to an element ID on the page. The hash symbol (#)\nis automatically prepended if not provided.\n\n## Usage guidelines\n- The target element should be near the top of the page (typically the page title or skip link)\n- Ensure the target element has a matching `id` attribute\n- Common targets: `#top`, `#main`, `#content`, or the page's main heading ID\n- Without this attribute, clicking the button scrolls to the top of the page/container\n\n## Accessibility\n- The href creates a proper anchor link for keyboard and screen reader users\n- Provides a fallback navigation method if JavaScript is disabled\n\n\u003cfigure\u003e\n\u003cfigcaption\u003eLink to page top\u003c/figcaption\u003e\n\n```html\n\u003crh-back-to-top href=\"#top\"\u003eBack to top\u003c/rh-back-to-top\u003e\n```\n\u003c/figure\u003e", "type": { "text": "string" }, "kind": "field", "attribute": "href", "reflects": true } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-back-to-top/rh-back-to-top.ts#L29" }, "kind": "class", "tagName": "rh-back-to-top", "attributes": [ { "name": "visible", "description": "Controls the visibility behavior of the back to top button.\n\n- `undefined` (default) - Button appears automatically after scrolling past `scroll-distance`\n- `always` - Button is always visible, ignoring scroll position\n\n## Usage guidelines\n- Use the default behavior for most cases to avoid cluttering the viewport\n- Use `visible=\"always\"` only for testing or special use cases where the button\nshould be permanently visible regardless of scroll position\n\n\u003cfigure\u003e\n\u003cfigcaption\u003eAlways visible\u003c/figcaption\u003e\n\n```html\n\u003crh-back-to-top visible=\"always\"\u003eBack to top\u003c/rh-back-to-top\u003e\n```\n\u003c/figure\u003e", "type": { "text": "'always' | undefined" }, "fieldName": "visible" }, { "name": "scrollable-selector", "description": "CSS selector for the element to monitor for scroll events.\n\nWhen not provided, the component monitors the window's scroll position (default behavior).\nWhen provided, monitors the specified element's scroll position instead.\n\n## Usage guidelines\n- Use the default (window scrolling) for standard page layouts\n- Set a selector when the main scrollable content is within a specific container element\n- The selector must point to a scrollable element (with overflow: auto or scroll)\n- Useful for single-page applications with scrollable panels\n\n\u003cfigure\u003e\n\u003cfigcaption\u003eMonitor a specific container\u003c/figcaption\u003e\n\n```html\n\u003crh-back-to-top scrollable-selector=\"#main-content\"\u003eBack to top\u003c/rh-back-to-top\u003e\n```\n\u003c/figure\u003e", "type": { "text": "string" }, "fieldName": "scrollableSelector" }, { "name": "scroll-distance", "description": "Distance in pixels from the top of the scrollable element to trigger button visibility.\n\nThe button appears when the user scrolls past this threshold and disappears when\nscrolling back above it. Default is 400px.\n\n## Usage guidelines\n- Default 400px works well for most standard page layouts\n- Increase for longer pages where users need more scroll before the button appears\n- Decrease for shorter pages or containers where users reach the bottom quickly\n- Consider page fold height and content length when customizing\n\n\u003cfigure\u003e\n\u003cfigcaption\u003eCustom scroll threshold\u003c/figcaption\u003e\n\n```html\n\u003crh-back-to-top scroll-distance=\"800\"\u003eBack to top\u003c/rh-back-to-top\u003e\n```\n\u003c/figure\u003e", "type": { "text": "number" }, "default": "400", "fieldName": "scrollDistance" }, { "name": "href", "description": "Page fragment identifier (anchor) for the target element to scroll to.\n\nMust be a hash link pointing to an element ID on the page. The hash symbol (#)\nis automatically prepended if not provided.\n\n## Usage guidelines\n- The target element should be near the top of the page (typically the page title or skip link)\n- Ensure the target element has a matching `id` attribute\n- Common targets: `#top`, `#main`, `#content`, or the page's main heading ID\n- Without this attribute, clicking the button scrolls to the top of the page/container\n\n## Accessibility\n- The href creates a proper anchor link for keyboard and screen reader users\n- Provides a fallback navigation method if JavaScript is disabled\n\n\u003cfigure\u003e\n\u003cfigcaption\u003eLink to page top\u003c/figcaption\u003e\n\n```html\n\u003crh-back-to-top href=\"#top\"\u003eBack to top\u003c/rh-back-to-top\u003e\n```\n\u003c/figure\u003e", "type": { "text": "string" }, "fieldName": "href" } ], "slots": [ { "name": "", "summary": "link text content (default slot)", "description": "Text displayed within the back to top button. Defaults to\n\"Back to top\" if not provided. Serves as the ARIA accessible\nname for the anchor link (per WCAG 2.5.3 Label in Name).\nUse visible, descriptive text so screen readers announce\nthe link purpose; avoid icon-only content without a label." } ], "cssParts": [ { "name": "trigger", "summary": "anchor link that triggers scroll to top", "description": "The clickable link element that navigates to the top of the page or specified target.\nThis part can be styled to customize the button's appearance including hover states,\nborders, shadows, and positioning. The button uses a pill shape with the accent color\nbackground and includes both text and an upward caret icon." } ], "cssProperties": [ { "name": "--rh-back-to-top-background-color" }, { "name": "--rh-space-xl", "description": "Back-to-top inline-end inset\n\nBack-to-top block-end inset\n\n24px spacer", "default": "24px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-text-primary-on-dark", "description": "Trigger text color in light mode\n\nPrimary text color for dark theme", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-text-primary-on-light", "description": "Trigger text color in dark mode\n\nPrimary text color for light theme", "default": "#151515", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-accent-base", "description": "Trigger background color" }, { "name": "--rh-space-md", "description": "Trigger horizontal spacing\n\n8px spacer", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-border-radius-pill", "description": "Trigger border radius\n\nPill border radius; Example: Label", "default": "64px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-space-xs", "description": "Trigger vertical spacing\n\nTrigger content gap\n\n4px spacer", "default": "4px", "syntax": "\u003clength\u003e" }, { "name": "--rh-line-height-body-text", "description": "Trigger line height\n\nLine height for body text", "default": "1.5", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-border-width-md", "description": "Trigger outline width\n\nTrigger border width\n\nTrigger hover/focus outline width\n\nTrigger hover/focus border width\n\n2px border width: Example: Alert", "default": "2px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-border-strong-on-dark", "description": "Trigger hover/focus border color in light mode\n\nStrong border color (dark theme)", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-border-strong-on-light", "description": "Trigger hover/focus border color in dark mode\n\nStrong border color (light theme)", "default": "#151515", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-interactive-primary-hover", "description": "Trigger hover/focus outline color\n\nTrigger hover/focus background color", "default": "2px" }, { "name": "--rh-font-size-body-text-xs", "description": "Trigger text size\n\n12px font size", "default": "0.75rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-3xl", "description": "Back-to-top inline-end inset at viewport \u003e= md\n\nBack-to-top block-end inset at viewport \u003e= md\n\n48px spacer", "default": "48px", "syntax": "\u003clength\u003e" } ], "demos": [ { "description": "Default back-to-top button that appears after scrolling past 400px threshold.", "url": "https://ux.redhat.com/elements/back-to-top/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-back-to-top/demo/index.html" } }, { "description": "Back-to-top button with visible=\u0026quot;always\u0026quot; attribute, bypassing scroll threshold.", "url": "https://ux.redhat.com/elements/back-to-top/demo/always-visible/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-back-to-top/demo/always-visible.html" } }, { "description": "Back-to-top button rendered in light and dark color scheme contexts.", "url": "https://ux.redhat.com/elements/back-to-top/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-back-to-top/demo/color-context.html" } }, { "description": "Back-to-top button using default slot text (\u0026quot;Back to top\u0026quot;) with no custom label.", "url": "https://ux.redhat.com/elements/back-to-top/demo/no-slotted-text/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-back-to-top/demo/no-slotted-text.html" } }, { "description": "Back-to-top button with a custom scroll-distance threshold before appearing.", "url": "https://ux.redhat.com/elements/back-to-top/demo/scroll-distance/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-back-to-top/demo/scroll-distance.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-back-to-top", "declaration": { "name": "RhBackToTop", "module": "rh-back-to-top/rh-back-to-top.js" } }, { "kind": "js", "name": "RhBackToTop", "declaration": { "name": "RhBackToTop", "module": "rh-back-to-top/rh-back-to-top.js" } } ] }, { "kind": "javascript-module", "path": "rh-badge/rh-badge.js", "declarations": [ { "name": "RhBadge", "summary": "Non-interactive numeric pill badge for counts and status", "description": "A badge provides a small numeric count on a pill for labels, filters, or lists. Set `state`\nwhen the count carries severity:\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\nIt must not take focus or act as a control; it has no implicit ARIA role. Provide context in\nsurrounding text. Avoid color-only meaning (WCAG 1.4.1). Use `threshold` with `number` for values\nlike `999+`.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "state", "description": "Background severity: `danger`, `warning`, `caution`, `neutral`, `success`, or `info`.\nDefaults to `neutral`.\n\nLegacy values are normalized: `moderate` → `warning`, `important` → `caution`,\n`critical` → `danger`, `note` → `info`.", "type": { "text": "'danger' | 'warning' | 'caution' | 'neutral' | 'success' | 'info'" }, "default": "'neutral'", "kind": "field", "attribute": "state", "reflects": true }, { "name": "number", "description": "Numeric count rendered in the badge. With `threshold`, values above the threshold display\nas `threshold+`. For text-only labels without a count, use `rh-tag` instead.", "type": { "text": "number" }, "kind": "field", "attribute": "number", "reflects": true }, { "name": "threshold", "description": "Upper bound for `number`; when `number` is greater, the badge shows `threshold+`.", "type": { "text": "number" }, "kind": "field", "attribute": "threshold", "reflects": true }, { "name": "stateChanged", "description": "Normalizes `state` to supported values (including deprecated aliases).", "kind": "method", "privacy": "private" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-badge/rh-badge.ts#L32" }, "kind": "class", "tagName": "rh-badge", "attributes": [ { "name": "state", "description": "Background severity: `danger`, `warning`, `caution`, `neutral`, `success`, or `info`.\nDefaults to `neutral`.\n\nLegacy values are normalized: `moderate` → `warning`, `important` → `caution`,\n`critical` → `danger`, `note` → `info`.", "type": { "text": "'danger' | 'warning' | 'caution' | 'neutral' | 'success' | 'info'" }, "default": "'neutral'", "fieldName": "state" }, { "name": "number", "description": "Numeric count rendered in the badge. With `threshold`, values above the threshold display\nas `threshold+`. For text-only labels without a count, use `rh-tag` instead.", "type": { "text": "number" }, "fieldName": "number" }, { "name": "threshold", "description": "Upper bound for `number`; when `number` is greater, the badge shows `threshold+`.", "type": { "text": "number" }, "fieldName": "threshold" } ], "slots": [ { "name": "", "summary": "Count text (default slot)", "description": "Put the numeric count in the default slot—the same value as the `number` attribute when\nyou use number. The badge has no implicit accessible name; authors should provide context\nin surrounding text (labels, headings, table cells, etc.). For longer non-count labels,\nuse rh-tag instead." } ], "cssProperties": [ { "name": "--rh-border-radius-pill", "description": "Badge pill border radius\n\nPill border radius; Example: Label", "default": "64px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-length-lg", "description": "16px length token", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-xs", "description": "Badge text font size\n\n12px font size", "default": "0.75rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-line-height-body-text", "description": "Badge line height\n\nLine height for body text", "default": "1.5", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-space-md", "description": "8px spacer", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-text-primary-on-dark", "description": "Primary text on dark / saturated surfaces\n\nPrimary text color for dark theme", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-status-neutral", "description": "Neutral status background" }, { "name": "--rh-color-status-info", "description": "Info status background" }, { "name": "--rh-color-status-success", "description": "Success status background" }, { "name": "--rh-color-status-caution", "description": "Caution status background" }, { "name": "--rh-color-status-warning", "description": "Warning status background" }, { "name": "--rh-color-text-primary-on-light", "description": "Primary text on light surfaces\n\nCaution text color\n\nWarning text color\n\nPrimary text color for light theme", "default": "#151515", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-status-danger", "description": "Danger status background" } ], "demos": [ { "description": "Default badge displaying a numeric count with neutral state.", "url": "https://ux.redhat.com/elements/badge/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-badge/demo/index.html" } }, { "description": "Badge with caution state indicating items requiring immediate attention.", "url": "https://ux.redhat.com/elements/badge/demo/caution/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-badge/demo/caution.html" } }, { "description": "Badge rendered in light and dark color scheme contexts.", "url": "https://ux.redhat.com/elements/badge/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-badge/demo/color-context.html" } }, { "description": "Badge with danger state indicating errors or blocking conditions.", "url": "https://ux.redhat.com/elements/badge/demo/danger/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-badge/demo/danger.html" } }, { "description": "Badge using deprecated state names (moderate, important, critical) that auto-convert to DPO equivalents.", "url": "https://ux.redhat.com/elements/badge/demo/deprecated-states/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-badge/demo/deprecated-states.html" } }, { "description": "Badge with info state indicating low-severity informational content.", "url": "https://ux.redhat.com/elements/badge/demo/info/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-badge/demo/info.html" } }, { "description": "Badge with explicit neutral state for generic information.", "url": "https://ux.redhat.com/elements/badge/demo/neutral/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-badge/demo/neutral.html" } }, { "description": "Badge with success state indicating completed or stable processes.", "url": "https://ux.redhat.com/elements/badge/demo/success/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-badge/demo/success.html" } }, { "description": "Badge demonstrating threshold behavior, displaying \u0026quot;999+\u0026quot; for large counts.", "url": "https://ux.redhat.com/elements/badge/demo/threshold/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-badge/demo/threshold.html" } }, { "description": "Badge with warning state indicating non-blocking issues that may need action.", "url": "https://ux.redhat.com/elements/badge/demo/warning/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-badge/demo/warning.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-badge", "declaration": { "name": "RhBadge", "module": "rh-badge/rh-badge.js" } }, { "kind": "js", "name": "RhBadge", "declaration": { "name": "RhBadge", "module": "rh-badge/rh-badge.js" } } ] }, { "kind": "javascript-module", "path": "rh-blockquote/rh-blockquote.js", "declarations": [ { "name": "RhBlockquote", "summary": "Highlights quotations and citations with text styles", "description": "Provides a styled blockquote for featuring quotes with an icon\nand attribution. Use when highlighting a customer testimonial,\nexpert opinion, or notable statement. Authors must provide quoted\ntext and should include an author. Uses `\u003cfigure\u003e` semantics\nwith `\u003cblockquote\u003e` and `\u003cfigcaption\u003e`, so screen readers convey the quote\nand its source. Avoid placing interactive elements inside.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "author", "description": "The author's name or pseudonym. Overridden by the `author` slot.\nShould not contain long strings of text.", "type": { "text": "string" }, "kind": "field", "attribute": "author" }, { "name": "subtitle", "description": "The author's job title or role. Overridden by the `subtitle` slot.\nShould not contain long strings of text. May contain links.", "type": { "text": "string" }, "kind": "field", "attribute": "subtitle" }, { "name": "title", "description": "built-in tooltip blockquote figure element.\nDefaults to 'Blockquote'.", "type": { "text": "string" }, "default": "'Blockquote'", "deprecated": "use subtitle", "kind": "field", "attribute": "title" }, { "name": "colorPalette", "description": "Sets the color palette for the blockquote and its child content.\nAdapts text and icon colors for light or dark backgrounds.\nPossible values are:\n- `lightest` (default)\n- `darkest`", "type": { "text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'", "references": [ { "name": "ColorPalette", "module": "lib/color-palettes.js" } ] }, "kind": "field", "attribute": "color-palette", "reflects": true }, { "name": "align", "description": "Controls the horizontal alignment of the blockquote content.\nUse `center` for short quotes in visually prominent layouts.\nAvoid centering long text, as it reduces readability.\nPossible values are:\n- `inline-start` (default)\n- `center`", "type": { "text": "'center' | 'inline-start'" }, "default": "'inline-start'", "kind": "field", "attribute": "align", "reflects": true }, { "name": "highlight", "description": "When present, renders a brand-colored emphasis border on the\ninline-start side of the blockquote for additional visual prominence.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "highlight", "reflects": true }, { "name": "size", "description": "Controls the text size of the quoted passage. Use `large` for\nshort, impactful quotes and `default` for longer passages.\nPossible values are:\n- `default`\n- `large`", "type": { "text": "'default' | 'large'" }, "default": "'default'", "kind": "field", "attribute": "size", "reflects": true } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-blockquote/rh-blockquote.ts#L28" }, "kind": "class", "tagName": "rh-blockquote", "attributes": [ { "name": "author", "description": "The author's name or pseudonym. Overridden by the `author` slot.\nShould not contain long strings of text.", "type": { "text": "string" }, "fieldName": "author" }, { "name": "subtitle", "description": "The author's job title or role. Overridden by the `subtitle` slot.\nShould not contain long strings of text. May contain links.", "type": { "text": "string" }, "fieldName": "subtitle" }, { "name": "title", "description": "built-in tooltip blockquote figure element.\nDefaults to 'Blockquote'.", "type": { "text": "string" }, "default": "'Blockquote'", "fieldName": "title", "deprecated": "use subtitle" }, { "name": "color-palette", "description": "Sets the color palette for the blockquote and its child content.\nAdapts text and icon colors for light or dark backgrounds.\nPossible values are:\n- `lightest` (default)\n- `darkest`", "type": { "text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'", "references": [ { "name": "ColorPalette", "module": "lib/color-palettes.js" } ] }, "fieldName": "colorPalette" }, { "name": "align", "description": "Controls the horizontal alignment of the blockquote content.\nUse `center` for short quotes in visually prominent layouts.\nAvoid centering long text, as it reduces readability.\nPossible values are:\n- `inline-start` (default)\n- `center`", "type": { "text": "'center' | 'inline-start'" }, "default": "'inline-start'", "fieldName": "align" }, { "name": "highlight", "description": "When present, renders a brand-colored emphasis border on the\ninline-start side of the blockquote for additional visual prominence.", "type": { "text": "boolean" }, "default": "false", "fieldName": "highlight" }, { "name": "size", "description": "Controls the text size of the quoted passage. Use `large` for\nshort, impactful quotes and `default` for longer passages.\nPossible values are:\n- `default`\n- `large`", "type": { "text": "'default' | 'large'" }, "default": "'default'", "fieldName": "size" } ], "slots": [ { "name": "", "description": "Block elements like `\u003cp\u003e` for the quoted passage.\nScreen readers announce this within the `figure` landmark." }, { "name": "author", "description": "Inline text for the quoted person's name.\nScreen readers announce this as attribution for the quote.\nOverrides the `author` attribute." }, { "name": "title", "description": "Inline text for the author's job title or role.\nScreen readers announce this in the figcaption.\nDeprecated: use `subtitle`." }, { "name": "subtitle", "description": "Inline text for the author's job title or role.\nScreen readers announce this in the figcaption.\nOverrides the `subtitle` attribute.\nShould not contain long strings of text. May contain links." } ], "cssProperties": [ { "name": "--rh-color-text-primary", "description": "Primary text color for the blockquote" }, { "name": "--rh-font-size-body-text-lg", "description": "Base font size for blockquote body text\n\n18px font size", "default": "1.125rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-family-heading", "description": "Display font family used for quotation text\n\nHeading font family", "default": "RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-line-height-body-text", "description": "Line height for blockquote body text\n\nLine height for body text", "default": "1.5", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-font-weight-heading-regular", "description": "Regular weight for quotation text\n\nRegular font weight for headings", "default": "400", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-font-size-body-text-xl", "description": "Larger font size on wider viewports\n\nFont size for quoted paragraph text\n\n20px font size", "default": "1.25rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-length-lg", "description": "Bottom spacing below quoted paragraph text\n\n16px length token", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-text-secondary", "description": "Attribution text color, themed via rh-color-text-secondary" }, { "name": "--rh-font-family-body-text", "description": "Body text font family for attribution text\n\nBody text font family", "default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-size-body-text-sm", "description": "Smaller font size for attribution text\n\n14px font size", "default": "0.875rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-weight-heading-bold", "description": "Bold weight for the author name\n\nBold font weight for headings", "default": "700", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-space-lg", "description": "Top spacing above the author name\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-icon-primary", "description": "Icon color for the opening quotemark" }, { "name": "--rh-font-size-body-text-2xl", "description": "24px font size", "default": "1.5rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-line-height-heading", "description": "Line height for headings", "default": "1.3", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-font-size-heading-md", "description": "h4 heading font size", "default": "1.75rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-length-md", "description": "Width of the highlighted inline-start emphasis border\n\n8px length token", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-accent-brand", "description": "Color for the highlighted inline-start emphasis border", "default": "8px" }, { "name": "--rh-length-xl", "description": "Inline padding between border and content\n\n24px length token", "default": "24px", "syntax": "\u003clength\u003e" } ], "demos": [ { "description": "Default blockquote with quoted text, author name, and author title.", "url": "https://ux.redhat.com/elements/blockquote/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-blockquote/demo/index.html" } }, { "description": "Center-aligned blockquote with text, author, and title centered horizontally.", "url": "https://ux.redhat.com/elements/blockquote/demo/centered/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-blockquote/demo/centered.html" } }, { "description": "Blockquote variants displayed across light and dark color palettes.", "url": "https://ux.redhat.com/elements/blockquote/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-blockquote/demo/color-context.html" } }, { "description": "Blockquote with an emphasis border on the inline-start side.", "url": "https://ux.redhat.com/elements/blockquote/demo/highlighted/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-blockquote/demo/highlighted.html" } }, { "description": "Large size blockquote with increased font size for shorter quotes.", "url": "https://ux.redhat.com/elements/blockquote/demo/large/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-blockquote/demo/large.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-blockquote", "declaration": { "name": "RhBlockquote", "module": "rh-blockquote/rh-blockquote.js" } }, { "kind": "js", "name": "RhBlockquote", "declaration": { "name": "RhBlockquote", "module": "rh-blockquote/rh-blockquote.js" } } ] }, { "kind": "javascript-module", "path": "rh-breadcrumb/rh-breadcrumb.js", "declarations": [ { "name": "RhBreadcrumb", "summary": "Displays a hierarchical trail of links showing the user's\nlocation within a site", "description": "A breadcrumb provides secondary navigation for showing the user's\nhierarchical location within a site. Users must slot an `\u003col\u003e` with\n`\u003cli\u003e` items containing `\u003ca\u003e` links. The last item should carry\n`aria-current=\"page\"` so screen readers announce the current page.\nKeyboard users navigate breadcrumb links with Tab and activate\nthem with Enter.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "accessibleLabel", "description": "Customizes the `aria-label` on the internal `\u003cnav\u003e` element.\nDefaults to \"Breadcrumb\" when not set. Authors should override\nthis value when more than one breadcrumb navigation appears on\nthe same page so screen readers can distinguish between them.", "type": { "text": "string" }, "kind": "field", "attribute": "accessible-label" }, { "name": "variant", "description": "Sets the visual variant for the breadcrumb. The `subtle` variant\nuses secondary text color for the current-page item and a muted\nseparator icon, which authors should use on darker backgrounds\nor when the breadcrumb should appear less prominent.", "type": { "text": "'subtle'" }, "kind": "field", "attribute": "variant", "reflects": true }, { "name": "truncate", "description": "When true, breadcrumb lists with five or more items are truncated:\nmiddle items are hidden and replaced by an ellipsis button that\nusers can activate to reveal the full trail. Lists with fewer\nthan five items are not affected. The truncation button is\nkeyboard-accessible and announces its purpose to screen readers.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "truncate", "reflects": true }, { "return": { "type": { "text": "void" } }, "name": "firstUpdated", "description": "After first render, applies truncation when the `truncate` attribute\nis set and the list contains five or more items. Middle items\n(all except the first and last two) are hidden and an ellipsis\nbutton is inserted before them.", "kind": "method" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-breadcrumb/rh-breadcrumb.ts#L65" }, "kind": "class", "tagName": "rh-breadcrumb", "attributes": [ { "name": "accessible-label", "description": "Customizes the `aria-label` on the internal `\u003cnav\u003e` element.\nDefaults to \"Breadcrumb\" when not set. Authors should override\nthis value when more than one breadcrumb navigation appears on\nthe same page so screen readers can distinguish between them.", "type": { "text": "string" }, "fieldName": "accessibleLabel" }, { "name": "variant", "description": "Sets the visual variant for the breadcrumb. The `subtle` variant\nuses secondary text color for the current-page item and a muted\nseparator icon, which authors should use on darker backgrounds\nor when the breadcrumb should appear less prominent.", "type": { "text": "'subtle'" }, "fieldName": "variant" }, { "name": "truncate", "description": "When true, breadcrumb lists with five or more items are truncated:\nmiddle items are hidden and replaced by an ellipsis button that\nusers can activate to reveal the full trail. Lists with fewer\nthan five items are not affected. The truncation button is\nkeyboard-accessible and announces its purpose to screen readers.", "type": { "text": "boolean" }, "default": "false", "fieldName": "truncate" } ], "slots": [ { "name": "", "summary": "Expects a single `\u003col\u003e` block element with `\u003cli\u003e` items", "description": "Each `\u003cli\u003e` should contain an inline `\u003ca\u003e` text link.\nThe final `\u003ca\u003e` should set `aria-current=\"page\"`.\nThe last `\u003cli\u003e` may contain inline text without a link\nfor a non-interactive current page indicator." } ], "cssParts": [ { "name": "container", "description": "nav landmark with aria-label for assistive technology" } ], "cssProperties": [ { "name": "--rh-breadcrumb-caret-image", "description": "The `mask-image` separator icon between items; theme by\nproviding an SVG data URI. Uses `--rh-color-icon-secondary`\ndesign token for the icon background color.", "default": "{svg encoded as data URI}" }, { "name": "--rh-breadcrumb-li-padding-inline-end", "description": "Inline-end spacing per item; defaults to the `--rh-space-lg`\ndesign token (16px)", "default": "var(--rh-space-lg, 16px)" }, { "name": "--rh-breadcrumb-link-color", "description": "Link color for anchors; defaults to the\n`--rh-color-interactive-primary-default` design token", "default": "var(--rh-color-interactive-primary-default)" } ], "demos": [ { "description": "Default breadcrumb with six hierarchical links and a current-page indicator on the last item.", "url": "https://ux.redhat.com/elements/breadcrumb/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-breadcrumb/demo/index.html" } }, { "description": "Breadcrumb displayed across light and dark color contexts, including the subtle variant.", "url": "https://ux.redhat.com/elements/breadcrumb/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-breadcrumb/demo/color-context.html" } }, { "description": "Breadcrumb with a custom accessible-label attribute overriding the default nav aria-label.", "url": "https://ux.redhat.com/elements/breadcrumb/demo/custom-accessible-label/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-breadcrumb/demo/custom-accessible-label.html" } }, { "description": "Breadcrumb where the last item is plain text instead of a link, showing the current page without interaction.", "url": "https://ux.redhat.com/elements/breadcrumb/demo/non-interactive-last-item/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-breadcrumb/demo/non-interactive-last-item.html" } }, { "description": "Breadcrumb with the subtle variant, using muted separator icons and secondary text for the current page.", "url": "https://ux.redhat.com/elements/breadcrumb/demo/subtle/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-breadcrumb/demo/subtle.html" } }, { "description": "Breadcrumb with truncation enabled, hiding middle items behind an ellipsis button that expands on activation.", "url": "https://ux.redhat.com/elements/breadcrumb/demo/truncate/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-breadcrumb/demo/truncate.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-breadcrumb", "declaration": { "name": "RhBreadcrumb", "module": "rh-breadcrumb/rh-breadcrumb.js" } }, { "kind": "js", "name": "RhBreadcrumb", "declaration": { "name": "RhBreadcrumb", "module": "rh-breadcrumb/rh-breadcrumb.js" } } ] }, { "kind": "javascript-module", "path": "rh-button-group/rh-button-group.js", "declarations": [ { "name": "RhButtonGroup", "summary": "Organize multiple related buttons into a single collection", "description": "A button group visually organizes multiple related buttons into a single\ncollection.\n\nThe component exposes `role=\"group\"` via ElementInternals; authors do not need\nto set it.\n\nFor a toolbar pattern, wrap the group in an element with\n`role=\"toolbar\"`. When there is more than one toolbar, each must have an\naccessible name (`aria-label` or `aria-labelledby`). For vertical toolbars, set\n`aria-orientation=\"vertical\"` on the toolbar element.\n\nFor further accessibility details, see the [Accessibility](/elements/button-group/accessibility/) documentation.", "superclass": { "name": "LitElement", "package": "lit" }, "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-button-group/rh-button-group.ts#L28" }, "kind": "class", "tagName": "rh-button-group", "slots": [ { "name": "", "description": "Place `\u003crh-button\u003e` elements or native `\u003cbutton\u003e` elements here to organize them into a button group. For toolbar semantics and labeling, wrap the group in an element with `role=\"toolbar\"` and see the element accessibility documentation." } ], "cssProperties": [ { "name": "--rh-space-lg", "description": "16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-md", "description": "8px spacer", "default": "8px", "syntax": "\u003clength\u003e" } ], "demos": [ { "url": "https://ux.redhat.com/elements/button-group/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-button-group/demo/index.html" } }, { "url": "https://ux.redhat.com/elements/button-group/demo/icons/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-button-group/demo/icons.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-button-group", "declaration": { "name": "RhButtonGroup", "module": "rh-button-group/rh-button-group.js" } }, { "kind": "js", "name": "RhButtonGroup", "declaration": { "name": "RhButtonGroup", "module": "rh-button-group/rh-button-group.js" } } ] }, { "kind": "javascript-module", "path": "rh-button/rh-button.js", "declarations": [ { "name": "RhButton", "summary": "Clickable button that triggers page or form actions", "description": "Triggers actions via click, Enter, or Space. USE `variant` to set\nhierarchy: primary (should limit one per page), secondary, tertiary,\nor danger. Renders a native `\u003cbutton\u003e` with `delegatesFocus` for\nkeyboard access. Icon-only buttons must set `accessible-label` to\nprovide an ARIA accessible name. Supports form association (submit/reset).", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "disabled", "description": "Disables the button, preventing user interaction. When true, the button\nreceives `aria-disabled=\"true\"` and pointer events are suppressed.\nDisabled buttons are excluded from tab order unless `aria-disabled` is\nused instead of `disabled`. Defaults to false.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "disabled", "reflects": true }, { "name": "type", "description": "Controls the button's behavior within a form context. Accepts 'button'\n(no default form behavior), 'submit' (submits the form), or 'reset'\n(resets form fields). When omitted, defaults to implicit submit behavior.", "type": { "text": "'button' | 'submit' | 'reset'" }, "kind": "field", "attribute": "type", "reflects": true }, { "name": "accessibleLabel", "description": "Accessible name for the button, applied as `aria-label` on the internal\n`\u003cbutton\u003e`. Use when the button has no visible text (e.g. icon-only\nbuttons like close or play). When set, slotted text is hidden with\n`aria-hidden=\"true\"`. Preferred over the deprecated `label` attribute.\nDefaults to undefined.", "type": { "text": "string" }, "kind": "field", "attribute": "accessible-label" }, { "name": "label", "type": { "text": "string" }, "deprecated": "Use `accessible-label` instead.", "kind": "field", "attribute": "label" }, { "name": "value", "description": "Form value submitted with the button when it triggers form submission.\nPaired with `name` to create a name/value pair. Defaults to undefined.", "type": { "text": "string" }, "kind": "field", "attribute": "value" }, { "name": "name", "description": "Form name for the button, used with `value` to submit data when the\nbutton triggers form submission. Defaults to undefined.", "type": { "text": "string" }, "kind": "field", "attribute": "name" }, { "name": "icon", "description": "Shorthand for the `icon` slot. Accepts an icon name from the specified\nicon set (defaults to 'ui'). When set, renders an `\u003crh-icon\u003e` in the\nicon slot. Should use micron icons for best fit. Defaults to undefined.", "type": { "text": "IconNameFor\u003cIconSetName\u003e" }, "kind": "field", "attribute": "icon" }, { "name": "iconSet", "description": "Icon set for the `icon` property. Accepts any registered icon set name.\nDefaults to 'ui' when not specified. USE 'microns' for small inline icons.", "type": { "text": "'ui' | 'standard' | 'social' | 'microns'", "references": [ { "name": "IconSetName", "package": "@rhds/icons" } ] }, "kind": "field", "attribute": "icon-set" }, { "name": "variant", "description": "Controls the visual hierarchy and style of the button. Accepts\n'primary' | 'secondary' | 'tertiary' | 'close' | 'play'. Defaults to\n'primary'. Should limit primary to one per page. USE secondary for\ngeneral actions, tertiary for low-emphasis actions. Close and play\nvariants render icon-only circular buttons with visually hidden text.", "type": { "text": "'primary' | 'secondary' | 'tertiary' | 'close' | 'play'" }, "default": "'primary'", "kind": "field", "attribute": "variant", "reflects": true }, { "name": "danger", "description": "Applies danger styling for destructive or irreversible actions like\ndeleting data. Combines with `variant` to produce danger-primary or\ndanger-secondary styles. AVOID using for non-destructive actions.\nDefaults to false.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "danger", "reflects": true }, { "name": "focus", "description": "Programmatically moves focus to the button element.\n\nThis method focuses the internal button element, making it the active element\non the page. Useful for managing focus flow after dynamic content changes or\nuser interactions.\n\n## Usage guidelines\n- Use to direct user attention after completing an action\n- Helpful for accessibility when managing focus programmatically\n- Called automatically when the button is the target of a focus navigation\n- Can be used after modals close to return focus to a trigger button\n\n## Accessibility\n- When focus is moved programmatically, ensure users are aware of the change\n- Avoid moving focus unexpectedly as it can disorient users\n- Moving focus to a button should be deliberate and serve user needs\n\n```js\nconst button = document.querySelector('rh-button');\nbutton.focus();\n```", "kind": "method" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-button/rh-button.ts#L29" }, "kind": "class", "tagName": "rh-button", "attributes": [ { "name": "disabled", "description": "Disables the button, preventing user interaction. When true, the button\nreceives `aria-disabled=\"true\"` and pointer events are suppressed.\nDisabled buttons are excluded from tab order unless `aria-disabled` is\nused instead of `disabled`. Defaults to false.", "type": { "text": "boolean" }, "default": "false", "fieldName": "disabled" }, { "name": "type", "description": "Controls the button's behavior within a form context. Accepts 'button'\n(no default form behavior), 'submit' (submits the form), or 'reset'\n(resets form fields). When omitted, defaults to implicit submit behavior.", "type": { "text": "'button' | 'submit' | 'reset'" }, "fieldName": "type" }, { "name": "accessible-label", "description": "Accessible name for the button, applied as `aria-label` on the internal\n`\u003cbutton\u003e`. Use when the button has no visible text (e.g. icon-only\nbuttons like close or play). When set, slotted text is hidden with\n`aria-hidden=\"true\"`. Preferred over the deprecated `label` attribute.\nDefaults to undefined.", "type": { "text": "string" }, "fieldName": "accessibleLabel" }, { "name": "label", "type": { "text": "string" }, "fieldName": "label", "deprecated": "Use `accessible-label` instead." }, { "name": "value", "description": "Form value submitted with the button when it triggers form submission.\nPaired with `name` to create a name/value pair. Defaults to undefined.", "type": { "text": "string" }, "fieldName": "value" }, { "name": "name", "description": "Form name for the button, used with `value` to submit data when the\nbutton triggers form submission. Defaults to undefined.", "type": { "text": "string" }, "fieldName": "name" }, { "name": "icon", "description": "Shorthand for the `icon` slot. Accepts an icon name from the specified\nicon set (defaults to 'ui'). When set, renders an `\u003crh-icon\u003e` in the\nicon slot. Should use micron icons for best fit. Defaults to undefined.", "type": { "text": "IconNameFor\u003cIconSetName\u003e" }, "fieldName": "icon" }, { "name": "icon-set", "description": "Icon set for the `icon` property. Accepts any registered icon set name.\nDefaults to 'ui' when not specified. USE 'microns' for small inline icons.", "type": { "text": "'ui' | 'standard' | 'social' | 'microns'", "references": [ { "name": "IconSetName", "package": "@rhds/icons" } ] }, "fieldName": "iconSet" }, { "name": "variant", "description": "Controls the visual hierarchy and style of the button. Accepts\n'primary' | 'secondary' | 'tertiary' | 'close' | 'play'. Defaults to\n'primary'. Should limit primary to one per page. USE secondary for\ngeneral actions, tertiary for low-emphasis actions. Close and play\nvariants render icon-only circular buttons with visually hidden text.", "type": { "text": "'primary' | 'secondary' | 'tertiary' | 'close' | 'play'" }, "default": "'primary'", "fieldName": "variant" }, { "name": "danger", "description": "Applies danger styling for destructive or irreversible actions like\ndeleting data. Combines with `variant` to produce danger-primary or\ndanger-secondary styles. AVOID using for non-destructive actions.\nDefaults to false.", "type": { "text": "boolean" }, "default": "false", "fieldName": "danger" } ], "slots": [ { "name": "icon", "summary": "icon slot for visual indicators", "description": "Expects an `rh-icon` element or inline `svg`.\nWrapped in aria-hidden span so screen readers skip decorative icons.\nClose and play variants auto-populate this slot via #renderIcon()." }, { "name": "", "summary": "button text label", "description": "Expects inline text providing a concise, action-oriented label\n(e.g. \"Submit\", \"Delete\"). Hidden from screen readers via\naria-hidden when the label attribute is set. For close and play\nvariants, text is visually hidden but remains accessible." } ], "cssParts": [ { "name": "button", "summary": "internal button element", "description": "Native button element that receives focus via delegatesFocus.\nScreen readers announce this as a button with the label or slotted text." }, { "name": "icon", "summary": "icon slot for visual indicators", "description": "Expects an `rh-icon` element or inline `svg`.\nWrapped in aria-hidden span so screen readers skip decorative icons.\nClose and play variants auto-populate this slot via #renderIcon()." } ], "cssProperties": [ { "name": "--rh-font-size-body-text-md", "description": "Button text size\n\n16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-weight-body-text-regular", "description": "Button font weight\n\nRegular font weight", "default": "400", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-line-height-body-text", "description": "Button line height\n\nLine height for body text", "default": "1.5", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-length-4xs", "description": "Button focus ring offset\n\n1px length token", "default": "1px", "syntax": "\u003clength\u003e" }, { "name": "--rh-border-radius-default", "description": "Button corner radius\n\nButton corner rounding\n\n3px border radius; Example: Card", "default": "3px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-space-sm", "description": "Button vertical spacing\n\nButton content gap\n\n6px spacer", "default": "6px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-lg", "description": "Button horizontal spacing\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-interactive-primary-hover-on-light", "description": "Primary active background color\n\nPrimary focus background color\n\nPrimary interactive - hover (Light theme)", "default": "#003366", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-interactive-primary-hover", "description": "Primary hover background color" }, { "name": "--rh-color-text-primary-on-dark", "description": "Primary text color in light mode\n\nPrimary active text color\n\nPrimary focus text color\n\nPrimary hover text color in light mode\n\nDanger text color in light mode\n\nDanger active text color in light mode\n\nDanger focus text color in light mode\n\nDanger hover text color in light mode\n\nPrimary text color for dark theme", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-text-primary-on-light", "description": "Primary text color in dark mode\n\nPrimary hover text color in dark mode\n\nDanger text color in dark mode\n\nDanger active text color in dark mode\n\nDanger focus text color in dark mode\n\nDanger hover text color in dark mode\n\nPrimary text color for light theme", "default": "#151515", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-status-danger", "description": "Danger background color\n\nSecondary danger text color" }, { "name": "--rh-color-border-status-danger", "description": "Secondary danger border color" }, { "name": "--rh-color-red-60", "description": "Secondary danger focus text color in light mode\n\nDark brand red", "default": "#a60000", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-red-30", "description": "Secondary danger focus text color in dark mode\n\nLighter brand red", "default": "#f9a8a8", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-border-width-sm", "description": "Primary border width\n\nPrimary active border width\n\nPrimary hover border width\n\nDanger border width\n\nSecondary border width\n\nTertiary border width\n\n1px border width; Example: Secondary CTA or Button", "default": "1px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-text-primary", "description": "Tertiary text color\n\nTertiary active text color\n\nTertiary focus text color\n\nTertiary hover text color" }, { "name": "--rh-color-border-strong", "description": "Tertiary border color\n\nTertiary active border color\n\nTertiary focus border color\n\nTertiary hover border color" }, { "name": "--rh-border-width-md", "description": "Focus outline width\n\nFocus pseudo-element border width fallback\n\nPrimary focus border width\n\nDanger focus border width\n\nSecondary active border width\n\nSecondary focus border width\n\nSecondary hover border width\n\nTertiary active border width\n\nTertiary focus border width\n\nTertiary hover border width\n\n2px border width: Example: Alert", "default": "2px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-blue-70", "description": "Link active text color in light mode\n\nLink focus text color in light mode\n\nLink hover text color in light mode\n\nAlert - Info title text", "default": "#003366", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-interactive-primary-hover-on-dark", "description": "Link active text color in dark mode\n\nLink focus text color in dark mode\n\nLink hover text color in dark mode\n\nPrimary interactive - hover (Dark theme)", "default": "#b9dafc", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-icon-secondary", "description": "Close icon color" }, { "name": "--rh-color-interactive-secondary-active", "description": "Close active icon color" }, { "name": "--rh-color-interactive-secondary-focus", "description": "Close focus icon color" }, { "name": "--rh-color-interactive-secondary-hover", "description": "Close hover icon color" }, { "name": "--rh-length-lg", "description": "Button width\n\n16px length token", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-opacity-50", "description": "50% opacity", "default": "50%", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-color-interactive-primary-default", "description": "Focus outline color\n\nPrimary background color\n\nSecondary text color\n\nSecondary border color\n\nSecondary active text color\n\nSecondary active border color\n\nSecondary focus text color\n\nSecondary focus border color\n\nSecondary hover text color\n\nSecondary hover border color\n\nLink text color\n\nLink focus outline color\n\nClose focus outline color\n\nPlay focus outline color" }, { "name": "--rh-color-gray-90", "description": "Secondary surface (dark theme)", "default": "#1f1f1f", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-opacity-80", "description": "80% opacity", "default": "80%", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-length-4xl", "description": "Button width\n\n64px length token", "default": "64px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-icon-secondary-on-dark", "description": "Play icon color\n\nPlay icon color in light mode", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-icon-secondary-on-light", "description": "Play icon color in dark mode", "default": "#151515", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-50", "description": "Disabled text color in light mode\n\nSubtle icon", "default": "#707070", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-60", "description": "Disabled text color in dark mode\n\nSecondary text (light theme)", "default": "#4d4d4d", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-30", "description": "Disabled background color in light mode\n\nSubtle borders (light theme)", "default": "#c7c7c7", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-40", "description": "Disabled background color in dark mode\n\nSubtle icon (hover state)", "default": "#a3a3a3", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-text-status-disabled" }, { "name": "--rh-color-status-disabled" } ], "demos": [ { "description": "Default primary button demonstrating base button usage and styling.", "url": "https://ux.redhat.com/elements/button/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-button/demo/index.html" } }, { "description": "Button variants rendered in light and dark color scheme contexts.", "url": "https://ux.redhat.com/elements/button/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-button/demo/color-context.html" } }, { "description": "Button used as a form-associated element with submit and reset type behaviors.", "url": "https://ux.redhat.com/elements/button/demo/form-control/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-button/demo/form-control.html" } }, { "description": "Button with icon attribute and icon slot usage for adding visual indicators.", "url": "https://ux.redhat.com/elements/button/demo/icon/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-button/demo/icon.html" } }, { "description": "All button variants: primary, secondary, tertiary, close, play, and danger combinations.", "url": "https://ux.redhat.com/elements/button/demo/variants/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-button/demo/variants.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-button", "declaration": { "name": "RhButton", "module": "rh-button/rh-button.js" } }, { "kind": "js", "name": "RhButton", "declaration": { "name": "RhButton", "module": "rh-button/rh-button.js" } } ] }, { "kind": "javascript-module", "path": "rh-card/rh-card.js", "declarations": [ { "name": "RhCard", "summary": "Groups content previews with optional actions in a contained layout", "description": "Use cards to group small previews of content with optional calls to action.\nCards should contain a header with a heading level tag (h1-h6) and must not\nreplace primary page content. Cards do not manage focus; interactive elements\ninside (links, CTAs) must be keyboard-accessible via Tab and activated with\nEnter. Screen readers announce card content in DOM order. The `promo` variant\nshould be used for promotional content separate from the main page flow.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "colorPalette", "description": "Sets color palette, which affects the element's styles as well as descendants' color theme.\nOverrides parent color context. Accepts 'lightest' | 'lighter' | 'light' | 'dark' |\n'darker' | 'darkest'. Promo variants automatically compute palette: featured promos\nuse the `-est` suffix, standard promos use the `-er` suffix. Defaults to undefined\n(inherits from parent context). See [CSS Custom Properties](#css-custom-properties)\nfor default values.", "type": { "text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'", "references": [ { "name": "ColorPalette", "module": "lib/color-palettes.js" } ] }, "kind": "field", "attribute": "color-palette", "reflects": true }, { "name": "variant", "description": "Controls the card's visual variant. Accepts 'promo' or undefined.\nWhen set to 'promo', the card renders in a promotional layout with\ngrid-based positioning for image, body, and footer. Defaults to\nundefined (standard card layout). Avoid mixing promo and standard\ncards in the same group.", "type": { "text": "'promo'" }, "kind": "field", "attribute": "variant", "reflects": true }, { "name": "fullWidth", "description": "When true, a promo card bleeds to the edges of its container with no border.\nOnly applies when `variant` is 'promo'. Requires the image slot to be populated\nfor the full-width grid layout. Defaults to false. Boolean attribute.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "full-width", "reflects": true } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-card/rh-card.ts#L29" }, "kind": "class", "tagName": "rh-card", "attributes": [ { "name": "color-palette", "description": "Sets color palette, which affects the element's styles as well as descendants' color theme.\nOverrides parent color context. Accepts 'lightest' | 'lighter' | 'light' | 'dark' |\n'darker' | 'darkest'. Promo variants automatically compute palette: featured promos\nuse the `-est` suffix, standard promos use the `-er` suffix. Defaults to undefined\n(inherits from parent context). See [CSS Custom Properties](#css-custom-properties)\nfor default values.", "type": { "text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'", "references": [ { "name": "ColorPalette", "module": "lib/color-palettes.js" } ] }, "fieldName": "colorPalette" }, { "name": "variant", "description": "Controls the card's visual variant. Accepts 'promo' or undefined.\nWhen set to 'promo', the card renders in a promotional layout with\ngrid-based positioning for image, body, and footer. Defaults to\nundefined (standard card layout). Avoid mixing promo and standard\ncards in the same group.", "type": { "text": "'promo'" }, "fieldName": "variant" }, { "name": "full-width", "description": "When true, a promo card bleeds to the edges of its container with no border.\nOnly applies when `variant` is 'promo'. Requires the image slot to be populated\nfor the full-width grid layout. Defaults to false. Boolean attribute.", "type": { "text": "boolean" }, "default": "false", "fieldName": "fullWidth" } ], "slots": [ { "name": "header", "summary": "Card header content", "description": "Must contain a heading level tag (h1-h6) for screen reader\nnavigation. Icons, SVGs, or rh-icon are also valid. Screen\nreaders announce this slot content first in the card." }, { "name": "footer", "summary": "Card footer content", "description": "Use for calls to action or links anchored to the card bottom.\nScreen readers announce footer content last. Interactive\nelements must be focusable via Tab and activated with Enter." }, { "name": "image", "summary": "Promo variant image content", "description": "Use for images or CTAs in the promo variant. Images should\ninclude alt text for screen readers. Decorative images\nshould use alt=\"\" to be hidden from assistive technology." }, { "name": "", "summary": "Card body content (default slot)", "description": "Receives all content not assigned to named slots. Should\ncontain descriptive text, headings, or supporting elements.\nScreen readers announce this between header and footer." } ], "cssParts": [ { "name": "header", "description": "The header for the card. Contains the header slot." }, { "name": "footer", "description": "The footer for the card. Contains the footer slot." }, { "name": "container", "description": "The container for the card. Contains the image, header, body, and footer." }, { "name": "image", "description": "The image for the promo variant for the card. Contains the image slot." }, { "name": "body", "description": "The body for the card. Contains the default slot." } ], "cssProperties": [ { "name": "--rh-color-interactive-primary-default", "description": "Link default color" }, { "name": "--rh-color-interactive-primary-hover", "description": "Link hover color" }, { "name": "--rh-color-interactive-primary-focus", "description": "Link focus color" }, { "name": "--rh-color-interactive-primary-active", "description": "Link active color" }, { "name": "--rh-color-interactive-primary-visited-default", "description": "Visited link default color" }, { "name": "--rh-color-interactive-primary-visited-hover", "description": "Visited link hover color" }, { "name": "--rh-color-interactive-primary-visited-focus", "description": "Visited link focus color" }, { "name": "--rh-color-interactive-primary-visited-active", "description": "Visited link active color" }, { "name": "--rh-card-header-background-on-light", "description": "Header background in light mode", "default": "transparent" }, { "name": "--rh-card-header-background-on-dark", "description": "Header background in dark mode", "default": "transparent" }, { "name": "--rh-border-radius-default", "description": "Card border radius\n\n3px border radius; Example: Card", "default": "3px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-font-family-body-text", "description": "Card typeface\n\nBody text font family", "default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-line-height-body-text", "description": "Card line height\n\nLine height for body text", "default": "1.5", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-border-width-sm", "description": "Card border thickness\n\n1px border width; Example: Secondary CTA or Button", "default": "1px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-border-subtle", "description": "Card border color" }, { "name": "--rh-color-text-primary", "description": "Card text color" }, { "name": "--rh-color-surface", "description": "Card surface color" }, { "name": "--rh-card-heading-font-weight", "description": "Header font weight override\n\nPromo heading font weight override", "default": "var(--rh-font-weight-body-text-medium, 500)" }, { "name": "--rh-font-size-heading-xs", "description": "Promo heading font size\n\nh6 heading font size", "default": "1.25rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-surface-lightest", "description": "Card surface in light mode\n\nPromo surface in light mode\n\nPrimary surface (light theme)", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-surface-darkest", "description": "Card surface in dark mode\n\nPromo surface in dark mode\n\nPrimary surface (dark theme)", "default": "#151515", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-surface-lighter", "description": "Promo standard surface in light mode\n\nTertiary surface (light theme)", "default": "#f2f2f2", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-surface-darker", "description": "Promo standard surface in dark mode\n\nSecondary surface (dark theme)", "default": "#1f1f1f", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-card-heading-font-family", "description": "Header font family override\n\nPromo heading font family override\n\nPromo standard font family override", "default": "var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif)" }, { "name": "--rh-font-family-heading", "description": "Card heading typeface\n\nHeader font family\n\nPromo heading font family\n\nPromo standard font family\n\nHeading font family", "default": "RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-size-body-text-xl", "description": "Promo standard text size\n\n20px font size", "default": "1.25rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-weight-body-text-medium", "description": "Header font weight\n\nPromo heading font weight\n\nPromo standard font weight\n\nMedium font weight", "default": "500", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-line-height-heading", "description": "Card heading line height\n\nPromo standard heading line height\n\nLine height for headings", "default": "1.3", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-space-lg", "description": "Header content gap\n\nPromo paragraph margin-block-end\n\nPromo header margin-block-end\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-md", "description": "16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-2xl", "description": "Full-width promo heading size\n\n24px font size", "default": "1.5rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-heading-sm", "description": "Header font size\n\nBody heading font size\n\nPromo heading size at containers \u003e= md\n\nh5 heading font size", "default": "1.5rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-3xl", "description": "Promo body margin at containers \u003e= md\n\nPromo standard inline padding at containers \u003e= md\n\n48px spacer", "default": "48px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-xl", "description": "Card margin inline\n\nHeader margin-block-start\n\nBody margin-block-end\n\nFooter margin-block-end\n\nBody margin block at containers \u003c md\n\nPromo footer margin-block-start\n\nPromo standard column gap at containers \u003e= md\n\n24px spacer", "default": "24px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-2xl", "description": "Body margin-block-start\n\nBody margin-block-end\n\nCard margin inline at containers \u003e= md\n\nCard margin-block-start at containers \u003e= md\n\nCard margin-block-end at containers \u003e= md\n\nPromo standard inline padding\n\nPromo body margin\n\n32px spacer", "default": "32px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-4xl", "description": "64px spacer", "default": "64px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-lg", "description": "Promo paragraph font size\n\n18px font size", "default": "1.125rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-card-heading-font-size", "description": "Header font size override\n\nBody heading font size override\n\nPromo heading font size override\n\nFull-width promo heading size override\n\nPromo heading size override at containers \u003e= md\n\nFull-width promo heading size override at containers \u003e= md", "default": "var(--rh-font-size-heading-md, 1.75rem)" }, { "name": "--rh-font-size-heading-md", "description": "Full-width promo heading size at containers \u003e= md\n\nh4 heading font size", "default": "1.75rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-7xl", "description": "128px spacer", "default": "128px", "syntax": "\u003clength\u003e" } ], "demos": [ { "description": "Basic card demo with header, body, and footer sections.", "url": "https://ux.redhat.com/elements/card/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-card/demo/index.html" } }, { "description": "Card with various color palette settings on light and dark backgrounds.", "url": "https://ux.redhat.com/elements/card/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-card/demo/color-context.html" } }, { "description": "Cards arranged in a responsive grid layout.", "url": "https://ux.redhat.com/elements/card/demo/grid/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-card/demo/grid.html" } }, { "description": "Full-width promo card that bleeds to container edges with no border.", "url": "https://ux.redhat.com/elements/card/demo/promo-full-width/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-card/demo/promo-full-width.html" } }, { "description": "Narrow promo card for small containers or sidebar use.", "url": "https://ux.redhat.com/elements/card/demo/promo-narrow/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-card/demo/promo-narrow.html" } }, { "description": "Standard promo card with heading and call to action only.", "url": "https://ux.redhat.com/elements/card/demo/promo-standard/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-card/demo/promo-standard.html" } }, { "description": "Featured promo card variant with image and body content.", "url": "https://ux.redhat.com/elements/card/demo/promo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-card/demo/promo.html" } }, { "description": "Sticky card pattern that persists on the side of the page.", "url": "https://ux.redhat.com/elements/card/demo/sticky-pattern/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-card/demo/sticky-pattern.html" } }, { "description": "Card with title bar pattern using icon and label in the header.", "url": "https://ux.redhat.com/elements/card/demo/title-pattern/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-card/demo/title-pattern.html" } }, { "description": "Card visual variants including standard and promo styles.", "url": "https://ux.redhat.com/elements/card/demo/variants/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-card/demo/variants.html" } }, { "description": "Card with embedded video content pattern.", "url": "https://ux.redhat.com/elements/card/demo/video-pattern/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-card/demo/video-pattern.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-card", "declaration": { "name": "RhCard", "module": "rh-card/rh-card.js" } }, { "kind": "js", "name": "RhCard", "declaration": { "name": "RhCard", "module": "rh-card/rh-card.js" } } ] }, { "kind": "javascript-module", "path": "rh-chip/rh-chip-group.js", "declarations": [ { "name": "RhChipGroup", "summary": "Groups related chips with a label and clear-all action", "description": "A chip group provides a `\u003cfieldset\u003e` container for related `rh-chip`\nelements. It renders a `\u003clegend\u003e` for screen reader accessibility.\nAuthors must provide an accessible label when \"Filter by:\" is not\nappropriate. Authors should avoid placing non-chip elements in the\ndefault slot. Users may press Tab to navigate between chips.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "size", "description": "Decreases the font-size of the chip's label", "type": { "text": "'sm'" }, "kind": "field", "attribute": "size", "reflects": true }, { "name": "accessibleLabel", "description": "The accessible label for the form control / `rh-chip-group`", "type": { "text": "string" }, "kind": "field", "attribute": "accessible-label" }, { "return": { "type": { "text": "void" } }, "name": "firstUpdated", "kind": "method" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-chip/rh-chip-group.ts#L27" }, "kind": "class", "tagName": "rh-chip-group", "attributes": [ { "name": "size", "description": "Decreases the font-size of the chip's label", "type": { "text": "'sm'" }, "fieldName": "size" }, { "name": "accessible-label", "description": "The accessible label for the form control / `rh-chip-group`", "type": { "text": "string" }, "fieldName": "accessibleLabel" } ], "slots": [ { "name": "accessible-label", "summary": "Accessible label for the chip group", "description": "Inline text for the chip group legend. Content is placed\ninto the `\u003clegend\u003e` element for screen reader\naccessibility. Authors must ensure the label is\ndescriptive for assistive technology. Also available as\nthe `accessible-label` attribute." }, { "name": "", "summary": "Default slot for chip elements", "description": "Expects `rh-chip` elements. Place individual chips\ninside `rh-chip-group` to group them as a fieldset.\nEach chip must have a unique text label for screen readers." }, { "name": "clear-all", "summary": "Clear all button label", "description": "Inline text to customize the \"Clear all\" button label.\nDefaults to \"Clear all\". Should be localized for\nnon-English contexts." } ], "cssParts": [ { "name": "legend", "description": "The `\u003clegend\u003e` element containing the\naccessible label, styled with `--rh-font-size-body-text-md`." } ], "cssProperties": [ { "name": "--rh-space-lg", "description": "Chip group margin block spacing\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-md", "description": "Legend font size\n\n16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-border-radius-pill", "description": "Clear all button border radius\n\nPill border radius; Example: Label", "default": "64px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-color-interactive-primary-default", "description": "Clear all button text color" }, { "name": "--rh-font-family-body-text", "description": "Legend body text font family\n\nClear all button font family\n\nBody text font family", "default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-line-height-body-text", "description": "Clear all button line height\n\nLine height for body text", "default": "1.5", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-border-width-sm", "description": "Clear all button outline width\n\n1px border width; Example: Secondary CTA or Button", "default": "1px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-xs", "description": "Clear all button block padding\n\n4px spacer", "default": "4px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-md", "description": "Legend inline end spacing\n\nClear all button inline padding\n\n8px spacer", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-interactive-primary-hover", "description": "Clear all button hover/focus text color" }, { "name": "--rh-color-border-subtle", "description": "Clear all button hover/focus outline color" }, { "name": "--rh-border-radius-default", "description": "Focus ring border radius\n\n3px border radius; Example: Card", "default": "3px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-length-4xs", "description": "Focus ring block inset\n\n1px length token", "default": "1px", "syntax": "\u003clength\u003e" }, { "name": "--rh-length-md", "description": "Focus ring inline inset\n\n8px length token", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-border-width-md", "description": "Clear all button focus outline offset\n\nFocus ring outline width\n\n2px border width: Example: Alert", "default": "2px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-border-interactive", "description": "Focus ring outline color" }, { "name": "--rh-font-size-body-text-sm", "description": "Clear all button font size\n\nLegend font size at small size\n\n14px font size", "default": "0.875rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-xs", "description": "Clear all button font size at small size\n\n12px font size", "default": "0.75rem", "syntax": "\u003clength\u003e" } ], "demos": [ { "url": "https://ux.redhat.com/elements/chip/demo/chip-group/" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-chip-group", "declaration": { "name": "RhChipGroup", "module": "rh-chip/rh-chip-group.js" } }, { "kind": "js", "name": "RhChipGroup", "declaration": { "name": "RhChipGroup", "module": "rh-chip/rh-chip-group.js" } } ] }, { "kind": "javascript-module", "path": "rh-chip/rh-chip.js", "declarations": [ { "name": "ChipChangeEvent", "description": "Event fired when a chip's checked state changes.\nThe `checked` property indicates the chip's state before the change.", "superclass": { "name": "Event", "package": "global:" }, "members": [ { "name": "checked", "description": "The checked state of the chip before the change occurred.", "type": { "text": "boolean" }, "kind": "field" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-chip/rh-chip.ts#L23" }, "kind": "class" }, { "name": "RhChip", "summary": "Filter information or indicate that a selection was made", "description": "A chip provides a toggle for filtering content or indicating a selection\nwhen users choose from categories. Each chip must contain short inline\ntext and may be placed in an `rh-chip-group` of related chips. The\nhidden checkbox allows form participation and provides screen reader\naccessibility. Keyboard users press Tab to navigate between chips and\nuse Enter or Space to toggle.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "checked", "description": "Whether the chip is checked.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "checked", "reflects": true }, { "name": "disabled", "description": "Whether the chip is disabled.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "disabled", "reflects": true }, { "name": "value", "description": "Set a custom string for the input's `value` attribute. Defaults to `on`.", "type": { "text": "string" }, "kind": "field", "attribute": "value", "reflects": true }, { "name": "checkedChanged", "kind": "method", "privacy": "private" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-chip/rh-chip.ts#L57" }, "kind": "class", "tagName": "rh-chip", "attributes": [ { "name": "checked", "description": "Whether the chip is checked.", "type": { "text": "boolean" }, "default": "false", "fieldName": "checked" }, { "name": "disabled", "description": "Whether the chip is disabled.", "type": { "text": "boolean" }, "default": "false", "fieldName": "disabled" }, { "name": "value", "description": "Set a custom string for the input's `value` attribute. Defaults to `on`.", "type": { "text": "string" }, "fieldName": "value" } ], "events": [ { "name": "change", "description": "Fires when the chip is checked or\nunchecked. The event's `checked` property (boolean) holds the\nchip's state before the change. Cancelable — canceling prevents\nthe state change.", "type": { "text": "ChipChangeEvent" } } ], "slots": [ { "name": "", "summary": "Chip label", "description": "Expects short inline text for the chip label. Should not\ncontain block elements or interactive content." } ], "cssParts": [ { "name": "chip", "description": "The outer `\u003clabel\u003e` container for the chip,\nstyled with the `--rh-border-radius-pill` token." } ], "cssProperties": [ { "name": "--rh-space-lg", "description": "Chip label block end margin\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-family-body-text", "description": "Chip body text font family\n\nBody text font family", "default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-line-height-body-text", "description": "Chip body text line height\n\nLine height for body text", "default": "1.5", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-border-radius-pill", "description": "Chip pill border radius\n\nPill border radius; Example: Label", "default": "64px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-border-width-sm", "description": "Chip outline width\n\n1px border width; Example: Secondary CTA or Button", "default": "1px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-border-subtle", "description": "Chip outline color" }, { "name": "--rh-space-xs", "description": "Chip block padding\n\n4px spacer", "default": "4px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-sm", "description": "Chip label font size\n\n14px font size", "default": "0.875rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-xs", "description": "Small size chip label font size\n\n12px font size", "default": "0.75rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-border-radius-default", "description": "Focus ring border radius\n\n3px border radius; Example: Card", "default": "3px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-length-3xs", "description": "Focus ring block inset\n\n2px length token", "default": "2px", "syntax": "\u003clength\u003e" }, { "name": "--rh-length-md", "description": "Focus ring inline inset\n\n8px length token", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-border-width-md", "description": "Chip hover/focus outline width\n\nFocus ring outline width\n\n2px border width: Example: Alert", "default": "2px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-border-interactive", "description": "Focus ring outline color" }, { "name": "--rh-color-text-secondary", "description": "Disabled chip text color in light mode" }, { "name": "--rh-color-gray-40", "description": "Disabled chip text color in dark mode\n\nSubtle icon (hover state)", "default": "#a3a3a3", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-30", "description": "Disabled chip background in light mode\n\nDisabled chip outline in light mode\n\nSubtle borders (light theme)", "default": "#c7c7c7", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-surface-dark", "description": "Disabled chip background in dark mode\n\nDisabled chip outline in dark mode\n\nTertiary surface (dark theme)", "default": "#383838", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-blue-70", "description": "Checked chip background in dark mode\n\nChecked chip text color in light mode\n\nAlert - Info title text", "default": "#003366", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-blue-10", "description": "Checked chip background in light mode\n\nChecked chip text color in dark mode\n\nAlert - Info background", "default": "#e0f0ff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-blue-30", "description": "Checked chip outline in light mode\n\nChecked chip hover outline in light mode\n\nInline link (dark theme)", "default": "#92c5f9", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-blue-50", "description": "Checked chip outline in dark mode\n\nChecked chip hover outline in dark mode\n\nLabel - Filled (Blue) accent color", "default": "#0066cc", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-space-md", "description": "Chip inline end spacing\n\nChip inline padding\n\nClose icon inline start spacing\n\n8px spacer", "default": "8px", "syntax": "\u003clength\u003e" } ], "demos": [ { "description": "A single chip element with default text label.", "url": "https://ux.redhat.com/elements/chip/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-chip/demo/index.html" } }, { "description": "Chips showing checked, disabled, and custom value states.", "url": "https://ux.redhat.com/elements/chip/demo/attributes-and-states/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-chip/demo/attributes-and-states.html" } }, { "description": "Chips grouped together with a legend and clear-all button.", "url": "https://ux.redhat.com/elements/chip/demo/chip-group/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-chip/demo/chip-group.html" } }, { "description": "Chip group with a custom clear-all button label.", "url": "https://ux.redhat.com/elements/chip/demo/clear-all/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-chip/demo/clear-all.html" } }, { "description": "Chip group displayed across light and dark color contexts.", "url": "https://ux.redhat.com/elements/chip/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-chip/demo/color-context.html" } }, { "description": "Chip group with a custom accessible label via attribute.", "url": "https://ux.redhat.com/elements/chip/demo/custom-label/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-chip/demo/custom-label.html" } }, { "description": "Listening for the change event when a chip is toggled.", "url": "https://ux.redhat.com/elements/chip/demo/events/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-chip/demo/events.html" } }, { "description": "Chips participating in a native HTML form with submit handling.", "url": "https://ux.redhat.com/elements/chip/demo/form-control/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-chip/demo/form-control.html" } }, { "description": "Comparing the small and default chip group size variants.", "url": "https://ux.redhat.com/elements/chip/demo/size/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-chip/demo/size.html" } } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "ChipChangeEvent", "declaration": { "name": "ChipChangeEvent", "module": "rh-chip/rh-chip.js" } }, { "kind": "custom-element-definition", "name": "rh-chip", "declaration": { "name": "RhChip", "module": "rh-chip/rh-chip.js" } }, { "kind": "js", "name": "RhChip", "declaration": { "name": "RhChip", "module": "rh-chip/rh-chip.js" } } ] }, { "kind": "javascript-module", "path": "rh-code-block/rh-code-block.js", "declarations": [ { "name": "RhCodeBlockCopyEvent", "description": "Fired when the user activates the copy button via click, Enter, or Space.\nProvides `content` (string) for clipboard use. Listeners SHOULD modify\n`content` to strip prompts. MUST call `preventDefault()` to cancel.\nScreen reader users activate this via the keyboard-accessible button.", "superclass": { "name": "Event", "package": "global:" }, "members": [ { "name": "content", "description": "Text content to copy", "type": { "text": "string" }, "kind": "field" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-code-block/rh-code-block.ts#L50" }, "kind": "class" }, { "name": "RhCodeBlock", "summary": "Formats code strings within a container", "description": "A read-only code viewer for formatted snippets that allows syntax\nhighlighting, line numbers, and copy/wrap actions. Source must be\nin a `\u003cscript type=\"text/sample-...\"\u003e` or `\u003cpre\u003e` child. The code\nregion is keyboard-scrollable; screen readers announce it via ARIA\nas a scrollable area. Authors should avoid nesting interactive\nelements inside the code slot.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "actionIcons", "default": "new Map([\\n ['wrap', html`\\n \u003crh-icon set=\"ui\" icon=\"wrap-text\"\u003e\u003c/rh-icon\u003e\\n `],\\n ['wrap-active', html`\\n \u003crh-icon set=\"ui\" icon=\"overflow-text\"\u003e\u003c/rh-icon\u003e\\n `],\\n ['copy', html`\\n \u003crh-icon set=\"ui\" icon=\"copy\"\u003e\u003c/rh-icon\u003e\\n `],\\n ])", "kind": "field", "static": true, "privacy": "private" }, { "name": "actions", "description": "Space- or comma-separated list of action buttons to display.\nAccepts `'copy'`, `'wrap'`, or both (e.g. `\"copy wrap\"`). `'copy'` adds a\nclipboard button; `'wrap'` adds a word-wrap toggle. Defaults to `[]`\n(no actions shown). Labels can be overridden via the `action-label-copy`\nand `action-label-wrap` slots for internationalization. The active-state\nelement must have `hidden data-code-block-state=\"active\"`.\n\n```html\n\u003crh-code-block actions=\"copy wrap\"\u003e\n\u003cspan slot=\"action-label-copy\"\u003eCopy to Clipboard\u003c/span\u003e\n\u003cspan slot=\"action-label-copy\" hidden data-code-block-state=\"active\"\u003eCopied!\u003c/span\u003e\n\u003cspan slot=\"action-label-copy\" hidden data-code-block-state=\"failed\"\u003eCopy failed!\u003c/span\u003e\n\u003cspan slot=\"action-label-wrap\"\u003eToggle word wrap\u003c/span\u003e\n\u003cspan slot=\"action-label-wrap\" hidden data-code-block-state=\"active\"\u003eToggle overflow\u003c/span\u003e\n\u003c/rh-code-block\u003e\n```", "type": { "text": "('copy' | 'wrap')[]" }, "default": "[]", "kind": "field", "attribute": "actions", "reflects": true }, { "return": { "description": "Array of action names" }, "name": "fromAttribute", "description": "Converts the HTML attribute string to an array of action names.\nSplits on spaces or commas, trims whitespace, and filters empty values.", "kind": "method" }, { "return": { "description": "Space-separated string of actions" }, "name": "toAttribute", "description": "Converts the array of action names to an HTML attribute string.\nJoins array values with spaces.", "kind": "method" }, { "name": "highlighting", "description": "Controls how syntax highlighting is applied. Accepts `'client'` or\n`'prerendered'`. When `'client'`, Prism.js is loaded on-demand and\nhighlights source from `\u003cscript\u003e` children. When `'prerendered'`,\nRHDS token colors are applied to existing Prism class names in child\n`\u003cpre\u003e` elements. Defaults to `undefined` (no highlighting).", "type": { "text": "'client' | 'prerendered'" }, "kind": "field", "attribute": "highlighting" }, { "name": "language", "description": "Specifies the Prism.js grammar for client-side highlighting. Requires\n`highlighting=\"client\"`. Accepts `'html'` | `'css'` | `'javascript'` |\n`'typescript'` | `'bash'` | `'ruby'` | `'yaml'` | `'json'`. Defaults\nto `undefined`. When omitted, no syntax coloring is applied.", "type": { "text": "'html' | 'css' | 'javascript' | 'typescript' | 'bash' | 'ruby' | 'yaml' | 'json'" }, "kind": "field", "attribute": "language" }, { "name": "compact", "description": "When true, reduces internal padding for tighter layouts. Defaults to false.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "compact", "reflects": true }, { "name": "dedent", "description": "When true, strips common leading whitespace from source lines before rendering. Defaults to false.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "dedent", "reflects": true }, { "name": "resizable", "description": "When true, allows the user to vertically resize the code area by dragging. Defaults to false.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "resizable", "reflects": true }, { "name": "fullHeight", "description": "When true, the code block expands to its full height without scroll truncation. Defaults to false.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "full-height", "reflects": true }, { "name": "wrap", "description": "When true, long lines wrap instead of scrolling horizontally. Defaults to false.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "wrap" }, { "name": "lineNumbers", "description": "Controls line-number visibility. Accepts `'hidden'` or `'visible'`. When `'hidden'`, the gutter column is removed. Defaults to `undefined` (visible).", "type": { "text": "'hidden' | 'visible'" }, "kind": "field", "attribute": "line-numbers", "reflects": true }, { "return": { "type": { "text": "void" } }, "name": "firstUpdated", "kind": "method", "privacy": "protected" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-code-block/rh-code-block.ts#L79" }, "kind": "class", "tagName": "rh-code-block", "attributes": [ { "name": "actions", "description": "Space- or comma-separated list of action buttons to display.\nAccepts `'copy'`, `'wrap'`, or both (e.g. `\"copy wrap\"`). `'copy'` adds a\nclipboard button; `'wrap'` adds a word-wrap toggle. Defaults to `[]`\n(no actions shown). Labels can be overridden via the `action-label-copy`\nand `action-label-wrap` slots for internationalization. The active-state\nelement must have `hidden data-code-block-state=\"active\"`.\n\n```html\n\u003crh-code-block actions=\"copy wrap\"\u003e\n\u003cspan slot=\"action-label-copy\"\u003eCopy to Clipboard\u003c/span\u003e\n\u003cspan slot=\"action-label-copy\" hidden data-code-block-state=\"active\"\u003eCopied!\u003c/span\u003e\n\u003cspan slot=\"action-label-copy\" hidden data-code-block-state=\"failed\"\u003eCopy failed!\u003c/span\u003e\n\u003cspan slot=\"action-label-wrap\"\u003eToggle word wrap\u003c/span\u003e\n\u003cspan slot=\"action-label-wrap\" hidden data-code-block-state=\"active\"\u003eToggle overflow\u003c/span\u003e\n\u003c/rh-code-block\u003e\n```", "type": { "text": "('copy' | 'wrap')[]" }, "default": "[]", "fieldName": "actions" }, { "name": "highlighting", "description": "Controls how syntax highlighting is applied. Accepts `'client'` or\n`'prerendered'`. When `'client'`, Prism.js is loaded on-demand and\nhighlights source from `\u003cscript\u003e` children. When `'prerendered'`,\nRHDS token colors are applied to existing Prism class names in child\n`\u003cpre\u003e` elements. Defaults to `undefined` (no highlighting).", "type": { "text": "'client' | 'prerendered'" }, "fieldName": "highlighting" }, { "name": "language", "description": "Specifies the Prism.js grammar for client-side highlighting. Requires\n`highlighting=\"client\"`. Accepts `'html'` | `'css'` | `'javascript'` |\n`'typescript'` | `'bash'` | `'ruby'` | `'yaml'` | `'json'`. Defaults\nto `undefined`. When omitted, no syntax coloring is applied.", "type": { "text": "'html' | 'css' | 'javascript' | 'typescript' | 'bash' | 'ruby' | 'yaml' | 'json'" }, "fieldName": "language" }, { "name": "compact", "description": "When true, reduces internal padding for tighter layouts. Defaults to false.", "type": { "text": "boolean" }, "default": "false", "fieldName": "compact" }, { "name": "dedent", "description": "When true, strips common leading whitespace from source lines before rendering. Defaults to false.", "type": { "text": "boolean" }, "default": "false", "fieldName": "dedent" }, { "name": "resizable", "description": "When true, allows the user to vertically resize the code area by dragging. Defaults to false.", "type": { "text": "boolean" }, "default": "false", "fieldName": "resizable" }, { "name": "full-height", "description": "When true, the code block expands to its full height without scroll truncation. Defaults to false.", "type": { "text": "boolean" }, "default": "false", "fieldName": "fullHeight" }, { "name": "wrap", "description": "When true, long lines wrap instead of scrolling horizontally. Defaults to false.", "type": { "text": "boolean" }, "default": "false", "fieldName": "wrap" }, { "name": "line-numbers", "description": "Controls line-number visibility. Accepts `'hidden'` or `'visible'`. When `'hidden'`, the gutter column is removed. Defaults to `undefined` (visible).", "type": { "text": "'hidden' | 'visible'" }, "fieldName": "lineNumbers" } ], "events": [ { "name": "copy", "description": "Fired when the user clicks the copy\naction button or activates it with Enter/Space. The event's\n`content` field (string) contains the text to copy. Listeners MAY\nmodify `event.content` to alter the copied text (e.g. to strip a\nshell prompt). Call `event.preventDefault()` to cancel the copy.", "type": { "text": "RhCodeBlockCopyEvent" } } ], "slots": [ { "name": "", "summary": "code content (default slot)", "description": "Expects a non-executable `\u003cscript type=\"text/sample-...\"\u003e` or `\u003cpre\u003e`\nelement containing source code. JavaScript samples should use\n`type=\"text/sample-javascript\"`. This region is keyboard-scrollable\nand exposed to assistive technology as a scrollable code area;\navoid placing focusable or interactive children here." }, { "name": "action-label-copy", "summary": "copy button label (action-label-copy slot)", "description": "Expects inline text or `\u003cspan\u003e` elements providing labels for\nthe copy button's default, active, and failed states. Wired to\n`aria-labelledby` so screen readers announce the current state." }, { "name": "action-label-wrap", "summary": "wrap button label (action-label-wrap slot)", "description": "Expects inline text or `\u003cspan\u003e` elements providing labels for\nthe wrap toggle's default and active states. Wired to\n`aria-labelledby` so screen readers announce the current state." }, { "name": "show-more", "summary": "collapsed toggle label (show-more slot)", "description": "Expects inline text for the expand button when code is collapsed.\nDefaults to \"Show more\". Wired to `aria-labelledby` so screen\nreaders announce it as the button's accessible name." }, { "name": "show-less", "summary": "expanded toggle label (show-less slot)", "description": "Expects inline text for the collapse button when code is expanded.\nDefaults to \"Show less\". Wired to `aria-labelledby` so screen\nreaders announce it as the button's accessible name." }, { "name": "legend", "summary": "code callout legend (legend slot)", "description": "Expects a `\u003cdl\u003e` element containing `\u003crh-badge\u003e` in `\u003cdt\u003e` and legend\ntext in `\u003cdd\u003e` elements. Provides a key for callout annotations\nwithin the code block. Screen readers announce the list structure\nso users can correlate badges with their descriptions. Hidden when\nno content is slotted." } ], "cssProperties": [ { "name": "--rh-size-icon-02", "description": "24px icon box", "default": "24px", "syntax": "\u003clength\u003e" }, { "name": "--rh-code-block-callout-size", "description": "Callout badge indicator size", "default": "var(--rh-size-icon-02, 24px)" }, { "name": "--rh-color-surface-light", "description": "Secondary surface (light theme)", "default": "#e0e0e0", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-length-2xl", "description": "Action button width\n\nAction button height\n\n32px length token", "default": "32px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-surface-lighter", "description": "Code surface in light mode\n\nTertiary 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-space-2xl", "description": "Container main spacer\n\n32px spacer", "default": "32px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-blue-10", "description": "Selected text background in light mode\n\nAlert - Info background", "default": "#e0f0ff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-40", "description": "Punctuation token color in light mode\n\nSubtle icon (hover state)", "default": "#a3a3a3", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-20", "description": "Default syntax token color in dark mode\n\nPunctuation token color in dark mode\n\nSecondary surface (light theme)", "default": "#e0e0e0", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-95", "description": "Default syntax token color in light mode\n\nSelected text background in dark mode\n\nNamespace token color in light mode\n\nPrimary surface (dark theme) or primary text (light theme)", "default": "#151515", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-red-10", "description": "Tag token color in dark mode", "default": "#fce3e3", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-purple-50", "description": "Property token color in light mode\n\nTag token color in light mode\n\nBoolean token color in light mode\n\nNumber token color in light mode\n\nConstant token color in light mode\n\nSymbol token color in light mode\n\nDeleted token color in light mode\n\nFunction name token color in light mode", "default": "#5e40be", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-teal-20", "description": "Function name token color in dark mode", "default": "#b9e5e5", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-red-40", "description": "Namespace token color in dark mode\n\nDeleted token color in dark mode\n\nAttribute name token color in dark mode\n\nLight brand red", "default": "#f56e6e", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-teal-60", "description": "Selector token color in light mode\n\nAttribute name token color in light mode\n\nString token color in light mode\n\nCharacter token color in light mode\n\nBuilt-in token color in light mode\n\nInserted token color in light mode", "default": "#147878", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-yellow-60", "description": "Operator token color in light mode\n\nEntity token color in light mode\n\nURL token color in light mode", "default": "#96640f", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-blue-40", "description": "Operator token color in dark mode\n\nEntity token color in dark mode\n\nURL token color in dark mode\n\nAlert - Info accent", "default": "#4394e5", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-blue-60", "description": "At-rule token color in light mode\n\nAttribute value token color in light mode\n\nKeyword token color in light mode\n\nInline link hover (light theme)", "default": "#004d99", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-orange-40", "description": "Boolean token color in dark mode\n\nNumber token color in dark mode\n\nFunction token color in dark mode\n\nLabel - Filled (Orange) accent color", "default": "#f5921b", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-red-60", "description": "Function token color in light mode\n\nClass name token color in light mode\n\nDark brand red", "default": "#a60000", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-yellow-40", "description": "Property token color in dark mode\n\nConstant token color in dark mode\n\nSymbol token color in dark mode\n\nClass name token color in dark mode\n\nAlert - Warning accent", "default": "#dca614", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-purple-30", "description": "Selector token color in dark mode\n\nBuilt-in token color in dark mode\n\nAt-rule token color in dark mode\n\nKeyword token color in dark mode\n\nImportant token color in dark mode", "default": "#b6a6e9", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-orange-60", "description": "Regex token color in light mode\n\nImportant token color in light mode\n\nVariable token color in light mode", "default": "#9e4a06", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-green-40", "description": "String token color in dark mode\n\nCharacter token color in dark mode\n\nInserted token color in dark mode\n\nAttribute value token color in dark mode\n\nRegex token color in dark mode\n\nVariable token color in dark mode", "default": "#87bb62", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-code-block-border-block-start-width", "description": "Top border width override", "default": "var(--rh-border-width-sm, 1px)" }, { "name": "--rh-size-icon-06", "description": "Callout tag width\n\n64px icon box", "default": "64px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-family-code", "description": "Code content typeface\n\nPrerendered code typeface\n\nLine number typeface\n\nCode font family", "default": "RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-color-text-secondary", "description": "CDATA syntax token color\n\nComment syntax token color\n\nBlock comment syntax token color\n\nDoctype syntax token color\n\nLine number text uses the secondary text design token for reduced emphasis" }, { "name": "--rh-font-weight-code-regular", "description": "Line number font weight\n\nRegular font weight", "default": "400", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-border-width-sm", "description": "Container border width\n\nTop border width fallback\n\nSeparator width between line numbers and code content\n\n1px border width; Example: Secondary CTA or Button", "default": "1px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-border-subtle", "description": "Container border color\n\nSeparator color between line numbers and code uses the subtle border token" }, { "name": "--rh-line-height-code", "description": "Prerendered code line height\n\nSizer line height\n\nLine number item height\n\nLine height for code", "default": "1.5", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-border-radius-default", "description": "Action button corner radius\n\nContainer corner radius\n\n3px border radius; Example: Card", "default": "3px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-space-xs", "description": "4px spacer", "default": "4px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-text-primary", "description": "Container text color\n\nExpand button text color" }, { "name": "--rh-font-family-body-text", "description": "Expand button typeface\n\nBody text font family", "default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-size-body-text-sm", "description": "Expand button text size\n\n14px font size", "default": "0.875rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-weight-body-text-regular", "description": "Expand button font weight\n\nRegular font weight", "default": "400", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-line-height-body-text", "description": "Expand button line height\n\nLine height for body text", "default": "1.5", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-color-icon-secondary", "description": "Expand icon color" }, { "name": "--rh-font-size-code-sm", "description": "14px font size", "default": "0.875rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-sm", "description": "Compact secondary spacer\n\n6px spacer", "default": "6px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-code-md", "description": "16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-3xl", "description": "Truncation gradient height\n\n48px spacer", "default": "48px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-4xl", "description": "Overflow gradient width\n\n64px spacer", "default": "64px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-lg", "description": "Actions toolbar block start margin\n\nCompact main spacer\n\nLegend block margin\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-md", "description": "Action button padding\n\nActions toolbar gap\n\nExpand button secondary spacer\n\nLegend grid gap\n\n8px spacer", "default": "8px", "syntax": "\u003clength\u003e" } ], "demos": [ { "url": "https://ux.redhat.com/elements/code-block/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-code-block/demo/index.html" } }, { "description": "Code block with internationalized action button labels via slots.", "url": "https://ux.redhat.com/elements/code-block/demo/actions-i18n/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-code-block/demo/actions-i18n.html" } }, { "url": "https://ux.redhat.com/elements/code-block/demo/actions/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-code-block/demo/actions.html" } }, { "description": "Code block positioned below the fold to test content-visibility optimization.", "url": "https://ux.redhat.com/elements/code-block/demo/below-the-fold/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-code-block/demo/below-the-fold.html" } }, { "description": "Code block with callout badge indicators and a legend.", "url": "https://ux.redhat.com/elements/code-block/demo/callout-badges/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-code-block/demo/callout-badges.html" } }, { "description": "Code block with prerendered callout annotations on specific lines.", "url": "https://ux.redhat.com/elements/code-block/demo/callout-prerendered/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-code-block/demo/callout-prerendered.html" } }, { "url": "https://ux.redhat.com/elements/code-block/demo/client-side-highlighting/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-code-block/demo/client-side-highlighting.html" } }, { "description": "Code block rendered in light and dark color contexts.", "url": "https://ux.redhat.com/elements/code-block/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-code-block/demo/color-context.html" } }, { "description": "Code block demonstrating cancellation of the copy event.", "url": "https://ux.redhat.com/elements/code-block/demo/copy-cancel/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-code-block/demo/copy-cancel.html" } }, { "description": "Code block demonstrating modification of copied text via the copy event.", "url": "https://ux.redhat.com/elements/code-block/demo/copy-modify/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-code-block/demo/copy-modify.html" } }, { "description": "Code block with line numbers hidden via the line-numbers attribute.", "url": "https://ux.redhat.com/elements/code-block/demo/hide-line-numbers/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-code-block/demo/hide-line-numbers.html" } }, { "description": "Code block using prerendered Prism.js markup with RHDS token colors.", "url": "https://ux.redhat.com/elements/code-block/demo/prerendered-prism-highlighting/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-code-block/demo/prerendered-prism-highlighting.html" } }, { "description": "Code block with the resizable attribute for user-adjustable height.", "url": "https://ux.redhat.com/elements/code-block/demo/resizable/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-code-block/demo/resizable.html" } }, { "url": "https://ux.redhat.com/elements/code-block/demo/sizes/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-code-block/demo/sizes.html" } }, { "description": "This demo loads 1000+ code blocks as full height and with line numbers and wrap action.", "url": "https://ux.redhat.com/elements/code-block/demo/thousands-line-numbers-full-height/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-code-block/demo/thousands-line-numbers-full-height.html" } }, { "description": "This demo loads 1000+ code blocks with line numbers and wrap action.", "url": "https://ux.redhat.com/elements/code-block/demo/thousands-line-numbers/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-code-block/demo/thousands-line-numbers.html" } }, { "description": "This demo loads 1000+ code blocks. The code blocks have the line-numbers=\u0026quot;hidden\u0026quot; and the actions=\u0026quot;copy\u0026quot; attribute. No intersection or resize observers will instantiate.", "url": "https://ux.redhat.com/elements/code-block/demo/thousands/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-code-block/demo/thousands.html" } } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "RhCodeBlockCopyEvent", "declaration": { "name": "RhCodeBlockCopyEvent", "module": "rh-code-block/rh-code-block.js" } }, { "kind": "custom-element-definition", "name": "rh-code-block", "declaration": { "name": "RhCodeBlock", "module": "rh-code-block/rh-code-block.js" } }, { "kind": "js", "name": "RhCodeBlock", "declaration": { "name": "RhCodeBlock", "module": "rh-code-block/rh-code-block.js" } } ] }, { "kind": "javascript-module", "path": "rh-cta/rh-cta.js", "declarations": [ { "name": "RhCta", "summary": "Styled link or button for prominent user actions", "description": "Provides a styled link or button for prominent user actions when you need to\ndraw attention to a key interaction. Must contain an `href` attribute or a\nslotted `\u003ca\u003e` / `\u003cbutton\u003e`. Screen readers announce the slotted text. Used\nprimarily for linking to other pages. Users should prefer to use the `href`\nattribute or slotted links with this component. Avoid `\u003cbutton\u003e` with the\ndefault (no variant) style.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "variant", "description": "Visual importance: `primary` (red fill), `secondary` (bordered),\n`brick` (full-width grid), or undefined (default inline link with arrow).", "type": { "text": "'primary' | 'secondary' | 'brick'" }, "kind": "field", "attribute": "variant", "reflects": true }, { "name": "href", "description": "URL for the CTA link. Renders an internal `\u003ca\u003e` instead of using a slotted element.", "type": { "text": "string" }, "kind": "field", "attribute": "href", "reflects": true }, { "name": "download", "description": "Triggers a file download when `href` is set. Passes through to the link.", "type": { "text": "string" }, "kind": "field", "attribute": "download" }, { "name": "referrerpolicy", "description": "Referrer policy when `href` is set. Passes through to the link.", "type": { "text": "string" }, "kind": "field", "attribute": "referrerpolicy" }, { "name": "rel", "description": "Link relationship when `href` is set. Passes through to the link.", "type": { "text": "string" }, "kind": "field", "attribute": "rel" }, { "name": "target", "description": "Browsing context when `href` is set (e.g. `_blank`). Passes through to the link.", "type": { "text": "string" }, "kind": "field", "attribute": "target" }, { "name": "icon", "description": "Icon name. Overrides the default trailing arrow, or displays before text in brick variant.", "type": { "text": "IconNameFor\u003cIconSetName\u003e" }, "kind": "field", "attribute": "icon", "reflects": true }, { "name": "iconSet", "description": "Icon set to load from. Defaults to `ui`.", "type": { "text": "'ui' | 'standard' | 'social' | 'microns'", "references": [ { "name": "IconSetName", "package": "@rhds/icons" } ] }, "default": "'ui'", "kind": "field", "attribute": "icon-set" }, { "name": "scheduleUpdate", "kind": "method" }, { "name": "firstUpdated", "kind": "method" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-cta/rh-cta.ts#L34" }, "kind": "class", "tagName": "rh-cta", "attributes": [ { "name": "variant", "description": "Visual importance: `primary` (red fill), `secondary` (bordered),\n`brick` (full-width grid), or undefined (default inline link with arrow).", "type": { "text": "'primary' | 'secondary' | 'brick'" }, "fieldName": "variant" }, { "name": "href", "description": "URL for the CTA link. Renders an internal `\u003ca\u003e` instead of using a slotted element.", "type": { "text": "string" }, "fieldName": "href" }, { "name": "download", "description": "Triggers a file download when `href` is set. Passes through to the link.", "type": { "text": "string" }, "fieldName": "download" }, { "name": "referrerpolicy", "description": "Referrer policy when `href` is set. Passes through to the link.", "type": { "text": "string" }, "fieldName": "referrerpolicy" }, { "name": "rel", "description": "Link relationship when `href` is set. Passes through to the link.", "type": { "text": "string" }, "fieldName": "rel" }, { "name": "target", "description": "Browsing context when `href` is set (e.g. `_blank`). Passes through to the link.", "type": { "text": "string" }, "fieldName": "target" }, { "name": "icon", "description": "Icon name. Overrides the default trailing arrow, or displays before text in brick variant.", "type": { "text": "IconNameFor\u003cIconSetName\u003e" }, "fieldName": "icon" }, { "name": "icon-set", "description": "Icon set to load from. Defaults to `ui`.", "type": { "text": "'ui' | 'standard' | 'social' | 'microns'", "references": [ { "name": "IconSetName", "package": "@rhds/icons" } ] }, "default": "'ui'", "fieldName": "iconSet" } ], "slots": [ { "name": "", "summary": "CTA link text", "description": "Slot an anchor or button as the first child, or set href on the host. Screen readers\nannounce this content as the CTA label. For long words, supply wbr at appropriate break points." } ], "cssParts": [ { "name": "container", "description": "container element for slotted CTA" } ], "cssProperties": [ { "name": "--rh-font-family-heading", "description": "Container typeface\n\nHeading font family", "default": "RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-line-height-body-text", "description": "Container line height\n\nLine height for body text", "default": "1.5", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-font-size-body-text-lg", "description": "Container text size\n\n18px font size", "default": "1.125rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-icon-size", "description": "Trailing icon dimensions", "default": "var(--rh-font-size-body-text-lg, 1.125rem)" }, { "name": "--rh-animation-speed", "description": "Arrow slide animation duration", "default": "0.3s", "syntax": "\u003ctime\u003e" }, { "name": "--rh-animation-timing", "description": "Arrow slide animation easing", "default": "cubic-bezier(0.465, 0.183, 0.153, 0.946)", "syntax": "\u003ceasing-function\u003e" }, { "name": "--rh-cta-focus-text-underline-offset", "description": "Focus text underline offset", "default": "var(--rh-cta-hover-text-underline-offset)" }, { "name": "--rh-border-width-md", "description": "2px border width: Example: Alert", "default": "2px", "syntax": "\u003clength\u003e" }, { "name": "--rh-cta-focus-container-outline-color", "description": "Container outline color on keyboard focus", "default": "var(--rh-cta-focus-outline-color)" }, { "name": "--rh-cta-focus-outline-color", "description": "Inner focus indicator outline color" }, { "name": "--rh-cta-hover-text-underline-offset", "description": "Hover text underline offset" }, { "name": "--rh-border-radius-default", "description": "Container border radius\n\n3px border radius; Example: Card", "default": "3px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-border-width-sm", "description": "Container border thickness\n\nInner border thickness\n\n1px border width; Example: Secondary CTA or Button", "default": "1px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-2xl", "description": "32px spacer", "default": "32px", "syntax": "\u003clength\u003e" }, { "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-cta-font-size-priority", "description": "Primary and secondary variant font size", "default": "var(--rh-font-size-body-text-md, 1rem)" }, { "name": "--rh-font-size-body-text-md", "description": "16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-cta-focus-container-background-color", "description": "Container background color on focus", "default": "#73bcf740" }, { "name": "--rh-cta-active-container-background-color", "description": "Default active container background", "default": "#73bcf740" }, { "name": "--rh-color-brand-red" }, { "name": "--rh-color-brand-red-dark", "description": "Dark brand red/Brand red hover", "default": "#a60000", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-surface-darkest", "description": "Primary surface (dark theme)", "default": "#151515", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-text-primary-on-dark", "description": "Primary text color for dark theme", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-text-primary-on-light", "description": "Primary text color for light theme", "default": "#151515", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-cta-focus-background-color", "description": "Default focus background\n\nPrimary variant focus background\n\nSecondary variant focus background on light color schemes\n\nSecondary variant focus background on dark color schemes", "default": "var(--rh-color-surface-dark, #383838)" }, { "name": "--rh-color-surface-dark", "description": "Tertiary surface (dark theme)", "default": "#383838", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-cta-active-color", "description": "Secondary variant active text color", "default": "var(--rh-color-text-primary)" }, { "name": "--rh-color-text-primary" }, { "name": "--rh-color-border-strong" }, { "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-border-strong-on-light", "description": "Strong border color (light theme)", "default": "#151515", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-font-family-body-text", "description": "Brick variant typeface\n\nBody text font family", "default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-weight-body-text-regular", "description": "Brick variant font weight\n\nRegular font weight", "default": "400", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-space-md", "description": "Arrow icon inline start margin\n\nVariant icon inline start margin\n\nBrick variant content gap\n\n8px spacer", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-cta-background-color", "description": "Default background color\n\nPrimary variant background color\n\nSecondary variant background color\n\nBrick variant background color", "default": "transparent" }, { "name": "--rh-cta-border-color", "description": "Default border color\n\nPrimary variant border color\n\nSecondary variant border color\n\nBrick variant border color", "default": "var(--rh-color-border-subtle)" }, { "name": "--rh-cta-color", "description": "Default text color\n\nPrimary variant text color\n\nPrimary variant active text color\n\nSecondary variant text color on light color schemes\n\nSecondary variant text color on dark color schemes\n\nBrick variant text color", "default": "var(--rh-color-interactive-primary-default)" }, { "name": "--rh-cta-hover-background-color", "description": "Default hover background\n\nPrimary variant hover background\n\nSecondary variant hover background on light color schemes\n\nSecondary variant hover background on dark color schemes\n\nBrick variant hover background on light color schemes\n\nBrick variant hover background on dark color schemes", "default": "var(--rh-color-surface-darker, #1f1f1f)" }, { "name": "--rh-cta-hover-border-color", "description": "Default hover border color\n\nPrimary variant hover border color\n\nSecondary variant hover border color\n\nBrick variant hover border color", "default": "var(--rh-color-border-subtle)" }, { "name": "--rh-cta-hover-color", "description": "Default hover text color\n\nPrimary variant hover text color\n\nSecondary variant hover text color on light color schemes\n\nSecondary variant hover text color on dark color schemes\n\nBrick variant hover text color", "default": "var(--rh-color-interactive-primary-hover)" }, { "name": "--rh-color-interactive-primary-hover" }, { "name": "--rh-cta-hover-text-decoration", "description": "Default hover text decoration\n\nBrick variant hover text decoration on light color schemes\n\nBrick variant hover text decoration on dark color schemes", "default": "underline" }, { "name": "--rh-cta-focus-color", "description": "Default focus text color\n\nPrimary variant focus text color\n\nBrick variant focus text color", "default": "var(--rh-color-interactive-primary-default)" }, { "name": "--rh-color-interactive-primary-default" }, { "name": "--rh-cta-focus-border-color", "description": "Default focus border color\n\nPrimary variant focus border color\n\nSecondary variant focus border color\n\nBrick variant focus border color", "default": "var(--rh-color-border-subtle)" }, { "name": "--rh-cta-focus-inner-border-color", "description": "Default focus inner border color\n\nPrimary variant focus inner border color\n\nSecondary variant focus inner border color\n\nBrick variant focus inner border color", "default": "var(--rh-color-border-subtle)" }, { "name": "--rh-cta-focus-text-decoration", "description": "Default focus text decoration\n\nPrimary variant focus text decoration\n\nSecondary variant focus text decoration\n\nBrick variant focus text decoration on light color schemes\n\nBrick variant focus text decoration on dark color schemes", "default": "none" }, { "name": "--rh-color-surface-lighter", "description": "Tertiary surface (light theme)", "default": "#f2f2f2", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-cta-active-background-color", "description": "Primary variant active background color\n\nSecondary variant active background on light color schemes\n\nSecondary variant active background on dark color schemes\n\nBrick variant active background on light color schemes\n\nBrick variant active background on dark color schemes", "default": "var(--rh-color-surface-darker, #1f1f1f)" }, { "name": "--rh-color-surface-darker", "description": "Secondary surface (dark theme)", "default": "#1f1f1f", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-cta-active-inner-border-color", "description": "Default active inner border color\n\nPrimary variant active inner border color\n\nSecondary variant active inner border on light color schemes\n\nSecondary variant active inner border on dark color schemes\n\nBrick variant active inner border color", "default": "var(--rh-color-border-subtle)" }, { "name": "--rh-color-border-subtle" }, { "name": "--rh-cta-active-text-decoration", "description": "Default active text decoration\n\nBrick variant active text decoration on light color schemes\n\nBrick variant active text decoration on dark color schemes", "default": "underline" } ], "demos": [ { "description": "Default call-to-action demo with inline link and trailing arrow.", "url": "https://ux.redhat.com/elements/call-to-action/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-cta/demo/index.html" } }, { "description": "CTA with analytics event tracking integration.", "url": "https://ux.redhat.com/elements/call-to-action/demo/analytics/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-cta/demo/analytics.html" } }, { "url": "https://ux.redhat.com/elements/call-to-action/demo/arrow-follows-text/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-cta/demo/arrow-follows-text.html" } }, { "description": "Brick variant CTA that stretches to fill container width in a grid.", "url": "https://ux.redhat.com/elements/call-to-action/demo/brick/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-cta/demo/brick.html" } }, { "description": "CTA with a slotted button element instead of an anchor.", "url": "https://ux.redhat.com/elements/call-to-action/demo/button/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-cta/demo/button.html" } }, { "description": "CTA color context demo using lightdom CSS shim for pre-upgrade styling.", "url": "https://ux.redhat.com/elements/call-to-action/demo/color-context-with-lightdom-css/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-cta/demo/color-context-with-lightdom-css.html" } }, { "description": "CTA variants on light and dark color contexts.", "url": "https://ux.redhat.com/elements/call-to-action/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-cta/demo/color-context.html" } }, { "description": "CTA rendering without JavaScript using lightdom CSS shim.", "url": "https://ux.redhat.com/elements/call-to-action/demo/no-cta-javascript/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-cta/demo/no-cta-javascript.html" } }, { "description": "CTA behavior when resizing the container.", "url": "https://ux.redhat.com/elements/call-to-action/demo/resizing/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-cta/demo/resizing.html" } }, { "description": "CTA rendered in right-to-left text direction.", "url": "https://ux.redhat.com/elements/call-to-action/demo/right-to-left/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-cta/demo/right-to-left.html" } }, { "description": "CTA with slotted anchor tags instead of the href attribute.", "url": "https://ux.redhat.com/elements/call-to-action/demo/slotted-links/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-cta/demo/slotted-links.html" } }, { "description": "All CTA variants: default, primary, secondary, and brick.", "url": "https://ux.redhat.com/elements/call-to-action/demo/variants/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-cta/demo/variants.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-cta", "declaration": { "name": "RhCta", "module": "rh-cta/rh-cta.js" } }, { "kind": "js", "name": "RhCta", "declaration": { "name": "RhCta", "module": "rh-cta/rh-cta.js" } } ] }, { "kind": "javascript-module", "path": "rh-dialog/rh-dialog.js", "declarations": [ { "name": "DialogCancelEvent", "superclass": { "name": "Event", "package": "global:" }, "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-dialog/rh-dialog.ts#L20" }, "kind": "class" }, { "name": "DialogCloseEvent", "superclass": { "name": "Event", "package": "global:" }, "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-dialog/rh-dialog.ts#L26" }, "kind": "class" }, { "name": "DialogOpenEvent", "superclass": { "name": "Event", "package": "global:" }, "members": [ { "name": "trigger", "description": "The element that opened the dialog, or null if opened programmatically.", "type": { "text": "HTMLElement | null" }, "kind": "field" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-dialog/rh-dialog.ts#L32" }, "kind": "class" }, { "name": "RhDialog", "summary": "Modal dialog for confirmations, errors, or required input", "description": "Modal overlay for confirming decisions or collecting input. Traps focus and\nblocks page interaction. Must have a heading or `accessible-label` for screen\nreaders. Uses native `\u003cdialog\u003e` with `aria-labelledby`. Escape closes the\ndialog; Tab cycles focus within it. Use sparingly to avoid disrupting workflow.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "variant", "description": "Fixed width: `small` (35 rem), `medium` (52.5 rem), or `large` (70 rem).\nDefaults to `min(90%, 1140px)` when unset.", "type": { "text": "'small' | 'medium' | 'large'" }, "kind": "field", "attribute": "variant", "reflects": true }, { "name": "position", "description": "Vertical placement. Set to `top` to align to the top of the viewport\ninstead of center.", "type": { "text": "'top'" }, "kind": "field", "attribute": "position", "reflects": true }, { "name": "accessibleLabel", "description": "Accessible name for the dialog. Must be provided when no heading\nexists in the header or default slot. Maps to `aria-label` on the\nnative `\u003cdialog\u003e`.", "type": { "text": "string" }, "kind": "field", "attribute": "accessible-label" }, { "name": "open", "description": "Whether the dialog is currently open.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "open", "reflects": true }, { "name": "trigger", "description": "ID of the element that opens the dialog on click. Should exist in\nthe same document or shadow root. Its text is used as a fallback\naccessible name when no heading or `accessible-label` is present.", "type": { "text": "string" }, "kind": "field", "attribute": "trigger" }, { "name": "type", "description": "Set to `video` for a 16:9 video dialog. Removes padding and pauses\n`\u003cvideo\u003e` or YouTube `\u003ciframe\u003e` elements on close.", "type": { "text": "'video'" }, "kind": "field", "attribute": "type", "reflects": true }, { "name": "returnValue", "type": { "text": "string" }, "default": "''", "kind": "field" }, { "name": "_init", "kind": "method", "privacy": "protected" }, { "parameters": [ { "name": "oldValue", "type": { "text": "boolean" } }, { "name": "open", "type": { "text": "boolean" } } ], "name": "_openChanged", "kind": "method", "privacy": "protected" }, { "name": "_triggerChanged", "kind": "method", "privacy": "protected" }, { "parameters": [ { "name": "event", "type": { "text": "MouseEvent" } } ], "name": "onTriggerClick", "kind": "method", "privacy": "private" }, { "parameters": [ { "name": "returnValue", "type": { "text": "string" } } ], "name": "cancel", "description": "Cancels and closes the dialog, dispatching a cancel event.", "kind": "method" }, { "parameters": [ { "name": "element", "type": { "text": "HTMLElement" } } ], "name": "setTrigger", "description": "Sets the trigger element programmatically.", "kind": "method" }, { "name": "toggle", "description": "Toggles the dialog open or closed.", "kind": "method" }, { "name": "show", "description": "Opens the dialog as a modal.", "kind": "method" }, { "name": "showModal", "description": "Opens the dialog as a modal.", "kind": "method" }, { "parameters": [ { "name": "returnValue", "type": { "text": "string" } } ], "name": "close", "description": "Closes the dialog.", "kind": "method" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-dialog/rh-dialog.ts#L65" }, "kind": "class", "tagName": "rh-dialog", "attributes": [ { "name": "variant", "description": "Fixed width: `small` (35 rem), `medium` (52.5 rem), or `large` (70 rem).\nDefaults to `min(90%, 1140px)` when unset.", "type": { "text": "'small' | 'medium' | 'large'" }, "fieldName": "variant" }, { "name": "position", "description": "Vertical placement. Set to `top` to align to the top of the viewport\ninstead of center.", "type": { "text": "'top'" }, "fieldName": "position" }, { "name": "accessible-label", "description": "Accessible name for the dialog. Must be provided when no heading\nexists in the header or default slot. Maps to `aria-label` on the\nnative `\u003cdialog\u003e`.", "type": { "text": "string" }, "fieldName": "accessibleLabel" }, { "name": "open", "description": "Whether the dialog is currently open.", "type": { "text": "boolean" }, "default": "false", "fieldName": "open" }, { "name": "trigger", "description": "ID of the element that opens the dialog on click. Should exist in\nthe same document or shadow root. Its text is used as a fallback\naccessible name when no heading or `accessible-label` is present.", "type": { "text": "string" }, "fieldName": "trigger" }, { "name": "type", "description": "Set to `video` for a 16:9 video dialog. Removes padding and pauses\n`\u003cvideo\u003e` or YouTube `\u003ciframe\u003e` elements on close.", "type": { "text": "'video'" }, "fieldName": "type" } ], "events": [ { "name": "open", "description": "Fires when the dialog opens. The event's `trigger`\nproperty (HTMLElement | null) holds the element that opened it.", "type": { "text": "DialogOpenEvent" } }, { "name": "close", "description": "Fires when the dialog closes via close button\nor programmatic `close()`. No detail properties.", "type": { "text": "DialogCloseEvent" } }, { "name": "cancel", "description": "Fires when the user dismisses via backdrop\nclick or Escape. No detail properties.", "type": { "text": "DialogCancelEvent" } } ], "slots": [ { "name": "header", "summary": "Dialog heading", "description": "Should contain an h2-h6 describing the dialog's purpose. The heading becomes the\naccessible name via aria-labelledby. Sticks to the top when content overflows." }, { "name": "description", "summary": "Supplementary text below the heading", "description": "Brief context supporting the header. Hidden when empty." }, { "name": "", "summary": "Primary dialog content", "description": "Accepts text, forms, images, or interactive elements. Scrolls vertically on\noverflow. For video dialogs, slot a video or YouTube iframe here." }, { "name": "footer", "summary": "Action buttons at the bottom of the dialog", "description": "Primary and secondary action buttons (e.g. confirm, cancel). Hidden when empty.\nFocusable elements here are part of the dialog's Tab focus cycle." } ], "cssParts": [ { "name": "dialog", "description": "The dialog element" }, { "name": "close-button", "description": "The dialog's close button" }, { "name": "content", "description": "The container for the dialog content" }, { "name": "header", "description": "The container for the optional dialog header" }, { "name": "description", "description": "The container for the optional dialog description in the header" }, { "name": "body", "description": "The container for the dialog body content" }, { "name": "footer", "description": "Actions footer container" } ], "cssProperties": [ { "name": "--rh-color-surface-darker", "description": "Secondary surface (dark theme)", "default": "#1f1f1f", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-font-family-body-text", "description": "Dialog typeface\n\nBody text font family", "default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-box-shadow-xl", "description": "Dialog box-shadow\n\nExtra large box shadow", "default": "0 8px 24px 3px rgba(21, 21, 21, 0.35)", "syntax": "\u003cshadow\u003e" }, { "name": "--rh-color-text-primary", "description": "Dialog text color" }, { "name": "--rh-space-3xl", "description": "Header and body inline-end padding for close button clearance\n\n48px spacer", "default": "48px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-family-heading", "description": "Heading typeface\n\nHeading font family", "default": "RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-size-heading-sm", "description": "Heading text size\n\nh5 heading font size", "default": "1.5rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-weight-body-text-regular", "description": "Heading font weight\n\nRegular font weight", "default": "400", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-space-lg", "description": "Header bottom margin\n\nHeader pseudo-element height for sticky overlap\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-xl", "description": "Dialog inner padding\n\nLast body paragraph bottom margin\n\n24px spacer", "default": "24px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-icon-secondary", "description": "Default close button icon color" }, { "name": "--rh-color-surface-dark", "description": "Tertiary surface (dark theme)", "default": "#383838", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-border-radius-default", "description": "Dialog box corner rounding\n\nClose button corner rounding\n\n3px border radius; Example: Card", "default": "3px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-length-xl", "description": "Close button hit area height\n\nClose button hit area width\n\n24px length token", "default": "24px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-2xl", "description": "Dialog box inner padding at wide viewports\n\n32px spacer", "default": "32px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-gray-90", "description": "Secondary surface (dark theme)", "default": "#1f1f1f", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-opacity-60", "description": "60% opacity", "default": "60%", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-space-md", "description": "Footer action button gap\n\n8px spacer", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-sm", "description": "6px spacer", "default": "6px", "syntax": "\u003clength\u003e" }, { "name": "--rh-dialog-close-button-color", "description": "Close button icon color; in video mode defaults to lightest surface\ntoken for contrast against the dark backdrop.", "default": "var(--rh-color-surface-lightest, #ffffff)" }, { "name": "--rh-color-surface-lightest", "description": "Primary surface (light theme)", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-dialog-video-aspect-ratio", "description": "Video dialog aspect ratio. Defaults to 16/9. Override for non-standard\nvideo dimensions (e.g. 4/3 or 21/9).", "default": "16/9" } ], "demos": [ { "description": "Default dialog with a header slot, body content, and a footer call-to-action button. Click the trigger button to open.", "url": "https://ux.redhat.com/elements/dialog/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-dialog/demo/index.html" } }, { "description": "Dialog rendered inside an rh-context-demo wrapper to test color context and theming behavior across light and dark surfaces.", "url": "https://ux.redhat.com/elements/dialog/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-dialog/demo/color-context.html" } }, { "description": "Demonstrates the open, close, and cancel events fired by the dialog, with a live log of event names.", "url": "https://ux.redhat.com/elements/dialog/demo/events/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-dialog/demo/events.html" } }, { "description": "Dialog containing a form with a select input, demonstrating returnValue usage via programmatic close() and cancel() calls.", "url": "https://ux.redhat.com/elements/dialog/demo/form/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-dialog/demo/form.html" } }, { "description": "Dialog with extensive body content that overflows the container, demonstrating vertical scrolling and sticky header behavior.", "url": "https://ux.redhat.com/elements/dialog/demo/lots-of-content/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-dialog/demo/lots-of-content.html" } }, { "description": "Dialog without a header slot, where a heading in the default slot automatically provides the accessible name via aria-labelledby.", "url": "https://ux.redhat.com/elements/dialog/demo/no-header-content/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-dialog/demo/no-header-content.html" } }, { "description": "Dialog with no heading elements, using the accessible-label attribute to provide an accessible name for screen readers.", "url": "https://ux.redhat.com/elements/dialog/demo/no-headings/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-dialog/demo/no-headings.html" } }, { "description": "Video dialogs using type=\u0026quot;video\u0026quot; with a native HTML5 video element and a YouTube iframe embed. Demonstrates automatic video pausing on close.", "url": "https://ux.redhat.com/elements/dialog/demo/video-modal/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-dialog/demo/video-modal.html" } } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "DialogCancelEvent", "declaration": { "name": "DialogCancelEvent", "module": "rh-dialog/rh-dialog.js" } }, { "kind": "js", "name": "DialogCloseEvent", "declaration": { "name": "DialogCloseEvent", "module": "rh-dialog/rh-dialog.js" } }, { "kind": "js", "name": "DialogOpenEvent", "declaration": { "name": "DialogOpenEvent", "module": "rh-dialog/rh-dialog.js" } }, { "kind": "custom-element-definition", "name": "rh-dialog", "declaration": { "name": "RhDialog", "module": "rh-dialog/rh-dialog.js" } }, { "kind": "js", "name": "RhDialog", "declaration": { "name": "RhDialog", "module": "rh-dialog/rh-dialog.js" } } ] }, { "kind": "javascript-module", "path": "rh-disclosure/rh-disclosure.js", "declarations": [ { "name": "DisclosureToggleEvent", "description": "Fired when a disclosure is opened or closed. The event bubbles and is\ncancelable. Calling `preventDefault()` on the event prevents the\ndisclosure from changing state. The event carries no `detail`\npayload; read the `open` property on `event.target` to determine\nwhether the disclosure is expanding or collapsing.", "superclass": { "name": "Event", "package": "global:" }, "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-disclosure/rh-disclosure.ts#L24" }, "kind": "class" }, { "name": "RhDisclosure", "summary": "A disclosure toggles the visibility of content when triggered", "description": "A disclosure allows users to toggle supplementary content via a\ntrigger. Authors should provide a title through the `summary`\nattribute or slot. It renders a native `\u003cdetails\u003e`/`\u003csummary\u003e`\npair; screen readers announce state changes. Enter or Space\ntoggles the panel, Tab moves focus in, and Escape closes it.\nAvoid nesting; use `rh-accordion` instead.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "preventEscElements", "default": "[\\n 'input:not([type=\"hidden\"]):not([type=\"radio\"])',\\n\\n // Elements that need the :disabled selector:\\n ...[\\n 'input[type=\"radio\"]',\\n 'select',\\n 'textarea',\\n 'rh-audio-player',\\n 'rh-dialog',\\n ].map(selector =\u003e `${selector}:not([inert]):not([inert] *):not([tabindex^='-']):not(:disabled)`),\\n\\n // Elements that don't need the :disabled selector:\\n ...[\\n 'iframe',\\n 'audio[controls]',\\n 'video[controls]',\\n '[contenteditable]',\\n ].map(selector =\u003e `${selector}:not([inert]):not([inert] *):not([tabindex^='-'])`),\\n ].join(',')", "readonly": true, "kind": "field", "static": true, "privacy": "private" }, { "name": "colorPalette", "description": "Set the colorPalette of the disclosure. Overrides parent context. Possible values are:\n- `lightest` (default)\n- `lighter`\n- `light`\n- `dark`\n- `darker`\n- `darkest`", "type": { "text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'", "references": [ { "name": "ColorPalette", "module": "lib/color-palettes.js" } ] }, "kind": "field", "attribute": "color-palette", "reflects": true }, { "name": "open", "description": "Sets the disclosure to be in its open (expanded) state", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "open", "reflects": true }, { "name": "variant", "description": "Borderless: Removes the outer and left border from the disclosure.\nThe background is `surface-light`/`surface-dark` when expanded.\nCompact: decreases disclosure padding.", "type": { "text": "'borderless' | 'compact'" }, "kind": "field", "attribute": "variant", "reflects": true }, { "name": "summary", "description": "Sets the disclosure title via an attribute", "type": { "text": "string" }, "kind": "field", "attribute": "summary", "reflects": true }, { "name": "_openChanged", "kind": "method", "privacy": "protected" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-disclosure/rh-disclosure.ts#L51" }, "kind": "class", "tagName": "rh-disclosure", "attributes": [ { "name": "color-palette", "description": "Set the colorPalette of the disclosure. Overrides parent context. Possible values are:\n- `lightest` (default)\n- `lighter`\n- `light`\n- `dark`\n- `darker`\n- `darkest`", "type": { "text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'", "references": [ { "name": "ColorPalette", "module": "lib/color-palettes.js" } ] }, "fieldName": "colorPalette" }, { "name": "open", "description": "Sets the disclosure to be in its open (expanded) state", "type": { "text": "boolean" }, "default": "false", "fieldName": "open" }, { "name": "variant", "description": "Borderless: Removes the outer and left border from the disclosure.\nThe background is `surface-light`/`surface-dark` when expanded.\nCompact: decreases disclosure padding.", "type": { "text": "'borderless' | 'compact'" }, "fieldName": "variant" }, { "name": "summary", "description": "Sets the disclosure title via an attribute", "type": { "text": "string" }, "fieldName": "summary" } ], "events": [ { "name": "toggle", "description": "Fires when the disclosure\nopens or closes. The event has no `detail` payload; read\n`event.target.open` to determine the new state. The event\nbubbles and is cancelable — calling `preventDefault()` blocks\nthe state change.", "type": { "text": "DisclosureToggleEvent" } } ], "slots": [ { "name": "summary", "summary": "The clickable title text for the disclosure.", "description": "Accepts inline text or a heading element (e.g.\n`\u003ch2\u003e`, `\u003ch3\u003e`). When a heading is slotted, it\nrenders inline. Falls back to the `summary` attribute\nvalue when no slot content is provided. Authors should\nkeep the summary short and descriptive; screen readers\nannounce it as the accessible name for the disclosure\ntrigger. When using a heading element, ensure its level\nfits the page outline so assistive technology presents\ncorrect heading hierarchy." }, { "name": "", "summary": "Content revealed when the disclosure is open.", "description": "Accepts block-level elements such as paragraphs, lists,\nor nested components. Interactive children receive\nfocus via Tab when the panel is expanded. Slotted\ncontent should follow WCAG reading order so screen\nreaders present it logically. Authors should ensure\nthat interactive elements inside the panel have\nvisible focus indicators and accessible labels so\nkeyboard and assistive-technology users can operate\nthem. The escape key returns focus to the summary\ntrigger unless the focused element is an input,\nselect, textarea, or media control, in which case\nEscape is passed through to that element." } ], "cssProperties": [ { "name": "--rh-border-width-sm", "description": "Disclosure container border width\n\n1px border width; Example: Secondary CTA or Button", "default": "1px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-border-subtle", "description": "Disclosure container border color" }, { "name": "--rh-border-width-md", "description": "Focus outline width\n\n2px border width: Example: Alert", "default": "2px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-family-body-text", "description": "Disclosure body font family\n\nSlotted summary font family\n\nBody text font family", "default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-weight-body-text-medium", "description": "Trigger text weight\n\nSlotted summary text weight\n\nMedium font weight", "default": "500", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-color-surface", "description": "Trigger surface color\n\nPanel surface color" }, { "name": "--rh-color-text-primary", "description": "Trigger text color\n\nPanel text color" }, { "name": "--rh-font-size-body-text-md", "description": "Trigger text size\n\nSlotted summary text size\n\nPanel text size\n\n16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-line-height-body-text", "description": "Panel text line height\n\nLine height for body text", "default": "1.5", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-space-xl", "description": "Trigger inline padding\n\nPanel block-end padding\n\nPanel inline padding\n\n24px spacer", "default": "24px", "syntax": "\u003clength\u003e" }, { "name": "--rh-box-shadow-sm", "description": "Open disclosure elevation\n\nSmall box shadow", "default": "0 2px 4px 0 rgba(21, 21, 21, 0.2)", "syntax": "\u003cshadow\u003e" }, { "name": "--rh-color-brand-red", "description": "Brand accent stripe color" }, { "name": "--rh-font-size-body-text-sm", "description": "Compact trigger text size\n\n14px font size", "default": "0.875rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-md", "description": "Caret trailing margin\n\nCompact trigger block padding\n\n8px spacer", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-lg", "description": "Trigger block padding\n\nCaret icon inline size\n\nCaret icon block size\n\nPanel block-start padding\n\nCompact trigger inline padding\n\nCompact panel inline padding\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-surface-lighter", "description": "Trigger hover surface in light mode\n\nBorderless hover surface in light mode\n\nTertiary surface (light theme)", "default": "#f2f2f2", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-surface-darker", "description": "Borderless hover surface in dark mode\n\nSecondary surface (dark theme)", "default": "#1f1f1f", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-interactive-primary-default", "description": "Focus outline color\n\nBorderless trigger text color" }, { "name": "--rh-color-interactive-primary-hover", "description": "Borderless trigger hover text color" }, { "name": "--rh-length-3xs", "description": "Borderless focus outline offset\n\n2px length token", "default": "2px", "syntax": "\u003clength\u003e" }, { "name": "--rh-border-radius-default", "description": "Disclosure container corner radius\n\nTrigger corner radius\n\nPanel corner radius\n\nAccent stripe start corner radius\n\nAccent stripe end corner radius\n\nBorderless open panel corner radius\n\n3px border radius; Example: Card", "default": "3px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-color-surface-light", "description": "Borderless open hover surface in light mode\n\nSecondary surface (light theme)", "default": "#e0e0e0", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-surface-dark", "description": "Trigger hover surface in dark mode\n\nBorderless open hover surface in dark mode\n\nTertiary surface (dark theme)", "default": "#383838", "syntax": "\u003ccolor\u003e" } ], "demos": [ { "description": "Basic disclosure with a summary title and paragraph content.", "url": "https://ux.redhat.com/elements/disclosure/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-disclosure/demo/index.html" } }, { "description": "Disclosure adapting to different color palettes via context provider.", "url": "https://ux.redhat.com/elements/disclosure/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-disclosure/demo/color-context.html" } }, { "description": "Disclosure logging toggle events as the panel opens and closes.", "url": "https://ux.redhat.com/elements/disclosure/demo/events/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-disclosure/demo/events.html" } }, { "description": "Nested disclosures with form controls demonstrating Escape key behavior.", "url": "https://ux.redhat.com/elements/disclosure/demo/nested-disclosures/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-disclosure/demo/nested-disclosures.html" } }, { "description": "Disclosure containing jump links for in-page section navigation.", "url": "https://ux.redhat.com/elements/disclosure/demo/nested-jump-links/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-disclosure/demo/nested-jump-links.html" } }, { "description": "Disclosure using slotted summary content with an icon.", "url": "https://ux.redhat.com/elements/disclosure/demo/slotted-summary/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-disclosure/demo/slotted-summary.html" } }, { "description": "Compact, borderless, and combined variant disclosures.", "url": "https://ux.redhat.com/elements/disclosure/demo/variants/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-disclosure/demo/variants.html" } } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "DisclosureToggleEvent", "declaration": { "name": "DisclosureToggleEvent", "module": "rh-disclosure/rh-disclosure.js" } }, { "kind": "custom-element-definition", "name": "rh-disclosure", "declaration": { "name": "RhDisclosure", "module": "rh-disclosure/rh-disclosure.js" } }, { "kind": "js", "name": "RhDisclosure", "declaration": { "name": "RhDisclosure", "module": "rh-disclosure/rh-disclosure.js" } } ] }, { "kind": "javascript-module", "path": "rh-footer/rh-footer-block.js", "declarations": [ { "name": "RhFooterBlock", "summary": "Sidebar content block for footer prose or promotions", "description": "Sidebar content block for prose, promotions, or calls to action\nwithin `\u003crh-footer\u003e`. Use when the footer needs content alongside\nlink columns. Should contain a heading in the `header` slot for\naccessible labeling via `aria-labelledby`. Tab navigates\ninteractive children.", "superclass": { "name": "LitElement", "package": "lit" }, "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-footer/rh-footer-block.ts#L16" }, "kind": "class", "tagName": "rh-footer-block", "slots": [ { "name": "header", "summary": "block heading", "description": "Expects a block elements heading (h2-h5) labeling this content block.\nProvides visual and semantic grouping for screen readers. Should be\nprovided for accessibility." }, { "name": "", "summary": "block body content", "description": "Expects block elements: prose text, links, or promotional content.\nScreen readers announce content in DOM order. Tab navigates\ninteractive children." } ], "cssParts": [ { "name": "base" }, { "name": "header" }, { "name": "content" } ], "cssProperties": [ { "name": "--rh-space-2xl", "description": "32px spacer", "default": "32px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-weight-heading-medium", "description": "Block heading weight\n\nMedium font weight for headings", "default": "500", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-font-size-body-text-sm", "description": "Block default body size\n\nBlock heading size\n\n14px font size", "default": "0.875rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-lg", "description": "Block heading bottom spacing\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-text-primary-on-dark", "description": "Block default text on dark\n\nBlock heading text on dark\n\nPrimary text color for dark theme", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-text-secondary-on-dark", "description": "Block secondary text on dark\n\nSecondary text color for dark theme", "default": "#c7c7c7", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-font-family-body-text", "description": "Block body typeface\n\nBody text font family", "default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-weight-body-text-regular", "description": "Block body weight\n\nRegular font weight", "default": "400", "syntax": "\u003cnumber\u003e" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-footer-block", "declaration": { "name": "RhFooterBlock", "module": "rh-footer/rh-footer-block.js" } }, { "kind": "js", "name": "RhFooterBlock", "declaration": { "name": "RhFooterBlock", "module": "rh-footer/rh-footer-block.js" } } ] }, { "kind": "javascript-module", "path": "rh-footer/rh-footer-copyright.js", "declarations": [ { "name": "RhFooterCopyright", "summary": "Copyright notice with auto-updating year", "description": "Copyright notice for `\u003crh-footer-universal\u003e`. Use when the footer\nrequires a legal copyright line. Authors should avoid overriding.", "superclass": { "name": "LitElement", "package": "lit" }, "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-footer/rh-footer-copyright.ts#L15" }, "kind": "class", "tagName": "rh-footer-copyright", "slots": [ { "name": "", "summary": "copyright text content (default slot)", "description": "Expects inline text containing the copyright notice. Defaults to\n\"© [current year] Red Hat\" if not provided. Screen readers announce\nthis text within the footer landmark; it is not focusable via Tab.\nOverride for a different entity or localized text." } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-footer-copyright", "declaration": { "name": "RhFooterCopyright", "module": "rh-footer/rh-footer-copyright.js" } }, { "kind": "js", "name": "RhFooterCopyright", "declaration": { "name": "RhFooterCopyright", "module": "rh-footer/rh-footer-copyright.js" } } ] }, { "kind": "javascript-module", "path": "rh-footer/rh-footer-links.js", "declarations": [ { "name": "RhFooterLinks", "summary": "Accessible link group with heading for footer navigation", "description": "Accessible link group for the footer. Auto-wires `aria-labelledby`\nbetween the heading and `\u003cul\u003e` for screen readers. Must contain a\n`\u003cul\u003e`; should include a heading in the `header` slot. Tab moves\nfocus through each link. On mobile, collapses into an accordion\npanel.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "headerHidden", "description": "Visually hides the header slot content while preserving it for screen\nreaders. The `aria-labelledby` association remains active regardless\nof this setting. USE when the heading should be accessible but not\nvisible (e.g. social links group). Defaults to false.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "header-hidden", "reflects": true }, { "name": "slots", "default": "new SlotController(this, 'header')", "kind": "field", "privacy": "protected" }, { "name": "updateAccessibility", "kind": "method" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-footer/rh-footer-links.ts#L19" }, "kind": "class", "tagName": "rh-footer-links", "attributes": [ { "name": "header-hidden", "description": "Visually hides the header slot content while preserving it for screen\nreaders. The `aria-labelledby` association remains active regardless\nof this setting. USE when the heading should be accessible but not\nvisible (e.g. social links group). Defaults to false.", "type": { "text": "boolean" }, "default": "false", "fieldName": "headerHidden" } ], "slots": [ { "name": "header", "summary": "link group heading", "description": "Expects a block elements heading (h2-h5) labeling this link group.\nAutomatically linked to the `\u003cul\u003e` via `aria-labelledby` for screen\nreader users. Visually hidden when `header-hidden` attribute is set." }, { "name": "panel", "summary": "accordion panel content", "description": "Expects block elements. Alternative content slot used when links are\nrendered inside an accordion panel on mobile viewports. Screen readers\nnavigate panel content after the accordion header is expanded." }, { "name": "", "summary": "link list", "description": "Expects block elements: a `\u003cul\u003e` of navigation links. Each link is\nfocusable via Tab. The list should have `aria-labelledby` pointing\nto the header (auto-wired by the component)." } ], "cssParts": [ { "name": "header" }, { "name": "default" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-footer-links", "declaration": { "name": "RhFooterLinks", "module": "rh-footer/rh-footer-links.js" } }, { "kind": "js", "name": "RhFooterLinks", "declaration": { "name": "RhFooterLinks", "module": "rh-footer/rh-footer-links.js" } } ] }, { "kind": "javascript-module", "path": "rh-footer/rh-footer-social-link.js", "declarations": [ { "name": "RhFooterSocialLink", "summary": "Single social media icon link for the footer", "description": "Social media icon link for the footer. Authors must set\n`accessible-label` so screen readers announce the platform name\nvia ARIA. Uses `role=\"listitem\"` for list semantics. Tab\nnavigates between links; use `icon` or slot a custom SVG.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "icon", "description": "Name of the social media icon from the `social` icon set (e.g.\n`'facebook'`, `'twitter'`, `'linkedin'`). Renders an `\u003crh-icon\u003e`\nin the default slot if no custom icon is slotted. Defaults to undefined.", "type": { "text": "IconNameFor\u003c'social'\u003e" }, "kind": "field", "attribute": "icon" }, { "name": "href", "description": "URL of the social media profile or page. Applied to the anchor element's\n`href` attribute. Must be a valid URL. Defaults to undefined.", "type": { "text": "string" }, "kind": "field", "attribute": "href" }, { "name": "accessibleLabel", "description": "Accessible text label announced by screen readers for the social link\n(e.g. \"LinkedIn\", \"YouTube\"). Applied as `aria-label` on the anchor.\nMust be provided for accessibility. Defaults to undefined.", "type": { "text": "string" }, "kind": "field", "attribute": "accessible-label" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-footer/rh-footer-social-link.ts#L20" }, "kind": "class", "tagName": "rh-footer-social-link", "attributes": [ { "name": "icon", "description": "Name of the social media icon from the `social` icon set (e.g.\n`'facebook'`, `'twitter'`, `'linkedin'`). Renders an `\u003crh-icon\u003e`\nin the default slot if no custom icon is slotted. Defaults to undefined.", "type": { "text": "IconNameFor\u003c'social'\u003e" }, "fieldName": "icon" }, { "name": "href", "description": "URL of the social media profile or page. Applied to the anchor element's\n`href` attribute. Must be a valid URL. Defaults to undefined.", "type": { "text": "string" }, "fieldName": "href" }, { "name": "accessible-label", "description": "Accessible text label announced by screen readers for the social link\n(e.g. \"LinkedIn\", \"YouTube\"). Applied as `aria-label` on the anchor.\nMust be provided for accessibility. Defaults to undefined.", "type": { "text": "string" }, "fieldName": "accessibleLabel" } ], "slots": [ { "name": "", "summary": "custom social icon content", "description": "Optional slot for a custom icon when the built-in `\u003crh-icon\u003e` social set\ndoes not include the desired platform. Screen readers rely on the parent\nanchor's `aria-label` rather than this icon content." } ], "cssProperties": [ { "name": "--rh-footer--social-icon--size", "description": "Social icon size override", "default": "var(--rh-size-icon-02, 24px)" }, { "name": "--rh-size-icon-02", "description": "Social icon default size\n\n24px icon box", "default": "24px", "syntax": "\u003clength\u003e" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-footer-social-link", "declaration": { "name": "RhFooterSocialLink", "module": "rh-footer/rh-footer-social-link.js" } }, { "kind": "js", "name": "RhFooterSocialLink", "declaration": { "name": "RhFooterSocialLink", "module": "rh-footer/rh-footer-social-link.js" } } ] }, { "kind": "javascript-module", "path": "rh-footer/rh-footer-universal.js", "declarations": [ { "name": "RhFooterUniversal", "summary": "Global Red Hat universal footer with logo, links, and copyright", "description": "Global Red Hat footer bar for consistent branding across all\nproperties. Authors must not customize content per-site. The\n`secondary-start` slot should contain `\u003crh-footer-copyright\u003e`.\nRenders a `\u003cfooter\u003e` with ARIA landmark semantics and a\nvisually-hidden `\u003ch2\u003e` so screen readers can identify the region.\nTab navigates link groups.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "colorPalette", "description": "Color palette for the universal footer. Defaults to `'darker'`.\nValid values: `'lighter'`, `'light'`, `'dark'`, `'darker'`, `'darkest'`.\nThe universal footer typically renders on the darkest surface.", "type": { "text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'", "references": [ { "name": "ColorPalette", "module": "lib/color-palettes.js" } ] }, "default": "'darker'", "kind": "field", "attribute": "color-palette", "reflects": true } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-footer/rh-footer-universal.ts#L29" }, "kind": "class", "tagName": "rh-footer-universal", "attributes": [ { "name": "color-palette", "description": "Color palette for the universal footer. Defaults to `'darker'`.\nValid values: `'lighter'`, `'light'`, `'dark'`, `'darker'`, `'darkest'`.\nThe universal footer typically renders on the darkest surface.", "type": { "text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'", "references": [ { "name": "ColorPalette", "module": "lib/color-palettes.js" } ] }, "default": "'darker'", "fieldName": "colorPalette" } ], "slots": [ { "name": "heading", "summary": "visually-hidden heading for assistive technology", "description": "Expects inline text. Screen readers use this heading to identify the\nuniversal footer region. Defaults to \"Red Hat footer\". Hidden if a\nparent `\u003ch2\u003e` already exists." }, { "name": "base", "summary": "overrides all universal footer content (base slot)", "description": "Expects block elements. Replaces the entire universal footer structure.\nAvoid using; bypasses all built-in layout, grid regions, responsive\nbehavior, and ARIA landmark wiring." }, { "name": "logo", "summary": "Red Hat logo (logo slot)", "description": "Expects block elements: an `\u003ca\u003e` wrapping an `\u003cimg\u003e` or `\u003csvg\u003e`.\nDefaults to the Red Hat logo SVG linking to redhat.com. Screen\nreaders rely on the anchor `aria-label` for identification." }, { "name": "primary", "summary": "overrides primary-start, links-primary, and primary-end (primary slot)", "description": "Expects block elements. Replaces the entire primary link region.\nOverride only when the three sub-slots are insufficient.\nScreen readers navigate child links as a group." }, { "name": "primary-start", "summary": "content before primary links (primary-start slot)", "description": "Expects inline or block elements placed before the primary\nglobal navigation links. Screen readers encounter this\ncontent before the link list." }, { "name": "links-primary", "summary": "primary global navigation links (links-primary slot)", "description": "Expects block elements: a `\u003cul\u003e` of `\u003cli\u003e` anchor links for\nprimary global Red Hat navigation. Screen readers announce\nthe list group; Tab moves through each link." }, { "name": "primary-end", "summary": "content after primary links (primary-end slot)", "description": "Expects inline or block elements placed after the primary\nglobal navigation links. Screen readers encounter this\ncontent after the link list." }, { "name": "secondary", "summary": "overrides secondary-start, links-secondary, and secondary-end (secondary slot)", "description": "Expects block elements. Replaces the entire secondary link region.\nOverride only when the three sub-slots are insufficient.\nScreen readers navigate child links as a group." }, { "name": "secondary-start", "summary": "content before secondary links, e.g. copyright (secondary-start slot)", "description": "Expects block elements such as `\u003crh-footer-copyright\u003e`, placed\nbefore the secondary links. Screen readers announce this\ncontent in DOM order within the footer landmark." }, { "name": "links-secondary", "summary": "secondary global navigation links (links-secondary slot)", "description": "Expects block elements: a `\u003cul\u003e` of `\u003cli\u003e` anchor links for\nsecondary global Red Hat navigation. Screen readers announce\nthe list group; Tab moves through each link." }, { "name": "secondary-end", "summary": "content after secondary links (secondary-end slot)", "description": "Expects inline or block elements placed after the secondary\nglobal navigation links. Screen readers encounter this\ncontent after the secondary link list." }, { "name": "tertiary", "summary": "optional third content region (tertiary slot)", "description": "Expects block elements such as a language selector or custom\nwidget. Hidden when nothing is slotted. Screen readers\nencounter this region after the secondary links." } ], "cssParts": [ { "name": "section", "description": "Wrapper for the universal footer content (logo, primary, secondary, tertiary)." }, { "name": "base", "description": "Wrapper for the universal footer content (logo, primary, secondary, tertiary)." }, { "name": "logo", "description": "Container for the logo slot." }, { "name": "logo-anchor", "description": "Link wrapping the logo; defaults to redhat.com." }, { "name": "logo-image", "description": "Logo image or SVG element." }, { "name": "primary", "description": "Primary row (start, links, end)." }, { "name": "primary-start", "description": "Left area of the primary row." }, { "name": "links-primary", "description": "Main link list area in the primary row." }, { "name": "primary-end", "description": "Right area of the primary row." }, { "name": "spacer", "description": "Spacer between primary and secondary rows." }, { "name": "secondary", "description": "Secondary row (start, links, end)." }, { "name": "secondary-start", "description": "Left area of the secondary row." }, { "name": "links-secondary", "description": "Main link list area in the secondary row." }, { "name": "secondary-end", "description": "Right area of the secondary row." }, { "name": "tertiary", "description": "Optional bottom section (e.g. copyright, extra text)." } ], "cssProperties": [ { "name": "--rh-font-family-body-text", "description": "Footer typeface\n\nBody text font family", "default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-line-height-body-text", "description": "Footer line height\n\nLine height for body text", "default": "1.5", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-footer-nojs-min-height", "description": "Minimum footer height when scripting is disabled" }, { "name": "--rh-footer-icon-color", "description": "Footer icon color override", "default": "var(--rh-color-gray-40, #a3a3a3)" }, { "name": "--rh-color-gray-40", "description": "Footer icon default on dark\n\nSubtle icon (hover state)", "default": "#a3a3a3", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-footer-icon-color-hover", "description": "Footer icon hover color override", "default": "var(--rh-color-gray-30, #c7c7c7)" }, { "name": "--rh-color-gray-30", "description": "Footer icon hover default on dark\n\nSubtle borders (light theme)", "default": "#c7c7c7", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-footer-border-color", "description": "Footer border color override", "default": "var(--rh-color-border-subtle-on-dark, #707070)" }, { "name": "--rh-color-border-subtle-on-dark", "description": "Footer border subtle on dark\n\nSubtle border color (dark theme)", "default": "#707070", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-footer-accent-color", "description": "Footer accent color override", "default": "var(--rh-color-accent-brand-on-light, #ee0000)" }, { "name": "--rh-color-accent-brand-on-light", "description": "Footer accent brand on light\n\nBrand red (light theme)", "default": "#ee0000", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-footer-section-side-gap", "description": "Footer section horizontal margin override", "default": "var(--rh-space-lg, 16px)" }, { "name": "--rh-color-white", "description": "Footer text color\n\nUniversal footer accordion surface\n\nLightest surface (light theme) or primary text (dark theme)", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-size-icon-04", "description": "Footer logo width\n\n40px icon box", "default": "40px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-weight-body-text-regular", "description": "Footer body text weight\n\nRegular font weight", "default": "400", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-font-family-heading", "description": "Footer typeface\n\nHeading font family", "default": "RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-line-height-heading", "description": "Footer line height\n\nLine height for headings", "default": "1.3", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-length-xl", "description": "24px length token", "default": "24px", "syntax": "\u003clength\u003e" }, { "name": "--rh-length-3xs", "description": "Debug mode outline width\n\n2px length token", "default": "2px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-xs", "description": "4px spacer", "default": "4px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-family-code", "description": "Code font family", "default": "RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-size-code-xs", "description": "12px font size", "default": "0.75rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-length-4xs", "description": "Footer height\n\n1px length token", "default": "1px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-surface-darker", "description": "Footer background\n\nFooter background\n\nSecondary surface (dark theme)", "default": "#1f1f1f", "syntax": "\u003ccolor\u003e" }, { "name": "--pf-global--spacer--xl", "description": "Gap between promotional blocks in the secondary region", "default": "32px" }, { "name": "--rh-color-surface-darkest", "description": "Footer background\n\nPrimary surface (dark theme)", "default": "#151515", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-text-secondary", "description": "Footer text color" }, { "name": "--rh-space-md", "description": "Primary global links row gap\n\nSecondary global links row gap\n\n8px spacer", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-xs", "description": "Footer text size\n\n12px font size", "default": "0.75rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-xl", "description": "Footer universal inline gap\n\nPrimary global links column gap\n\nSecondary global links column gap\n\nFooter content gap\n\n24px spacer", "default": "24px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-lg", "description": "18px font size", "default": "1.125rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-footer-links-gap", "description": "Vertical spacing between links in desktop columns", "default": "var(--rh-space-lg, 16px)" }, { "name": "--rh-space-lg", "description": "Footer section horizontal margin\n\nFooter content gap\n\nDesktop link column row gap\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-weight-heading-medium", "description": "Footer font weight\n\nMedium font weight for headings", "default": "500", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-footer-link-header-font-size", "description": "Font size for link-column headings.\nOverrides the `--rh-font-size-body-text-sm` token.\n\nFooter link column header size override", "default": "var(--rh-font-size-body-text-sm, 0.875rem)" }, { "name": "--rh-font-size-body-text-sm", "description": "Footer link column header size\n\n14px font size", "default": "0.875rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-text-primary", "description": "Footer text color" }, { "name": "--rh-space-2xl", "description": "Footer section block padding\n\nFooter content gap\n\nFooter content gap\n\nFooter universal block gap\n\nDesktop link column inline gap\n\nFooter main padding block-start at viewport \u003e= md\n\n32px spacer", "default": "32px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-4xl", "description": "Footer main padding block-end at viewport \u003e= md\n\n64px spacer", "default": "64px", "syntax": "\u003clength\u003e" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-footer-universal", "declaration": { "name": "RhFooterUniversal", "module": "rh-footer/rh-footer-universal.js" } }, { "kind": "js", "name": "RhFooterUniversal", "declaration": { "name": "RhFooterUniversal", "module": "rh-footer/rh-footer-universal.js" } } ] }, { "kind": "javascript-module", "path": "rh-footer/rh-footer.js", "declarations": [ { "name": "RhFooter", "summary": "Site footer with navigation links, social icons, and legal content", "description": "Site footer for navigation links, social icons, and legal content.\nUse when a page needs branded footer navigation. Must slot an\n`rh-footer-universal` in the `universal` slot and should contain\n`rh-footer-links` groups and `rh-footer-block` sections. Uses a\n`\u003cfooter\u003e` landmark with `aria-labelledby` auto-wired to headers.\nTab navigates links. On mobile, collapses to accordion.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "version", "type": { "text": "string" }, "default": "'{{version}}'", "readonly": true, "kind": "field", "static": true }, { "parameters": [ { "name": "relativeLocation", "type": { "text": "string | URL" } } ], "return": { "type": { "text": "string | URL" } }, "name": "getImportURL", "description": "Isomorphic import.meta.url function\nRequires a node.js dom shim that sets window.location", "kind": "method", "static": true }, { "name": "screenSize", "description": "ScreenSizeController effects callback to set #compact is true when viewport\n`(min-width: ${tabletLandscapeBreakpoint})`.", "default": "new ScreenSizeController(this, 'md', {\\n onChange: matches =\u003e {\\n this.#compact = !matches;\\n },\\n })", "kind": "field", "privacy": "protected" }, { "name": "LISTS_SELECTOR", "type": { "text": "string" }, "default": "':is([slot^=links],[slot=footer-links-primary],[slot=footer-links-secondary]):is(ul)'", "kind": "field", "static": true, "privacy": "private" }, { "return": { "type": { "text": "void" } }, "name": "updateAccessibility", "description": "Get any `\u003cul\u003e`s that are in the designated link slots\nand synchronously update each list and header if we need to.", "kind": "method", "privacy": "public" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-footer/rh-footer.ts#L47" }, "kind": "class", "tagName": "rh-footer", "slots": [ { "name": "heading", "summary": "visually-hidden footer heading for assistive technology", "description": "Expects inline text. Screen readers announce this heading to identify the\nfooter landmark region. Defaults to \"Red Hat footer\"." }, { "name": "base", "summary": "overrides all footer content", "description": "Expects block elements. Replaces the entire footer inner structure.\nAvoid using; bypasses all built-in layout, ARIA wiring, and responsive behavior." }, { "name": "header", "description": "Expects block elements. Overrides header-primary, logo, and\nsocial-links slots. Screen readers navigate child links\nas a group." }, { "name": "header-primary", "description": "Expects block elements. Primary header area, typically the\nsite logo. Should contain an accessible `\u003ca\u003e` linking\nto the homepage. Screen readers use the link text." }, { "name": "logo", "summary": "main page or product logo", "description": "Expects block elements: an `\u003ca\u003e` wrapping an image. Defaults to the\nRed Hat corporate logo. Screen readers rely on the img `alt` attribute\nor link text for identification." }, { "name": "header-secondary", "description": "Expects block elements. Overrides social-links slot. Should\ncontain `\u003crh-footer-social-link\u003e` elements with\naccessible labels for screen readers." }, { "name": "social-links", "summary": "social media icon links", "description": "Expects block elements: `\u003crh-footer-social-link\u003e` elements. Each link\nmust have an `accessible-label` for screen reader announcement.\nRendered as a list with `role=\"list\"`." }, { "name": "main", "description": "Expects block elements. Overrides main-primary and\nmain-secondary slots. Should contain `\u003crh-footer-links\u003e`\ngroups. Screen readers use aria-labelledby on each group." }, { "name": "main-primary", "description": "Expects block elements: `\u003crh-footer-links\u003e` with heading\nelements. On mobile, collapses to accordion. Screen\nreaders use `aria-labelledby` on each link group." }, { "name": "main-secondary", "description": "Expects block elements: prose, promotional content, or\n`\u003crh-footer-block\u003e` elements. Screen readers announce\ncontent in DOM order." }, { "name": "universal", "summary": "universal footer slot", "description": "Expects block elements: an `\u003crh-footer-universal\u003e` element providing\nglobal Red Hat links, logo, and copyright. Screen readers navigate\nthis as a separate footer landmark region. Must not be omitted." } ], "cssParts": [ { "name": "base", "description": "main footer container, containing all footer content." }, { "name": "header", "summary": "footer header with logo and social links", "description": "Contains the site logo and social media links. Screen readers navigate\nthese as link groups. Tab moves through logo link and social links." }, { "name": "header-primary", "description": "primary footer header content, e.g. main logo" }, { "name": "logo", "description": "main page or product logo container" }, { "name": "header-secondary", "description": "secondary footer header content, e.g. social links" }, { "name": "social-links", "description": "social links container `\u003crh-footer-links\u003e`" }, { "name": "section", "summary": "footer header with logo and social links", "description": "main content container." }, { "name": "main", "description": "main content container." }, { "name": "main-primary", "description": "container for main footer links" }, { "name": "links", "description": "container for main footer links" }, { "name": "main-secondary", "description": "container for prose or promotional content" } ], "cssProperties": [ { "name": "--rh-footer-nojs-min-height", "description": "Minimum height when JavaScript is disabled. @deprecated target `rh-footer:not(:defined)` directly" }, { "name": "--rh-footer-icon-color", "description": "Default icon color. Uses --rh-color-gray-40 design token" }, { "name": "--rh-footer-icon-color-hover", "description": "Icon color on hover/focus. Uses --rh-color-gray-30 design token" }, { "name": "--rh-footer-border-color", "description": "Border color for section dividers. Uses --rh-color-border-subtle-on-dark design token" }, { "name": "--rh-footer-accent-color", "description": "Accent color for emphasis. Uses --rh-color-accent-brand-on-light design token" }, { "name": "--rh-footer-section-side-gap", "description": "Horizontal padding for footer sections. Responsive: 16px / 32px / 64px" }, { "name": "--rh-footer-links-gap", "description": "Vertical spacing between footer link items. Defaults to --rh-space-lg" }, { "name": "--rh-footer-link-header-font-size", "description": "Font size for link column headers. Defaults to --rh-font-size-body-text-sm" }, { "name": "--rh-font-family-body-text", "description": "Footer typeface\n\nBody text font family", "default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-line-height-body-text", "description": "Footer line height\n\nLine height for body text", "default": "1.5", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-color-gray-40", "description": "Footer icon default on dark\n\nSubtle icon (hover state)", "default": "#a3a3a3", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-30", "description": "Footer icon hover default on dark\n\nSubtle borders (light theme)", "default": "#c7c7c7", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-border-subtle-on-dark", "description": "Footer border subtle on dark\n\nSubtle border color (dark theme)", "default": "#707070", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-accent-brand-on-light", "description": "Footer accent brand on light\n\nBrand red (light theme)", "default": "#ee0000", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-white", "description": "Footer text color\n\nUniversal footer accordion surface\n\nLightest surface (light theme) or primary text (dark theme)", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-size-icon-04", "description": "Footer logo width\n\n40px icon box", "default": "40px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-weight-body-text-regular", "description": "Footer body text weight\n\nRegular font weight", "default": "400", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-font-family-heading", "description": "Footer typeface\n\nHeading font family", "default": "RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-line-height-heading", "description": "Footer line height\n\nLine height for headings", "default": "1.3", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-length-xl", "description": "24px length token", "default": "24px", "syntax": "\u003clength\u003e" }, { "name": "--rh-length-3xs", "description": "Debug mode outline width\n\n2px length token", "default": "2px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-xs", "description": "4px spacer", "default": "4px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-family-code", "description": "Code font family", "default": "RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-size-code-xs", "description": "12px font size", "default": "0.75rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-length-4xs", "description": "Footer height\n\n1px length token", "default": "1px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-surface-darker", "description": "Footer background\n\nFooter background\n\nSecondary surface (dark theme)", "default": "#1f1f1f", "syntax": "\u003ccolor\u003e" }, { "name": "--pf-global--spacer--xl", "description": "Gap between promotional blocks in the secondary region", "default": "32px" }, { "name": "--rh-color-surface-darkest", "description": "Footer background\n\nPrimary surface (dark theme)", "default": "#151515", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-text-secondary", "description": "Footer text color" }, { "name": "--rh-space-md", "description": "Primary global links row gap\n\nSecondary global links row gap\n\n8px spacer", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-xs", "description": "Footer text size\n\n12px font size", "default": "0.75rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-xl", "description": "Footer universal inline gap\n\nPrimary global links column gap\n\nSecondary global links column gap\n\nFooter content gap\n\n24px spacer", "default": "24px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-lg", "description": "18px font size", "default": "1.125rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-lg", "description": "Footer section horizontal margin\n\nFooter content gap\n\nDesktop link column row gap\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-weight-heading-medium", "description": "Footer font weight\n\nMedium font weight for headings", "default": "500", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-font-size-body-text-sm", "description": "Footer link column header size\n\n14px font size", "default": "0.875rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-text-primary", "description": "Footer text color" }, { "name": "--rh-space-2xl", "description": "Footer section block padding\n\nFooter content gap\n\nFooter content gap\n\nFooter universal block gap\n\nDesktop link column inline gap\n\nFooter main padding block-start at viewport \u003e= md\n\n32px spacer", "default": "32px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-4xl", "description": "Footer main padding block-end at viewport \u003e= md\n\n64px spacer", "default": "64px", "syntax": "\u003clength\u003e" } ], "demos": [ { "description": "Full website footer with logo, social links, navigation columns, promotional blocks, and universal footer section.", "url": "https://ux.redhat.com/elements/footer/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-footer/demo/index.html" } }, { "description": "Standalone universal footer used on orphan pages or landing pages without a website-specific footer.", "url": "https://ux.redhat.com/elements/footer/demo/footer-universal/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-footer/demo/footer-universal.html" } }, { "description": "Footer using slotted anchor elements inside rh-footer-social-link instead of the href attribute.", "url": "https://ux.redhat.com/elements/footer/demo/slotted-social-links/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-footer/demo/slotted-social-links.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-footer", "declaration": { "name": "RhFooter", "module": "rh-footer/rh-footer.js" } }, { "kind": "js", "name": "RhFooter", "declaration": { "name": "RhFooter", "module": "rh-footer/rh-footer.js" } } ] }, { "kind": "javascript-module", "path": "rh-health-index/rh-health-index.js", "declarations": [ { "name": "RhHealthIndex", "summary": "Displays a health grade for a particular item or package", "description": "Health index provides a visual grade (A through F) for communicating the\nhealth or security level of an item. Authors must set the `grade`\nattribute and should place it in context that makes its purpose clear.\nIt uses ARIA `meter` role so screen reader users can read the grade.\nThis element should not receive keyboard focus, as it is non-interactive.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "grades", "type": { "text": "string" }, "default": "'ABCDEF'", "kind": "field", "static": true, "privacy": "private" }, { "name": "size", "description": "Sets the visual size of the health index. The `sm` size renders only the\nactive grade letter. The default `md` size renders all grade boxes without\nlabels. The `lg` and `xl` sizes render all grade letters with the active\ngrade highlighted and bordered.", "type": { "text": "'sm' | 'md' | 'lg' | 'xl'" }, "default": "'md'", "kind": "field", "attribute": "size", "reflects": true }, { "name": "grade", "description": "Sets the health grade from A (best) to F (worst). Grades A and B use\nsuccess status colors, C uses warning, D uses caution, and E and F use\ndanger. The value is case-insensitive; lowercase input is normalized to\nuppercase.", "type": { "text": "'A' | 'B' | 'C' | 'D' | 'E' | 'F'" }, "default": "'A'", "kind": "field", "attribute": "grade", "reflects": true } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-health-index/rh-health-index.ts#L25" }, "kind": "class", "tagName": "rh-health-index", "attributes": [ { "name": "size", "description": "Sets the visual size of the health index. The `sm` size renders only the\nactive grade letter. The default `md` size renders all grade boxes without\nlabels. The `lg` and `xl` sizes render all grade letters with the active\ngrade highlighted and bordered.", "type": { "text": "'sm' | 'md' | 'lg' | 'xl'" }, "default": "'md'", "fieldName": "size" }, { "name": "grade", "description": "Sets the health grade from A (best) to F (worst). Grades A and B use\nsuccess status colors, C uses warning, D uses caution, and E and F use\ndanger. The value is case-insensitive; lowercase input is normalized to\nuppercase.", "type": { "text": "'A' | 'B' | 'C' | 'D' | 'E' | 'F'" }, "default": "'A'", "fieldName": "grade" } ], "cssProperties": [ { "name": "--rh-space-lg", "description": "Grade label inline end spacing\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-surface-status-success", "description": "A grade small box fill\n\nA grade large box fill\n\nB grade small box fill\n\nB grade large box fill" }, { "name": "--rh-color-status-success", "description": "A grade small box border color\n\nA grade large box border color\n\nA grade medium box fill\n\nA grade accent bar color\n\nB grade small box border color\n\nB grade large box border color\n\nB grade medium box fill\n\nB grade accent bar color" }, { "name": "--rh-color-surface-status-warning", "description": "C grade small box fill\n\nC grade large box fill" }, { "name": "--rh-color-status-warning", "description": "C grade small box border color\n\nC grade large box border color\n\nC grade medium box fill\n\nC grade accent bar color" }, { "name": "--rh-color-surface-status-caution", "description": "D grade small box fill\n\nD grade large box fill" }, { "name": "--rh-color-status-caution", "description": "D grade small box border color\n\nD grade large box border color\n\nD grade medium box fill\n\nD grade accent bar color" }, { "name": "--rh-color-surface-status-danger", "description": "E grade small box fill\n\nE grade large box fill\n\nF grade small box fill\n\nF grade large box fill" }, { "name": "--rh-color-status-danger", "description": "E grade small box border color\n\nE grade large box border color\n\nE grade medium box fill\n\nE grade accent bar color\n\nF grade small box border color\n\nF grade large box border color\n\nF grade medium box fill\n\nF grade accent bar color" }, { "name": "--rh-space-xl", "description": "Default box size\n\n24px spacer", "default": "24px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-2xl", "description": "Extra-large box size\n\n32px spacer", "default": "32px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-xl", "description": "Extra-large grade font size\n\n20px font size", "default": "1.25rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-md", "description": "16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-family-code", "description": "Grade letter font family\n\nCode font family", "default": "RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-color-border-subtle", "description": "Container border color" }, { "name": "--rh-color-surface-dark", "description": "Tertiary surface (dark theme)", "default": "#383838", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-border-subtle-on-light", "description": "Medium box border in light mode\n\nSubtle border color (light theme)", "default": "#c7c7c7", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-icon-subtle", "description": "Medium box border in dark mode", "default": "#707070" }, { "name": "--rh-color-surface-lightest", "description": "Grade box surface in light mode\n\nMedium box fill in light mode\n\nPrimary surface (light theme)", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-length-xs", "description": "Accent bar height\n\n4px length token", "default": "4px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-weight-code-medium", "description": "Active grade letter weight\n\nMedium font weight", "default": "500", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-color-text-primary", "description": "Small letter color\n\nLarge letter color\n\nActive grade text color\n\nSmall grade letter color in dark mode\n\nActive grade text color" }, { "name": "--rh-color-surface-darkest", "description": "Small box fill in dark mode\n\nMedium box fill in dark mode\n\nActive box fill in dark mode\n\nPrimary surface (dark theme)", "default": "#151515", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-border-width-sm", "description": "Container border width\n\nGrade box border width\n\nActive box border width\n\n1px border width; Example: Secondary CTA or Button", "default": "1px", "syntax": "\u003clength\u003e" } ], "demos": [ { "description": "Default health index displaying a grade C at large size.", "url": "https://ux.redhat.com/elements/health-index/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-health-index/demo/index.html" } }, { "description": "Health index in all sizes and grades on light and dark color contexts.", "url": "https://ux.redhat.com/elements/health-index/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-health-index/demo/color-context.html" } }, { "description": "Health index with screen reader support showing meter role and ARIA attributes compared to native meter elements.", "url": "https://ux.redhat.com/elements/health-index/demo/screen-readers/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-health-index/demo/screen-readers.html" } }, { "description": "Health index in all four size variants (sm, md, lg, xl) with every grade from A to F.", "url": "https://ux.redhat.com/elements/health-index/demo/variants/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-health-index/demo/variants.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-health-index", "declaration": { "name": "RhHealthIndex", "module": "rh-health-index/rh-health-index.js" } }, { "kind": "js", "name": "RhHealthIndex", "declaration": { "name": "RhHealthIndex", "module": "rh-health-index/rh-health-index.js" } } ] }, { "kind": "javascript-module", "path": "rh-icon/rh-icon.js", "declarations": [ { "name": "IconResolveErrorEvent", "description": "Fired when an icon fails to load", "superclass": { "name": "ErrorEvent", "package": "global:" }, "members": [ { "name": "originalError", "description": "The original error when importing the icon module", "type": { "text": "Error" }, "kind": "field" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-icon/rh-icon.ts#L35" }, "kind": "class" }, { "name": "RhIcon", "summary": "Displays Red Hat brand icons with configurable size and loading", "description": "Use to display Red Hat brand icons as decorative or informational elements.\nHidden from assistive technology by default (role=\"presentation\"). When\n`accessible-label` is set, gains role=\"img\" and aria-label for screen\nreaders. Must not be the sole interactive element; wrap in a button or\nlink for keyboard access. Supports lazy, idle, and eager loading. Avoid\nsetting aria-hidden manually.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "onIntersect", "kind": "method", "static": true, "privacy": "private" }, { "name": "io", "default": "new IntersectionObserver(RhIcon.onIntersect)", "kind": "field", "static": true, "privacy": "private" }, { "name": "instances", "default": "new Set\u003cRhIcon\u003e()", "kind": "field", "static": true, "privacy": "private" }, { "name": "resolve", "kind": "method", "static": true, "privacy": "public" }, { "name": "set", "description": "Icon set to load from. Accepts 'standard' | 'ui' | 'microns' or any\nregistered custom set name. Controls default sizing: standard=40px,\nui=16px, microns=12px. Defaults to 'standard'.", "type": { "text": "'ui' | 'standard' | 'social' | 'microns'", "references": [ { "name": "IconSetName", "package": "@rhds/icons" } ] }, "default": "'standard'", "kind": "field", "attribute": "set", "reflects": true }, { "name": "icon", "description": "Name of the icon within the specified set. When changed, triggers a\nnew icon load. Setting to undefined clears the rendered icon.\nDefaults to undefined.", "type": { "text": "IconNameFor\u003cIconSetName\u003e" }, "kind": "field", "attribute": "icon", "reflects": true }, { "name": "accessibleLabel", "description": "Accessible label for the icon. When set, applies `role=\"img\"` and\n`aria-label` so screen readers announce the icon. When absent, the\nicon uses `role=\"presentation\"` and is hidden from assistive technology.\nUSE for icons that convey meaning not present in surrounding text.\nDefaults to undefined.", "type": { "text": "string" }, "kind": "field", "attribute": "accessible-label" }, { "name": "loading", "description": "Controls when the icon data is fetched.\n- `eager`: loads immediately, blocking the main thread\n- `idle`: waits for browser idle via requestIdleCallback\n- `lazy` (default): waits for the element to enter the viewport\nvia IntersectionObserver. Defaults to 'lazy'.", "type": { "text": "'idle' | 'lazy' | 'eager'" }, "default": "'lazy'", "kind": "field", "attribute": "loading" }, { "return": { "type": { "text": "void" } }, "name": "iconChanged", "kind": "method", "privacy": "private" }, { "return": { "type": { "text": "void" } }, "name": "accessibleLabelChanged", "kind": "method", "privacy": "private" }, { "parameters": [ { "name": "old", "type": { "text": "unknown" } } ], "name": "contentChanged", "kind": "method", "privacy": "private" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-icon/rh-icon.ts#L70" }, "kind": "class", "tagName": "rh-icon", "attributes": [ { "name": "set", "description": "Icon set to load from. Accepts 'standard' | 'ui' | 'microns' or any\nregistered custom set name. Controls default sizing: standard=40px,\nui=16px, microns=12px. Defaults to 'standard'.", "type": { "text": "'ui' | 'standard' | 'social' | 'microns'", "references": [ { "name": "IconSetName", "package": "@rhds/icons" } ] }, "default": "'standard'", "fieldName": "set" }, { "name": "icon", "description": "Name of the icon within the specified set. When changed, triggers a\nnew icon load. Setting to undefined clears the rendered icon.\nDefaults to undefined.", "type": { "text": "IconNameFor\u003cIconSetName\u003e" }, "fieldName": "icon" }, { "name": "accessible-label", "description": "Accessible label for the icon. When set, applies `role=\"img\"` and\n`aria-label` so screen readers announce the icon. When absent, the\nicon uses `role=\"presentation\"` and is hidden from assistive technology.\nUSE for icons that convey meaning not present in surrounding text.\nDefaults to undefined.", "type": { "text": "string" }, "fieldName": "accessibleLabel" }, { "name": "loading", "description": "Controls when the icon data is fetched.\n- `eager`: loads immediately, blocking the main thread\n- `idle`: waits for browser idle via requestIdleCallback\n- `lazy` (default): waits for the element to enter the viewport\nvia IntersectionObserver. Defaults to 'lazy'.", "type": { "text": "'idle' | 'lazy' | 'eager'" }, "default": "'lazy'", "fieldName": "loading" } ], "events": [ { "name": "load", "description": "Fired when icon SVG content is loaded and rendered. Bubbles.\nNo detail payload; check the element's `icon` and `set` properties.", "type": { "text": "Event", "references": [ { "name": "Event", "package": "global:" } ] } }, { "name": "error", "description": "Fired when icon fails to load. Instance of\n{@link IconResolveErrorEvent} with `originalError` containing the\nimport failure and `message` describing the icon and set.", "type": { "text": "Event", "references": [ { "name": "Event", "package": "global:" } ] } } ], "slots": [ { "name": "", "summary": "Fallback content when icon fails to load", "description": "Displayed only when the icon SVG cannot be resolved.\nShould contain meaningful text or an alternative image\nfor screen readers if the icon conveys information.\nHidden automatically when icon loads successfully." } ], "cssParts": [ { "name": "fallback", "description": "Container for the fallback (i.e. slotted) content" } ], "cssProperties": [ { "name": "--rh-icon-size", "description": "Controls both width and height (square aspect\nratio). Defaults vary by set: ui icons use `--rh-size-icon-01`\n(16px), standard icons use `--rh-size-icon-04` (40px), microns\nuse 12px (range 8-12px)." }, { "name": "--rh-size-icon-01", "description": "UI set icon size\n\n16px icon box", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-size-icon-04", "description": "Standard set icon size\n\n40px icon box", "default": "40px", "syntax": "\u003clength\u003e" } ], "demos": [ { "description": "Basic icon rendering from standard and ui icon sets.", "url": "https://ux.redhat.com/elements/icon/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-icon/demo/index.html" } }, { "description": "Icon with accessible-label attribute for screen reader announcement.", "url": "https://ux.redhat.com/elements/icon/demo/accessibility/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-icon/demo/accessibility.html" } }, { "description": "Test for dynamically removing and re-adding icon elements.", "url": "https://ux.redhat.com/elements/icon/demo/test-remove-icon-dynamic/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-icon/demo/test-remove-icon-dynamic.html" } } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "IconResolveErrorEvent", "declaration": { "name": "IconResolveErrorEvent", "module": "rh-icon/rh-icon.js" } }, { "kind": "custom-element-definition", "name": "rh-icon", "declaration": { "name": "RhIcon", "module": "rh-icon/rh-icon.js" } }, { "kind": "js", "name": "RhIcon", "declaration": { "name": "RhIcon", "module": "rh-icon/rh-icon.js" } } ] }, { "kind": "javascript-module", "path": "rh-jump-links/rh-jump-link.js", "declarations": [ { "name": "RhJumpLink", "summary": "A single jump link targeting a page section", "description": "An individual navigation link within `\u003crh-jump-links\u003e` that scrolls the\npage to a target section. Renders as `role=\"listitem\"` with an internal\nanchor. When active, sets `aria-current=\"location\"` for screen readers.\nTab moves focus to the link; Enter or click scrolls to the `href`\ntarget. Must be a child of `\u003crh-jump-links\u003e` or `\u003crh-jump-links-list\u003e`.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "active", "description": "Whether this link represents the currently visible section. When true, a bold border and `aria-current=\"location\"` are applied. Defaults to false.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "active", "reflects": true }, { "name": "href", "description": "The URL fragment (e.g. `\"#section-id\"`) this link navigates to. Must match an element ID on the page. Defaults to undefined.", "type": { "text": "string" }, "kind": "field", "attribute": "href", "reflects": true }, { "return": { "type": { "text": "void" } }, "name": "activeChanged", "kind": "method", "privacy": "protected" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-jump-links/rh-jump-link.ts#L29" }, "kind": "class", "tagName": "rh-jump-link", "attributes": [ { "name": "active", "description": "Whether this link represents the currently visible section. When true, a bold border and `aria-current=\"location\"` are applied. Defaults to false.", "type": { "text": "boolean" }, "default": "false", "fieldName": "active" }, { "name": "href", "description": "The URL fragment (e.g. `\"#section-id\"`) this link navigates to. Must match an element ID on the page. Defaults to undefined.", "type": { "text": "string" }, "fieldName": "href" } ], "slots": [ { "name": "", "summary": "link label text (default slot)", "description": "Text content for this jump link. Serves as the accessible\nname for the internal anchor element, so it should match\nor closely reflect the target section heading (per WCAG\n2.4.6 Headings and Labels). Keep text concise." } ], "cssProperties": [ { "name": "--rh-color-interactive-secondary-default", "description": "Jump link text color" }, { "name": "--rh-space-md", "description": "Jump link vertical spacing\n\n8px spacer", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-jump-link-max-width", "description": "Vertical link max width override", "default": "calc(var(--rh-length-md, 8px) * 40)" }, { "name": "--rh-length-md", "description": "8px length token", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-lg", "description": "Jump link vertical inline-end padding\n\nJump link inner spacing\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-interactive-primary-default", "description": "Focus ring color" }, { "name": "--rh-border-radius-default", "description": "Jump link corner rounding\n\n3px border radius; Example: Card", "default": "3px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-color-text-primary", "description": "Jump link hover text color\n\nJump link focus text color\n\nJump link active text color" }, { "name": "--rh-color-brand-red", "description": "Jump link active border color" }, { "name": "--rh-border-width-lg", "description": "Vertical active border width\n\nHorizontal active border width\n\n3px border width: Example: Expanded Accordion panel", "default": "3px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-border-status-neutral", "description": "Jump link hover/focus border color\n\nVertical active border color\n\nHorizontal active border color" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-jump-link", "declaration": { "name": "RhJumpLink", "module": "rh-jump-links/rh-jump-link.js" } }, { "kind": "js", "name": "RhJumpLink", "declaration": { "name": "RhJumpLink", "module": "rh-jump-links/rh-jump-link.js" } } ] }, { "kind": "javascript-module", "path": "rh-jump-links/rh-jump-links-list.js", "declarations": [ { "name": "RhJumpLinksList", "summary": "Nested group of jump links with an expandable parent", "description": "Provides a nested, expandable group for organizing related\n`\u003crh-jump-link\u003e` elements within `\u003crh-jump-links\u003e`. Put the link that\nlabels this group in `slot=\"parent\"`. In vertical orientation, child\nlinks indent beneath the parent; in horizontal orientation the\ngroup is hidden. Sets `aria-current=\"location\"` and\n`role=\"listitem\"` on itself for screen readers. Avoid deeply\nnesting multiple levels.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "active", "description": "Whether any child link in this group is the active section. When true, the parent border highlights and child list expands (vertical only). Defaults to false.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "active", "reflects": true }, { "return": { "type": { "text": "void" } }, "name": "activeChanged", "kind": "method", "privacy": "protected" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-jump-links/rh-jump-links-list.ts#L31" }, "kind": "class", "tagName": "rh-jump-links-list", "attributes": [ { "name": "active", "description": "Whether any child link in this group is the active section. When true, the parent border highlights and child list expands (vertical only). Defaults to false.", "type": { "text": "boolean" }, "default": "false", "fieldName": "active" } ], "slots": [ { "name": "parent", "summary": "parent link for this nested group (parent slot)", "description": "A single `\u003crh-jump-link\u003e` that labels this group. When clicked,\nthe nested list expands in vertical orientation. Screen readers\nannounce it as a list item within the navigation landmark." }, { "name": "", "summary": "child jump links (default slot)", "description": "One or more `\u003crh-jump-link\u003e` children that appear nested under\nthe parent link. In vertical mode, these indent with additional\npadding. Hidden in horizontal orientation. Each child has\n`role=\"listitem\"` for screen readers." } ], "cssProperties": [ { "name": "--rh-length-4xs", "description": "List border width\n\n1px length token", "default": "1px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-border-subtle", "description": "List border color", "default": "1px" }, { "name": "--rh-space-lg", "description": "Jump link end spacing\n\nNested link inline-start padding\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-length-xs", "description": "Vertical active indicator width\n\nHorizontal active indicator width\n\n4px length token", "default": "4px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-brand-red", "description": "Vertical active indicator color\n\nHorizontal active indicator color", "default": "4px" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-jump-links-list", "declaration": { "name": "RhJumpLinksList", "module": "rh-jump-links/rh-jump-links-list.js" } }, { "kind": "js", "name": "RhJumpLinksList", "declaration": { "name": "RhJumpLinksList", "module": "rh-jump-links/rh-jump-links-list.js" } } ] }, { "kind": "javascript-module", "path": "rh-jump-links/rh-jump-links.js", "declarations": [ { "name": "RhJumpLinks", "summary": "Persistent navigation links to page sections", "description": "Persistent in-page navigation for jumping to content sections.\nRenders a `role=\"navigation\"` landmark with `aria-label` from\n`accessible-label` (required per WCAG 1.3.6 when multiple nav\nlandmarks exist). Supports vertical and horizontal orientations\nwith ScrollSpy auto-highlighting. Avoid nesting more than one\nlevel deep.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "orientation", "description": "Controls the layout direction of jump link items.\n\n- `vertical` (default) - Links are stacked vertically, typically displayed on the side of the page\n- `horizontal` - Links are arranged in a row, with overflow scroll controls when needed\n\n## Usage guidelines\n- Use `vertical` for sidebar navigation on desktop layouts\n- Use `horizontal` for mobile-friendly layouts or when space is limited\n- When horizontal, scroll buttons appear automatically to navigate overflowing links\n- The orientation cascades to child `\u003crh-jump-link\u003e` and `\u003crh-jump-links-list\u003e` elements", "type": { "text": "'horizontal' | 'vertical'" }, "default": "'vertical'", "kind": "field", "attribute": "orientation", "reflects": true }, { "name": "accessibleLabel", "description": "Accessible name for the navigation landmark.\n\nProvides an `aria-label` for the jump links navigation element, helping screen reader\nusers identify and navigate to this section. This is especially important when multiple\nnavigation landmarks exist on the page.\n\n## Usage guidelines\n- Use a descriptive label like \"On this page\" or \"Page sections\"\n- Ensure the label is unique if you have multiple `\u003crh-jump-links\u003e` on the page\n- Keep labels concise and meaningful for screen reader users\n\n## Accessibility\n- Jump links use `role=\"navigation\"` creating a navigation landmark\n- The accessible label helps distinguish this navigation from others on the page\n- Without an accessible label, screen readers will announce \"navigation\" without context", "type": { "text": "string" }, "kind": "field", "attribute": "accessible-label" }, { "return": { "type": { "text": "void" } }, "name": "firstUpdated", "kind": "method" }, { "name": "labelChanged", "kind": "method", "privacy": "protected" }, { "name": "orientationChanged", "kind": "method" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-jump-links/rh-jump-links.ts#L38" }, "kind": "class", "tagName": "rh-jump-links", "attributes": [ { "name": "orientation", "description": "Controls the layout direction of jump link items.\n\n- `vertical` (default) - Links are stacked vertically, typically displayed on the side of the page\n- `horizontal` - Links are arranged in a row, with overflow scroll controls when needed\n\n## Usage guidelines\n- Use `vertical` for sidebar navigation on desktop layouts\n- Use `horizontal` for mobile-friendly layouts or when space is limited\n- When horizontal, scroll buttons appear automatically to navigate overflowing links\n- The orientation cascades to child `\u003crh-jump-link\u003e` and `\u003crh-jump-links-list\u003e` elements", "type": { "text": "'horizontal' | 'vertical'" }, "default": "'vertical'", "fieldName": "orientation" }, { "name": "accessible-label", "description": "Accessible name for the navigation landmark.\n\nProvides an `aria-label` for the jump links navigation element, helping screen reader\nusers identify and navigate to this section. This is especially important when multiple\nnavigation landmarks exist on the page.\n\n## Usage guidelines\n- Use a descriptive label like \"On this page\" or \"Page sections\"\n- Ensure the label is unique if you have multiple `\u003crh-jump-links\u003e` on the page\n- Keep labels concise and meaningful for screen reader users\n\n## Accessibility\n- Jump links use `role=\"navigation\"` creating a navigation landmark\n- The accessible label helps distinguish this navigation from others on the page\n- Without an accessible label, screen readers will announce \"navigation\" without context", "type": { "text": "string" }, "fieldName": "accessibleLabel" } ], "events": [ { "name": "toggle", "description": "Fired when the `expanded` disclosure widget is toggled.\nDoes not carry additional detail data.", "type": { "text": "Event", "references": [ { "name": "Event", "package": "global:" } ] } } ], "slots": [ { "name": "", "summary": "navigation link items and nested lists (default slot)", "description": "Contains `\u003crh-jump-link\u003e` elements and optional\n`\u003crh-jump-links-list\u003e` groups. Each child receives\n`role=\"listitem\"` within the `role=\"list\"` container,\nforming an accessible navigation structure for screen\nreaders. Link each item to a section ID (`href=\"#id\"`)\ncorresponding to a heading or landmark on the page.\nPlace links in page order so assistive technology users\nexperience a logical sequence. Use nested lists\nsparingly to avoid overwhelming users." } ], "cssProperties": [ { "name": "--rh-length-4xs", "description": "Jump links border width\n\n1px length token", "default": "1px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-3xl", "description": "Jump link horizontal margin\n\n48px spacer", "default": "48px", "syntax": "\u003clength\u003e" }, { "name": "--rh-border-width-sm", "description": "Horizontal top border width\n\nHorizontal bottom border width\n\n1px border width; Example: Secondary CTA or Button", "default": "1px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-border-subtle", "description": "Jump links border color\n\nHorizontal top border color\n\nHorizontal bottom border color", "default": "1px" }, { "name": "--rh-space-lg", "description": "Jump link horizontal spacing\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-gray-40", "description": "Disabled scroll button text color in light mode\n\nSubtle icon (hover state)", "default": "#a3a3a3", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-50", "description": "Disabled scroll button text color in dark mode\n\nSubtle icon", "default": "#707070", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-text-primary", "description": "Scroll button hover text color" } ], "demos": [ { "description": "Default vertical jump links with scroll spy tracking active sections.", "url": "https://ux.redhat.com/elements/jump-links/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-jump-links/demo/index.html" } }, { "description": "Horizontal jump links layout with overflow scroll buttons.", "url": "https://ux.redhat.com/elements/jump-links/demo/horizontal/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-jump-links/demo/horizontal.html" } }, { "description": "Jump links with nested rh-jump-links-list groups for hierarchical navigation.", "url": "https://ux.redhat.com/elements/jump-links/demo/nested/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-jump-links/demo/nested.html" } }, { "description": "Responsive jump links switching between vertical and horizontal layouts.", "url": "https://ux.redhat.com/elements/jump-links/demo/responsive/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-jump-links/demo/responsive.html" } }, { "description": "Jump links alongside page content demonstrating scroll spy behavior.", "url": "https://ux.redhat.com/elements/jump-links/demo/with-content/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-jump-links/demo/with-content.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-jump-links", "declaration": { "name": "RhJumpLinks", "module": "rh-jump-links/rh-jump-links.js" } }, { "kind": "js", "name": "RhJumpLinks", "declaration": { "name": "RhJumpLinks", "module": "rh-jump-links/rh-jump-links.js" } } ] }, { "kind": "javascript-module", "path": "rh-menu-dropdown/rh-menu-dropdown.js", "declarations": [ { "name": "MenuDropdownSelectEvent", "description": "Fired when a user selects an action or link from the menu", "superclass": { "name": "Event", "package": "global:" }, "members": [ { "name": "selectedItem", "type": { "text": "RhMenuItem" }, "kind": "field" }, { "name": "text", "type": { "text": "string" }, "kind": "field" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-menu-dropdown/rh-menu-dropdown.ts#L20" }, "kind": "class" }, { "name": "RhMenuDropdown", "summary": "A collapsible menu for presenting a list of options or actions", "description": "A toggle button that reveals a list of actions or links, for use\nwhen space is limited or context-specific options are needed. Users\nmust interact with the toggle to expand or collapse the menu.\nSupports keyboard navigation: Enter, Space, or ArrowDown opens\nthe menu; Escape closes it. Screen readers should perceive the\ntoggle via `aria-haspopup` and `aria-expanded`. Compact variants\nmust set `accessible-label` for assistive technologies.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "instances", "default": "new Set\u003cRhMenuDropdown\u003e()", "kind": "field", "static": true, "privacy": "private" }, { "name": "open", "description": "whether the dropdown is currently open.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "open", "reflects": true }, { "name": "variant", "description": "Defines the visual style of the dropdown.\nSetting it to 'borderless' removes the default border styling.", "type": { "text": "'borderless'" }, "kind": "field", "attribute": "variant", "reflects": true }, { "name": "layout", "description": "The 'compact' layout reduces spacing and add the rh-icon `ellipsis-vertical-fill`.", "type": { "text": "'compact'" }, "kind": "field", "attribute": "layout", "reflects": true }, { "name": "disabled", "description": "Disables user interaction with the dropdown. When true, the dropdown cannot\nbe opened or interacted with, and appears visually disabled.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "disabled", "reflects": true }, { "name": "accessibleLabel", "description": "Provides an accessible name for the dropdown's trigger, improving screen reader support.\nThis label is announced to assistive technologies to describe the purpose of\nthe compact menu dropdown.", "type": { "text": "string" }, "default": "'Toggle menu'", "kind": "field", "attribute": "accessible-label", "reflects": true }, { "name": "firstUpdated", "kind": "method" }, { "name": "focus", "description": "Moves focus to the currently active (focused) item.", "kind": "method" }, { "name": "items", "type": { "text": "HTMLElement[]" }, "readonly": true, "kind": "field" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-menu-dropdown/rh-menu-dropdown.ts#L48" }, "kind": "class", "tagName": "rh-menu-dropdown", "attributes": [ { "name": "open", "description": "whether the dropdown is currently open.", "type": { "text": "boolean" }, "default": "false", "fieldName": "open" }, { "name": "variant", "description": "Defines the visual style of the dropdown.\nSetting it to 'borderless' removes the default border styling.", "type": { "text": "'borderless'" }, "fieldName": "variant" }, { "name": "layout", "description": "The 'compact' layout reduces spacing and add the rh-icon `ellipsis-vertical-fill`.", "type": { "text": "'compact'" }, "fieldName": "layout" }, { "name": "disabled", "description": "Disables user interaction with the dropdown. When true, the dropdown cannot\nbe opened or interacted with, and appears visually disabled.", "type": { "text": "boolean" }, "default": "false", "fieldName": "disabled" }, { "name": "accessible-label", "description": "Provides an accessible name for the dropdown's trigger, improving screen reader support.\nThis label is announced to assistive technologies to describe the purpose of\nthe compact menu dropdown.", "type": { "text": "string" }, "default": "'Toggle menu'", "fieldName": "accessibleLabel" } ], "events": [ { "name": "select", "description": "Fired when a user selects an\naction or link from the menu. The event detail includes the selected\n`RhMenuItem` element and its text content.", "type": { "text": "MenuDropdownSelectEvent" } } ], "slots": [ { "name": "toggle-label", "summary": "Toggle label", "description": "Inline content for the toggle button, such as a\n`\u003cspan\u003e` or `\u003crh-icon\u003e`. Should be short and\ndescriptive. Screen readers announce this as the\naccessible name for the menu button. Not used in\ncompact layout; use `accessible-label` instead." }, { "name": "", "summary": "Menu content", "description": "Must contain `\u003crh-menu-item\u003e` elements. May include\n`\u003chr\u003e` separators or `\u003crh-menu-item-group\u003e` for\ngrouped items. Items receive ARIA menuitem role and\nfocus via roving tabindex for keyboard and screen\nreader navigation." } ], "cssProperties": [ { "name": "--rh-border-width-sm", "description": "Menu Dropdown Border width\n\n1px border width; Example: Secondary CTA or Button", "default": "1px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-text-primary", "description": "Default text color" }, { "name": "--rh-box-shadow-md", "description": "Menu panel elevation shadow\n\nMedium box shadow", "default": "0 4px 6px 1px rgba(21, 21, 21, 0.25)", "syntax": "\u003cshadow\u003e" }, { "name": "--rh-color-accent-base-on-light", "description": "Interactive border color in light mode\n\nInline link (light theme)", "default": "#0066cc", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-accent-base-on-dark", "description": "Interactive border color in dark mode\n\nInline link (dark theme)", "default": "#92c5f9", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-font-family-body-text", "description": "Toggle label font family\n\nToggle button font family\n\nBody text font family", "default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-size-body-text-md", "description": "Toggle label font size\n\nToggle button font size\n\n16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-weight-body-text-regular", "description": "Toggle label font weight\n\nToggle button font weight\n\nRegular font weight", "default": "400", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-line-height-code", "description": "Toggle label line height\n\nToggle button line height\n\nLine height for code", "default": "1.5", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-space-sm", "description": "Toggle button block padding\n\n6px spacer", "default": "6px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-lg", "description": "Toggle button inline padding\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-border-radius-default", "description": "Menu panel corner rounding\n\nToggle button corner rounding\n\n3px border radius; Example: Card", "default": "3px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-color-surface-lightest", "description": "Menu panel background in light mode\n\nToggle background in light mode\n\nPrimary surface (light theme)", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-surface-darkest", "description": "Menu panel background in dark mode\n\nToggle background in dark mode\n\nPrimary surface (dark theme)", "default": "#151515", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-surface-lighter", "description": "Compact hover background in light mode\n\nTertiary surface (light theme)", "default": "#f2f2f2", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-surface-darker", "description": "Compact hover background in dark mode\n\nSecondary surface (dark theme)", "default": "#1f1f1f", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-length-3xs", "description": "Active border spread width\n\nFocus outline width\n\nFocus outline offset\n\nOpen border spread width\n\nFocus outline width\n\nFocus outline offset\n\nFocus/active border spread width\n\n2px length token", "default": "2px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-gray-30", "description": "Border color in light mode\n\nBoxed border color in light mode\n\nDisabled background in light mode\n\nSubtle borders (light theme)", "default": "#c7c7c7", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-40", "description": "Disabled background in dark mode\n\nSubtle icon (hover state)", "default": "#a3a3a3", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-space-md", "description": "Menu panel block padding\n\nSpace between label and caret icon\n\nCompact toggle padding\n\nSpace after slotted icon in toggle label\n\n8px spacer", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-gray-50", "description": "Border color in dark mode\n\nBoxed border color in dark mode\n\nDisabled text color in light mode\n\nSubtle icon", "default": "#707070", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-60", "description": "Disabled text color in dark mode\n\nSecondary text (light theme)", "default": "#4d4d4d", "syntax": "\u003ccolor\u003e" } ], "demos": [ { "description": "Basic menu dropdown with action items, a disabled item, and an HR separator.", "url": "https://ux.redhat.com/elements/menu-dropdown/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-menu-dropdown/demo/index.html" } }, { "description": "Menu dropdown with anchor link items, including disabled and external links.", "url": "https://ux.redhat.com/elements/menu-dropdown/demo/basic-toggle-with-anchor-links/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-menu-dropdown/demo/basic-toggle-with-anchor-links.html" } }, { "description": "Menu dropdown where the toggle width fits its text content.", "url": "https://ux.redhat.com/elements/menu-dropdown/demo/basic-toggle-with-fit-text/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-menu-dropdown/demo/basic-toggle-with-fit-text.html" } }, { "description": "Menu dropdown with an icon placed before the toggle label text.", "url": "https://ux.redhat.com/elements/menu-dropdown/demo/basic-toggle-with-icon-on-left/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-menu-dropdown/demo/basic-toggle-with-icon-on-left.html" } }, { "description": "Menu dropdown rendered across multiple color contexts (light and dark).", "url": "https://ux.redhat.com/elements/menu-dropdown/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-menu-dropdown/demo/color-context.html" } }, { "description": "Compact menu dropdown with borderless variant, using a vertical ellipsis icon toggle.", "url": "https://ux.redhat.com/elements/menu-dropdown/demo/compact-borderless-variant/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-menu-dropdown/demo/compact-borderless-variant.html" } }, { "description": "Compact layout menu dropdown with a vertical ellipsis icon as the toggle.", "url": "https://ux.redhat.com/elements/menu-dropdown/demo/compact/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-menu-dropdown/demo/compact.html" } }, { "description": "Menu dropdown in a disabled state, preventing user interaction.", "url": "https://ux.redhat.com/elements/menu-dropdown/demo/disabled/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-menu-dropdown/demo/disabled.html" } }, { "description": "Menu dropdown with icons displayed alongside each menu item.", "url": "https://ux.redhat.com/elements/menu-dropdown/demo/drodown-items-with-icons/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-menu-dropdown/demo/drodown-items-with-icons.html" } }, { "description": "Menu dropdown where each item includes a supplementary description.", "url": "https://ux.redhat.com/elements/menu-dropdown/demo/dropdown-items-with-item-descriptions/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-menu-dropdown/demo/dropdown-items-with-item-descriptions.html" } }, { "description": "Menu dropdown with items organized under group headings using rh-menu-item-group.", "url": "https://ux.redhat.com/elements/menu-dropdown/demo/dropdown-with-group-headings/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-menu-dropdown/demo/dropdown-with-group-headings.html" } }, { "description": "Menu dropdown using only an icon as the toggle label, with no visible text.", "url": "https://ux.redhat.com/elements/menu-dropdown/demo/info-action-icon-only/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-menu-dropdown/demo/info-action-icon-only.html" } } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "MenuDropdownSelectEvent", "declaration": { "name": "MenuDropdownSelectEvent", "module": "rh-menu-dropdown/rh-menu-dropdown.js" } }, { "kind": "custom-element-definition", "name": "rh-menu-dropdown", "declaration": { "name": "RhMenuDropdown", "module": "rh-menu-dropdown/rh-menu-dropdown.js" } }, { "kind": "js", "name": "RhMenuDropdown", "declaration": { "name": "RhMenuDropdown", "module": "rh-menu-dropdown/rh-menu-dropdown.js" } } ] }, { "kind": "javascript-module", "path": "rh-menu/rh-menu-item-group.js", "declarations": [ { "name": "RhMenuItemGroup", "summary": "A labeled group of related menu items", "description": "A menu item group provides a labeled section within an `rh-menu`, allowing\nauthors to organize related `rh-menu-item` elements under a visible heading.\nThe heading is rendered as a presentational span, so screen reader users\nnavigate items via the parent menubar role. Authors should set the\n`group-heading` attribute when grouping items to provide visual context.\nFocus management is handled by the parent `rh-menu` roving tabindex.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "groupHeading", "description": "The visible heading text for this group of menu items.\nWhen set, a label appears above the grouped items to provide\nvisual context for the section.", "type": { "text": "string" }, "kind": "field", "attribute": "group-heading", "reflects": true } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-menu/rh-menu-item-group.ts#L19" }, "kind": "class", "tagName": "rh-menu-item-group", "attributes": [ { "name": "group-heading", "description": "The visible heading text for this group of menu items.\nWhen set, a label appears above the grouped items to provide\nvisual context for the section.", "type": { "text": "string" }, "fieldName": "groupHeading" } ], "slots": [ { "name": "", "summary": "Group items", "description": "Accepts `rh-menu-item` elements. Authors must not place\nnon-interactive content in this slot. Screen reader users\nnavigate grouped items via the parent menu keyboard\ncontrols." } ], "cssProperties": [ { "name": "--rh-space-md", "description": "Vertical heading spacing\n\n8px spacer", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-lg", "description": "Horizontal heading padding\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-family-body-text", "description": "Group heading font family\n\nBody text font family", "default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-size-body-text-xs", "description": "Heading text size\n\n12px font size", "default": "0.75rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-weight-body-text-regular", "description": "Heading font weight\n\nRegular font weight", "default": "400", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-color-interactive-secondary-default", "description": "Heading text color" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-menu-item-group", "declaration": { "name": "RhMenuItemGroup", "module": "rh-menu/rh-menu-item-group.js" } }, { "kind": "js", "name": "RhMenuItemGroup", "declaration": { "name": "RhMenuItemGroup", "module": "rh-menu/rh-menu-item-group.js" } } ] }, { "kind": "javascript-module", "path": "rh-menu/rh-menu-item.js", "declarations": [ { "name": "RhMenuItem", "summary": "A single action or link within a menu", "description": "A menu item provides a single action or link within an `rh-menu`.\nIt renders with the ARIA `menuitem` role for screen reader users.\nAuthors must provide visible text content in the default slot.\nWhen `href` is set, the item behaves as a hyperlink; authors should\nset the `external` attribute for links that open in a new tab. Focus\nis managed by the parent `rh-menu` via roving tabindex, so keyboard\nusers can navigate items with Arrow keys.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "disabled", "description": "Whether the menu item is disabled.\nDisabled items are not interactive and are visually indicated as such.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "disabled", "reflects": true }, { "name": "href", "description": "Specifies the destination URL for the menu item.\nIf specified, the menu item behaves as a hyperlink.", "type": { "text": "string" }, "default": "''", "kind": "field", "attribute": "href" }, { "name": "external", "description": "Whether the link should open externally.\nWhen true, the link opens in a new browser tab or window\nand includes appropriate security attributes (`target=\"_blank\"` and `rel=\"noopener noreferrer\"`).", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "external" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-menu/rh-menu-item.ts#L24" }, "kind": "class", "tagName": "rh-menu-item", "attributes": [ { "name": "disabled", "description": "Whether the menu item is disabled.\nDisabled items are not interactive and are visually indicated as such.", "type": { "text": "boolean" }, "default": "false", "fieldName": "disabled" }, { "name": "href", "description": "Specifies the destination URL for the menu item.\nIf specified, the menu item behaves as a hyperlink.", "type": { "text": "string" }, "default": "''", "fieldName": "href" }, { "name": "external", "description": "Whether the link should open externally.\nWhen true, the link opens in a new browser tab or window\nand includes appropriate security attributes (`target=\"_blank\"` and `rel=\"noopener noreferrer\"`).", "type": { "text": "boolean" }, "default": "false", "fieldName": "external" } ], "slots": [ { "name": "", "summary": "Menu item label", "description": "Inline text label for the menu item. Must contain visible\ntext for screen reader accessibility." }, { "name": "icon", "summary": "Icon slot", "description": "An icon displayed alongside the menu item label.\nAppears before the text in LTR layouts. Screen reader\nusers should receive an accessible label via\nthe icon element itself." }, { "name": "description", "summary": "Description slot", "description": "Supplementary description text displayed below the menu\nitem label. Screen reader users will perceive this as\nadditional context for the menu item." } ], "cssProperties": [ { "name": "--rh-space-lg", "description": "Horizontal item padding\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-md", "description": "Body text size\n\n16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-weight-body-text-regular", "description": "Body text font weight\n\nRegular font weight", "default": "400", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-line-height-code", "description": "Body text line height\n\nLine height for code", "default": "1.5", "syntax": "\u003ccustom-ident\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-gray-40", "description": "Subtle icon (hover state)", "default": "#a3a3a3", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-interactive-secondary-default", "description": "External link icon color\n\nExternal link icon fill" }, { "name": "--rh-space-md", "description": "Vertical item padding\n\nSpace between icon and label\n\nSpace before external icon\n\nIcon spacing in items\n\n8px spacer", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-surface-lighter", "description": "Tertiary surface (light theme)", "default": "#f2f2f2", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-surface-darker", "description": "Secondary surface (dark theme)", "default": "#1f1f1f", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-interactive-primary-hover" }, { "name": "--rh-border-width-md", "description": "2px border width: Example: Alert", "default": "2px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-accent-base-on-light", "description": "Inline link (light theme)", "default": "#0066cc", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-accent-base-on-dark", "description": "Inline link (dark theme)", "default": "#92c5f9", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-border-radius-default", "description": "3px border radius; Example: Card", "default": "3px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-color-gray-50", "description": "Subtle icon", "default": "#707070", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-60", "description": "Secondary text (light theme)", "default": "#4d4d4d", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-font-family-body-text", "description": "Body text font family\n\nDescription font family\n\nBody text font family", "default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-size-body-text-sm", "description": "Description font size\n\n14px font size", "default": "0.875rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-weight-heading-regular", "description": "Description font weight\n\nRegular font weight for headings", "default": "400", "syntax": "\u003cnumber\u003e" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-menu-item", "declaration": { "name": "RhMenuItem", "module": "rh-menu/rh-menu-item.js" } }, { "kind": "js", "name": "RhMenuItem", "declaration": { "name": "RhMenuItem", "module": "rh-menu/rh-menu-item.js" } } ] }, { "kind": "javascript-module", "path": "rh-menu/rh-menu.js", "declarations": [ { "name": "MenuToggleEvent", "superclass": { "name": "Event", "package": "global:" }, "members": [ { "name": "open", "type": { "text": "boolean" }, "kind": "field" }, { "name": "menu", "type": { "text": "HTMLElement" }, "kind": "field" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-menu/rh-menu.ts#L15" }, "kind": "class" }, { "name": "RhMenu", "summary": "Vertically stacked list of menu actions or links", "description": "A menu provides a list of actions or links in a vertical layout.\nIt is typically used as a subcomponent within `rh-menu-dropdown`, which\nallows users to select from available options. Authors must ensure that\nslotted content consists of `rh-menu-item`, `rh-menu-item-group`, or\nanchor elements. The element assigns the ARIA `menubar` role and manages\nkeyboard focus with a roving tabindex, so users can navigate items using\nArrow keys and Tab.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "parameters": [ { "name": "items", "type": { "text": "HTMLElement[]" } } ], "return": { "type": { "text": "HTMLElement[]" } }, "name": "getItems", "description": "override or set to add items to the roving tab index controller", "kind": "method" }, { "name": "activeItem", "readonly": true, "kind": "field" }, { "parameters": [ { "name": "item", "type": { "text": "HTMLElement" } } ], "name": "activateItem", "kind": "method" }, { "name": "focus", "kind": "method" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-menu/rh-menu.ts#L43" }, "kind": "class", "tagName": "rh-menu", "events": [ { "name": "toggle", "description": "Fired when the menu opens or closes.\nThe event detail includes the `open` boolean state and a reference\nto the menu element.", "type": { "text": "MenuToggleEvent" } } ], "slots": [ { "name": "", "summary": "Menu items", "description": "Accepts `rh-menu-item`, `rh-menu-item-group`, anchor, or\n`\u003chr\u003e` elements. Screen reader users perceive these as\nmenubar items. Authors should not place non-interactive\ncontent in this slot." } ], "cssParts": [ { "name": "menu", "summary": "Menu items", "description": "Accepts `rh-menu-item`, `rh-menu-item-group`, anchor, or\n`\u003chr\u003e` elements. Screen reader users perceive these as\nmenubar items. Authors should not place non-interactive\ncontent in this slot." } ], "cssProperties": [ { "name": "--rh-color-interactive-primary-default", "description": "Default link color" }, { "name": "--rh-color-interactive-primary-hover", "description": "Link hover color" }, { "name": "--rh-color-interactive-primary-visited-default", "description": "Visited link color\n\nVisited hover link color" }, { "name": "--rh-border-width-sm", "description": "Separator border width\n\n1px border width; Example: Secondary CTA or Button", "default": "1px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-gray-30", "description": "Light separator color\n\nSubtle borders (light theme)", "default": "#c7c7c7", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-50", "description": "Dark separator color\n\nSubtle icon", "default": "#707070", "syntax": "\u003ccolor\u003e" } ], "demos": [ { "description": "Basic menu with rh-button items demonstrating a simple vertical list of actions.", "url": "https://ux.redhat.com/elements/menu/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-menu/demo/index.html" } }, { "description": "Menu with slotted anchor links rendered across light and dark color contexts.", "url": "https://ux.redhat.com/elements/menu/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-menu/demo/color-context.html" } }, { "description": "Menu using rh-menu-item sub-components for structured menu entries.", "url": "https://ux.redhat.com/elements/menu/demo/menu-item/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-menu/demo/menu-item.html" } }, { "description": "Menu positioned to the left with persistent visibility.", "url": "https://ux.redhat.com/elements/menu/demo/position-left/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-menu/demo/position-left.html" } }, { "description": "Menu positioned to the right with anchor link items.", "url": "https://ux.redhat.com/elements/menu/demo/position-right/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-menu/demo/position-right.html" } }, { "description": "Menu positioned above the trigger with button items.", "url": "https://ux.redhat.com/elements/menu/demo/position-top/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-menu/demo/position-top.html" } } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "MenuToggleEvent", "declaration": { "name": "MenuToggleEvent", "module": "rh-menu/rh-menu.js" } }, { "kind": "custom-element-definition", "name": "rh-menu", "declaration": { "name": "RhMenu", "module": "rh-menu/rh-menu.js" } }, { "kind": "js", "name": "RhMenu", "declaration": { "name": "RhMenu", "module": "rh-menu/rh-menu.js" } } ] }, { "kind": "javascript-module", "path": "rh-navigation-link/rh-navigation-link.js", "declarations": [ { "name": "RhNavigationLink", "summary": "A link that can be used as a child of navigation elements.", "description": "Navigation Link provides a link for use within Red Hat navigation\ncomponents. It must be a child of elements like `rh-subnav` or\n`rh-navigation-primary` that provide the parent list context. Authors\nshould set `href` or slot an `\u003ca\u003e` element directly; authors must not\nslot a `\u003cbutton\u003e`. When `current-page` is set, `aria-current=\"page\"` is\napplied so screen readers announce the active page. Uses\n`delegatesFocus` so Tab focus passes to the anchor.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "icon", "description": "Shorthand for the `icon` slot, the value is icon name", "type": { "text": "IconNameFor\u003cIconSetName\u003e" }, "kind": "field", "attribute": "icon" }, { "name": "iconSet", "description": "Icon set for the `icon` property - 'ui' by default", "type": { "text": "'ui' | 'standard' | 'social' | 'microns'", "references": [ { "name": "IconSetName", "package": "@rhds/icons" } ] }, "kind": "field", "attribute": "icon-set" }, { "name": "href", "description": "The URL to navigate to when the link is clicked", "type": { "text": "string" }, "kind": "field", "attribute": "href", "reflects": true }, { "name": "currentPage", "description": "Indicates that this link refers to the current page for accessibility; used with the `href` attribute.\nSets the `aria-current` attribute to 'page' on the anchor element internally in the shadow DOM.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "current-page" }, { "name": "scheduleUpdate", "kind": "method" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-link/rh-navigation-link.ts#L28" }, "kind": "class", "tagName": "rh-navigation-link", "attributes": [ { "name": "icon", "description": "Shorthand for the `icon` slot, the value is icon name", "type": { "text": "IconNameFor\u003cIconSetName\u003e" }, "fieldName": "icon" }, { "name": "icon-set", "description": "Icon set for the `icon` property - 'ui' by default", "type": { "text": "'ui' | 'standard' | 'social' | 'microns'", "references": [ { "name": "IconSetName", "package": "@rhds/icons" } ] }, "fieldName": "iconSet" }, { "name": "href", "description": "The URL to navigate to when the link is clicked", "type": { "text": "string" }, "fieldName": "href" }, { "name": "current-page", "description": "Indicates that this link refers to the current page for accessibility; used with the `href` attribute.\nSets the `aria-current` attribute to 'page' on the anchor element internally in the shadow DOM.", "type": { "text": "boolean" }, "default": "false", "fieldName": "currentPage" } ], "slots": [ { "name": "icon", "summary": "icon, only rendered when `href` is set", "description": "Use instead of the `icon` and `icon-set` attributes.\nAccepts `rh-icon`, `svg`, or `img`. Content should\nhave `aria-hidden` or `alt` so screen readers skip\ndecorative images. Not available when slotting\nan `\u003ca\u003e` directly (without `href` on the host)." }, { "name": "", "summary": "Link content", "description": "When the `href` attribute is set, this slot should\ncontain inline text for the link label. Alternatively,\nan anchor element (`\u003ca href=\"...\"\u003e`) should be the\nfirst child in this slot when `href` is not set.\nScreen readers will announce the slotted text as the\naccessible name for the link. Authors must not slot a\n`\u003cbutton\u003e` element." } ], "cssProperties": [ { "name": "--rh-color-text-primary", "description": "Link text color" }, { "name": "--rh-color-interactive-primary-default", "description": "Focus outline color" }, { "name": "--rh-border-width-md", "description": "Focus outline width\n\n2px border width: Example: Alert", "default": "2px", "syntax": "\u003clength\u003e" }, { "name": "--rh-border-radius-default", "description": "Focus border radius\n\n3px border radius; Example: Card", "default": "3px", "syntax": "\u003ccustom-ident\u003e" } ], "demos": [ { "description": "Standalone navigation link with href, slotted anchor, and icon variants.", "url": "https://ux.redhat.com/elements/navigation-link/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-link/demo/index.html" } }, { "description": "Navigation links used within a primary navigation bar alongside dropdown items.", "url": "https://ux.redhat.com/elements/navigation-link/demo/in-nav-primary/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-link/demo/in-nav-primary.html" } }, { "description": "Navigation links inside a secondary navigation element with slotted anchor and current-page variants.", "url": "https://ux.redhat.com/elements/navigation-link/demo/in-nav-secondary/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-link/demo/in-nav-secondary.html" } }, { "description": "Navigation links within a subnav, including current-page, slotted anchor, and icon variants.", "url": "https://ux.redhat.com/elements/navigation-link/demo/in-subnav/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-link/demo/in-subnav.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-navigation-link", "declaration": { "name": "RhNavigationLink", "module": "rh-navigation-link/rh-navigation-link.js" } }, { "kind": "js", "name": "RhNavigationLink", "declaration": { "name": "RhNavigationLink", "module": "rh-navigation-link/rh-navigation-link.js" } } ] }, { "kind": "javascript-module", "path": "rh-navigation-primary/rh-navigation-primary-item-menu.js", "declarations": [ { "name": "RhNavigationPrimaryItemMenu", "summary": "Content container for navigation item dropdowns", "description": "A navigation menu provides a responsive content container for navigation\nitem dropdowns. This element must be a child of `rh-navigation-primary-item`\nand should not be used independently. Slotted content should use semantic\nheading and list elements for screen reader navigation. Focus is managed\nwithin this container; Tab moves through focusable children and Escape\ncloses the parent dropdown.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "return": { "type": { "text": "Promise\u003cvoid\u003e" } }, "name": "firstUpdated", "kind": "method", "privacy": "protected" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-primary/rh-navigation-primary-item-menu.ts#L23" }, "kind": "class", "tagName": "rh-navigation-primary-item-menu", "slots": [ { "name": "", "description": "Use this slot for navigation item dropdown content, typically links\nand nested menus. Content layout adapts based on the primary\nnavigation's compact state. Slotted content should use semantic\nheading and list elements for screen reader navigation. Avoid\nplacing focusable elements outside of this container, as focus\nmanagement relies on this boundary to trap and restore focus\nwhen the dropdown closes." } ], "cssProperties": [ { "name": "--rh-color-text-primary", "description": "Content panel text color" }, { "name": "--rh-color-surface-lightest", "description": "Content panel background in light mode\n\nPrimary surface (light theme)", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-surface-darkest", "description": "Content panel background in dark mode\n\nPrimary surface (dark theme)", "default": "#151515", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-space-xl", "description": "Content panel inline padding\n\n24px spacer", "default": "24px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-3xl", "description": "Content panel block padding at containers \u003e= xl\n\n48px spacer", "default": "48px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-2xl", "description": "Content panel block padding\n\nContent panel inline padding at containers \u003e= xl\n\n32px spacer", "default": "32px", "syntax": "\u003clength\u003e" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-navigation-primary-item-menu", "declaration": { "name": "RhNavigationPrimaryItemMenu", "module": "rh-navigation-primary/rh-navigation-primary-item-menu.js" } }, { "kind": "js", "name": "RhNavigationPrimaryItemMenu", "declaration": { "name": "RhNavigationPrimaryItemMenu", "module": "rh-navigation-primary/rh-navigation-primary-item-menu.js" } } ] }, { "kind": "javascript-module", "path": "rh-navigation-primary/rh-navigation-primary-item.js", "declarations": [ { "name": "RhNavigationPrimaryItem", "summary": "Interactive link or dropdown for the primary navigation", "description": "A navigation item provides an interactive link or dropdown for the\nprimary navigation bar. It must be placed inside\n`rh-navigation-primary`. Keyboard users press Enter\nor Space to open or follow the link. Escape closes and returns focus to the toggle.\nLink items should contain one `\u003ca\u003e` for an accessible name.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "open", "description": "Whether the dropdown is currently expanded. Only applies when `variant` is `dropdown`.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "open", "reflects": true }, { "name": "summary", "description": "Sets the label text for the dropdown toggle. When `variant` is `dropdown`,\neither this property or the `summary` slot must be provided so the toggle\nhas an accessible name.", "type": { "text": "string" }, "kind": "field", "attribute": "summary" }, { "name": "variant", "description": "Controls the presentation style of the navigation item. must be set to\n`dropdown` when the item provides an expandable menu, otherwise it\nshould remain `link` for simple anchor-style items. Defaults to `link`.", "type": { "text": "'link' | 'dropdown'" }, "default": "'link'", "kind": "field", "attribute": "variant" }, { "name": "hideAt", "description": "Hides the element below a given container-query breakpoint and reveals it\nwhen the navigation is at or above that width. Allows progressive\ndisclosure of navigation items at wider viewports. Avoid hiding critical\nnavigation items, as they will be inaccessible below the breakpoint.\nDefaults to `undefined`.", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'" }, "default": "undefined", "kind": "field", "attribute": "hide-at", "reflects": true }, { "name": "icon", "description": "Shorthand for the `icon` slot. Sets the icon name from the given icon set.\nshould be used with the `dropdown` variant for standalone secondary items\nsuch as account or search toggles. Defaults to `undefined`.", "type": { "text": "IconNameFor\u003cIconSetName\u003e" }, "kind": "field", "attribute": "icon" }, { "name": "iconSet", "description": "Icon set for the `icon` property. must match a registered icon set name.\nDefaults to `ui`.", "type": { "text": "'ui' | 'standard' | 'social' | 'microns'", "references": [ { "name": "IconSetName", "package": "@rhds/icons" } ] }, "kind": "field", "attribute": "icon-set" }, { "return": { "type": { "text": "void" } }, "name": "firstUpdated", "kind": "method", "privacy": "protected" }, { "return": { "type": { "text": "Promise\u003cvoid\u003e" } }, "name": "hide", "description": "Sets `open` to `false`; only affects `dropdown` items.", "kind": "method", "privacy": "public" }, { "return": { "type": { "text": "Promise\u003cvoid\u003e" } }, "name": "show", "description": "Sets `open` to `true`; only affects `dropdown` items.", "kind": "method", "privacy": "public" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-primary/rh-navigation-primary-item.ts#L39" }, "kind": "class", "tagName": "rh-navigation-primary-item", "attributes": [ { "name": "open", "description": "Whether the dropdown is currently expanded. Only applies when `variant` is `dropdown`.", "type": { "text": "boolean" }, "default": "false", "fieldName": "open" }, { "name": "summary", "description": "Sets the label text for the dropdown toggle. When `variant` is `dropdown`,\neither this property or the `summary` slot must be provided so the toggle\nhas an accessible name.", "type": { "text": "string" }, "fieldName": "summary" }, { "name": "variant", "description": "Controls the presentation style of the navigation item. must be set to\n`dropdown` when the item provides an expandable menu, otherwise it\nshould remain `link` for simple anchor-style items. Defaults to `link`.", "type": { "text": "'link' | 'dropdown'" }, "default": "'link'", "fieldName": "variant" }, { "name": "hide-at", "description": "Hides the element below a given container-query breakpoint and reveals it\nwhen the navigation is at or above that width. Allows progressive\ndisclosure of navigation items at wider viewports. Avoid hiding critical\nnavigation items, as they will be inaccessible below the breakpoint.\nDefaults to `undefined`.", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'" }, "default": "undefined", "fieldName": "hideAt" }, { "name": "icon", "description": "Shorthand for the `icon` slot. Sets the icon name from the given icon set.\nshould be used with the `dropdown` variant for standalone secondary items\nsuch as account or search toggles. Defaults to `undefined`.", "type": { "text": "IconNameFor\u003cIconSetName\u003e" }, "fieldName": "icon" }, { "name": "icon-set", "description": "Icon set for the `icon` property. must match a registered icon set name.\nDefaults to `ui`.", "type": { "text": "'ui' | 'standard' | 'social' | 'microns'", "references": [ { "name": "IconSetName", "package": "@rhds/icons" } ] }, "fieldName": "iconSet" } ], "events": [ { "name": "toggle", "description": "Fires when the dropdown opens or closes. The event\nhas no custom detail; read the element's `open` property for the new state.", "type": { "text": "Event", "references": [ { "name": "Event", "package": "global:" } ] } } ], "slots": [ { "name": "icon", "description": "Use this slot to provide a custom icon before the summary text,\ntypically an `\u003crh-icon\u003e` or `\u003crh-avatar\u003e` element. For\naccessibility, the icon is treated as decorative; the summary\nslot provides the accessible name for the toggle." }, { "name": "summary", "description": "Use this slot to provide custom label content for the dropdown\ntoggle, typically a `\u003cspan\u003e` with visible text. For\naccessibility, this content provides the accessible name read\nby screen readers; it must not be empty." }, { "name": "", "description": "Use this slot for link variant content, typically a single `\u003ca\u003e`\nor `\u003crh-navigation-link\u003e` element. For accessibility, the link\ntext provides the accessible name for this navigation item." } ], "cssProperties": [ { "name": "--rh-icon-size" }, { "name": "--rh-color-icon-subtle", "description": "Toggle caret color in dark mode" }, { "name": "--rh-border-width-lg", "description": "Hamburger dropdown border inline start width\n\n3px border width: Example: Expanded Accordion panel", "default": "3px", "syntax": "\u003clength\u003e" }, { "name": "--rh-border-width-sm", "description": "Hamburger dropdown border inline end width\n\n1px border width; Example: Secondary CTA or Button", "default": "1px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-md", "description": "Toggle gap\n\nSecondary area slotted item toggle padding\n\n8px spacer", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-border-subtle", "description": "Hamburger item hover indicator color at containers \u003e= xl\n\nOpen hamburger dropdown inline end border color\n\nSecondary area slotted item hover indicator color" }, { "name": "--rh-color-surface-lightest", "description": "Open hamburger dropdown content background\n in light mode at containers \u003e= xl\n\nStandalone dropdown content background in light mode\n\nPrimary surface (light theme)", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-surface-darkest", "description": "Open hamburger dropdown content background\n in dark mode at containers \u003e= xl\n\nStandalone dropdown content background in dark mode\n\nPrimary surface (dark theme)", "default": "#151515", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-accent-brand", "description": "Hamburger item active indicator color at containers \u003e= xl\n\nOpen hamburger dropdown inline start border color\n\nSecondary area slotted item active indicator color\n\nDropdown variant open state indicator color" }, { "name": "--rh-color-text-primary", "description": "Hamburger dropdown text color\n\nLink variant text color" }, { "name": "--rh-color-gray-50", "description": "Link variant hover decoration color in light mode\n\nSubtle icon", "default": "#707070", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-40", "description": "Toggle caret color in light mode\n\nLink variant hover decoration color in dark mode\n\nSubtle icon (hover state)", "default": "#a3a3a3", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-interactive-primary-hover", "description": "Link variant hover text color" }, { "name": "--rh-font-size-body-text-md", "description": "Link variant hamburger menu font size\n\n16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-lg", "description": "Hamburger dropdown block padding\n\nHamburger dropdown inline padding at containers \u003e= xl\n\nHamburger link block padding\n\nHamburger link inline padding at containers \u003e= xl\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-sm", "description": "Secondary area item font size\n\nStandalone link font size\n\n14px font size", "default": "0.875rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-border-width-md", "description": "Hamburger dropdown focus ring width\n\nSecondary area slotted item focus ring width\n\nLink variant focus ring width\n\nStandalone link focus ring width\n\n2px border width: Example: Alert", "default": "2px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-interactive-primary-default", "description": "Hamburger dropdown focus ring color\n\nSecondary area slotted item focus ring color\n\nLink variant focus ring color\n\nStandalone link focus ring color", "default": "2px" }, { "name": "--rh-border-radius-default", "description": "Hamburger dropdown focus ring radius\n\nSecondary area slotted item toggle border radius\n\nLink variant focus ring radius\n\nStandalone link focus ring radius\n\n3px border radius; Example: Card", "default": "3px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-space-xl", "description": "Hamburger dropdown inline padding\n\nHamburger link inline padding\n\nCompact links slot inline end padding\n\n24px spacer", "default": "24px", "syntax": "\u003clength\u003e" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-navigation-primary-item", "declaration": { "name": "RhNavigationPrimaryItem", "module": "rh-navigation-primary/rh-navigation-primary-item.js" } }, { "kind": "js", "name": "RhNavigationPrimaryItem", "declaration": { "name": "RhNavigationPrimaryItem", "module": "rh-navigation-primary/rh-navigation-primary-item.js" } } ] }, { "kind": "javascript-module", "path": "rh-navigation-primary/rh-navigation-primary.js", "declarations": [ { "name": "RhNavigationPrimary", "summary": "Persistent bar for orienting users and navigating across sites", "description": "Primary navigation provides a persistent bar for orienting users and\nnavigating across websites and domains. It groups primary links,\ndropdown menus, event promotions, and utility actions into a single\nresponsive bar. There must not be more than one on a page. The element\nuses the ARIA `navigation` landmark role and should have a unique\n`accessible-label` when multiple navigation landmarks exist on the page,\nso screen readers can distinguish between them. Keyboard users navigate\nitems with Tab/Shift+Tab and close open dropdowns with Escape.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "mobileToggleLabel", "description": "Accessible label for the mobile hamburger toggle. Must be set when the\nnavigation is served in a non-English locale. Defaults to `'Menu'`.", "type": { "text": "string" }, "default": "'Menu'", "kind": "field", "attribute": "mobile-toggle-label" }, { "name": "mobileLinksToggleLabel", "description": "Accessible label for the mobile links (bento box) toggle. Must be set\nwhen the navigation is served in a non-English locale. Defaults to\n`'Explore Red Hat'`.", "type": { "text": "string" }, "default": "'Explore Red Hat'", "kind": "field", "attribute": "mobile-links-toggle-label" }, { "name": "colorPalette", "description": "Sets the color palette for the navigation and its child components.\nShould only use `lightest` or `darkest` to match the page theme.\nDefaults to `undefined` (inherits from the page color scheme).\nShould not be set when user's color-scheme preference is respected.", "type": { "text": "Extract\u003cColorPalette, ( | 'lightest' | 'darkest'\n)\u003e", "references": [ { "name": "NavigationPrimaryPalette", "module": "rh-navigation-primary/rh-navigation-primary.js" } ] }, "kind": "field", "attribute": "color-palette", "reflects": true }, { "name": "accessibleLabel", "description": "Accessible label applied to the navigation landmark. Must be set when the\nnavigation is served in a non-English locale, and should be set when the\npage contains multiple navigation landmarks, to provide unique identification\nfor assistive technology. Defaults to `'Main navigation'`.", "type": { "text": "string" }, "default": "'Main navigation'", "kind": "field", "attribute": "accessible-label" }, { "name": "siteName", "description": "Sets the visible sub-domain title displayed beside the Red Hat logo\nlockup. Both `site-name` and `site-href` must be set to enable the\nsub-domain variation; when either is missing the sub-domain area is\nhidden. Defaults to `undefined`.", "type": { "text": "string" }, "kind": "field", "attribute": "site-name", "reflects": true }, { "name": "siteHref", "description": "Sets the URL for the sub-domain title link. Both `site-href` and\n`site-name` must be set to enable the sub-domain variation; when\neither is missing the sub-domain area is hidden. Defaults to\n`undefined`.", "type": { "text": "string" }, "kind": "field", "attribute": "site-href", "reflects": true }, { "name": "logoHref", "description": "Sets the `href` for the default logo link. Avoid changing this value\nunless the site requires a non-root landing page for the logo. Defaults\nto `'/'`.", "type": { "text": "string" }, "default": "'/'", "kind": "field", "attribute": "logo-href" }, { "return": { "type": { "text": "void" } }, "name": "firstUpdated", "kind": "method", "privacy": "protected" }, { "parameters": [ { "name": "oldVal", "type": { "text": "boolean" } }, { "name": "newVal", "type": { "text": "boolean" } } ], "name": "compactChanged", "kind": "method", "privacy": "protected" }, { "return": { "type": { "text": "void" } }, "name": "close", "description": "Close Menus", "kind": "method" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-primary/rh-navigation-primary.ts#L47" }, "kind": "class", "tagName": "rh-navigation-primary", "attributes": [ { "name": "mobile-toggle-label", "description": "Accessible label for the mobile hamburger toggle. Must be set when the\nnavigation is served in a non-English locale. Defaults to `'Menu'`.", "type": { "text": "string" }, "default": "'Menu'", "fieldName": "mobileToggleLabel" }, { "name": "mobile-links-toggle-label", "description": "Accessible label for the mobile links (bento box) toggle. Must be set\nwhen the navigation is served in a non-English locale. Defaults to\n`'Explore Red Hat'`.", "type": { "text": "string" }, "default": "'Explore Red Hat'", "fieldName": "mobileLinksToggleLabel" }, { "name": "color-palette", "description": "Sets the color palette for the navigation and its child components.\nShould only use `lightest` or `darkest` to match the page theme.\nDefaults to `undefined` (inherits from the page color scheme).\nShould not be set when user's color-scheme preference is respected.", "type": { "text": "Extract\u003cColorPalette, ( | 'lightest' | 'darkest'\n)\u003e", "references": [ { "name": "NavigationPrimaryPalette", "module": "rh-navigation-primary/rh-navigation-primary.js" } ] }, "fieldName": "colorPalette" }, { "name": "accessible-label", "description": "Accessible label applied to the navigation landmark. Must be set when the\nnavigation is served in a non-English locale, and should be set when the\npage contains multiple navigation landmarks, to provide unique identification\nfor assistive technology. Defaults to `'Main navigation'`.", "type": { "text": "string" }, "default": "'Main navigation'", "fieldName": "accessibleLabel" }, { "name": "site-name", "description": "Sets the visible sub-domain title displayed beside the Red Hat logo\nlockup. Both `site-name` and `site-href` must be set to enable the\nsub-domain variation; when either is missing the sub-domain area is\nhidden. Defaults to `undefined`.", "type": { "text": "string" }, "fieldName": "siteName" }, { "name": "site-href", "description": "Sets the URL for the sub-domain title link. Both `site-href` and\n`site-name` must be set to enable the sub-domain variation; when\neither is missing the sub-domain area is hidden. Defaults to\n`undefined`.", "type": { "text": "string" }, "fieldName": "siteHref" }, { "name": "logo-href", "description": "Sets the `href` for the default logo link. Avoid changing this value\nunless the site requires a non-root landing page for the logo. Defaults\nto `'/'`.", "type": { "text": "string" }, "default": "'/'", "fieldName": "logoHref" } ], "slots": [ { "name": "logo", "description": "Accepts an anchor element wrapping an inline SVG or `\u003cimg\u003e` to\noverride the default Red Hat logo. The slotted anchor should\ncontain a `\u003ctitle\u003e` or `alt` text so screen readers can\nidentify the brand link." }, { "name": "", "description": "Accepts `\u003crh-navigation-primary-item\u003e` block elements for\nhamburger menu links and dropdowns. The parent container has\n`role=\"list\"`, so slotted items must have `role=\"listitem\"`\nfor screen readers; `rh-navigation-primary-item` applies this\nautomatically. Leaving this slot empty makes the hamburger\nmenu inaccessible." }, { "name": "event", "description": "Accepts `\u003crh-navigation-primary-item slot=\"event\"\u003e` block\nelements for event promotion such as conference logos. The\nparent has `role=\"list\"`, so any other slotted element must\ninclude `role=\"listitem\"` to avoid accessibility tree issues." }, { "name": "links", "description": "Accepts `\u003crh-navigation-primary-item slot=\"links\"\u003e` block\nelements for quick links to external sites (e.g., docs,\nsupport). The parent has `role=\"list\"`, so other slotted\nelements must include `role=\"listitem\"`." }, { "name": "dropdowns", "description": "Accepts `\u003crh-navigation-primary-item slot=\"dropdowns\"\nvariant=\"dropdown\"\u003e` block elements for utility dropdowns\n(search, notifications, account). The parent has\n`role=\"list\"`, so other slotted elements must include\n`role=\"listitem\"`." } ], "cssProperties": [ { "name": "--rh-navigation-primary-z-index", "description": "Sets the stacking order of the navigation element. Adjust this token when the navigation\noverlaps other fixed or sticky elements on the page.", "default": "102" }, { "name": "--rh-font-family-body-text", "description": "Body text font family\n\nBody text font family", "default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-border-width-md", "description": "Logo focus ring width\n\nSubdomain focus ring width\n\nHamburger focus ring border width\n\nLinks menu toggle focus ring width\n\n2px border width: Example: Alert", "default": "2px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-icon-secondary", "description": "Menu bar icon color\n\nLinks menu icon color" }, { "name": "--rh-color-interactive-primary-default", "description": "Logo focus ring color\n\nSubdomain focus ring color\n\nHamburger focus ring color\n\nLinks menu toggle focus ring color\n\nNavigation link text color", "default": "2px" }, { "name": "--rh-font-size-body-text-md", "description": "Navigation link font size\n\n16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-sm", "description": "Navigation link font size at containers \u003e= xl\n\n14px font size", "default": "0.875rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-xl", "description": "Navigation link padding-inline\n\n24px spacer", "default": "24px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-family-heading", "description": "Subdomain heading font family\n\nHeading font family", "default": "RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-weight-heading-bold", "description": "Subdomain heading font weight\n\nBold font weight for headings", "default": "700", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-font-size-heading-xs", "description": "h6 heading font size", "default": "1.25rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-accent-brand", "description": "Hamburger active state indicator color\n\nHamburger open state indicator color\n\nLinks menu toggle active indicator color\n\nLinks menu open state indicator color\n\nSubdomain active indicator color" }, { "name": "--rh-line-height-heading", "description": "Subdomain line height at containers \u003e= 480px (custom)\n\nLine height for headings", "default": "1.3", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-color-text-primary", "description": "Navigation bar text color\n\nNavigation link text color at containers \u003e= xl\n\nSubdomain text color\n\nSubdomain link text color", "default": "light-dark(var(--rh-color-text-primary-on-light, #151515), var(--rh-color-text-primary-on-dark, #ffffff))" }, { "name": "--rh-color-text-primary-on-light", "description": "Primary text color for light theme", "default": "#151515", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-text-primary-on-dark", "description": "Primary text color for dark theme", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-border-width-sm", "description": "Compact slotted item separator width\n\nCompact last item separator width\n\nOpen compact item separator width at containers \u003e= xl\n\nOpen compact last item separator width at containers \u003e= xl\n\n1px border width; Example: Secondary CTA or Button", "default": "1px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-border-subtle", "description": "Hamburger hover and focus indicator color\n\nLinks menu toggle hover indicator color\n\nSubdomain hover indicator color\n\nCompact hamburger content border color\n\nCompact slotted item separator color\n\nCompact last item separator color\n\nOpen compact item separator color at containers \u003e= xl\n\nOpen compact last item separator color at containers \u003e= xl", "default": "1px" }, { "name": "--rh-color-surface-lightest", "description": "Navigation bar background in light mode\n\nOpen Links menu background in light mode\n\nOpen compact hamburger content background in light mode\n\nOpen compact links menu background in light mode at containers \u003e= xl\n\nPrimary surface (light theme)", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-surface-darkest", "description": "Navigation bar background in dark mode\n\nOpen Links menu background in dark mode\n\nOpen compact hamburger content background in dark mode\n\nOpen compact links menu background in dark mode at containers \u003e= xl\n\nPrimary surface (dark theme)", "default": "#151515", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-space-3xl", "description": "Links menu content block end padding\n\nOpen compact links menu block end padding at containers \u003e= xl\n\n48px spacer", "default": "48px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-2xl", "description": "Links menu content block start padding\n\nLinks menu content inline padding\n\nOpen compact links menu block start padding at containers \u003e= xl\n\nOpen compact links menu inline padding at containers \u003e= xl\n\n32px spacer", "default": "32px", "syntax": "\u003clength\u003e" }, { "name": "--rh-border-radius-default", "description": "Logo focus ring radius\n\nSubdomain focus ring radius\n\nLinks menu toggle rounded corners\n\nOpen Links menu start rounded corner\n\nOpen Links menu end rounded corner\n\nOpen compact links menu start rounded corner at containers \u003e= xl\n\nOpen compact links menu end rounded corner at containers \u003e= xl\n\n3px border radius; Example: Card", "default": "3px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-space-md", "description": "Hamburger tap target padding\n\nLinks menu toggle padding\n\nNavigation link padding-block\n\nNavigation link padding at containers \u003e= xl\n\nSubdomain margin inline end\n\nNavigation link padding-block at containers \u003e= xl\n\n8px spacer", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-lg", "description": "Navigation bar inline padding\n\nBar inline start padding at containers \u003e= 320px (custom)\n\nBar inline end padding at containers \u003e= sm\n\nLockup gap between logo and sub-domain\n\nNavigation link padding-block\n\nLinks menu content gap\n\nNavigation link padding-inline\n\nSubdomain lockup gap\n\nNavigation link inline padding at containers \u003e= xl\n\nOpen compact hamburger content padding\n\nOpen compact links menu gap at containers \u003e= xl\n\nNavigation link padding-inline at containers \u003e= xl\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-gray-90", "description": "Overlay background base color\n\nSecondary surface (dark theme)", "default": "#1f1f1f", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-opacity-80", "description": "Overlay background base color\n\nOverlay background opacity\n\n80% opacity", "default": "80%", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-overlay-z-index", "description": "Overlay stacking order", "default": "1" } ], "demos": [ { "description": "Default primary navigation with dropdown menus, secondary links, event promotion, and utility actions.", "url": "https://ux.redhat.com/elements/navigation-primary/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-primary/demo/index.html" } }, { "description": "Navigation with data-analytics attributes for click and interaction tracking integration.", "url": "https://ux.redhat.com/elements/navigation-primary/demo/analytics/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-primary/demo/analytics.html" } }, { "description": "Navigation in lightest and darkest color palettes using the color context picker.", "url": "https://ux.redhat.com/elements/navigation-primary/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-primary/demo/color-context.html" } }, { "description": "Navigation using the link variant for top-level items instead of dropdowns.", "url": "https://ux.redhat.com/elements/navigation-primary/demo/links-as-top-level/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-primary/demo/links-as-top-level.html" } }, { "description": "Default primary navigation with dropdown menus, secondary links, event promotion, and utility actions.", "url": "https://ux.redhat.com/elements/navigation-primary/demo/no-hamburger-items/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-primary/demo/no-hamburger-items.html" } }, { "description": "Navigation without secondary slot items such as events, links, or utility dropdowns.", "url": "https://ux.redhat.com/elements/navigation-primary/demo/no-secondary-items/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-primary/demo/no-secondary-items.html" } }, { "description": "Fallback rendering when the element is not defined, demonstrating SSR with Declarative Shadow DOM.", "url": "https://ux.redhat.com/elements/navigation-primary/demo/not-defined/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-primary/demo/not-defined.html" } }, { "description": "Right-to-left language support with Hebrew locale example.", "url": "https://ux.redhat.com/elements/navigation-primary/demo/right-to-left/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-primary/demo/right-to-left.html" } }, { "description": "Custom SVG logo slotted into the logo slot with animated fedora hat tip.", "url": "https://ux.redhat.com/elements/navigation-primary/demo/slotted-logo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-primary/demo/slotted-logo.html" } }, { "description": "Sub-domain variant with a branded label and link alongside the logo lockup.", "url": "https://ux.redhat.com/elements/navigation-primary/demo/sub-domain/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-primary/demo/sub-domain.html" } }, { "description": "Internationalization support using translated toggle and accessible label attributes.", "url": "https://ux.redhat.com/elements/navigation-primary/demo/translation/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-primary/demo/translation.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-navigation-primary", "declaration": { "name": "RhNavigationPrimary", "module": "rh-navigation-primary/rh-navigation-primary.js" } }, { "kind": "js", "name": "RhNavigationPrimary", "declaration": { "name": "RhNavigationPrimary", "module": "rh-navigation-primary/rh-navigation-primary.js" } } ] }, { "kind": "javascript-module", "path": "rh-navigation-secondary/rh-navigation-secondary-dropdown.js", "declarations": [ { "name": "SecondaryNavDropdownExpandEvent", "superclass": { "name": "ComposedEvent", "module": "@patternfly/pfe-core" }, "members": [ { "name": "expanded", "type": { "text": "boolean" }, "kind": "field" }, { "name": "toggle", "type": { "text": "RhNavigationSecondaryDropdown" }, "kind": "field" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.ts#L15" }, "kind": "class" }, { "name": "RhNavigationSecondaryDropdown", "summary": "Expandable dropdown wrapper for secondary nav links", "description": "Wraps a top-level nav link to add expandable dropdown menu functionality.\nUpgrades the slotted `\u003ca\u003e` with `role=\"button\"`, `aria-expanded`, and\n`aria-controls` for accessibility. Highlights with a red top border when\nthe dropdown contains the current page (`aria-current=\"page\"`). Keyboard:\nEnter/Space toggles the dropdown; Tab moves through menu items; Escape\ncloses. Must contain an `\u003ca\u003e` in the `link` slot and an\n`\u003crh-navigation-secondary-menu\u003e` in the `menu` slot.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "parameters": [ { "name": "oldVal", "type": { "text": "'false' | 'true'" } }, { "name": "newVal", "type": { "text": "'false' | 'true'" } } ], "return": { "type": { "text": "void" } }, "name": "_expandedChanged", "description": "When expanded property changes, check the new value, if true\nrun the `#open()` method, if false run the `#close()` method.", "kind": "method", "privacy": "protected" }, { "parameters": [ { "name": "event", "type": { "text": "MouseEvent" } } ], "name": "_clickHandler", "description": "When a dropdown is clicked set expanded to the opposite of the expanded property\nand then dispatch that value in a SecondaryNavDropdownExpandEvent", "kind": "method", "privacy": "private" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.ts#L48" }, "kind": "class", "tagName": "rh-navigation-secondary-dropdown", "events": [ { "name": "expand-request", "description": "Fires when the dropdown link is\nclicked. Detail: `expanded` (boolean), `toggle` (RhNavigationSecondaryDropdown).", "type": { "text": "SecondaryNavDropdownExpandEvent" } } ], "slots": [ { "name": "link", "summary": "dropdown trigger link", "description": "Expects an `\u003ca\u003e` element. Automatically upgraded with `role=\"button\"`,\n`aria-expanded`, and `aria-controls` for keyboard and screen reader\naccessibility. Enter/Space toggles the dropdown." }, { "name": "menu", "summary": "dropdown menu panel", "description": "Expects an `\u003crh-navigation-secondary-menu\u003e` element. Visibility is\ntoggled when the link slot is activated. Screen readers can navigate\nmenu sections via headings inside the menu." } ], "cssParts": [ { "name": "container", "summary": "dropdown wrapper container", "description": "The container for a navigation dropdown item, wrapping both the link and menu.\nThis part corresponds to a `\u003cdiv\u003e` element that manages the dropdown state and styling.\n\n**Styling:**\n- Use this part to customize the dropdown appearance and layout\n- Applies `.expanded` class when dropdown is open\n- Applies `.highlight` class when dropdown contains the current page\n- Controls dropdown link and menu positioning" } ], "cssProperties": [ { "name": "--rh-border-width-lg", "description": "Navigation dropdown leading border width\n\n3px border width: Example: Expanded Accordion panel", "default": "3px", "syntax": "\u003clength\u003e" }, { "name": "--rh-border-width-sm", "description": "Navigation dropdown trailing border width\n\n1px border width; Example: Secondary CTA or Button", "default": "1px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-border-subtle-on-light", "description": "Navigation dropdown trailing border color\n\nSubtle border color (light theme)", "default": "#c7c7c7", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-box-shadow-sm", "description": "Navigation dropdown elevation shadow\n\nSmall box shadow", "default": "0 2px 4px 0 rgba(21, 21, 21, 0.2)", "syntax": "\u003cshadow\u003e" }, { "name": "--rh-color-text-primary", "description": "Navigation dropdown chevron color" }, { "name": "--rh-font-size-body-text-md", "description": "16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-surface", "description": "Navigation dropdown link slot background" }, { "name": "--rh-color-text-brand-on-light", "description": "Navigation dropdown leading border color\n\nNavigation dropdown expanded block-start accent color at viewport \u003e= lg\n\nBrand text color for light theme", "default": "#ee0000", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-surface-lightest", "description": "Navigation dropdown expanded background at viewport \u003e= lg\n\nPrimary surface (light theme)", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-text-primary-on-light", "description": "Navigation dropdown expanded chevron color at viewport \u003e= lg\n\nPrimary text color for light theme", "default": "#151515", "syntax": "\u003ccolor\u003e" } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "SecondaryNavDropdownExpandEvent", "declaration": { "name": "SecondaryNavDropdownExpandEvent", "module": "rh-navigation-secondary/rh-navigation-secondary-dropdown.js" } }, { "kind": "custom-element-definition", "name": "rh-navigation-secondary-dropdown", "declaration": { "name": "RhNavigationSecondaryDropdown", "module": "rh-navigation-secondary/rh-navigation-secondary-dropdown.js" } }, { "kind": "js", "name": "RhNavigationSecondaryDropdown", "declaration": { "name": "RhNavigationSecondaryDropdown", "module": "rh-navigation-secondary/rh-navigation-secondary-dropdown.js" } } ] }, { "kind": "javascript-module", "path": "rh-navigation-secondary/rh-navigation-secondary-menu-section.js", "declarations": [ { "name": "RhNavigationSecondaryMenuSection", "summary": "Accessible link group with heading for dropdown menus", "description": "Groups related links under a heading within a dropdown menu. Automatically\nwires `aria-labelledby` between the slotted heading and adjacent `\u003cul\u003e`/`\u003col\u003e`\nfor screen reader navigation. Renders as a `\u003csection\u003e` element. Must contain\na heading in the `header` slot and a list in the `links` slot. Should\nprovide an `id` on the heading or one will be auto-generated. Tab navigates\nthrough links; the heading provides group context to assistive technology.", "superclass": { "name": "LitElement", "package": "lit" }, "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.ts#L26" }, "kind": "class", "tagName": "rh-navigation-secondary-menu-section", "slots": [ { "name": "header", "summary": "section heading", "description": "Expects an `\u003ch1\u003e`-`\u003ch6\u003e` element. Auto-linked to the links list via\n`aria-labelledby` for screen reader group identification. An `id` is\ngenerated if not present." }, { "name": "links", "summary": "section link list", "description": "Expects a `\u003cul\u003e` or `\u003col\u003e` element with navigation links. Automatically\nreceives `aria-labelledby` pointing to the header for screen readers.\nTab navigates through each link in the list." }, { "name": "cta", "summary": "section-level call to action", "description": "Optional slot for an `\u003crh-cta\u003e` element. Appears after the link list.\nScreen readers announce the CTA link text in document order." } ], "cssParts": [ { "name": "container", "summary": "menu section container", "description": "The semantic container for a menu section, grouping related navigation links\nunder a common header. This part corresponds to a `\u003csection\u003e` element that\nprovides structure and automatic accessibility enhancements.\n\n**Styling:**\n- Use this part to customize individual menu section appearance\n- Controls spacing and layout of header, links, and CTA\n- Sections are organized in a grid when multiple sections exist\n- Automatically applies aria-labelledby to link lists\n\n**Accessibility:**\n- Automatically associates heading with list using aria-labelledby\n- Generates IDs for headers if not present\n- Ensures semantic structure for screen reader users" } ], "cssProperties": [ { "name": "--rh-font-family-heading", "description": "Navigation menu section typeface\n\nHeading font family", "default": "RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-size-body-text-md", "description": "Navigation menu section slotted list content gap\n\n16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-xl", "description": "Menu section CTA top spacing\n\nMenu section CTA block spacing\n\n24px spacer", "default": "24px", "syntax": "\u003clength\u003e" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-navigation-secondary-menu-section", "declaration": { "name": "RhNavigationSecondaryMenuSection", "module": "rh-navigation-secondary/rh-navigation-secondary-menu-section.js" } }, { "kind": "js", "name": "RhNavigationSecondaryMenuSection", "declaration": { "name": "RhNavigationSecondaryMenuSection", "module": "rh-navigation-secondary/rh-navigation-secondary-menu-section.js" } } ] }, { "kind": "javascript-module", "path": "rh-navigation-secondary/rh-navigation-secondary-menu.js", "declarations": [ { "name": "RhNavigationSecondaryMenu", "summary": "Expandable dropdown menu panel for secondary navigation", "description": "Expandable dropdown menu panel for secondary navigation. Provides\n`full-width` (default) and `fixed-width` layouts with content\norganized in a CSS grid. Must be placed inside the `menu` slot of\nan `\u003crh-navigation-secondary-dropdown\u003e`. Tab navigates through\nmenu content; Escape closes the menu. Screen readers access\ncontent via section headings and `aria-labelledby` associations.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "colorPalette", "description": "Color palette for the menu panel surface. Should remain `'lightest'`\n(default) as secondary nav menus always render on a light surface.\nDefaults to `'lightest'`.", "type": { "text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'", "references": [ { "name": "ColorPalette", "module": "lib/color-palettes.js" } ] }, "default": "'lightest'", "kind": "field", "attribute": "color-palette", "reflects": true }, { "name": "layout", "description": "Controls the menu panel width. `'full-width'` (default) spans the browser\nwidth with content in a responsive grid. `'fixed-width'` constrains the\npanel to its content width, positioned below the trigger link. USE\n`'fixed-width'` for simple menus with fewer sections. Defaults to `'full-width'`.", "type": { "text": "'fixed-width' | 'full-width'" }, "default": "'full-width'", "kind": "field", "attribute": "layout", "reflects": true }, { "name": "visible", "description": "Controls whether the menu panel is visible. Managed automatically by the\nparent `\u003crh-navigation-secondary-dropdown\u003e`. When `true`, the menu is\ndisplayed; when `false`, it is hidden. AVOID setting directly.\nDefaults to `false`.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "visible" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-secondary/rh-navigation-secondary-menu.ts#L27" }, "kind": "class", "tagName": "rh-navigation-secondary-menu", "attributes": [ { "name": "color-palette", "description": "Color palette for the menu panel surface. Should remain `'lightest'`\n(default) as secondary nav menus always render on a light surface.\nDefaults to `'lightest'`.", "type": { "text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'", "references": [ { "name": "ColorPalette", "module": "lib/color-palettes.js" } ] }, "default": "'lightest'", "fieldName": "colorPalette" }, { "name": "layout", "description": "Controls the menu panel width. `'full-width'` (default) spans the browser\nwidth with content in a responsive grid. `'fixed-width'` constrains the\npanel to its content width, positioned below the trigger link. USE\n`'fixed-width'` for simple menus with fewer sections. Defaults to `'full-width'`.", "type": { "text": "'fixed-width' | 'full-width'" }, "default": "'full-width'", "fieldName": "layout" }, { "name": "visible", "description": "Controls whether the menu panel is visible. Managed automatically by the\nparent `\u003crh-navigation-secondary-dropdown\u003e`. When `true`, the menu is\ndisplayed; when `false`, it is hidden. AVOID setting directly.\nDefaults to `false`.", "type": { "text": "boolean" }, "default": "false", "fieldName": "visible" } ], "slots": [ { "name": "", "summary": "menu content", "description": "Should contain `\u003crh-navigation-secondary-menu-section\u003e` elements\nwith headings. Screen readers navigate sections via\n`aria-labelledby` associations between headings and link lists." } ], "cssParts": [ { "name": "full-width", "description": "container - `\u003cdiv\u003e` element, wrapper for full-width menus" }, { "name": "fixed-width", "description": "container - `\u003cdiv\u003e` element, wrapper for fixed-width menus" }, { "name": "sections", "description": "container - `\u003cdiv\u003e` element, wrapper for menu sections" } ], "cssProperties": [ { "name": "--rh-color-text-primary-on-light", "description": "Navigation menu dropdown text color\n\nPrimary text color for light theme", "default": "#151515", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-surface-lightest", "description": "Navigation menu dropdown background\n\nPrimary surface (light theme)", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-space-xl", "description": "Navigation menu sections inner spacing\n\n24px spacer", "default": "24px", "syntax": "\u003clength\u003e" }, { "name": "--rh-navigation-secondary-menu-section-grid", "default": "repeat(auto-fit,\n minmax(15.5rem, 1fr))" }, { "name": "--rh-navigation-secondary-menu-section-grid-gap", "description": "Menu section grid gap override", "default": "var(--rh-space-2xl, 32px)" }, { "name": "--rh-font-size-body-text-md", "description": "Navigation menu slotted list content gap\n\n16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-box-shadow-sm", "description": "Navigation menu elevation shadow at viewport \u003e= lg\n\nSmall box shadow", "default": "0 2px 4px 0 rgba(21, 21, 21, 0.2)", "syntax": "\u003cshadow\u003e" }, { "name": "--rh-navigation-secondary-menu-content-max-width", "description": "Navigation maximum width at viewport \u003e= lg", "default": "1136px" }, { "name": "--rh-space-2xl", "description": "Menu section grid gap\n\nNavigation menu inline padding at viewport \u003e= lg\n\nNavigation menu inline padding at viewport \u003e= xl\n\n32px spacer", "default": "32px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-3xl", "description": "Navigation menu block-end padding at viewport \u003e= lg\n\nNavigation menu block padding at viewport \u003e= xl\n\nNavigation menu block padding at viewport \u003e= 2xl\n\n48px spacer", "default": "48px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-4xl", "description": "Navigation menu block-start padding at viewport \u003e= lg\n\nNavigation menu inline padding at viewport \u003e= 2xl\n\n64px spacer", "default": "64px", "syntax": "\u003clength\u003e" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-navigation-secondary-menu", "declaration": { "name": "RhNavigationSecondaryMenu", "module": "rh-navigation-secondary/rh-navigation-secondary-menu.js" } }, { "kind": "js", "name": "RhNavigationSecondaryMenu", "declaration": { "name": "RhNavigationSecondaryMenu", "module": "rh-navigation-secondary/rh-navigation-secondary-menu.js" } } ] }, { "kind": "javascript-module", "path": "rh-navigation-secondary/rh-navigation-secondary-overlay.js", "declarations": [ { "name": "RhNavigationSecondaryOverlay", "summary": "Backdrop overlay for expanded secondary navigation menus", "description": "Semi-transparent backdrop for dimming page content when a secondary\nnavigation dropdown or mobile menu is expanded. Provides a click\ntarget that allows users to close all open menus. Managed\nautomatically by `\u003crh-navigation-secondary\u003e`; avoid using\nstandalone. Screen readers should ignore this element as it serves\na purely visual purpose. Keyboard: Escape closes the overlay.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "open", "description": "When `true`, displays the overlay. Managed automatically by the\nparent `\u003crh-navigation-secondary\u003e` when dropdowns or the mobile\nmenu expand. Defaults to `false`.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "open", "reflects": true } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-secondary/rh-navigation-secondary-overlay.ts#L18" }, "kind": "class", "tagName": "rh-navigation-secondary-overlay", "attributes": [ { "name": "open", "description": "When `true`, displays the overlay. Managed automatically by the\nparent `\u003crh-navigation-secondary\u003e` when dropdowns or the mobile\nmenu expand. Defaults to `false`.", "type": { "text": "boolean" }, "default": "false", "fieldName": "open" } ], "cssProperties": [ { "name": "--rh-color-gray-90", "description": "Overlay background base color\n\nSecondary surface (dark theme)", "default": "#1f1f1f", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-opacity-80", "description": "Overlay background base color\n\nOverlay background opacity\n\n80% opacity", "default": "80%", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-navigation-secondary-overlay-z-index", "description": "Overlay stacking order", "default": "var(--rh-secondary-nav-overlay-z-index, -1)" }, { "name": "--rh-secondary-nav-overlay-z-index", "default": "-1", "deprecated": "use --rh-navigation-secondary-overlay-z-index" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-navigation-secondary-overlay", "declaration": { "name": "RhNavigationSecondaryOverlay", "module": "rh-navigation-secondary/rh-navigation-secondary-overlay.js" } }, { "kind": "js", "name": "RhNavigationSecondaryOverlay", "declaration": { "name": "RhNavigationSecondaryOverlay", "module": "rh-navigation-secondary/rh-navigation-secondary-overlay.js" } } ] }, { "kind": "javascript-module", "path": "rh-navigation-secondary/rh-navigation-secondary.js", "declarations": [ { "name": "SecondaryNavOverlayChangeEvent", "superclass": { "name": "ComposedEvent", "module": "@patternfly/pfe-core" }, "members": [ { "name": "open", "type": { "text": "boolean" }, "kind": "field" }, { "name": "toggle", "type": { "text": "HTMLElement" }, "kind": "field" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-secondary/rh-navigation-secondary.ts#L26" }, "kind": "class" }, { "name": "RhNavigationSecondary", "summary": "Secondary level navigation bar for linking related pages", "description": "Persistent wayfinding navigation for linking related pages below\n`\u003crh-navigation-primary\u003e`. Provides `role=\"navigation\"` with a\nconfigurable `aria-label` and light/dark color palettes. On mobile,\nitems collapse behind a menu button. Keyboard navigation with Tab, Escape,\nEnter/Space. Should contain `logo`, `nav` (`\u003cul\u003e`), and optional\n`cta` slots. Avoid using more then 5 nav items.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "instances", "default": "new Set\u003cRhNavigationSecondary\u003e()", "kind": "field", "static": true, "privacy": "private" }, { "name": "colorPalette", "description": "Controls the visual color palette of the navigation bar. Valid values:\n`'lighter'` (default) for light environments, `'dark'` for dark\nenvironments. Light-family values (`'light'`, `'lightest'`) map to\n`'lighter'`; dark-family values (`'darker'`, `'darkest'`) map to `'dark'`.\nShould match the surrounding page color scheme. Defaults to `'lighter'`.", "type": { "text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'", "references": [ { "name": "ColorPalette", "module": "lib/color-palettes.js" } ] }, "default": "'lighter'", "kind": "field", "attribute": "color-palette", "reflects": true }, { "name": "accessibleLabel", "description": "Sets the `aria-label` on the internal `\u003cnav\u003e` element for screen readers.\nUSE a descriptive label like the product name (e.g. \"OpenShift navigation\").\nMust be unique if multiple navigations exist on the page. Defaults to `'secondary'`.", "type": { "text": "string" }, "default": "'secondary'", "kind": "field", "attribute": "accessible-label" }, { "parameters": [ { "name": "element", "type": { "text": "Element | null" } } ], "name": "isDropdown", "description": "Checks if passed in element is a RhNavigationSecondaryDropdown", "kind": "method", "static": true }, { "name": "firstUpdated", "kind": "method" }, { "parameters": [ { "name": "index", "type": { "text": "number" } } ], "return": { "type": { "text": "void" } }, "name": "open", "description": "Opens a specific dropdown based on index.\nCloses all open dropdowns before opening specified.\nToggles overlay to open", "kind": "method", "privacy": "public" }, { "return": { "type": { "text": "void" } }, "name": "close", "description": "Closes all open dropdowns", "kind": "method", "privacy": "public" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-secondary/rh-navigation-secondary.ts#L67" }, "kind": "class", "tagName": "rh-navigation-secondary", "attributes": [ { "name": "color-palette", "description": "Controls the visual color palette of the navigation bar. Valid values:\n`'lighter'` (default) for light environments, `'dark'` for dark\nenvironments. Light-family values (`'light'`, `'lightest'`) map to\n`'lighter'`; dark-family values (`'darker'`, `'darkest'`) map to `'dark'`.\nShould match the surrounding page color scheme. Defaults to `'lighter'`.", "type": { "text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'", "references": [ { "name": "ColorPalette", "module": "lib/color-palettes.js" } ] }, "default": "'lighter'", "fieldName": "colorPalette" }, { "name": "accessible-label", "description": "Sets the `aria-label` on the internal `\u003cnav\u003e` element for screen readers.\nUSE a descriptive label like the product name (e.g. \"OpenShift navigation\").\nMust be unique if multiple navigations exist on the page. Defaults to `'secondary'`.", "type": { "text": "string" }, "default": "'secondary'", "fieldName": "accessibleLabel" } ], "events": [ { "name": "overlay-change", "description": "Fires when a dropdown opens/closes\nin desktop view or mobile menu toggles. Detail: `open` (boolean), `toggle` (HTMLElement).", "type": { "text": "SecondaryNavOverlayChangeEvent" } } ], "slots": [ { "name": "logo", "summary": "product logo or name link", "description": "Expects an `\u003ca\u003e` element with text, SVG, or image linking to the product\nhomepage. Screen readers announce the link text or `alt` attribute.\nMust be provided. `aria-current=\"page\"` highlights when on the homepage." }, { "name": "mobile-menu", "summary": "mobile menu button label", "description": "Text label for the mobile hamburger menu button. Defaults to \"Menu\".\nUSE this slot for localization/translation of the button text.\nScreen readers announce this label with the button's expanded state." }, { "name": "nav", "summary": "navigation link list", "description": "Expects a `\u003cul\u003e` element containing `\u003cli\u003e` children with links or\n`\u003crh-navigation-secondary-dropdown\u003e` elements. On mobile, hidden behind\nthe menu button. AVOID more than 5 total items. Screen readers navigate\nvia list semantics. Tab moves focus through each link or dropdown trigger." }, { "name": "cta", "summary": "navigation-level call to action", "description": "Optional slot for an `\u003crh-cta\u003e` element positioned at the end of the\nnavigation bar. On mobile, appears below the nav list. Screen readers\nannounce the CTA link text. AVOID long text that reduces nav item space." } ], "cssParts": [ { "name": "nav", "summary": "main navigation wrapper element", "description": "The outermost container for the secondary navigation, wrapping all navigation content\nincluding logo, menu, and CTA. This part corresponds to a `\u003cdiv\u003e` element that provides\nthe primary structure and styling for the navigation bar.\n\n**Styling:**\n- Use this part to customize the overall navigation appearance\n- Applies compact mode styles when viewport is mobile-sized\n- Controls positioning and z-index of navigation elements" }, { "name": "container", "summary": "navigation content container", "description": "The primary container for navigation links, logo, mobile menu button, and CTA.\nThis part corresponds to a `\u003cdiv\u003e` element that manages the layout and expansion\nstates of the navigation content.\n\n**Styling:**\n- Use this part to customize the navigation content layout\n- Controls expanded/collapsed states for mobile menu\n- Manages positioning of navigation items and dropdowns\n- Contains grid layout for organizing navigation elements" }, { "name": "cta", "summary": "call-to-action container", "description": "Container for the navigation-level call-to-action button. This part corresponds\nto a `\u003cdiv\u003e` element positioned at the end of the navigation bar.\n\n**Styling:**\n- Use this part to customize the CTA positioning and spacing\n- Appears at the rightmost position in desktop view\n- Typically contains a single `\u003crh-cta\u003e` element\n- Automatically adjusts color palette in mobile vs desktop views" } ], "cssProperties": [ { "name": "--rh-color-text-primary", "description": "Navigation dropdown chevron color\n\nNavigation menu toggle color" }, { "name": "--rh-color-brand-red", "description": "Navigation current active item border color" }, { "name": "--rh-navigation-secondary-z-index", "description": "--rh-navigation-secondary-z-index\nControls the stacking order of the secondary navigation bar. Defaults to 102 to ensure\nnavigation appears above most page content but below modals and overlays.\n\n**Usage guidelines:**\n- Keep default value (102) for standard page layouts\n- Same z-index as primary navigation for consistent stacking\n- Increase only when navigation must appear above specific page elements\n- Coordinate with --rh-navigation-primary-z-index if using both navigations\n- Ensure navigation doesn't overlap modals (typically z-index 1000+)\n\nz-index of the navigation-secondary\n\nNavigation container stacking order", "default": "102" }, { "name": "--rh-color-surface-lighter", "description": "Navigation bar surface in light mode\n\nTertiary surface (light theme)", "default": "#f2f2f2", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-surface-dark", "description": "Navigation bar surface in dark mode\n\nTertiary surface (dark theme)", "default": "#383838", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-border-width-sm", "description": "Navigation bar bottom border width\n\n1px border width; Example: Secondary CTA or Button", "default": "1px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-family-body-text", "description": "Navigation menu toggle typeface\n\nBody text font family", "default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-size-body-text-md", "description": "Navigation menu toggle text size\n\n16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-border-width-lg", "description": "Navigation menu toggle top border width\n\n3px border width: Example: Expanded Accordion panel", "default": "3px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-lg", "description": "Navigation bar column gap\n\nNavigation menu expanded inline-end padding\n\nNavigation menu expanded inline-start padding\n\nNavigation menu toggle inner spacing\n\nNavigation menu toggle inline-end margin\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-md", "description": "Navigation menu toggle content gap\n\n8px spacer", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-surface", "description": "Navigation menu toggle background" }, { "name": "--rh-color-surface-lightest", "description": "Primary surface (light theme)", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-text-brand-on-light", "description": "Navigation menu toggle top accent color\n\nNavigation menu toggle top accent color\n\nBrand text color for light theme", "default": "#ee0000", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-text-primary-on-dark", "description": "Primary text color for dark theme", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-text-primary-on-light", "description": "Primary text color for light theme", "default": "#151515", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-space-2xl", "description": "Navigation menu expanded top padding\n\nNavigation menu toggle inline-end margin at viewport \u003e= md\n\nNavigation menu expanded top padding at viewport \u003e= md\n\nNavigation menu expanded inline padding at viewport \u003e= md\n\nNavigation call to action inner spacing at viewport \u003e= md\n\n32px spacer", "default": "32px", "syntax": "\u003clength\u003e" } ], "demos": [ { "description": "Default secondary navigation demo with logo, nav links, dropdowns, and call to action.", "url": "https://ux.redhat.com/elements/navigation-secondary/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-secondary/demo/index.html" } }, { "description": "Secondary navigation demo showing analytics event tracking integration.", "url": "https://ux.redhat.com/elements/navigation-secondary/demo/analytics/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-secondary/demo/analytics.html" } }, { "description": "Secondary navigation demo showing the current page indicator via aria-current=\u0026quot;page\u0026quot; attribute.", "url": "https://ux.redhat.com/elements/navigation-secondary/demo/current-page-indicator/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-secondary/demo/current-page-indicator.html" } }, { "description": "Secondary navigation demo using the dark color palette variant.", "url": "https://ux.redhat.com/elements/navigation-secondary/demo/dark-variant/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-secondary/demo/dark-variant.html" } }, { "description": "Secondary navigation demo with long product name text that wraps to multiple lines in the logo slot.", "url": "https://ux.redhat.com/elements/navigation-secondary/demo/long-logo-text/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-secondary/demo/long-logo-text.html" } }, { "description": "Secondary navigation demo with right-to-left (RTL) text direction layout.", "url": "https://ux.redhat.com/elements/navigation-secondary/demo/right-to-left/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-secondary/demo/right-to-left.html" } }, { "description": "Secondary navigation demo with translated content showing localized text labels and menu items.", "url": "https://ux.redhat.com/elements/navigation-secondary/demo/translation/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-secondary/demo/translation.html" } }, { "description": "Secondary navigation demo with long dropdown menu content that exceeds the viewport height.", "url": "https://ux.redhat.com/elements/navigation-secondary/demo/with-long-content/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-secondary/demo/with-long-content.html" } } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "SecondaryNavOverlayChangeEvent", "declaration": { "name": "SecondaryNavOverlayChangeEvent", "module": "rh-navigation-secondary/rh-navigation-secondary.js" } }, { "kind": "custom-element-definition", "name": "rh-navigation-secondary", "declaration": { "name": "RhNavigationSecondary", "module": "rh-navigation-secondary/rh-navigation-secondary.js" } }, { "kind": "js", "name": "RhNavigationSecondary", "declaration": { "name": "RhNavigationSecondary", "module": "rh-navigation-secondary/rh-navigation-secondary.js" } } ] }, { "kind": "javascript-module", "path": "rh-navigation-vertical/rh-navigation-vertical-list.js", "declarations": [ { "name": "RhNavigationVerticalList", "summary": "Vertical navigation group", "description": "A collapsible group for organizing related links within an\n`\u003crh-navigation-vertical\u003e` element. Allows users to expand and\ncollapse sections. Authors should set `summary` to provide a\nlabel. Pressing Escape closes the group and returns focus to the\nsummary. Uses an ARIA `listitem` role for screen readers.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "preventEscElements", "default": "[\\n 'input:not([type=\"hidden\"]):not([type=\"radio\"])',\\n\\n // Elements that need the :disabled selector:\\n ...[\\n 'input[type=\"radio\"]',\\n 'select',\\n 'textarea',\\n 'rh-audio-player',\\n 'rh-dialog',\\n ].map(selector =\u003e `${selector}:not([inert]):not([inert] *):not([tabindex^='-']):not(:disabled)`),\\n\\n // Elements that don't need the :disabled selector:\\n ...[\\n 'iframe',\\n 'audio[controls]',\\n 'video[controls]',\\n '[contenteditable]',\\n ].map(selector =\u003e `${selector}:not([inert]):not([inert] *):not([tabindex^='-'])`),\\n ].join(',')", "readonly": true, "kind": "field", "static": true, "privacy": "private" }, { "name": "open", "description": "Optional open attribute that sets the open state of the group.\nDefaults to false.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "open", "reflects": true }, { "name": "summary", "description": "Optional summary attribute, sets the summary text.\nOverridden by the summary slot.", "type": { "text": "string" }, "kind": "field", "attribute": "summary" }, { "name": "highlight", "description": "Bolds the first `\u003crh-navigation-link\u003e` of the group. Should not be used if the first child is a `\u003crh-navigation-vertical-list\u003e`.\nDefaults to false.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "highlight", "reflects": true } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-vertical/rh-navigation-vertical-list.ts#L29" }, "kind": "class", "tagName": "rh-navigation-vertical-list", "attributes": [ { "name": "open", "description": "Optional open attribute that sets the open state of the group.\nDefaults to false.", "type": { "text": "boolean" }, "default": "false", "fieldName": "open" }, { "name": "summary", "description": "Optional summary attribute, sets the summary text.\nOverridden by the summary slot.", "type": { "text": "string" }, "fieldName": "summary" }, { "name": "highlight", "description": "Bolds the first `\u003crh-navigation-link\u003e` of the group. Should not be used if the first child is a `\u003crh-navigation-vertical-list\u003e`.\nDefaults to false.", "type": { "text": "boolean" }, "default": "false", "fieldName": "highlight" } ], "events": [ { "name": "toggle", "description": "Fires when the group opens or closes. The\nevent has no detail; check the `open` property on the element\nto determine the current state.", "type": { "text": "Event", "references": [ { "name": "Event", "package": "global:" } ] } } ], "slots": [ { "name": "summary", "summary": "Group heading label", "description": "Accepts inline text or a `\u003cspan\u003e`. Overrides the\n`summary` attribute. Screen readers use this as\nthe ARIA label for the disclosure toggle." }, { "name": "", "summary": "Navigation group items", "description": "Place `\u003crh-navigation-link\u003e` or nested\n`\u003crh-navigation-vertical-list\u003e` elements. ARIA\nlistitem role provides screen reader context.\nAvoid nesting deeper than five levels." } ], "cssProperties": [ { "name": "--rh-font-family-body-text", "description": "Summary label typeface\n\nBody text font family", "default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-size-body-text-md", "description": "Summary label font size\n\n16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-weight-body-text-regular", "description": "Summary label font weight\n\nRegular font weight", "default": "400", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-space-xs", "description": "Spacing between nested navigation items\n\nNested list block spacing\n\n4px spacer", "default": "4px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-md", "description": "8px spacer", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-lg", "description": "Spacing between summary text and caret icon\n\nNested list inline indentation\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-sm", "description": "Nested group uses smaller font size\n\nNested link font size\n\n14px font size", "default": "0.875rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-text-primary", "description": "Nested link text color, inherits from theme\n\nNested link text color on hover, inherits from theme" }, { "name": "--rh-color-border-subtle", "description": "Nested hover indicator uses subtle border" }, { "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-border-width-md", "description": "Nested hover indicator border width\n\nActive indicator border width\n\n2px border width: Example: Alert", "default": "2px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-brand-red", "description": "Active indicator uses brand accent\n\nCurrent page indicator uses brand accent" }, { "name": "--rh-font-weight-body-text-medium", "description": "Highlighted first link uses medium weight\n\nMedium font weight", "default": "500", "syntax": "\u003cnumber\u003e" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-navigation-vertical-list", "declaration": { "name": "RhNavigationVerticalList", "module": "rh-navigation-vertical/rh-navigation-vertical-list.js" } }, { "kind": "js", "name": "RhNavigationVerticalList", "declaration": { "name": "RhNavigationVerticalList", "module": "rh-navigation-vertical/rh-navigation-vertical-list.js" } } ] }, { "kind": "javascript-module", "path": "rh-navigation-vertical/rh-navigation-vertical.js", "declarations": [ { "name": "RhNavigationVertical", "summary": "Organizes and communicates structure and content vertically", "description": "A vertical sidebar navigation for organizing site structure. Authors\nmust set `accessible-label` when multiple navigation landmarks exist.\nUses a `navigation` ARIA role with a visually hidden heading for\nscreen readers. Keyboard users tab through links and groups.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "accessibleLabel", "description": "The accessible-label attribute labels the navigation using a visually hidden heading.\nDefaults to 'Navigation'. This label should be changed if other navigation elements\nare present or when translations are needed.", "type": { "text": "string" }, "default": "'Navigation'", "kind": "field", "attribute": "accessible-label" }, { "return": { "type": { "text": "void" } }, "name": "firstUpdated", "kind": "method", "privacy": "protected" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-vertical/rh-navigation-vertical.ts#L29" }, "kind": "class", "tagName": "rh-navigation-vertical", "attributes": [ { "name": "accessible-label", "description": "The accessible-label attribute labels the navigation using a visually hidden heading.\nDefaults to 'Navigation'. This label should be changed if other navigation elements\nare present or when translations are needed.", "type": { "text": "string" }, "default": "'Navigation'", "fieldName": "accessibleLabel" } ], "slots": [ { "name": "", "summary": "Navigation items", "description": "Place `\u003crh-navigation-link\u003e` or `\u003crh-navigation-vertical-list\u003e`\nelements. Each item receives an ARIA listitem role for\nscreen reader accessibility." } ], "cssProperties": [ { "name": "--rh-color-surface-lightest", "description": "Primary surface (light theme)", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-surface-darker", "description": "Secondary surface (dark theme)", "default": "#1f1f1f", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-space-xs", "description": "Spacing between navigation items\n\n4px spacer", "default": "4px", "syntax": "\u003clength\u003e" }, { "name": "--rh-line-height-body-text", "description": "Navigation label line height\n\nLine height for body text", "default": "1.5", "syntax": "\u003ccustom-ident\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-font-size-body-text-md", "description": "Top-level link font size\n\n16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-text-primary", "description": "Link text color, inherits from theme" }, { "name": "--rh-color-border-subtle", "description": "Hover indicator uses subtle border" }, { "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-border-width-lg", "description": "Hover indicator border width\n\nActive indicator border width\n\nCurrent page indicator border width\n\n3px border width: Example: Expanded Accordion panel", "default": "3px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-brand-red", "description": "Active indicator uses brand accent\n\nCurrent page indicator uses brand accent" } ], "demos": [ { "description": "Default vertical navigation with top-level links and expandable groups organized in a sidebar layout.", "url": "https://ux.redhat.com/elements/navigation-vertical/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-vertical/demo/index.html" } }, { "description": "Vertical navigation rendered in light and dark color contexts using rh-context-demo.", "url": "https://ux.redhat.com/elements/navigation-vertical/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-vertical/demo/color-context.html" } }, { "description": "Vertical navigation constrained to a fixed-width container, typical of sidebar layouts.", "url": "https://ux.redhat.com/elements/navigation-vertical/demo/contained/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-vertical/demo/contained.html" } }, { "description": "Deeply nested vertical navigation groups with highlighted first links and bordered inline start.", "url": "https://ux.redhat.com/elements/navigation-vertical/demo/nested/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-vertical/demo/nested.html" } }, { "description": "Vertical navigation with one group set to open by default using the open attribute.", "url": "https://ux.redhat.com/elements/navigation-vertical/demo/open/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-vertical/demo/open.html" } }, { "description": "Vertical navigation using slotted anchor elements and summary slots instead of attribute-based configuration.", "url": "https://ux.redhat.com/elements/navigation-vertical/demo/slotted-anchor-links/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-vertical/demo/slotted-anchor-links.html" } }, { "description": "Vertical navigation links and groups with slotted rh-icon elements for visual context.", "url": "https://ux.redhat.com/elements/navigation-vertical/demo/slotted-icons/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-vertical/demo/slotted-icons.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-navigation-vertical", "declaration": { "name": "RhNavigationVertical", "module": "rh-navigation-vertical/rh-navigation-vertical.js" } }, { "kind": "js", "name": "RhNavigationVertical", "declaration": { "name": "RhNavigationVertical", "module": "rh-navigation-vertical/rh-navigation-vertical.js" } } ] }, { "kind": "javascript-module", "path": "rh-pagination/rh-pagination.js", "declarations": [ { "name": "RhPagination", "summary": "Navigate between pages of content with steppers and input", "description": "Pagination allows users to navigate between pages of related content.\nUse it when content is too long for a single view. Authors must\nprovide a single `\u003col\u003e` with `\u003cli\u003e\u003ca\u003e` page links where the active\npage should have `aria-current=\"page\"`. Tab navigates between controls;\nEnter activates. Supports box and open variants, default and small sizes.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "instances", "default": "new Set\u003cRhPagination\u003e()", "kind": "field", "static": true, "privacy": "private" }, { "name": "overflow", "description": "Controls which end(s) of the page list are truncated with ellipsis.\nAccepts `'start'` | `'end'` | `'both'` | `null`. Computed automatically\nfrom page count and current index. Reflected to the host attribute so\nlight-DOM CSS can hide overflow `\u003cli\u003e` elements. Defaults to `null`.", "type": { "text": "'start' | 'end' | 'both' | null" }, "default": "null", "kind": "field", "attribute": "overflow", "reflects": true }, { "name": "label", "description": "Accessible label for the `\u003cnav\u003e` landmark. Should be unique when multiple paginations exist on a page. Defaults to `'Page navigation'`.", "type": { "text": "string" }, "default": "'Page navigation'", "kind": "field", "attribute": "label" }, { "name": "labelFirst", "description": "Accessible label for the first-page stepper button. Used by screen readers. Defaults to `'first page'`.", "type": { "text": "string" }, "default": "'first page'", "kind": "field", "attribute": "label-first" }, { "name": "labelPrevious", "description": "Accessible label for the previous-page stepper button. Used by screen readers. Defaults to `'previous page'`.", "type": { "text": "string" }, "default": "'previous page'", "kind": "field", "attribute": "label-previous" }, { "name": "labelNext", "description": "Accessible label for the next-page stepper button. Used by screen readers. Defaults to `'next page'`.", "type": { "text": "string" }, "default": "'next page'", "kind": "field", "attribute": "label-next" }, { "name": "labelLast", "description": "Accessible label for the last-page stepper button. Used by screen readers. Defaults to `'last page'`.", "type": { "text": "string" }, "default": "'last page'", "kind": "field", "attribute": "label-last" }, { "name": "size", "description": "Controls pagination size. Accepts `'sm'` for smaller touch targets (WCAG AA) or `null` for default (WCAG AAA). Defaults to `null`.", "type": { "text": "'sm' | null" }, "default": "null", "kind": "field", "attribute": "size", "reflects": true }, { "name": "variant", "description": "Visual variant. Accepts `'borderless'` for transparent backgrounds with bottom borders, or `null` for the default box variant. Defaults to `null`.", "type": { "text": "'borderless' | null" }, "default": "null", "kind": "field", "attribute": "variant", "reflects": true }, { "parameters": [ { "name": "value", "type": { "text": "string | null" } } ], "name": "fromAttribute", "kind": "method" }, { "name": "firstUpdated", "kind": "method" }, { "name": "first", "description": "Navigate to the first page", "kind": "method" }, { "name": "prev", "description": "Navigate to the previous page", "kind": "method" }, { "name": "next", "description": "Navigate to the next page", "kind": "method" }, { "name": "last", "description": "Navigate to the last page", "kind": "method" }, { "parameters": [ { "name": "page", "type": { "text": "'first' | 'prev' | 'next' | 'last' | number" } } ], "name": "go", "description": "Navigate to a specific page", "kind": "method" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-pagination/rh-pagination.ts#L40" }, "kind": "class", "tagName": "rh-pagination", "attributes": [ { "name": "overflow", "description": "Controls which end(s) of the page list are truncated with ellipsis.\nAccepts `'start'` | `'end'` | `'both'` | `null`. Computed automatically\nfrom page count and current index. Reflected to the host attribute so\nlight-DOM CSS can hide overflow `\u003cli\u003e` elements. Defaults to `null`.", "type": { "text": "'start' | 'end' | 'both' | null" }, "default": "null", "fieldName": "overflow" }, { "name": "label", "description": "Accessible label for the `\u003cnav\u003e` landmark. Should be unique when multiple paginations exist on a page. Defaults to `'Page navigation'`.", "type": { "text": "string" }, "default": "'Page navigation'", "fieldName": "label" }, { "name": "label-first", "description": "Accessible label for the first-page stepper button. Used by screen readers. Defaults to `'first page'`.", "type": { "text": "string" }, "default": "'first page'", "fieldName": "labelFirst" }, { "name": "label-previous", "description": "Accessible label for the previous-page stepper button. Used by screen readers. Defaults to `'previous page'`.", "type": { "text": "string" }, "default": "'previous page'", "fieldName": "labelPrevious" }, { "name": "label-next", "description": "Accessible label for the next-page stepper button. Used by screen readers. Defaults to `'next page'`.", "type": { "text": "string" }, "default": "'next page'", "fieldName": "labelNext" }, { "name": "label-last", "description": "Accessible label for the last-page stepper button. Used by screen readers. Defaults to `'last page'`.", "type": { "text": "string" }, "default": "'last page'", "fieldName": "labelLast" }, { "name": "size", "description": "Controls pagination size. Accepts `'sm'` for smaller touch targets (WCAG AA) or `null` for default (WCAG AAA). Defaults to `null`.", "type": { "text": "'sm' | null" }, "default": "null", "fieldName": "size" }, { "name": "variant", "description": "Visual variant. Accepts `'borderless'` for transparent backgrounds with bottom borders, or `null` for the default box variant. Defaults to `null`.", "type": { "text": "'borderless' | null" }, "default": "null", "fieldName": "variant" } ], "slots": [ { "name": "", "summary": "Page link list", "description": "Expects a single `\u003col\u003e` containing `\u003cli\u003e\u003ca\u003e` block\nelements for each page. The active page link must have\n`aria-current=\"page\"` or match the current URL.\nAuthors should ensure each link has descriptive text\nfor assistive technology. The wrapping `\u003cnav\u003e` is\nannounced as a landmark labeled by the `label`\nproperty; authors must keep labels unique when\nmultiple paginations exist on a page." }, { "name": "go-to-page", "summary": "page input label text (go-to-page slot)", "description": "Label text preceding the page number input field. Defaults to\n\"Page\". Customize for internationalization. Visually hidden at\nvery small widths but always accessible to screen readers via\n`aria-labelledby`." }, { "name": "out-of", "description": "summary: preposition text between page input and total (default: \"of\")\ndescription: |\n Contains the text displayed between the current page input field and the total page count.\n Defaults to \"of\" but can be customized for internationalization or alternate phrasing." } ], "cssParts": [ { "name": "container", "description": "The outer flex container wrapping stepper buttons, nav, and numeric input" }, { "name": "numeric", "description": "The container for the page input, separator text, and total page link" } ], "cssProperties": [ { "name": "--rh-length-3xl", "description": "Stepper button size\n\n48px length token", "default": "48px", "syntax": "\u003clength\u003e" }, { "name": "--rh-length-2xl", "description": "Stepper button size at small size\n\n32px length token", "default": "32px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-interactive-primary-hover" }, { "name": "--rh-color-interactive-primary-visited-default", "description": "Page link visited color" }, { "name": "--rh-color-interactive-primary-visited-hover", "description": "Page link visited hover color" }, { "name": "--rh-color-surface-lighter", "description": "Page link background in light mode\n\nStepper background in light mode\n\nTertiary 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-on-dark", "description": "Stepper hover/focus icon color\n\nPrimary text color for dark theme", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-border-subtle-on-light", "description": "Stepper hover border in dark mode\n\nSubtle border color (light theme)", "default": "#c7c7c7", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-text-secondary-on-dark", "description": "Stepper icon color in dark mode\n\nSecondary text color for dark theme", "default": "#c7c7c7", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-icon-status-disabled" }, { "name": "--rh-space-xl", "description": "24px spacer", "default": "24px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-xs", "description": "4px spacer", "default": "4px", "syntax": "\u003clength\u003e" }, { "name": "--rh-pagination-stepper-color", "description": "Stepper icon color override", "default": "var(--rh-color-gray-50, #707070)" }, { "name": "--rh-font-family-heading", "description": "Stepper typeface\n\nHeading font family", "default": "RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-size-heading-xs", "description": "Stepper text size\n\nh6 heading font size", "default": "1.25rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-border-width-lg", "description": "Stepper hover/focus border width\n\n3px border width: Example: Expanded Accordion panel", "default": "3px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-border-interactive", "description": "Stepper focus accent border color" }, { "name": "--rh-pagination-background-focused", "description": "Sets the disabled stepper color." }, { "name": "--rh-space-2xl", "description": "32px spacer", "default": "32px", "syntax": "\u003clength\u003e" }, { "name": "--rh-length-4xl", "description": "Pagination inline size\n\n64px length token", "default": "64px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-surface-lightest", "description": "Current page background in light mode\n\nInput background in light mode\n\nPrimary surface (light theme)", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-surface-darkest", "description": "Current page background in dark mode\n\nInput background in dark mode\n\nPrimary surface (dark theme)", "default": "#151515", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-border-subtle", "description": "Current page border color\n\nInput border color" }, { "name": "--rh-color-gray-60", "description": "Stepper hover border in light mode\n\nDisabled icon color in dark mode\n\nInput bottom border in dark mode\n\nSecondary text (light theme)", "default": "#4d4d4d", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-text-primary", "description": "Page link text color\n\nPagination text color" }, { "name": "--rh-pagination-accent-color", "description": "Page link color override\n\nPage link focus color override\n\nPage link focus outline color override\n\nSets the accent color for focus outlines\n\nStepper focus accent border color override\n\nInput focus border color override", "default": "var(--rh-color-interactive-primary-default)" }, { "name": "--rh-color-interactive-primary-default", "description": "Page link color\n\nPage link focus color\n\nPage link focus outline color\n\nStepper focus outline color\n\nInput focus border color" }, { "name": "--rh-space-sm", "description": "Pagination vertical spacing\n\n6px spacer", "default": "6px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-red-60", "description": "Dark brand red", "default": "#a60000", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-red-40", "description": "Light brand red", "default": "#f56e6e", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-font-size-body-text-md", "description": "Input text size\n\nPagination text size\n\n16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-lg", "description": "Pagination horizontal margin\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-md", "description": "Pagination horizontal spacing\n\n8px spacer", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-border-width-sm", "description": "Stepper border width\n\nInput border width\n\nTotal link underline width\n\n1px border width; Example: Secondary CTA or Button", "default": "1px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-gray-50", "description": "Stepper icon color in light mode\n\nStepper icon color\n\nTotal link underline in light mode\n\nSubtle icon", "default": "#707070", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-40", "description": "Disabled icon color in light mode\n\nInput bottom border in light mode\n\nTotal link underline in dark mode\n\nSubtle icon (hover state)", "default": "#a3a3a3", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-border-radius-default", "description": "Stepper focus corner rounding\n\nTotal link focus corner rounding\n\n3px border radius; Example: Card", "default": "3px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-border-width-md", "description": "Pagination focus outline\n\nStepper focus accent border width\n\nInput focus border width\n\nTotal link focus outline width\n\n2px border width: Example: Alert", "default": "2px", "syntax": "\u003clength\u003e" } ], "demos": [ { "description": "Default pagination with page links and numeric input.", "url": "https://ux.redhat.com/elements/pagination/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-pagination/demo/index.html" } }, { "description": "Page 3 is marked with aria-current=\u0026quot;page\u0026quot; by default, regardless of the URL. This takes precedence over the URL hash. When the URL hash changes, aria-current=\u0026quot;page\u0026quot; is set on the correct link.", "url": "https://ux.redhat.com/elements/pagination/demo/aria-current/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-pagination/demo/aria-current.html" } }, { "url": "https://ux.redhat.com/elements/pagination/demo/borderless-compact-size/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-pagination/demo/borderless-compact-size.html" } }, { "url": "https://ux.redhat.com/elements/pagination/demo/borderless-compact/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-pagination/demo/borderless-compact.html" } }, { "url": "https://ux.redhat.com/elements/pagination/demo/borderless/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-pagination/demo/borderless.html" } }, { "description": "Pagination rendered in light and dark color contexts.", "url": "https://ux.redhat.com/elements/pagination/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-pagination/demo/color-context.html" } }, { "description": "Compact pagination layout with numeric input between stepper buttons.", "url": "https://ux.redhat.com/elements/pagination/demo/compact/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-pagination/demo/compact.html" } }, { "description": "Pagination with a large number of pages to test truncation behavior.", "url": "https://ux.redhat.com/elements/pagination/demo/many-pages/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-pagination/demo/many-pages.html" } }, { "description": "Pagination without the numeric page input control visible.", "url": "https://ux.redhat.com/elements/pagination/demo/no-numeric-control/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-pagination/demo/no-numeric-control.html" } }, { "description": "Pagination demonstrating truncation overflow with many pages.", "url": "https://ux.redhat.com/elements/pagination/demo/overflow/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-pagination/demo/overflow.html" } }, { "description": "Pagination in right-to-left (RTL) direction layout.", "url": "https://ux.redhat.com/elements/pagination/demo/right-to-left/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-pagination/demo/right-to-left.html" } }, { "description": "Compact pagination in small size with inline numeric input.", "url": "https://ux.redhat.com/elements/pagination/demo/size-compact/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-pagination/demo/size-compact.html" } }, { "description": "Pagination in small size variant with reduced button dimensions.", "url": "https://ux.redhat.com/elements/pagination/demo/size/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-pagination/demo/size.html" } }, { "description": "Demonstration of the pagination element in a simple Vue 3 application.", "url": "https://ux.redhat.com/elements/pagination/demo/vue/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-pagination/demo/vue.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-pagination", "declaration": { "name": "RhPagination", "module": "rh-pagination/rh-pagination.js" } }, { "kind": "js", "name": "RhPagination", "declaration": { "name": "RhPagination", "module": "rh-pagination/rh-pagination.js" } } ] }, { "kind": "javascript-module", "path": "rh-progress-stepper/rh-progress-step.js", "declarations": [ { "name": "RhProgressStepChangeEvent", "description": "Fired when a step becomes active", "superclass": { "name": "Event", "package": "global:" }, "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-progress-stepper/rh-progress-step.ts#L43" }, "kind": "class" }, { "name": "RhProgressStep", "summary": "Single step in a progress stepper", "description": "A progress step represents a single step in a progress stepper.\nEach step can have different states and may include an icon, label,\nand description. Steps can also be linked to URLs.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "state", "description": "Sets the state of the progress step\n- `inactive` - The step is not active\n- `active` - The step is currently active\n- `complete` - The step has been completed\n- `warn` - The step is in a warning state\n- `fail` - The step has failed\n- `custom` - The step uses a custom icon", "type": { "text": "'inactive' | 'active' | 'complete' | 'warn' | 'fail' | 'custom'", "references": [ { "name": "ProgressStepState", "module": "rh-progress-stepper/rh-progress-step.js" } ] }, "kind": "field", "attribute": "state", "reflects": true }, { "name": "description", "description": "Sets the description text for the progress step when more context is needed.\nDescriptions are secondary to titles.\n\nIt is overridden by the `description` slot.", "type": { "text": "string" }, "kind": "field", "attribute": "description", "reflects": true }, { "name": "icon", "description": "Can be used to set a custom icon for the step.\nWhen the step is in the `warn` or `fail` state, it should not have a custom icon.\nIf there's no custom icon, the default active or inactive icon will appear.\n\nIt can be overridden by the `icon` slot.", "type": { "text": "IconNameFor\u003cIconSetName\u003e" }, "kind": "field", "attribute": "icon" }, { "name": "iconSet", "description": "Icon set for the `icon` property - 'ui' by default", "type": { "text": "'ui' | 'standard' | 'social' | 'microns'", "references": [ { "name": "IconSetName", "package": "@rhds/icons" } ] }, "default": "'ui'", "kind": "field", "attribute": "icon-set" }, { "name": "href", "description": "Sets a URL to make the step's title clickable.\nOnly completed or current steps will appear linked.\nThe linked title will use our inline link styling, with gray, dashed underlines.", "type": { "text": "string" }, "kind": "field", "attribute": "href", "reflects": true }, { "name": "computeIcon", "description": "Icons for each step indicates the status of a process or task.\nIcons change as users progress.\n\nComputes the icon for the step:", "kind": "method", "privacy": "protected" }, { "name": "stateChanged", "kind": "method", "privacy": "protected" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-progress-stepper/rh-progress-step.ts#L60" }, "kind": "class", "tagName": "rh-progress-step", "attributes": [ { "name": "state", "description": "Sets the state of the progress step\n- `inactive` - The step is not active\n- `active` - The step is currently active\n- `complete` - The step has been completed\n- `warn` - The step is in a warning state\n- `fail` - The step has failed\n- `custom` - The step uses a custom icon", "type": { "text": "'inactive' | 'active' | 'complete' | 'warn' | 'fail' | 'custom'", "references": [ { "name": "ProgressStepState", "module": "rh-progress-stepper/rh-progress-step.js" } ] }, "fieldName": "state" }, { "name": "description", "description": "Sets the description text for the progress step when more context is needed.\nDescriptions are secondary to titles.\n\nIt is overridden by the `description` slot.", "type": { "text": "string" }, "fieldName": "description" }, { "name": "icon", "description": "Can be used to set a custom icon for the step.\nWhen the step is in the `warn` or `fail` state, it should not have a custom icon.\nIf there's no custom icon, the default active or inactive icon will appear.\n\nIt can be overridden by the `icon` slot.", "type": { "text": "IconNameFor\u003cIconSetName\u003e" }, "fieldName": "icon" }, { "name": "icon-set", "description": "Icon set for the `icon` property - 'ui' by default", "type": { "text": "'ui' | 'standard' | 'social' | 'microns'", "references": [ { "name": "IconSetName", "package": "@rhds/icons" } ] }, "default": "'ui'", "fieldName": "iconSet" }, { "name": "href", "description": "Sets a URL to make the step's title clickable.\nOnly completed or current steps will appear linked.\nThe linked title will use our inline link styling, with gray, dashed underlines.", "type": { "text": "string" }, "fieldName": "href" } ], "events": [ { "name": "change", "description": "fired when this step becomes active", "type": { "text": " RhProgressStepChangeEvent " } } ], "slots": [ { "name": "", "description": "A short title (1 to 3 words) for each step is required and serves as the step's accessible name.\nTitles can be hyperlinked. Do not add punctuation to end." }, { "name": "icon", "summary": "custom icon for the step", "description": "Overrides the `icon` and `icon-set` attributes.\nPrefer using the `icon` attribute and the (default) UI Icon set.\nAvoid slotting content here if the step is in the `warn` or `fail` state,\nSince those states should always show their prescribed icons." }, { "name": "description", "summary": "Elaborative, optional description for the step", "description": "Rich HTML content can be slotted here , to override the (plain text) `description` attribute.\nAvoid slotting links, images, block-level content, etc.: descriptions should be prose only \n(around 40 characters or a max of 2 lines at the 768px breakpoint)." } ], "cssProperties": [ { "name": "--rh-color-text-primary", "summary": "Icon color (default state)\n\nLabel text color (default state)" }, { "name": "--rh-length-5xl", "summary": "Horizontal padding in compact mode at wide viewports", "description": "80px length token", "default": "80px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-text-secondary", "summary": "A step's description color" }, { "name": "--rh-font-family-body-text", "summary": "Font family for step labels and descriptions", "description": "Body text font family", "default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-size-body-text-md", "summary": "Font size for step labels", "description": "16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-border-width-md", "description": "2px border width: Example: Alert", "default": "2px", "syntax": "\u003clength\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-gray-50", "description": "Subtle icon", "default": "#707070", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-40", "description": "Subtle icon (hover state)", "default": "#a3a3a3", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-interactive-primary-hover", "summary": "Link text color on hover\n\nLink underline color on hover" }, { "name": "--rh-font-weight-body-text-regular", "summary": "Font weight for labels of steps\n\nFont weight for step descriptions", "description": "Regular font weight", "default": "400", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-font-size-body-text-xs", "summary": "Font size for step descriptions", "description": "12px font size", "default": "0.75rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-status-note", "summary": "Icon color when step is active" }, { "name": "--rh-color-status-success", "summary": "Icon color when step is complete" }, { "name": "--rh-color-yellow-50", "summary": "Warning icon color in light mode", "default": "#b98412", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-yellow-30", "summary": "Warning icon color in dark mode", "default": "#ffcc17", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-yellow-60", "summary": "Warning label color in light mode", "default": "#96640f", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-yellow-20", "summary": "Warning label color in dark mode", "default": "#ffe072", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-status-danger", "summary": "Icon color when step has failed\n\nLabel color when step has failed" }, { "name": "--rh-font-weight-body-text-medium", "summary": "Font weight for current/active/warn/fail step labels", "description": "Medium font weight", "default": "500", "syntax": "\u003cnumber\u003e" } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "RhProgressStepChangeEvent", "declaration": { "name": "RhProgressStepChangeEvent", "module": "rh-progress-stepper/rh-progress-step.js" } }, { "kind": "custom-element-definition", "name": "rh-progress-step", "declaration": { "name": "RhProgressStep", "module": "rh-progress-stepper/rh-progress-step.js" } }, { "kind": "js", "name": "RhProgressStep", "declaration": { "name": "RhProgressStep", "module": "rh-progress-stepper/rh-progress-step.js" } } ] }, { "kind": "javascript-module", "path": "rh-progress-stepper/rh-progress-stepper.js", "declarations": [ { "name": "RhProgressStepper", "summary": "Communicate how many steps are required to complete a process", "description": "A progress stepper conveys the steps necessary to complete a process or task, and the status of\neach step. Steps have titles and descriptions; and each step can be in one of a number of possible states:\n- inactive (yet to be performed)\n- active (currently being performed)\n- warn (succeeded, but with warnings)\n- fail (failed to occur)\nOr a custom state, set using the `icon` attribute.\n\n## Usage guidelines\n- Use 3-5 steps maximum to reduce cognitive load\n- Designed to complement standard previous/next navigation. Avoid using as the only navigation.\n- When process is completed, users cannot go back and must start over\n\n## Accessibility\n- Communicates list structure and step states to screen readers\n- Supports keyboard navigation for linked step titles\n- Maintains logical focus order (left to right, top to bottom)\n- Provides aria-current for the active step", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "verticalAt", "description": "Makes the element `vertical` at various container query based breakpoints.\nBreakpoints available 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n\nUse when horizontal space becomes limited. The element automatically\nchanges to vertical orientation at screen sizes of \u003c768px.", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'" }, "default": "undefined", "kind": "field", "attribute": "vertical-at", "reflects": true }, { "name": "orientation", "description": "Sets the orientation of the progress stepper.\n- `horizontal` - Steps are displayed in a horizontal row (default)\n- `vertical` - Steps are displayed in a vertical column\n\n## Responsive behavior\n- \u003e992px: Padding between steps is set to --rh-space-5xl\n- ≤992px: Padding reduces to --rh-space-2xl\n- \u003c768px: Orientation automatically changes to vertical\n\nUse vertical orientation when horizontal space is limited or when\nyou need to display more detailed step information.", "type": { "text": "'horizontal' | 'vertical'", "references": [ { "name": "ProgressStepsOrientation", "module": "rh-progress-stepper/rh-progress-stepper.js" } ] }, "default": "'horizontal'", "kind": "field", "attribute": "orientation", "reflects": true }, { "name": "compact", "description": "Makes element display as `compact`.\n\n## Usage guidelines\n- Use when there is limited space and less visual prominence is needed\n- Maintain the compact size as designed - do not stretch spacing between steps\n- Switch to default size or different orientation instead of stretching compact\n- Always include step titles even in compact mode for accessibility", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "compact", "reflects": true }, { "return": { "type": { "text": "void" } }, "name": "firstUpdated", "description": "Initializes responsive behavior on first update.\nSets mobile state based on element width,\nensuring the stepper displays correctly on initial load.", "kind": "method", "privacy": "protected" }, { "name": "verticalAtChanged", "description": "Handles changes to the verticalAt property.\nUpdates the breakpoint threshold for responsive vertical orientation switching.", "kind": "method", "privacy": "protected" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-progress-stepper/rh-progress-stepper.ts#L72" }, "kind": "class", "tagName": "rh-progress-stepper", "attributes": [ { "name": "vertical-at", "description": "Makes the element `vertical` at various container query based breakpoints.\nBreakpoints available 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n\nUse when horizontal space becomes limited. The element automatically\nchanges to vertical orientation at screen sizes of \u003c768px.", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'" }, "default": "undefined", "fieldName": "verticalAt" }, { "name": "orientation", "description": "Sets the orientation of the progress stepper.\n- `horizontal` - Steps are displayed in a horizontal row (default)\n- `vertical` - Steps are displayed in a vertical column\n\n## Responsive behavior\n- \u003e992px: Padding between steps is set to --rh-space-5xl\n- ≤992px: Padding reduces to --rh-space-2xl\n- \u003c768px: Orientation automatically changes to vertical\n\nUse vertical orientation when horizontal space is limited or when\nyou need to display more detailed step information.", "type": { "text": "'horizontal' | 'vertical'", "references": [ { "name": "ProgressStepsOrientation", "module": "rh-progress-stepper/rh-progress-stepper.js" } ] }, "default": "'horizontal'", "fieldName": "orientation" }, { "name": "compact", "description": "Makes element display as `compact`.\n\n## Usage guidelines\n- Use when there is limited space and less visual prominence is needed\n- Maintain the compact size as designed - do not stretch spacing between steps\n- Switch to default size or different orientation instead of stretching compact\n- Always include step titles even in compact mode for accessibility", "type": { "text": "boolean" }, "default": "false", "fieldName": "compact" } ], "slots": [ { "name": "", "description": "Use this slot for `\u003crh-progress-step\u003e` items\nEach step should include title and optional description" } ], "cssProperties": [ { "name": "--rh-color-border-strong", "summary": "Connecting line color between steps" }, { "name": "--rh-color-text-primary", "summary": "Step label color (default state)" }, { "name": "--rh-length-xl", "summary": "Base icon container size", "description": "24px length token", "default": "24px", "syntax": "\u003clength\u003e" }, { "name": "--rh-size-icon-02", "summary": "Icon size for step indicators", "description": "24px icon box", "default": "24px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-border-subtle", "summary": "Connecting line color for inactive steps" }, { "name": "--rh-length-2xl", "summary": "Horizontal padding between steps in compact mode\n\nVertical padding between steps in compact vertical mode", "description": "32px length token", "default": "32px", "syntax": "\u003clength\u003e" }, { "name": "--rh-length-xs", "summary": "Vertical spacing between rows in step grid\n\nVertical spacing between step elements", "description": "4px length token", "default": "4px", "syntax": "\u003clength\u003e" }, { "name": "--rh-length-lg", "summary": "Horizontal gap between step elements\n\nVertical spacing between stepper elements\n\nHorizontal gap between icon and label in vertical mode\n\nHorizontal padding in compact horizontal mode\n\nVertical padding in compact vertical mode\n\nHorizontal padding override for compact steps", "description": "16px length token", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-status-note", "summary": "Color for active step in compact mode" }, { "name": "--rh-color-status-success", "summary": "Color for completed step in compact mode" }, { "name": "--rh-color-yellow-50", "summary": "Warning step color in light mode", "default": "#b98412", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-yellow-30", "summary": "Warning step color in dark mode", "default": "#ffcc17", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-yellow-60", "summary": "Warning step label color in light mode", "default": "#96640f", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-yellow-20", "summary": "Warning step label color in dark mode", "default": "#ffe072", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-status-danger", "summary": "Color for failed step icon in compact mode\n\nColor for failed step label in compact mode" } ], "demos": [ { "url": "https://ux.redhat.com/elements/progress-stepper/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-progress-stepper/demo/index.html" } }, { "url": "https://ux.redhat.com/elements/progress-stepper/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-progress-stepper/demo/color-context.html" } }, { "url": "https://ux.redhat.com/elements/progress-stepper/demo/compact-horizontal/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-progress-stepper/demo/compact-horizontal.html" } }, { "url": "https://ux.redhat.com/elements/progress-stepper/demo/compact-vertical/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-progress-stepper/demo/compact-vertical.html" } }, { "url": "https://ux.redhat.com/elements/progress-stepper/demo/custom-icon/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-progress-stepper/demo/custom-icon.html" } }, { "url": "https://ux.redhat.com/elements/progress-stepper/demo/linked-steps/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-progress-stepper/demo/linked-steps.html" } }, { "url": "https://ux.redhat.com/elements/progress-stepper/demo/rich-descriptions/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-progress-stepper/demo/rich-descriptions.html" } }, { "url": "https://ux.redhat.com/elements/progress-stepper/demo/vertical-at/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-progress-stepper/demo/vertical-at.html" } }, { "url": "https://ux.redhat.com/elements/progress-stepper/demo/vertical-stepper/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-progress-stepper/demo/vertical-stepper.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-progress-stepper", "declaration": { "name": "RhProgressStepper", "module": "rh-progress-stepper/rh-progress-stepper.js" } }, { "kind": "js", "name": "RhProgressStepper", "declaration": { "name": "RhProgressStepper", "module": "rh-progress-stepper/rh-progress-stepper.js" } } ] }, { "kind": "javascript-module", "path": "rh-readtime/rh-readtime.js", "declarations": [ { "name": "RhReadtime", "summary": "Displays estimated reading time for content", "description": "Provides an estimated reading time for content. Authors\nSHOULD provide a `selector` or nest inside a container.\nAuthors MUST use `%t` in light DOM as a minutes placeholder.\nAVOID combining `word-count` with `selector`. Renders as\ninline text readable by screen readers without additional\nARIA roles. No keyboard interaction is needed as this\nelement is non-interactive display text.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "selector", "description": "CSS selector targeting the content container to read from.\nIf omitted and `word-count` is not set, defaults to `parentElement`.", "type": { "text": "string" }, "kind": "field", "attribute": "selector", "reflects": true }, { "name": "wordCount", "description": "Manual word count. When set, the component uses this value\ndirectly instead of reading from a container.", "type": { "text": "number" }, "kind": "field", "attribute": "word-count", "reflects": true }, { "name": "imageCount", "description": "Manual image count. Enables image time weighting in either mode.\nIn container mode, overrides the DOM image count.", "type": { "text": "number" }, "kind": "field", "attribute": "image-count", "reflects": true }, { "name": "images", "description": "Opt-in to image weighting in container mode.\nWhen set, counts `\u003cimg\u003e` and non-decorative `\u003csvg\u003e` elements\nfrom the target container. Not needed when `image-count` is set.\nIn property mode without `image-count`, has no effect.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "images", "reflects": true }, { "name": "minutes", "description": "Computed reading time in minutes.", "type": { "text": "number" }, "readonly": true, "kind": "field" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-readtime/rh-readtime.ts#L156" }, "kind": "class", "tagName": "rh-readtime", "attributes": [ { "name": "selector", "description": "CSS selector targeting the content container to read from.\nIf omitted and `word-count` is not set, defaults to `parentElement`.", "type": { "text": "string" }, "fieldName": "selector" }, { "name": "word-count", "description": "Manual word count. When set, the component uses this value\ndirectly instead of reading from a container.", "type": { "text": "number" }, "fieldName": "wordCount" }, { "name": "image-count", "description": "Manual image count. Enables image time weighting in either mode.\nIn container mode, overrides the DOM image count.", "type": { "text": "number" }, "fieldName": "imageCount" }, { "name": "images", "description": "Opt-in to image weighting in container mode.\nWhen set, counts `\u003cimg\u003e` and non-decorative `\u003csvg\u003e` elements\nfrom the target container. Not needed when `image-count` is set.\nIn property mode without `image-count`, has no effect.", "type": { "text": "boolean" }, "default": "false", "fieldName": "images" } ], "cssProperties": [ { "name": "--rh-font-family-body-text", "description": "Sets the body text font family using the `--rh-font-family-body-text` design token\n\nBody text font family", "default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-size-body-text-md", "description": "Sets the body text size using the `--rh-font-size-body-text-md` design token\n\n16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-weight-body-text-regular", "description": "Sets the body text weight using the `--rh-font-weight-body-text-regular` design token\n\nRegular font weight", "default": "400", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-line-height-body-text", "description": "Sets the body text line height using the `--rh-line-height-body-text` design token\n\nLine height for body text", "default": "1.5", "syntax": "\u003ccustom-ident\u003e" } ], "demos": [ { "description": "Uses a CSS selector to target a content container. The component counts words and images from the target element to compute reading time.", "url": "https://ux.redhat.com/elements/readtime/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-readtime/demo/index.html" } }, { "description": "The component uses the lang attribute to determine words-per-minute for the target language. The %t placeholder allows flexible positioning of the number within localized strings.", "url": "https://ux.redhat.com/elements/readtime/demo/i10n/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-readtime/demo/i10n.html" } }, { "description": "Combines word-count and image-count attributes to include image viewing time in the reading estimate.", "url": "https://ux.redhat.com/elements/readtime/demo/image-count/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-readtime/demo/image-count.html" } }, { "description": "With the images attribute, the component counts images in the container and adds time using Medium's weighting algorithm.", "url": "https://ux.redhat.com/elements/readtime/demo/image-weighting/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-readtime/demo/image-weighting.html" } }, { "description": "When no selector is provided, the component reads from its parent element and counts words automatically.", "url": "https://ux.redhat.com/elements/readtime/demo/parent-element/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-readtime/demo/parent-element.html" } }, { "description": "Uses the word-count attribute to compute reading time from a static value without reading from a DOM container.", "url": "https://ux.redhat.com/elements/readtime/demo/word-count/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-readtime/demo/word-count.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-readtime", "declaration": { "name": "RhReadtime", "module": "rh-readtime/rh-readtime.js" } }, { "kind": "js", "name": "RhReadtime", "declaration": { "name": "RhReadtime", "module": "rh-readtime/rh-readtime.js" } } ] }, { "kind": "javascript-module", "path": "rh-scheme-toggle/rh-scheme-toggle.js", "declarations": [ { "name": "RhSchemeToggle", "summary": "Switches between light, dark, and system default color schemes.", "description": "A scheme toggle provides users with the ability to switch between\nlight, dark, and system default color schemes. It should be placed\nin a visible location for easy access. For WCAG compliance, screen\nreader users must be able to identify each option; the component\nuses a native fieldset with ARIA-compatible radio buttons. Tab\nfocuses the group; arrow keys allow selection between schemes.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "scheme", "description": "Current color scheme setting. Reflects to the `scheme` attribute and\ninitializes from `localStorage.rhdsColorScheme` when available.\nWhen set, applies the value to `document.body.style.colorScheme`\nand persists it to `localStorage`.", "type": { "text": "'light' | 'dark' | 'light dark'", "references": [ { "name": "Scheme", "module": "rh-scheme-toggle/rh-scheme-toggle.js" } ] }, "default": "globalThis.localStorage\\n ?.rhdsColorScheme as Scheme", "kind": "field", "attribute": "scheme", "reflects": true }, { "name": "legendText", "description": "Legend text displayed next to the toggle button group.\nAuthors should keep this text short (under 20 characters).", "type": { "text": "string" }, "default": "'Color scheme'", "kind": "field", "attribute": "legend-text" }, { "name": "lightText", "description": "Accessible label for the light mode radio button.\nRendered as a visually-hidden span and a `title` tooltip.", "type": { "text": "string" }, "default": "'Light'", "kind": "field", "attribute": "light-text" }, { "name": "darkText", "description": "Accessible label for the dark mode radio button.\nRendered as a visually-hidden span and a `title` tooltip.", "type": { "text": "string" }, "default": "'Dark'", "kind": "field", "attribute": "dark-text" }, { "name": "systemText", "description": "Accessible label for the system default radio button.\nRendered as a visually-hidden span and a `title` tooltip.", "type": { "text": "string" }, "default": "'System'", "kind": "field", "attribute": "system-text" }, { "name": "schemeChanged", "description": "Observes changes to the `scheme` property. Applies the selected\ncolor scheme to `document.body` and persists it to `localStorage`\nso the preference survives page reloads.", "kind": "method", "privacy": "private" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-scheme-toggle/rh-scheme-toggle.ts#L32" }, "kind": "class", "tagName": "rh-scheme-toggle", "attributes": [ { "name": "scheme", "description": "Current color scheme setting. Reflects to the `scheme` attribute and\ninitializes from `localStorage.rhdsColorScheme` when available.\nWhen set, applies the value to `document.body.style.colorScheme`\nand persists it to `localStorage`.", "type": { "text": "'light' | 'dark' | 'light dark'", "references": [ { "name": "Scheme", "module": "rh-scheme-toggle/rh-scheme-toggle.js" } ] }, "default": "globalThis.localStorage\\n ?.rhdsColorScheme as Scheme", "fieldName": "scheme" }, { "name": "legend-text", "description": "Legend text displayed next to the toggle button group.\nAuthors should keep this text short (under 20 characters).", "type": { "text": "string" }, "default": "'Color scheme'", "fieldName": "legendText" }, { "name": "light-text", "description": "Accessible label for the light mode radio button.\nRendered as a visually-hidden span and a `title` tooltip.", "type": { "text": "string" }, "default": "'Light'", "fieldName": "lightText" }, { "name": "dark-text", "description": "Accessible label for the dark mode radio button.\nRendered as a visually-hidden span and a `title` tooltip.", "type": { "text": "string" }, "default": "'Dark'", "fieldName": "darkText" }, { "name": "system-text", "description": "Accessible label for the system default radio button.\nRendered as a visually-hidden span and a `title` tooltip.", "type": { "text": "string" }, "default": "'System'", "fieldName": "systemText" } ], "cssProperties": [ { "name": "--rh-space-lg", "description": "Fieldset legend-to-group gap\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-size-icon-01", "description": "16px icon box", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-border-subtle", "description": "Toggle button border color" }, { "name": "--rh-space-2xl", "description": "Toggle button height\n\n32px spacer", "default": "32px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-3xl", "description": "Toggle button width\n\n48px spacer", "default": "48px", "syntax": "\u003clength\u003e" }, { "name": "--rh-border-radius-default", "description": "Button group start-start corner radius\n\nButton group end-start corner radius\n\nButton group start-end corner radius\n\nButton group end-end corner radius\n\n3px border radius; Example: Card", "default": "3px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-color-interactive-secondary-focus", "description": "Toggle button hover/focus background" }, { "name": "--rh-color-interactive-primary-active", "description": "Selected toggle button background" }, { "name": "--rh-color-border-interactive", "description": "Selected toggle button border color" }, { "name": "--rh-color-text-primary-on-dark", "description": "Toggle button icon color in light mode\n\nSelected toggle button icon color in light mode\n\nPrimary text color for dark theme", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-text-primary-on-light", "description": "Toggle button icon color in dark mode\n\nSelected toggle button icon color in dark mode\n\nPrimary text color for light theme", "default": "#151515", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-border-width-sm", "description": "Toggle button border width\n\nFocus outline width\n\n1px border width; Example: Secondary CTA or Button", "default": "1px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-interactive-primary-focus", "description": "Selected toggle button hover/focus background\n\nFocus outline color", "default": "1px" } ], "demos": [ { "description": "Default scheme toggle with light, dark, and system options.", "url": "https://ux.redhat.com/elements/scheme-toggle/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-scheme-toggle/demo/index.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-scheme-toggle", "declaration": { "name": "RhSchemeToggle", "module": "rh-scheme-toggle/rh-scheme-toggle.js" } }, { "kind": "js", "name": "RhSchemeToggle", "declaration": { "name": "RhSchemeToggle", "module": "rh-scheme-toggle/rh-scheme-toggle.js" } } ] }, { "kind": "javascript-module", "path": "rh-select/rh-option-group.js", "declarations": [ { "name": "RhOptionGroup", "summary": "Groups related rh-option elements within a select", "description": "Groups related `rh-option` elements within an `rh-select` for organizing\noptions into categories. Provides visual separation when used with `\u003chr\u003e`.\nShould include a `label` for screen readers (ARIA `group` role). When\n`disabled`, all child options are disabled. Arrow keys and Tab navigate\nthrough grouped options the same way as ungrouped options.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "label", "description": "Group label text displayed above the option group for identification.\nShould be used to describe the category or purpose of grouped options.\nOverridden by the label slot if provided. Required for accessibility.", "type": { "text": "string" }, "kind": "field", "attribute": "label" }, { "name": "disabled", "description": "Whether the option group and all its child options are disabled.\nWhen true, automatically disables all rh-option children, preventing\nselection of any options within this group.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "disabled", "reflects": true }, { "name": "firstUpdated", "kind": "method" }, { "name": "disabledChanged", "kind": "method", "privacy": "private" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-select/rh-option-group.ts#L27" }, "kind": "class", "tagName": "rh-option-group", "attributes": [ { "name": "label", "description": "Group label text displayed above the option group for identification.\nShould be used to describe the category or purpose of grouped options.\nOverridden by the label slot if provided. Required for accessibility.", "type": { "text": "string" }, "fieldName": "label" }, { "name": "disabled", "description": "Whether the option group and all its child options are disabled.\nWhen true, automatically disables all rh-option children, preventing\nselection of any options within this group.", "type": { "text": "boolean" }, "default": "false", "fieldName": "disabled" } ], "slots": [ { "name": "label", "description": "Group label as inline text. Overrides the `label` attribute. Screen readers announce this text when the group receives focus." }, { "name": "", "description": "Insert `\u003crh-option\u003e` elements. Each option must have accessible text content for screen readers." } ], "cssProperties": [ { "name": "--rh-color-gray-50", "description": "Subtle icon", "default": "#707070", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-60", "description": "Secondary text (light theme)", "default": "#4d4d4d", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-text-status-disabled" }, { "name": "--rh-color-text-secondary", "description": "Secondary text color design token for the group label" }, { "name": "--rh-font-size-body-text-xs", "description": "Extra-small text size design token for the group label\n\n12px font size", "default": "0.75rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-md", "description": "Medium spacing design token for vertical padding\n\n8px spacer", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-lg", "description": "16px spacer", "default": "16px", "syntax": "\u003clength\u003e" } ], "demos": [ { "description": "Options organized into labeled groups", "url": "https://ux.redhat.com/elements/select/demo/option-group/" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-option-group", "declaration": { "name": "RhOptionGroup", "module": "rh-select/rh-option-group.js" } }, { "kind": "js", "name": "RhOptionGroup", "declaration": { "name": "RhOptionGroup", "module": "rh-select/rh-option-group.js" } } ] }, { "kind": "javascript-module", "path": "rh-select/rh-option.js", "declarations": [ { "name": "RhOption", "summary": "A selectable option within a select list", "description": "An option within an `rh-select` dropdown. Must be a child of `rh-select`\nor `rh-option-group`. Should include a `value` attribute for form data.\nMust have text content or `label` for screen readers (ARIA `option` role).\nPress Enter/Space to select; Arrow keys to navigate between options.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "disabled", "description": "Whether the option is disabled and cannot be selected. Defaults to `false`.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "disabled", "reflects": true }, { "name": "value", "description": "Form value for this option.\nPriority: value attr -\u003e displayLabel -\u003e ''", "kind": "field", "attribute": "value" }, { "name": "displayLabel", "description": "Gets the display text for the rh-option.\nPriority: slotted text content -\u003e label attr -\u003e value attr -\u003e ''", "type": { "text": "string" }, "readonly": true, "kind": "field" }, { "name": "selected", "description": "Whether the option is currently selected. Defaults to `false`.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "selected", "reflects": true }, { "name": "iconSet", "description": "Icon set for the optional rh-icon to precede the option text - 'ui' by default", "type": { "text": "'ui' | 'standard' | 'social' | 'microns'", "references": [ { "name": "IconSetName", "package": "@rhds/icons" } ] }, "default": "'ui'", "kind": "field", "attribute": "icon-set" }, { "name": "icon", "description": "The icon name of an rh-icon", "type": { "text": "IconNameFor\u003cIconSetName\u003e" }, "kind": "field", "attribute": "icon", "reflects": true }, { "name": "description", "description": "Optional option description; overridden by description slot.", "type": { "text": "string" }, "kind": "field", "attribute": "description", "reflects": true }, { "name": "label", "description": "Display text for this option; overridden by slotted text content", "type": { "text": "string" }, "kind": "field", "attribute": "label", "reflects": true }, { "parameters": [ { "name": "changedProperties", "type": { "text": "PropertyValues\u003cthis\u003e" } } ], "return": { "type": { "text": "void" } }, "name": "firstUpdated", "description": "Initialize cached display label on first client-side render", "kind": "method" }, { "name": "selectedChanged", "kind": "method", "privacy": "private" }, { "name": "disabledChanged", "kind": "method", "privacy": "private" }, { "name": "labelChanged", "kind": "method", "privacy": "private" }, { "name": "valueChanged", "kind": "method", "privacy": "private" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-select/rh-option.ts#L31" }, "kind": "class", "tagName": "rh-option", "attributes": [ { "name": "disabled", "description": "Whether the option is disabled and cannot be selected. Defaults to `false`.", "type": { "text": "boolean" }, "default": "false", "fieldName": "disabled" }, { "name": "value", "description": "Form value for this option.\nPriority: value attr -\u003e displayLabel -\u003e ''", "fieldName": "value" }, { "name": "selected", "description": "Whether the option is currently selected. Defaults to `false`.", "type": { "text": "boolean" }, "default": "false", "fieldName": "selected" }, { "name": "icon-set", "description": "Icon set for the optional rh-icon to precede the option text - 'ui' by default", "type": { "text": "'ui' | 'standard' | 'social' | 'microns'", "references": [ { "name": "IconSetName", "package": "@rhds/icons" } ] }, "default": "'ui'", "fieldName": "iconSet" }, { "name": "icon", "description": "The icon name of an rh-icon", "type": { "text": "IconNameFor\u003cIconSetName\u003e" }, "fieldName": "icon" }, { "name": "description", "description": "Optional option description; overridden by description slot.", "type": { "text": "string" }, "fieldName": "description" }, { "name": "label", "description": "Display text for this option; overridden by slotted text content", "type": { "text": "string" }, "fieldName": "label" } ], "slots": [ { "name": "", "description": "Option label as inline text. Screen readers use this content as the accessible name. Falls back to the `label` or `value` attribute when empty." }, { "name": "description", "description": "Optional inline or block description text displayed below the option label. Overrides the `description` attribute. Should be a `\u003cspan\u003e` or `\u003cp\u003e` element." } ], "cssProperties": [ { "name": "--rh-color-surface-lighter", "description": "Tertiary surface (light theme)", "default": "#f2f2f2", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-surface-darker", "description": "Secondary surface (dark theme)", "default": "#1f1f1f", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-space-lg", "description": "16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-border-radius-default", "description": "3px border radius; Example: Card", "default": "3px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-color-border-interactive" }, { "name": "--rh-border-width-lg", "description": "3px border width: Example: Expanded Accordion panel", "default": "3px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-text-status-disabled", "default": "light-dark(\n var(--rh-color-gray-50, #707070),\n var(--rh-color-gray-60, #4d4d4d))" }, { "name": "--rh-color-gray-50", "description": "Subtle icon", "default": "#707070", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-60", "description": "Secondary text (light theme)", "default": "#4d4d4d", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-interactive-primary-default", "description": "Primary interactive color design token for selected checkmark" }, { "name": "--rh-font-size-body-text-xs", "description": "Extra-small text size design token for option descriptions\n\n12px font size", "default": "0.75rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-select-icon-size", "default": "14px" }, { "name": "--rh-space-md", "description": "Medium spacing design token between icon and label\n\n8px spacer", "default": "8px", "syntax": "\u003clength\u003e" } ], "demos": [ { "description": "Options with icons", "url": "https://ux.redhat.com/elements/select/demo/option-icons/" }, { "description": "Options with descriptions", "url": "https://ux.redhat.com/elements/select/demo/option-descriptions/" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-option", "declaration": { "name": "RhOption", "module": "rh-select/rh-option.js" } }, { "kind": "js", "name": "RhOption", "declaration": { "name": "RhOption", "module": "rh-select/rh-option.js" } } ] }, { "kind": "javascript-module", "path": "rh-select/rh-select.js", "declarations": [ { "name": "RhSelectChangeEvent", "summary": "Event fired when the select value changes", "description": "Event type for the `change` event from rh-select. The select shall dispatch\nthis event when the selected value changes (e.g. after the user picks an\noption or the value is updated programmatically). The event shall bubble and\nprovides no `detail` payload; listeners should read the new value from the\nselect's `value` property. Consumers must use this class when they need to\nconstruct a synthetic change event.", "superclass": { "name": "Event", "package": "global:" }, "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-select/rh-select.ts#L34" }, "kind": "class" }, { "name": "RhSelect", "summary": "A control that provides a menu of options", "description": "A select element allows users to Select from an expandable list.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "accessibleLabel", "description": "Accessible label text for screen readers and assistive technologies.\nShould be used when the select lacks an associated `\u003clabel\u003e` element.\nRequired for accessibility compliance when no visible label is present.", "type": { "text": "string" }, "kind": "field", "attribute": "accessible-label" }, { "name": "disabled", "description": "Whether the select control is disabled and non-interactive.\nWhen true, prevents user interaction and excludes the value from form submission.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "disabled", "reflects": true }, { "name": "expanded", "description": "Whether the dropdown listbox is currently expanded and visible.\nAutomatically managed by keyboard and mouse interactions. Should not be\nmanually set in most cases.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "expanded", "reflects": true }, { "name": "required", "description": "When true, the user must select an option with a non-empty value before the\nform can be submitted. Syncs to aria-required and constraint validation so\nthe browser can show \"Please fill out this field\" when the value is empty.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "required", "reflects": true }, { "name": "value", "description": "Current form value representing the selected option's value attribute.\nUpdates automatically when selection changes. Use for form submission\nand programmatic value access.", "type": { "text": "string" }, "kind": "field", "attribute": "value" }, { "name": "name", "description": "Form control name. Submitted with the form as the key for this control's\nvalue in FormData. Reflects to the name attribute.", "type": { "text": "string" }, "kind": "field", "attribute": "name", "reflects": true }, { "name": "placeholder", "description": "Placeholder text displayed when no option is selected.\nShould provide guidance about expected input. Overridden by the placeholder\nslot if provided. Used as fallback accessible label when no accessible-label\nor associated label is present.", "type": { "text": "string" }, "kind": "field", "attribute": "placeholder" }, { "name": "helpText", "description": "Help text displayed below the control. Content slotted into the help-text\nslot overrides this attribute.", "type": { "text": "string" }, "kind": "field", "attribute": "help-text" }, { "name": "state", "description": "Visual and semantic state of the form control for user feedback.\nUse 'danger' for blocking errors that prevent form submission, 'warning' for\nnon-blocking issues requiring attention, and 'success' for valid selections.\nAffects styling.", "type": { "text": "'danger' | 'success' | 'warning'" }, "kind": "field", "attribute": "state", "reflects": true }, { "name": "selected", "description": "The currently selected rh-option element. Accepts a single option.\nSetting this property programmatically updates the visual selection and form value.", "type": { "text": "RhOption[]" }, "kind": "field" }, { "name": "options", "description": "List of options", "type": { "text": "RhOption[]" }, "kind": "field" }, { "name": "formResetCallback", "kind": "method", "privacy": "protected" }, { "return": { "type": { "text": "boolean" } }, "name": "checkValidity", "description": "Returns true if the element's value passes constraint validation.\nParticipates in the Constraint Validation API; updates validity state\nbefore checking.", "kind": "method" }, { "return": { "type": { "text": "boolean" } }, "name": "reportValidity", "description": "Returns true if the element's value passes constraint validation.\nIf invalid, reports the problem (e.g. browser \"Please fill out this field\")\nand returns false. Participates in the Constraint Validation API.", "kind": "method" }, { "name": "disabledChanged", "kind": "method", "privacy": "private" }, { "parameters": [ { "name": "old", "type": { "text": "boolean" } }, { "name": "expanded", "type": { "text": "boolean" } } ], "name": "expandedChanged", "kind": "method", "privacy": "private" }, { "parameters": [ { "name": "_prev", "type": { "text": "RhOption[]" } }, { "name": "selected", "type": { "text": "RhOption[]" } } ], "name": "selectedChanged", "kind": "method", "privacy": "private" }, { "name": "valueChanged", "kind": "method", "privacy": "private" }, { "name": "requiredChanged", "kind": "method", "privacy": "private" }, { "return": { "type": { "text": "Promise\u003cvoid\u003e" } }, "name": "show", "description": "Opens the dropdown", "kind": "method" }, { "return": { "type": { "text": "Promise\u003cvoid\u003e" } }, "name": "hide", "description": "Closes the dropdown", "kind": "method" }, { "return": { "type": { "text": "Promise\u003cvoid\u003e" } }, "name": "toggle", "description": "Toggles the dropdown based on current state", "kind": "method" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-select/rh-select.ts#L50" }, "kind": "class", "tagName": "rh-select", "attributes": [ { "name": "accessible-label", "description": "Accessible label text for screen readers and assistive technologies.\nShould be used when the select lacks an associated `\u003clabel\u003e` element.\nRequired for accessibility compliance when no visible label is present.", "type": { "text": "string" }, "fieldName": "accessibleLabel" }, { "name": "disabled", "description": "Whether the select control is disabled and non-interactive.\nWhen true, prevents user interaction and excludes the value from form submission.", "type": { "text": "boolean" }, "default": "false", "fieldName": "disabled" }, { "name": "expanded", "description": "Whether the dropdown listbox is currently expanded and visible.\nAutomatically managed by keyboard and mouse interactions. Should not be\nmanually set in most cases.", "type": { "text": "boolean" }, "default": "false", "fieldName": "expanded" }, { "name": "required", "description": "When true, the user must select an option with a non-empty value before the\nform can be submitted. Syncs to aria-required and constraint validation so\nthe browser can show \"Please fill out this field\" when the value is empty.", "type": { "text": "boolean" }, "default": "false", "fieldName": "required" }, { "name": "value", "description": "Current form value representing the selected option's value attribute.\nUpdates automatically when selection changes. Use for form submission\nand programmatic value access.", "type": { "text": "string" }, "fieldName": "value" }, { "name": "name", "description": "Form control name. Submitted with the form as the key for this control's\nvalue in FormData. Reflects to the name attribute.", "type": { "text": "string" }, "fieldName": "name" }, { "name": "placeholder", "description": "Placeholder text displayed when no option is selected.\nShould provide guidance about expected input. Overridden by the placeholder\nslot if provided. Used as fallback accessible label when no accessible-label\nor associated label is present.", "type": { "text": "string" }, "fieldName": "placeholder" }, { "name": "help-text", "description": "Help text displayed below the control. Content slotted into the help-text\nslot overrides this attribute.", "type": { "text": "string" }, "fieldName": "helpText" }, { "name": "state", "description": "Visual and semantic state of the form control for user feedback.\nUse 'danger' for blocking errors that prevent form submission, 'warning' for\nnon-blocking issues requiring attention, and 'success' for valid selections.\nAffects styling.", "type": { "text": "'danger' | 'success' | 'warning'" }, "fieldName": "state" } ], "events": [ { "name": "open", "description": "Fires when the dropdown listbox opens. Does not bubble. The event has no `detail` payload.", "type": { "text": "Event", "references": [ { "name": "Event", "package": "global:" } ] } }, { "name": "close", "description": "Fires when the dropdown listbox closes. Does not bubble. The event has no `detail` payload.", "type": { "text": "Event", "references": [ { "name": "Event", "package": "global:" } ] } }, { "name": "change", "description": "Fires when the selected value changes. Bubbles. The event has no `detail` payload; read the new value from the `value` property.", "type": { "text": "RhSelectChangeEvent" } } ], "slots": [ { "name": "placeholder", "description": "Placeholder inline text for the select. Overrides the `placeholder` attribute. Screen readers announce this text as the default label when no other label is provided." }, { "name": "", "description": "Insert `rh-option` elements and optional `rh-option-group` or `hr` separator elements. Each `rh-option` must have accessible text content (slotted text or `label` attribute) so screen readers can announce it." }, { "name": "help-text", "description": "Insert a block element (e.g. `\u003cp\u003e`) with text that helps describe the select. Overrides the `help-text` attribute when slotted. Content is automatically linked to the control via `aria-describedby` so screen readers announce it." } ], "cssProperties": [ { "name": "--rh-font-weight-body-text-regular", "description": "Regular font weight design token\n\nRegular font weight", "default": "400", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-line-height-body-text", "description": "Body text line height design token\n\nLine height for body text", "default": "1.5", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-box-shadow-sm", "description": "Small shadow design token for dropdown elevation\n\nSmall box shadow", "default": "0 2px 4px 0 rgba(21, 21, 21, 0.2)", "syntax": "\u003cshadow\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-border-radius-default", "description": "Default border radius design token\n\n3px border radius; Example: Card", "default": "3px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-color-status-disabled", "default": "light-dark(\n var(--rh-color-gray-30, #c7c7c7),\n var(--rh-color-gray-40, #a3a3a3))" }, { "name": "--rh-color-gray-30", "description": "Subtle borders (light theme)", "default": "#c7c7c7", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-text-primary", "description": "Primary text color design token for the select control\n\nPrimary text color for the toggle button label" }, { "name": "--rh-font-family-body-text", "description": "Body text font family design token\n\nBody text font stack for the toggle button\n\nBody text font family", "default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-space-lg", "description": "16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-text-status-disabled", "default": "light-dark(\n var(--rh-color-gray-50, #707070),\n var(--rh-color-gray-60, #4d4d4d))" }, { "name": "--rh-color-gray-50", "description": "Subtle icon", "default": "#707070", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-border-width-md", "description": "2px border width: Example: Alert", "default": "2px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-border-interactive" }, { "name": "--rh-color-icon-status-disabled", "default": "light-dark(\n var(--rh-color-gray-40, #a3a3a3),\n var(--rh-color-gray-60, #4d4d4d))" }, { "name": "--rh-color-gray-40", "description": "Subtle icon (hover state)", "default": "#a3a3a3", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-60", "description": "Secondary text (light theme)", "default": "#4d4d4d", "syntax": "\u003ccolor\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-space-md", "description": "Medium spacing design token for vertical padding\n\nMedium spacing between toggle text and icons\n\n8px spacer", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-sm", "description": "Small body text size design token\n\nSmall body text size for the toggle button\n\n14px font size", "default": "0.875rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-select-icon-size", "default": "14px" }, { "name": "--rh-font-weight-body-text-medium", "description": "Medium font weight", "default": "500", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-color-border-status-success" }, { "name": "--rh-color-border-status-warning" }, { "name": "--rh-color-border-status-danger" }, { "name": "--rh-color-icon-status-success" }, { "name": "--rh-color-icon-status-warning" }, { "name": "--rh-color-icon-status-danger" } ], "demos": [ { "description": "Basic select with a label, placeholder text, and a list of options including one disabled option.", "url": "https://ux.redhat.com/elements/select/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-select/demo/index.html" } }, { "description": "Select rendered across light and dark color contexts to verify surface and text colors adapt correctly.", "url": "https://ux.redhat.com/elements/select/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-select/demo/color-context.html" } }, { "url": "https://ux.redhat.com/elements/select/demo/dynamic-options/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-select/demo/dynamic-options.html" } }, { "description": "Demonstrates the change, open, and close events fired by the select when a user interacts with it.", "url": "https://ux.redhat.com/elements/select/demo/events/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-select/demo/events.html" } }, { "description": "Uses the show(), hide(), and toggle() methods with plain HTML buttons to programmatically control the select dropdown.", "url": "https://ux.redhat.com/elements/select/demo/methods-simple/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-select/demo/methods-simple.html" } }, { "description": "Uses the show(), hide(), and toggle() methods to programmatically control the select dropdown.", "url": "https://ux.redhat.com/elements/select/demo/methods/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-select/demo/methods.html" } }, { "description": "Options with description text using the description attribute and the description slot for rich content.", "url": "https://ux.redhat.com/elements/select/demo/option-descriptions/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-select/demo/option-descriptions.html" } }, { "description": "Options organized into labeled groups using rh-option-group, including a disabled group.", "url": "https://ux.redhat.com/elements/select/demo/option-group/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-select/demo/option-group.html" } }, { "description": "Options with icons using the icon and icon-set attributes on rh-option.", "url": "https://ux.redhat.com/elements/select/demo/option-icons/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-select/demo/option-icons.html" } }, { "description": "Required select within a form that validates on submit and shows a browser validation message when empty.", "url": "https://ux.redhat.com/elements/select/demo/required/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-select/demo/required.html" } }, { "description": "Select controls in success, warning, danger, and default states with help text displayed below each.", "url": "https://ux.redhat.com/elements/select/demo/states/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-select/demo/states.html" } }, { "description": "Select paired with an rh-tooltip providing additional context about the field.", "url": "https://ux.redhat.com/elements/select/demo/tooltip/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-select/demo/tooltip.html" } } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "RhSelectChangeEvent", "declaration": { "name": "RhSelectChangeEvent", "module": "rh-select/rh-select.js" } }, { "kind": "custom-element-definition", "name": "rh-select", "declaration": { "name": "RhSelect", "module": "rh-select/rh-select.js" } }, { "kind": "js", "name": "RhSelect", "declaration": { "name": "RhSelect", "module": "rh-select/rh-select.js" } } ] }, { "kind": "javascript-module", "path": "rh-site-status/rh-site-status.js", "declarations": [ { "name": "RhSiteStatus", "summary": "Communicates operational status of a website or domain", "description": "Provides live operational status for a website or domain using a status\nicon and link. Authors SHOULD place this element in the footer. Screen\nreader users receive updates via `aria-live=\"polite\"`. Users MAY\nactivate the link with Enter or Tab to focus it.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "dataURI", "type": { "text": "string" }, "default": "'https://status.redhat.com/index.json' as const", "kind": "field", "static": true, "privacy": "private" }, { "name": "fetchOptions", "type": { "text": "RequestInit" }, "default": "{\\n mode: 'cors',\\n cache: 'no-cache',\\n headers: {\\n Accept: 'application/json',\\n },\\n }", "kind": "field", "static": true, "privacy": "private" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-site-status/rh-site-status.ts#L133" }, "kind": "class", "tagName": "rh-site-status", "slots": [ { "name": "loading-text", "description": "Localized loading text for screen reader\nannouncement via aria-live polite region" } ], "cssProperties": [ { "name": "--rh-space-lg", "description": "Spacing container padding\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-surface-status-success", "description": "Operational state background color on light scheme" }, { "name": "--rh-color-surface-status-warning", "description": "Degraded state background color on light scheme" }, { "name": "--rh-color-surface-status-danger", "description": "Critical state background color on light scheme" }, { "name": "--rh-color-surface-light", "description": "Loading background color on light scheme\n\nSecondary surface (light theme)", "default": "#e0e0e0", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-surface-dark", "description": "Operational state background color on dark scheme\n\nDegraded state background color on dark scheme\n\nCritical state background color on dark scheme\n\nLoading background color on dark scheme\n\nTertiary surface (dark theme)", "default": "#383838", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-font-size-body-text-sm", "description": "Link font size\n\n14px font size", "default": "0.875rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-md", "description": "Link gap between text and icon\n\n8px spacer", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-text-primary", "description": "Link font color" }, { "name": "--rh-border-width-md", "description": "Link focus outline\n\n2px border width: Example: Alert", "default": "2px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-border-interactive", "description": "Link focus outline color", "default": "2px" }, { "name": "--rh-border-radius-default", "description": "Border radius container\n\nLink focus border radius\n\n3px border radius; Example: Card", "default": "3px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-size-icon-01", "description": "Status Icon width\n\nStatus Icon height\n\n16px icon box", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-white", "description": "Status Icon color\n\nLightest surface (light theme) or primary text (dark theme)", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-status-success", "description": "Operational state icon status color" }, { "name": "--rh-color-status-warning", "description": "Degraded state icon status color" }, { "name": "--rh-color-status-danger", "description": "Critical state icon status color" } ], "demos": [ { "description": "Default site status element fetching live operational data for the current domain.", "url": "https://ux.redhat.com/elements/site-status/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-site-status/demo/index.html" } }, { "description": "Site status element displayed across light and dark color contexts.", "url": "https://ux.redhat.com/elements/site-status/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-site-status/demo/color-context.html" } }, { "description": "Interactive demo showing site status for various Red Hat domains.", "url": "https://ux.redhat.com/elements/site-status/demo/domains/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-site-status/demo/domains.html" } }, { "description": "Site status element in its loading state with a spinner and loading text.", "url": "https://ux.redhat.com/elements/site-status/demo/loading/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-site-status/demo/loading.html" } }, { "description": "Localized loading text using the loading-text slot with a French translation.", "url": "https://ux.redhat.com/elements/site-status/demo/localization/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-site-status/demo/localization.html" } }, { "description": "Site status element displaying an error state when the API returns a 404 response.", "url": "https://ux.redhat.com/elements/site-status/demo/status-404/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-site-status/demo/status-404.html" } }, { "description": "Site status element displaying a critical outage danger state after a brief loading delay.", "url": "https://ux.redhat.com/elements/site-status/demo/status-critical/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-site-status/demo/status-critical.html" } }, { "description": "Site status element displaying a major outage warning state.", "url": "https://ux.redhat.com/elements/site-status/demo/status-major/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-site-status/demo/status-major.html" } }, { "description": "Site status element displaying a minor degraded service warning state.", "url": "https://ux.redhat.com/elements/site-status/demo/status-minor/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-site-status/demo/status-minor.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-site-status", "declaration": { "name": "RhSiteStatus", "module": "rh-site-status/rh-site-status.js" } }, { "kind": "js", "name": "RhSiteStatus", "declaration": { "name": "RhSiteStatus", "module": "rh-site-status/rh-site-status.js" } } ] }, { "kind": "javascript-module", "path": "rh-skeleton/rh-skeleton.js", "declarations": [ { "name": "RhSkeleton", "summary": "A placeholder for content that is loading.", "description": "A skeleton provides an animated placeholder for content that is loading\nprogressively. Must not receive focus or keyboard input.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "type", "description": "What shape the skeleton should be. Defaults to `body-copy`.", "type": { "text": "'body-copy' | 'heading' | 'circle' | 'square' | 'rectangle'" }, "kind": "field", "attribute": "type", "reflects": true }, { "name": "size", "description": "What size the skeleton should be. Defaults to `md`.\nThe `size` attribute is not valid on circle, square, or rectangle skeletons.", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'" }, "kind": "field", "attribute": "size", "reflects": true } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-skeleton/rh-skeleton.ts#L16" }, "kind": "class", "tagName": "rh-skeleton", "attributes": [ { "name": "type", "description": "What shape the skeleton should be. Defaults to `body-copy`.", "type": { "text": "'body-copy' | 'heading' | 'circle' | 'square' | 'rectangle'" }, "fieldName": "type" }, { "name": "size", "description": "What size the skeleton should be. Defaults to `md`.\nThe `size` attribute is not valid on circle, square, or rectangle skeletons.", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'" }, "fieldName": "size" } ], "slots": [ { "name": "", "description": "Visually hidden text for screen readers.\nCustomize by slotting in text that describes the loading content.\nAccepts inline text content. Defaults to \"Loading...\".\nShould be customized when multiple skeletons appear on the same page\nto help users of assistive technologies distinguish between them." } ], "cssProperties": [ { "name": "--rh-length-4xs", "description": "Minimum dimension for visually hidden content\n\nMinimum dimension for visually hidden content\n\n1px length token", "default": "1px", "syntax": "\u003clength\u003e" } ], "demos": [ { "description": "Default skeleton displaying a body-copy placeholder with a shimmer animation.", "url": "https://ux.redhat.com/elements/skeleton/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-skeleton/demo/index.html" } }, { "description": "Circle skeleton used to represent a loading circular element such as an avatar.", "url": "https://ux.redhat.com/elements/skeleton/demo/circle/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-skeleton/demo/circle.html" } }, { "description": "Skeleton adapting to different color contexts using light and dark schemes.", "url": "https://ux.redhat.com/elements/skeleton/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-skeleton/demo/color-context.html" } }, { "description": "Rectangle skeleton used to represent a loading rectangular element such as an image or card.", "url": "https://ux.redhat.com/elements/skeleton/demo/rectangle/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-skeleton/demo/rectangle.html" } }, { "description": "Square skeleton used to represent a loading square element such as an icon or thumbnail.", "url": "https://ux.redhat.com/elements/skeleton/demo/square/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-skeleton/demo/square.html" } }, { "description": "Body copy and heading skeletons in all available sizes from xs to 2xl.", "url": "https://ux.redhat.com/elements/skeleton/demo/text/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-skeleton/demo/text.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-skeleton", "declaration": { "name": "RhSkeleton", "module": "rh-skeleton/rh-skeleton.js" } }, { "kind": "js", "name": "RhSkeleton", "declaration": { "name": "RhSkeleton", "module": "rh-skeleton/rh-skeleton.js" } } ] }, { "kind": "javascript-module", "path": "rh-skip-link/rh-skip-link.js", "declarations": [ { "name": "RhSkipLink", "summary": "Allows users to skip repetitive navigation for accessibility.", "description": "A skip link provides keyboard and screen reader users a way to bypass\nrepetitive navigation and jump directly to main content. Use it when\na page has many navigation items preceding the main content area.\nIt should be the first focusable element on the page, and authors\nmust provide either an `href` attribute or a slotted `\u003ca\u003e` element.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "href", "description": "URL fragment (e.g. `#main-content`) identifying the target element to\nskip to. When set, the component renders its own anchor in shadow DOM\nand the default slot accepts plain text for the link label.", "type": { "text": "string" }, "kind": "field", "attribute": "href", "reflects": true } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-skip-link/rh-skip-link.ts#L20" }, "kind": "class", "tagName": "rh-skip-link", "attributes": [ { "name": "href", "description": "URL fragment (e.g. `#main-content`) identifying the target element to\nskip to. When set, the component renders its own anchor in shadow DOM\nand the default slot accepts plain text for the link label.", "type": { "text": "string" }, "fieldName": "href" } ], "slots": [ { "name": "", "description": "An anchor element targeting the main page content,\nor plain text when the `href` attribute is set on the host.\nSlotted anchors must have an accessible name for screen readers." } ], "cssProperties": [ { "name": "--rh-color-surface-lightest", "description": "Skip link background color\n\nPrimary surface (light theme)", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-border-interactive-on-light", "description": "Skip link border block end color\n\nSkip link border inline start color\n\nSkip link border inline end color\n\nInteractive border color (light theme)", "default": "#0066cc", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-border-radius-default", "description": "Skip link bottom-start corner radius\n\nSkip link bottom-end corner radius\n\n3px border radius; Example: Card", "default": "3px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-color-interactive-primary-default-on-light", "description": "Skip link text color\n\nPrimary interactive - default (Light theme)", "default": "#0066cc", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-font-family-heading", "description": "Skip link font family\n\nHeading font family", "default": "RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-size-body-text-md", "description": "Skip link font size\n\n16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-weight-heading-bold", "description": "Skip link font weight\n\nBold font weight for headings", "default": "700", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-border-width-md", "description": "Skip link focus border width\n\n2px border width: Example: Alert", "default": "2px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-lg", "description": "Skip link focus padding block\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-2xl", "description": "Skip link focus padding inline\n\n32px spacer", "default": "32px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-interactive-primary-hover", "description": "Skip link hover text color" }, { "name": "--rh-border-width-sm", "description": "Skip link border block end width\n\nSkip link border inline start width\n\nSkip link border inline end width\n\nSkip link hover underline thickness\n\nSkip link hover border block end width\n\nSkip link hover border inline start width\n\nSkip link hover border inline end width\n\n1px border width; Example: Secondary CTA or Button", "default": "1px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-interactive-primary-hover-on-light", "description": "Skip link hover border block end color\n\nSkip link hover border inline start color\n\nSkip link hover border inline end color\n\nPrimary interactive - hover (Light theme)", "default": "#003366", "syntax": "\u003ccolor\u003e" } ], "demos": [ { "description": "Default skip link using the href attribute to target main content.", "url": "https://ux.redhat.com/elements/skip-link/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-skip-link/demo/index.html" } }, { "description": "Skip link with an href attribute targeting a main content section on the page.", "url": "https://ux.redhat.com/elements/skip-link/demo/href-attribute/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-skip-link/demo/href-attribute.html" } }, { "description": "Skip link with a slotted anchor element for light DOM control of the link.", "url": "https://ux.redhat.com/elements/skip-link/demo/with-content/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-skip-link/demo/with-content.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-skip-link", "declaration": { "name": "RhSkipLink", "module": "rh-skip-link/rh-skip-link.js" } }, { "kind": "js", "name": "RhSkipLink", "declaration": { "name": "RhSkipLink", "module": "rh-skip-link/rh-skip-link.js" } } ] }, { "kind": "javascript-module", "path": "rh-spinner/rh-spinner.js", "declarations": [ { "name": "RhSpinner", "summary": "Notifies users their action is being processed or loaded", "description": "Provides an animated loading indicator for when content is being\nprocessed or fetched. A spinner should be used when loading takes\nfewer than ten seconds and the content structure is unknown.\nAuthors must not use a spinner for indeterminate loading over ten\nseconds; use a progress bar instead. Authors should avoid omitting\na text label, as screen readers rely on `role=\"status\"` to announce\nthe ARIA live region. The element is not keyboard-focusable.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "size", "description": "Preset sizes for the spinner", "type": { "text": "'sm' | 'md' | 'lg'" }, "default": "'lg'", "kind": "field", "attribute": "size", "reflects": true } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-spinner/rh-spinner.ts#L26" }, "kind": "class", "tagName": "rh-spinner", "attributes": [ { "name": "size", "description": "Preset sizes for the spinner", "type": { "text": "'sm' | 'md' | 'lg'" }, "default": "'lg'", "fieldName": "size" } ], "slots": [ { "name": "", "description": "Optional text label displayed below the animated circle.\nUse a `\u003cp\u003e` element with a brief loading message (e.g. \"Loading...\")." } ], "cssProperties": [ { "name": "--rh-space-lg", "description": "Margin between spinner circle and text label\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-family-body-text", "description": "Text label font family\n\nBody text font family", "default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-weight-body-text-regular", "description": "Text label font weight\n\nRegular font weight", "default": "400", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-line-height-body-text", "description": "Text label line height\n\nLine height for body text", "default": "1.5", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-length-4xl", "description": "Default spinner circle diameter\n\n64px length token", "default": "64px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-accent-base", "description": "Animated indicator stroke color" }, { "name": "--rh-color-gray-10", "description": "Track stroke color in light mode\n\nTertiary surface (light theme)", "default": "#f2f2f2", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-70", "description": "Track stroke color in dark mode\n\nTertiary surface (dark theme)", "default": "#383838", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-size-icon-06", "description": "64px icon box", "default": "64px", "syntax": "\u003clength\u003e" }, { "name": "--rh-length-sm", "description": "Default spinner circle stroke width\n\n6px length token", "default": "6px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-lg", "description": "18px font size", "default": "1.125rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-size-icon-04", "description": "40px icon box", "default": "40px", "syntax": "\u003clength\u003e" }, { "name": "--rh-length-xs", "description": "4px length token", "default": "4px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-md", "description": "16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-size-icon-01", "description": "16px icon box", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-length-2xs", "description": "3px length token", "default": "3px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-sm", "description": "14px font size", "default": "0.875rem", "syntax": "\u003clength\u003e" } ], "demos": [ { "description": "Default large spinner without a text label.", "url": "https://ux.redhat.com/elements/spinner/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-spinner/demo/index.html" } }, { "description": "Spinner in all sizes adapting to light and dark color schemes.", "url": "https://ux.redhat.com/elements/spinner/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-spinner/demo/color-context.html" } }, { "description": "Medium size spinner without a text label.", "url": "https://ux.redhat.com/elements/spinner/demo/size-medium/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-spinner/demo/size-medium.html" } }, { "description": "Small size spinner without a text label.", "url": "https://ux.redhat.com/elements/spinner/demo/size-small/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-spinner/demo/size-small.html" } }, { "description": "Spinners in all three sizes with a text label.", "url": "https://ux.redhat.com/elements/spinner/demo/with-text-label/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-spinner/demo/with-text-label.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-spinner", "declaration": { "name": "RhSpinner", "module": "rh-spinner/rh-spinner.js" } }, { "kind": "js", "name": "RhSpinner", "declaration": { "name": "RhSpinner", "module": "rh-spinner/rh-spinner.js" } } ] }, { "kind": "javascript-module", "path": "rh-stat/rh-stat.js", "declarations": [ { "name": "RhStat", "summary": "Showcases a data point or quick fact visually", "description": "A statistic showcases a data point or quick fact visually.\nElements must include a `statistic` slot and body text.\nIcons, titles, and CTAs should be consistent when grouped.\nAdapts color for WCAG contrast in light and dark contexts.\nOnly the CTA receives Tab focus; screen readers read DOM order.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "icon", "description": "The icon name to display above the statistic.\nWhen set, the component dynamically imports `rh-icon`\nand renders it using the specified icon set.", "type": { "text": "IconNameFor\u003cIconSetName\u003e" }, "kind": "field", "attribute": "icon", "reflects": true }, { "name": "iconSet", "description": "The icon set from which to load the icon.\nOnly applies when the `icon` attribute is set.", "type": { "text": "'ui' | 'standard' | 'social' | 'microns'", "references": [ { "name": "IconSetName", "package": "@rhds/icons" } ] }, "default": "'standard'", "kind": "field", "attribute": "icon-set" }, { "name": "top", "description": "Controls the visual ordering of the title and\nstatistic slots. When set to `statistic`, the data\nvalue appears above the title text.", "type": { "text": "'default' | 'statistic'" }, "default": "'default'", "kind": "field", "attribute": "top", "reflects": true }, { "name": "size", "description": "The size variant of the statistic. The `large` size\nincreases the data text font size and icon dimensions.", "type": { "text": "'default' | 'large'" }, "default": "'default'", "kind": "field", "attribute": "size", "reflects": true }, { "name": "isMobile", "description": "Whether the statistic renders in a mobile layout with\nreduced font sizes. Managed internally via\nScreenSizeController but can be set explicitly.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "is-mobile", "reflects": true } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-stat/rh-stat.ts#L29" }, "kind": "class", "tagName": "rh-stat", "attributes": [ { "name": "icon", "description": "The icon name to display above the statistic.\nWhen set, the component dynamically imports `rh-icon`\nand renders it using the specified icon set.", "type": { "text": "IconNameFor\u003cIconSetName\u003e" }, "fieldName": "icon" }, { "name": "icon-set", "description": "The icon set from which to load the icon.\nOnly applies when the `icon` attribute is set.", "type": { "text": "'ui' | 'standard' | 'social' | 'microns'", "references": [ { "name": "IconSetName", "package": "@rhds/icons" } ] }, "default": "'standard'", "fieldName": "iconSet" }, { "name": "top", "description": "Controls the visual ordering of the title and\nstatistic slots. When set to `statistic`, the data\nvalue appears above the title text.", "type": { "text": "'default' | 'statistic'" }, "default": "'default'", "fieldName": "top" }, { "name": "size", "description": "The size variant of the statistic. The `large` size\nincreases the data text font size and icon dimensions.", "type": { "text": "'default' | 'large'" }, "default": "'default'", "fieldName": "size" }, { "name": "is-mobile", "description": "Whether the statistic renders in a mobile layout with\nreduced font sizes. Managed internally via\nScreenSizeController but can be set explicitly.", "type": { "text": "boolean" }, "default": "false", "fieldName": "isMobile" } ], "slots": [ { "name": "icon", "description": "Optional decorative icon above the data value.\nAccepts an `rh-icon` or inline SVG. Decorative\nfor screen readers; add aria-label to convey\nmeaning not in text (WCAG 1.1.1)." }, { "name": "title", "description": "Optional inline text title for context.\nScreen readers announce in DOM order;\nARIA landmark not required." }, { "name": "statistic", "description": "Required inline text data value (number or\npercentage). Screen readers read in DOM order;\nensure value is meaningful without visual\nformatting (WCAG 1.3.1)." }, { "name": "", "description": "Required block or inline body text describing\nthe statistic. Gives screen reader users\ncontext for the data value." }, { "name": "cta", "description": "Optional call to action (`rh-cta` element).\nOnly focusable element; receives Tab focus\nand activates with Enter or Space." } ], "cssProperties": [ { "name": "--rh-color-text-brand-on-light", "description": "Brand accent color in light mode\n\nBrand text color for light theme", "default": "#ee0000", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-text-primary-on-dark", "description": "Primary text accent color in dark mode\n\nPrimary text color for dark theme", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-icon-secondary", "description": "Icon color" }, { "name": "--rh-size-icon-04", "description": "Default slotted icon width\n\n40px icon box", "default": "40px", "syntax": "\u003clength\u003e" }, { "name": "--rh-size-icon-06", "description": "Large slotted icon width\n\n64px icon box", "default": "64px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-xl", "description": "Title text size\n\n20px font size", "default": "1.25rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-weight-body-text-regular", "description": "Title font weight\n\nRegular font weight", "default": "400", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-font-size-heading-lg", "description": "Statistic text size\n\nh3 heading font size", "default": "2.25rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-weight-heading-regular", "description": "Statistic font weight\n\nRegular font weight for headings", "default": "400", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-font-family-body-text", "description": "Body font family\n\nBody text font family", "default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-space-sm", "description": "Margin above body text\n\n6px spacer", "default": "6px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-family-heading", "description": "Title font family\n\nStatistic font family\n\nCTA font family\n\nHeading font family", "default": "RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-space-lg", "description": "Margin above CTA\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-lg", "description": "Body text size\n\nCTA text size\n\nMobile body text size\n\n18px font size", "default": "1.125rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-heading-2xl", "description": "h1 heading font size", "default": "3rem", "syntax": "\u003clength\u003e" } ], "demos": [ { "description": "A basic statistic with a data value and description text.", "url": "https://ux.redhat.com/elements/statistic/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-stat/demo/index.html" } }, { "description": "Statistic with an inline SVG icon shown across color contexts.", "url": "https://ux.redhat.com/elements/statistic/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-stat/demo/color-context.html" } }, { "description": "Statistic with an rh-icon element slotted into the icon slot.", "url": "https://ux.redhat.com/elements/statistic/demo/icon-slot/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-stat/demo/icon-slot.html" } }, { "description": "Statistic with an rh-icon using the experimental icon.", "url": "https://ux.redhat.com/elements/statistic/demo/icon-svg/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-stat/demo/icon-svg.html" } }, { "description": "Statistic with an icon set via the icon attribute.", "url": "https://ux.redhat.com/elements/statistic/demo/icon/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-stat/demo/icon.html" } }, { "description": "Large size variant with a bigger icon and data text.", "url": "https://ux.redhat.com/elements/statistic/demo/large/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-stat/demo/large.html" } }, { "description": "Statistic using all available slots with the data value ordered on top.", "url": "https://ux.redhat.com/elements/statistic/demo/slotted-content/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-stat/demo/slotted-content.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-stat", "declaration": { "name": "RhStat", "module": "rh-stat/rh-stat.js" } }, { "kind": "js", "name": "RhStat", "declaration": { "name": "RhStat", "module": "rh-stat/rh-stat.js" } } ] }, { "kind": "javascript-module", "path": "rh-subnav/rh-subnav.js", "declarations": [ { "name": "RhSubnav", "summary": "Displays a horizontal list of navigation links for related pages.", "description": "A subnavigation provides a horizontal list of links for navigating\nrelated pages. Authors should slot `\u003crh-navigation-link\u003e` elements\nas children; authors should avoid slotting bare `\u003ca\u003e` elements, which\nare deprecated. Each link must have visible text content for\naccessibility. When more than one subnav appears on a page, authors\nshould set `accessible-label` so screen readers can distinguish them.\n\nOverflow scroll buttons appear when links exceed the available space.\nAll links are keyboard accessible via Tab and Enter.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "instances", "default": "new Set\u003cRhSubnav\u003e()", "kind": "field", "static": true, "privacy": "private" }, { "name": "colorPalette", "description": "Sets color palette, which affects the element's styles as well as descendants' color theme.\nOverrides parent color context.\nYour theme will influence these colors so check there first if you are seeing inconsistencies.\nSee [CSS Custom Properties](#css-custom-properties) for default values", "type": { "text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'", "references": [ { "name": "ColorPalette", "module": "lib/color-palettes.js" } ] }, "deprecated": "`\u003crh-subnav\u003e` reacts to the parent set color-scheme and should not set its own color-palette.\nThe color-palette attribute will be removed in a future release.", "kind": "field", "attribute": "color-palette", "reflects": true }, { "name": "accessibleLabel", "description": "Customize the default `aria-label` on the `\u003cnav\u003e` container.\nDefaults to \"subnavigation\" if no attribute/property is set.", "type": { "text": "string" }, "default": "'subnavigation'", "kind": "field", "attribute": "accessible-label" }, { "name": "labelScrollLeft", "description": "Label for the scroll back button", "type": { "text": "string" }, "default": "'Scroll back'", "kind": "field", "attribute": "label-scroll-left", "reflects": true }, { "name": "labelScrollRight", "description": "Label for the scroll forward button", "type": { "text": "string" }, "default": "'Scroll forward'", "kind": "field", "attribute": "label-scroll-right", "reflects": true }, { "name": "firstUpdated", "kind": "method", "privacy": "protected" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-subnav/rh-subnav.ts#L40" }, "kind": "class", "tagName": "rh-subnav", "attributes": [ { "name": "color-palette", "description": "Sets color palette, which affects the element's styles as well as descendants' color theme.\nOverrides parent color context.\nYour theme will influence these colors so check there first if you are seeing inconsistencies.\nSee [CSS Custom Properties](#css-custom-properties) for default values", "type": { "text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'", "references": [ { "name": "ColorPalette", "module": "lib/color-palettes.js" } ] }, "fieldName": "colorPalette", "deprecated": "`\u003crh-subnav\u003e` reacts to the parent set color-scheme and should not set its own color-palette.\nThe color-palette attribute will be removed in a future release." }, { "name": "accessible-label", "description": "Customize the default `aria-label` on the `\u003cnav\u003e` container.\nDefaults to \"subnavigation\" if no attribute/property is set.", "type": { "text": "string" }, "default": "'subnavigation'", "fieldName": "accessibleLabel" }, { "name": "label-scroll-left", "description": "Label for the scroll back button", "type": { "text": "string" }, "default": "'Scroll back'", "fieldName": "labelScrollLeft" }, { "name": "label-scroll-right", "description": "Label for the scroll forward button", "type": { "text": "string" }, "default": "'Scroll forward'", "fieldName": "labelScrollRight" } ], "slots": [ { "name": "", "summary": "Sub navigation links", "description": "Expects a collection of `\u003crh-navigation-link\u003e` or\n`\u003ca\u003e` elements. Each link must have text content\nfor screen readers. Slotting `\u003ca\u003e` elements is\ndeprecated; use `\u003crh-navigation-link\u003e` instead." } ], "cssParts": [ { "name": "container", "description": "The nav container wrapping the link list" }, { "name": "links", "description": "The scrollable link list container" } ], "cssProperties": [ { "name": "--rh-color-surface", "description": "Theme surface color token for subnav background" }, { "name": "--rh-color-accent-brand", "description": "Brand accent design token for current page" }, { "name": "--rh-border-width-md", "description": "Focus outline width\n\n2px border width: Example: Alert", "default": "2px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-border-interactive", "description": "Focus outline color", "default": "2px" }, { "name": "--rh-space-xs", "description": "Navigation link gap between text and icon\n\n4px spacer", "default": "4px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-2xl", "description": "Link inline padding\n\nNavigation link inline padding\n\n32px spacer", "default": "32px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-md", "description": "Navigation link font size\n\n16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-brand-red", "description": "Current page border block end color" }, { "name": "--rh-space-lg", "description": "Link block padding\n\nNavigation link block padding\n\nScroll button inline padding\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-text-secondary", "description": "Theme secondary text token for inactive links\n\nScroll buttons text color" }, { "name": "--rh-color-text-primary", "description": "Theme primary text token for active links\n\nTheme primary text token for visited links\n\nNavigation link text color\n\nNavigation link hover text color\n\nScroll button hover text color" }, { "name": "--rh-border-width-lg", "description": "Link state indicator border block end width\n\nNavigation link state indicator border block\n\nScroll button state border block end width\n\n3px border width: Example: Expanded Accordion panel", "default": "3px", "syntax": "\u003clength\u003e" }, { "name": "--rh-border-width-sm", "description": "Previous button border inline end width\n\nNext button border inline start width\n\nScroll button border block end width\n\n1px border width; Example: Secondary CTA or Button", "default": "1px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-border-subtle", "description": "Subtle border on hover and focus\n\nNavigation link hover subtle border block end color\n\nDisabled scroll buttons text color\n\nScroll button hover border block end color\n\nPrevious button border inline end color\n\nNext button border inline start color\n\nScroll button border block end color", "default": "1px" } ], "demos": [ { "description": "Basic subnavigation with anchor links and a current page indicator.", "url": "https://ux.redhat.com/elements/subnavigation/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-subnav/demo/index.html" } }, { "description": "Subnavigation displayed across different color contexts.", "url": "https://ux.redhat.com/elements/subnavigation/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-subnav/demo/color-context.html" } }, { "description": "Subnavigation with dynamic active link switching on click.", "url": "https://ux.redhat.com/elements/subnavigation/demo/dynamic/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-subnav/demo/dynamic.html" } }, { "description": "Subnavigation in a narrow container showing overflow scroll buttons.", "url": "https://ux.redhat.com/elements/subnavigation/demo/overflow-scroll/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-subnav/demo/overflow-scroll.html" } }, { "description": "Subnavigation inside a container with inline padding.", "url": "https://ux.redhat.com/elements/subnavigation/demo/padded/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-subnav/demo/padded.html" } }, { "description": "Subnavigation rendered in a right-to-left text direction.", "url": "https://ux.redhat.com/elements/subnavigation/demo/right-to-left/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-subnav/demo/right-to-left.html" } }, { "description": "Subnavigation using rh-navigation-link elements with current-page attribute.", "url": "https://ux.redhat.com/elements/subnavigation/demo/with-navigation-link/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-subnav/demo/with-navigation-link.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-subnav", "declaration": { "name": "RhSubnav", "module": "rh-subnav/rh-subnav.js" } }, { "kind": "js", "name": "RhSubnav", "declaration": { "name": "RhSubnav", "module": "rh-subnav/rh-subnav.js" } } ] }, { "kind": "javascript-module", "path": "rh-surface/rh-surface.js", "declarations": [ { "name": "RhSurface", "summary": "Provides background color and theming context for children", "description": "A surface provides color context to descendants via `color-palette`.\nAuthors must set a `color-palette` and should use surface only when\ncontainers like `rh-card` are not appropriate. Each palette provides\nWCAG-compliant contrast when using the default theme. Surface is\nnon-interactive: Tab and focus pass through to focusable children.\nUsers of AT perceive no additional semantics from this element.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "colorPalette", "description": "Sets the color palette, which controls the element's background color\nand propagates accessible text and interactive colors to descendants.\nAccepted values are `lightest`, `lighter`, `light`, `dark`, `darker`,\nand `darkest`. Surface always overrides the parent's color context.\nYour theme will influence these colors so check there first if you\nare seeing inconsistencies.\nSee [CSS Custom Properties](#css-custom-properties) for default values.", "type": { "text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'", "references": [ { "name": "ColorPalette", "module": "lib/color-palettes.js" } ] }, "kind": "field", "attribute": "color-palette", "reflects": true } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-surface/rh-surface.ts#L25" }, "kind": "class", "tagName": "rh-surface", "attributes": [ { "name": "color-palette", "description": "Sets the color palette, which controls the element's background color\nand propagates accessible text and interactive colors to descendants.\nAccepted values are `lightest`, `lighter`, `light`, `dark`, `darker`,\nand `darkest`. Surface always overrides the parent's color context.\nYour theme will influence these colors so check there first if you\nare seeing inconsistencies.\nSee [CSS Custom Properties](#css-custom-properties) for default values.", "type": { "text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'", "references": [ { "name": "ColorPalette", "module": "lib/color-palettes.js" } ] }, "fieldName": "colorPalette" } ], "slots": [ { "name": "", "description": "Accepts any content." } ], "cssProperties": [ { "name": "--rh-color-text-primary", "description": "Primary text color" }, { "name": "--rh-color-surface", "description": "Surface background color" } ], "demos": [ { "description": "A surface providing a dark theme to child elements like blockquote, spinner, and tag.", "url": "https://ux.redhat.com/elements/surface/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-surface/demo/index.html" } }, { "description": "Demonstrates all six color palette options from darkest to lightest.", "url": "https://ux.redhat.com/elements/surface/demo/color-palettes/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-surface/demo/color-palettes.html" } }, { "description": "Shows nested surfaces and cards with different color palettes to demonstrate context inheritance.", "url": "https://ux.redhat.com/elements/surface/demo/nested-combination-elements/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-surface/demo/nested-combination-elements.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-surface", "declaration": { "name": "RhSurface", "module": "rh-surface/rh-surface.js" } }, { "kind": "js", "name": "RhSurface", "declaration": { "name": "RhSurface", "module": "rh-surface/rh-surface.js" } } ] }, { "kind": "javascript-module", "path": "rh-switch/rh-switch.js", "declarations": [ { "name": "RhSwitch", "summary": "A switch toggles the state of a setting (between on and off).", "description": "A switch provides a visible toggle for a setting. Authors must supply\nan accessible label via `accessible-label` or a `\u003clabel for\u003e`. The\nelement uses ARIA `role=\"switch\"` with `aria-checked` for screen\nreaders. Users should toggle with Space or Enter keys. Avoid using\na switch when multiple selections are needed; use checkboxes instead.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "accessibleLabel", "description": "invisible, accessible label for screen readers", "type": { "text": "string" }, "kind": "field", "attribute": "accessible-label", "reflects": true }, { "name": "messageOn", "description": "Message to display when the switch is on (i.e. checked)", "type": { "text": "string" }, "kind": "field", "attribute": "message-on", "reflects": true }, { "name": "messageOff", "description": "Message to display when the switch is off (i.e. unchecked)", "type": { "text": "string" }, "kind": "field", "attribute": "message-off", "reflects": true }, { "name": "showCheckIcon", "description": "If the checkmark icon should be displayed when the switch is on", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "show-check-icon", "reflects": true }, { "name": "checked", "description": "Whether the switch is on (checked)", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "checked", "reflects": true }, { "name": "disabled", "description": "If the switch is disabled", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "disabled", "reflects": true }, { "name": "reversed", "description": "If the switch is reversed: message first, then control", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "reversed", "reflects": true }, { "name": "labels", "type": { "text": "NodeListOf\u003cHTMLLabelElement\u003e" }, "readonly": true, "kind": "field" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-switch/rh-switch.ts#L35" }, "kind": "class", "tagName": "rh-switch", "attributes": [ { "name": "accessible-label", "description": "invisible, accessible label for screen readers", "type": { "text": "string" }, "fieldName": "accessibleLabel" }, { "name": "message-on", "description": "Message to display when the switch is on (i.e. checked)", "type": { "text": "string" }, "fieldName": "messageOn" }, { "name": "message-off", "description": "Message to display when the switch is off (i.e. unchecked)", "type": { "text": "string" }, "fieldName": "messageOff" }, { "name": "show-check-icon", "description": "If the checkmark icon should be displayed when the switch is on", "type": { "text": "boolean" }, "default": "false", "fieldName": "showCheckIcon" }, { "name": "checked", "description": "Whether the switch is on (checked)", "type": { "text": "boolean" }, "default": "false", "fieldName": "checked" }, { "name": "disabled", "description": "If the switch is disabled", "type": { "text": "boolean" }, "default": "false", "fieldName": "disabled" }, { "name": "reversed", "description": "If the switch is reversed: message first, then control", "type": { "text": "boolean" }, "default": "false", "fieldName": "reversed" } ], "events": [ { "name": "change", "description": "Fires when the user toggles the switch on or\noff via click, Space, or Enter. Does not fire when disabled. The\nevent bubbles and carries no detail; read the `checked` property\non the target element to determine the new state.", "type": { "text": "Event", "references": [ { "name": "Event", "package": "global:" } ] } } ], "slots": [ { "name": "message-on", "summary": "Message content when checked. Overrides the `message-on` attribute.", "description": "Accepts inline content such as `\u003cspan\u003e` elements. Content is\nexposed to screen readers via `aria-describedby`, so it should\nbe concise and meaningful." }, { "name": "message-off", "summary": "Message content when unchecked. Overrides the `message-off` attribute.", "description": "Accepts inline content such as `\u003cspan\u003e` elements. Content is\nexposed to screen readers via `aria-describedby`, so it should\nbe concise and meaningful." } ], "cssParts": [ { "name": "container", "description": "The outer flex container for the switch and message slots" }, { "name": "switch", "description": "The toggle track and handle" } ], "cssProperties": [ { "name": "--rh-space-lg", "description": "Gap between track and message\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-switch-unchecked", "description": "Unchecked track color in light mode\n\nUnchecked track color in dark mode", "default": "var(--rh-color-gray-40, #a3a3a3)" }, { "name": "--rh-color-surface-lightest", "description": "Handle color in light mode\n\nPrimary surface (light theme)", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-surface-dark", "description": "Tertiary surface (dark theme)", "default": "#383838", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-box-shadow-sm", "description": "Handle shadow in dark mode\n\nSmall box shadow", "default": "0 2px 4px 0 rgba(21, 21, 21, 0.2)", "syntax": "\u003cshadow\u003e" }, { "name": "--rh-border-radius-pill", "description": "Track border radius\n\nHandle border radius\n\nPill border radius; Example: Label", "default": "64px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-color-text-secondary", "description": "Unchecked message text color" }, { "name": "--rh-switch-checked", "default": "light-dark(\n /** Checked track color in light mode */\n var(--rh-color-accent-base-on-light, #0066cc),\n /** Checked track color in dark mode */\n var(--rh-color-accent-base-on-dark, #92c5f9)\n )" }, { "name": "--rh-color-accent-base-on-light", "description": "Checked track color in light mode\n\nInline link (light theme)", "default": "#0066cc", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-accent-base-on-dark", "description": "Checked track color in dark mode\n\nInline link (dark theme)", "default": "#92c5f9", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-text-primary", "description": "Checked message text color" }, { "name": "--rh-border-width-md", "description": "Focus ring outline width\n\n2px border width: Example: Alert", "default": "2px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-border-interactive", "description": "Focus ring outline color" }, { "name": "--rh-space-sm", "description": "6px spacer", "default": "6px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-gray-50", "description": "Disabled message text color\n\nSubtle icon", "default": "#707070", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-40", "description": "Disabled text color in dark mode\n\nSubtle icon (hover state)", "default": "#a3a3a3", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-30", "description": "Subtle borders (light theme)", "default": "#c7c7c7", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-switch-disabled", "description": "Disabled track color in light mode\n\nDisabled track color in dark mode", "default": "var(--rh-color-gray-60, #4d4d4d)" }, { "name": "--rh-color-gray-60", "description": "Disabled text color in light mode\n\nSecondary text (light theme)", "default": "#4d4d4d", "syntax": "\u003ccolor\u003e" } ], "demos": [ { "description": "Basic switch with accessible label and status messages, initially checked.", "url": "https://ux.redhat.com/elements/switch/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-switch/demo/index.html" } }, { "description": "Switch with a visible checkmark icon when toggled on.", "url": "https://ux.redhat.com/elements/switch/demo/check-icon/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-switch/demo/check-icon.html" } }, { "description": "Switches displayed across light and dark color contexts, including disabled and check-icon variants.", "url": "https://ux.redhat.com/elements/switch/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-switch/demo/color-context.html" } }, { "description": "Switches in a disabled state, preventing user interaction.", "url": "https://ux.redhat.com/elements/switch/demo/disabled/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-switch/demo/disabled.html" } }, { "description": "Switches within fieldsets, demonstrating form integration with labels and programmatic disable toggling.", "url": "https://ux.redhat.com/elements/switch/demo/fieldset/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-switch/demo/fieldset.html" } }, { "description": "Switch nested inside a label element, demonstrating implicit label association and form submission.", "url": "https://ux.redhat.com/elements/switch/demo/nested-in-label/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-switch/demo/nested-in-label.html" } }, { "description": "Switch with reversed layout, placing the status message before the toggle track.", "url": "https://ux.redhat.com/elements/switch/demo/reversed/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-switch/demo/reversed.html" } }, { "description": "Switch with rich HTML content in message slots using slotted span elements.", "url": "https://ux.redhat.com/elements/switch/demo/rich-messages/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-switch/demo/rich-messages.html" } }, { "description": "Switch in right-to-left text direction, verifying correct layout mirroring.", "url": "https://ux.redhat.com/elements/switch/demo/right-to-left/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-switch/demo/right-to-left.html" } }, { "description": "Switches without status messages, using only accessible labels.", "url": "https://ux.redhat.com/elements/switch/demo/without-messages/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-switch/demo/without-messages.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-switch", "declaration": { "name": "RhSwitch", "module": "rh-switch/rh-switch.js" } }, { "kind": "js", "name": "RhSwitch", "declaration": { "name": "RhSwitch", "module": "rh-switch/rh-switch.js" } } ] }, { "kind": "javascript-module", "path": "rh-table/rh-sort-button.js", "declarations": [ { "name": "RequestSortEvent", "superclass": { "name": "ComposedEvent", "module": "@patternfly/pfe-core" }, "members": [ { "name": "direction", "type": { "text": "'asc' | 'desc'" }, "kind": "field" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-table/rh-sort-button.ts#L13" }, "kind": "class" }, { "name": "RhSortButton", "summary": "Toggles column sort direction within a table header", "description": "A button for sorting table columns in ascending or descending order.\nAuthors must place this element inside a `\u003cth\u003e` cell within an\n`\u003crh-table\u003e` element. The button provides a screen reader accessible\nlabel announcing the current sort direction and column name.\nAuthors should set the `column` attribute to identify the sorted\ncolumn for assistive technology users.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "sortDirection", "description": "The button's sorting order", "type": { "text": "'asc' | 'desc'" }, "kind": "field", "attribute": "sort-direction", "reflects": true }, { "name": "accessibleLabel", "description": "Automatically set based on `sort-direction`.\nUse this attribute or the `accessible-label` slot when localizing a table,\nbut be certain to update the text based on sort direction whenever it changes.", "type": { "text": "string" }, "kind": "field", "attribute": "accessible-label" }, { "name": "column", "description": "The column name associated with this button (for screen readers)", "type": { "text": "string" }, "kind": "field", "attribute": "column" }, { "name": "sort", "description": "Dispatch a request-sort event in ascending (asc) or descending (desc) order", "kind": "method" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-table/rh-sort-button.ts#L48" }, "kind": "class", "tagName": "rh-sort-button", "attributes": [ { "name": "sort-direction", "description": "The button's sorting order", "type": { "text": "'asc' | 'desc'" }, "fieldName": "sortDirection" }, { "name": "accessible-label", "description": "Automatically set based on `sort-direction`.\nUse this attribute or the `accessible-label` slot when localizing a table,\nbut be certain to update the text based on sort direction whenever it changes.", "type": { "text": "string" }, "fieldName": "accessibleLabel" }, { "name": "column", "description": "The column name associated with this button (for screen readers)", "type": { "text": "string" }, "fieldName": "column" } ], "events": [ { "name": "request-sort", "description": "Fired when the user\nactivates the sort button. The event detail includes a\n`direction` property set to `'asc'` or `'desc'`.\nCancelling this event prevents the default sort behavior.", "type": { "text": "RequestSortEvent" } } ], "slots": [ { "name": "accessible-label", "description": "Must not use unless localizing the table.\nAutomatically set based on `sort-direction`.\nOverrides the `accessible-label` attribute." } ], "cssParts": [ { "name": "sort-button", "description": "The native button element. Use to customize the sort button appearance." }, { "name": "sort-indicator", "description": "The wrapper around the sort direction SVG icon." } ], "cssProperties": [ { "name": "--rh-color-text-primary", "description": "Primary text color for the sort button" } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "RequestSortEvent", "declaration": { "name": "RequestSortEvent", "module": "rh-table/rh-sort-button.js" } }, { "kind": "custom-element-definition", "name": "rh-sort-button", "declaration": { "name": "RhSortButton", "module": "rh-table/rh-sort-button.js" } }, { "kind": "js", "name": "RhSortButton", "declaration": { "name": "RhSortButton", "module": "rh-table/rh-sort-button.js" } } ] }, { "kind": "javascript-module", "path": "rh-table/rh-table.js", "declarations": [ { "name": "RhTable", "summary": "Organizes and displays information from a data set", "description": "A table provides a container for displaying tabular data, allowing\nusers to scan and compare information. Authors must include a\n`\u003ctable\u003e` with `\u003cthead\u003e`, `\u003ctbody\u003e`, and scoped `\u003cth\u003e` for ARIA\nscreen reader navigation. Should use `\u003ccol\u003e` for column hover and\n`\u003ccaption\u003e` for context. Tab and arrow keys scroll overflow. Avoid\nusing tables for layout.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "parameters": [ { "name": "columnIndexToSort", "type": { "text": "number" } }, { "name": "node", "type": { "text": "Element" } } ], "name": "getNodeContentForSort", "kind": "method", "static": true, "privacy": "private" }, { "parameters": [ { "name": "direction", "type": { "text": "'asc' | 'desc'" } }, { "name": "a", "type": { "text": "{ content: string }" } }, { "name": "b", "type": { "text": "{ content: string }" } } ], "name": "sortByContent", "kind": "method", "static": true, "privacy": "private" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-table/rh-table.ts#L37" }, "kind": "class", "tagName": "rh-table", "slots": [ { "name": "", "summary": "Default slot for the table element", "description": "Expects a native HTML `\u003ctable\u003e` element with semantic\nmarkup. Authors must include `\u003cthead\u003e`, `\u003ctbody\u003e`,\nand scoped `\u003cth\u003e` elements so that screen readers\ncan navigate the table structure." }, { "name": "summary", "summary": "Summary slot for table description", "description": "An optional description of the table data displayed\nbelow the table. The element links this content to the\ntable via `aria-describedby` for screen reader users.\nAuthors should use inline elements like `\u003csmall\u003e`." } ], "cssParts": [ { "name": "container", "description": "The outer wrapper around the table and summary\nslots. Use to customize padding or background.\n\nstyle. Uses `--rh-border-width-sm` width and\n`--rh-color-border-subtle-on-light` color tokens.\nRow hover background. Uses `--rh-color-gray-40`\ntoken at 10% opacity for the light theme.\nColumn hover background. Uses `--rh-color-blue-50`\ntoken at 10% opacity for the light theme." } ], "cssProperties": [ { "name": "--rh-color-text-primary", "description": "Primary text color for table content" }, { "name": "--rh-color-gray-50", "description": "Subtle icon", "default": "#707070", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-border-subtle" }, { "name": "--rh-table-row-border", "description": "row border", "default": "var(--rh-border-width-sm, 1px) solid var(--rh-color-border-subtle-on-light, #c7c7c7)" }, { "name": "--rh-border-width-sm", "description": "1px border width; Example: Secondary CTA or Button", "default": "1px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-border-subtle-on-light", "description": "Subtle border color (light theme)", "default": "#c7c7c7", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-table-row-background-hover-color", "description": "row hover background color", "default": "rgba(from var(--rh-color-gray-40, #a3a3a3) r g b / 0.1)" }, { "name": "--rh-color-gray-40", "description": "Subtle icon (hover state)", "default": "#a3a3a3", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-white", "description": "Lightest surface (light theme) or primary text (dark theme)", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-table-column-background-hover-color", "description": "column hover background color", "default": "rgba(from var(--rh-color-blue-50, #0066cc) r g b / 0.1)" }, { "name": "--rh-color-blue-50", "description": "Label - Filled (Blue) accent color", "default": "#0066cc", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-blue-70", "description": "Alert - Info title text", "default": "#003366", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-space-xl", "description": "24px spacer", "default": "24px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-lg", "description": "16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-text-secondary", "description": "Secondary text color for summary description" }, { "name": "--rh-font-family-body-text", "description": "Body text font for summary\n\nBody text font family", "default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-size-body-text-md", "description": "Medium body text size for summary\n\n16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-weight-body-text-regular", "description": "Regular weight for summary text\n\nRegular font weight", "default": "400", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-line-height-body-text", "description": "Body text line height for summary\n\nLine height for body text", "default": "1.5", "syntax": "\u003ccustom-ident\u003e" } ], "demos": [ { "description": "Default table with sortable columns, a caption, column groups, and a summary slot.", "url": "https://ux.redhat.com/elements/table/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-table/demo/index.html" } }, { "description": "Demonstrates automatic data-label assignment from column headers, with rowspan, colspan, and complex thead examples.", "url": "https://ux.redhat.com/elements/table/demo/auto-data-labels/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-table/demo/auto-data-labels.html" } }, { "description": "Table rendered across light, dark, and other color contexts using rh-context-demo.", "url": "https://ux.redhat.com/elements/table/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-table/demo/color-context.html" } }, { "description": "Table with row headers using scope=row attributes. Tables without thead will not stack on mobile.", "url": "https://ux.redhat.com/elements/table/demo/column-headers/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-table/demo/column-headers.html" } }, { "description": "Table with column headers and a summary slot but no caption title.", "url": "https://ux.redhat.com/elements/table/demo/headers-and-summary-but-no-title/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-table/demo/headers-and-summary-but-no-title.html" } }, { "description": "Table with many columns constrained to 500px width, demonstrating horizontal scrollbar overflow.", "url": "https://ux.redhat.com/elements/table/demo/horizontal-overflow/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-table/demo/horizontal-overflow.html" } }, { "description": "Localized sort buttons using the accessible-label slot to provide translated button text that updates with sort direction.", "url": "https://ux.redhat.com/elements/table/demo/localized-sort/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-table/demo/localized-sort.html" } }, { "description": "Minimal table with no caption, no column headers, and no summary slot.", "url": "https://ux.redhat.com/elements/table/demo/no-title-headers-or-summary/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-table/demo/no-title-headers-or-summary.html" } }, { "description": "Table with both row and column headers, demonstrating a schedule-style data layout with a caption.", "url": "https://ux.redhat.com/elements/table/demo/row-and-column-headers/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-table/demo/row-and-column-headers.html" } }, { "description": "Table with column headers using scope=col, col elements for hover highlighting, and links in cells.", "url": "https://ux.redhat.com/elements/table/demo/row-headers/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-table/demo/row-headers.html" } }, { "description": "Table with a caption title and summary slot but no column headers.", "url": "https://ux.redhat.com/elements/table/demo/title-and-summary-but-no-headers/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-table/demo/title-and-summary-but-no-headers.html" } }, { "description": "Table with a caption title, column headers with sort buttons, and a summary slot for supplementary context.", "url": "https://ux.redhat.com/elements/table/demo/title-headers-and-summary/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-table/demo/title-headers-and-summary.html" } }, { "description": "Table with many rows constrained to 500px height, demonstrating vertical scrollbar overflow.", "url": "https://ux.redhat.com/elements/table/demo/vertical-overflow/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-table/demo/vertical-overflow.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-table", "declaration": { "name": "RhTable", "module": "rh-table/rh-table.js" } }, { "kind": "js", "name": "RhTable", "declaration": { "name": "RhTable", "module": "rh-table/rh-table.js" } } ] }, { "kind": "javascript-module", "path": "rh-tabs/rh-tab-panel.js", "declarations": [ { "name": "RhTabPanel", "summary": "Content panel paired with an `rh-tab`", "description": "A content panel for use in an `rh-tabs` element. Each panel\nmust be paired with a corresponding `rh-tab`. Authors should\navoid empty panels. The ARIA `tabpanel` role and `tabindex`\nallow screen reader and keyboard navigation.", "superclass": { "name": "LitElement", "package": "lit" }, "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tabs/rh-tab-panel.ts#L20" }, "kind": "class", "tagName": "rh-tab-panel", "slots": [ { "name": "", "summary": "Panel content", "description": "Content shown when the paired tab is active. Screen\nreader users navigate here via the ARIA tabpanel\nrole. Authors should ensure keyboard accessibility." } ], "cssProperties": [ { "name": "--rh-space-2xl", "description": "32px spacer", "default": "32px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-interactive-primary-default", "description": "Focus ring, design token rh-color-interactive-primary" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-tab-panel", "declaration": { "name": "RhTabPanel", "module": "rh-tabs/rh-tab-panel.js" } }, { "kind": "js", "name": "RhTabPanel", "declaration": { "name": "RhTabPanel", "module": "rh-tabs/rh-tab-panel.js" } } ] }, { "kind": "javascript-module", "path": "rh-tabs/rh-tab.js", "declarations": [ { "name": "TabExpandEvent", "description": "Fired when a tab is selected. Contains the `active` state and\na reference to the `tab` element. This event bubbles and is\ncancelable; calling `preventDefault()` prevents the tab from\nactivating.\n\nEvent properties:\n- `active` {boolean} - whether the tab was already active\n- `tab` {RhTab} - the tab element being expanded", "superclass": { "name": "Event", "package": "global:" }, "members": [ { "name": "active", "description": "Whether the tab was already active before this event", "type": { "text": "boolean" }, "kind": "field" }, { "name": "tab", "description": "The tab element being expanded", "type": { "text": "RhTab" }, "kind": "field" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tabs/rh-tab.ts#L39" }, "kind": "class" }, { "name": "RhTab", "summary": "A single tab within an `rh-tabs` set", "description": "A tab button for use in an `rh-tabs` element. Each `rh-tab`\nmust be paired with an `rh-tab-panel`. The ARIA `tab` role\nand `aria-selected` state allow screen reader users to\nidentify the active tab. Authors should keep labels short\nand should avoid interactive content inside the tab.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "active", "description": "When true, this tab is the currently selected tab. Only one\ntab in a set should be active at a time. Screen readers\nannounce the active state via `aria-selected`.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "active", "reflects": true }, { "name": "disabled", "description": "When true, the tab cannot be activated by click, Enter, or\nfocus. The tab receives `aria-disabled=\"true\"` to communicate\nthe disabled state to assistive technologies.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "disabled", "reflects": true }, { "name": "icon", "description": "Icon name from the specified icon set to display before the tab label.\nWhen set, an `rh-icon` element renders in the icon slot as a\ndecorative visual. Icons complement the text label but should not\nreplace it.", "type": { "text": "IconNameFor\u003cIconSetName\u003e" }, "kind": "field", "attribute": "icon", "reflects": true }, { "name": "iconSet", "description": "The icon set from which to select the icon. Defaults to `ui`.", "type": { "text": "'ui' | 'standard' | 'social' | 'microns'", "references": [ { "name": "IconSetName", "package": "@rhds/icons" } ] }, "default": "'ui'", "kind": "field", "attribute": "icon-set" }, { "name": "iconChanged", "kind": "method", "privacy": "protected" }, { "parameters": [ { "name": "old", "type": { "text": "boolean" } } ], "name": "activeChanged", "kind": "method", "privacy": "private" }, { "name": "disabledChanged", "description": "if a tab is disabled, then it is also aria-disabled\nif a tab is removed from disabled its not necessarily\nnot still aria-disabled so we don't remove the aria-disabled", "kind": "method", "privacy": "private" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tabs/rh-tab.ts#L72" }, "kind": "class", "tagName": "rh-tab", "attributes": [ { "name": "active", "description": "When true, this tab is the currently selected tab. Only one\ntab in a set should be active at a time. Screen readers\nannounce the active state via `aria-selected`.", "type": { "text": "boolean" }, "default": "false", "fieldName": "active" }, { "name": "disabled", "description": "When true, the tab cannot be activated by click, Enter, or\nfocus. The tab receives `aria-disabled=\"true\"` to communicate\nthe disabled state to assistive technologies.", "type": { "text": "boolean" }, "default": "false", "fieldName": "disabled" }, { "name": "icon", "description": "Icon name from the specified icon set to display before the tab label.\nWhen set, an `rh-icon` element renders in the icon slot as a\ndecorative visual. Icons complement the text label but should not\nreplace it.", "type": { "text": "IconNameFor\u003cIconSetName\u003e" }, "fieldName": "icon" }, { "name": "icon-set", "description": "The icon set from which to select the icon. Defaults to `ui`.", "type": { "text": "'ui' | 'standard' | 'social' | 'microns'", "references": [ { "name": "IconSetName", "package": "@rhds/icons" } ] }, "default": "'ui'", "fieldName": "iconSet" } ], "events": [ { "name": "expand", "description": "when a tab expands.\nThe event detail shape includes `active` (boolean)\nindicating prior state and `tab` (RhTab) referencing\nthe expanded element. Cancelable with\n`preventDefault()`.", "type": { "text": "TabExpandEvent" } } ], "slots": [ { "name": "icon", "summary": "Icon", "description": "Can contain an `\u003csvg\u003e` or `\u003crh-icon\u003e` element\ndisplayed before the tab label text." }, { "name": "", "summary": "Tab label", "description": "Tab label text. Authors should keep labels short\nand descriptive." } ], "cssParts": [ { "name": "button", "description": "element that contains the interactive part of a tab" }, { "name": "icon", "summary": "Icon", "description": "Can contain an `\u003csvg\u003e` or `\u003crh-icon\u003e` element\ndisplayed before the tab label text." }, { "name": "text", "summary": "Tab label", "description": "Tab label text. Authors should keep labels short\nand descriptive." } ], "cssProperties": [ { "name": "--rh-tabs-active-border-color", "default": "var(--rh-color-accent-brand)" }, { "name": "--rh-color-accent-brand" }, { "name": "--rh-color-surface" }, { "name": "--rh-size-icon-01", "description": "16px icon box", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-icon-size" }, { "name": "--rh-line-height-heading", "description": "Line height using rh-line-height-heading token\n\nLine height for headings", "default": "1.3", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-color-text-secondary" }, { "name": "--rh-tabs-link-padding-inline-end", "description": "Padding after tab label", "default": "var(--rh-space-2xl, 32px)" }, { "name": "--rh-tabs-link-padding-inline-start", "description": "Padding before tab label", "default": "var(--rh-space-2xl, 32px)" }, { "name": "--rh-color-surface-lighter", "description": "Tertiary surface (light theme)", "default": "#f2f2f2", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-surface-darker", "description": "Secondary surface (dark theme)", "default": "#1f1f1f", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-space-lg", "description": "16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-2xl", "description": "32px spacer", "default": "32px", "syntax": "\u003clength\u003e" }, { "name": "--rh-tabs-link-padding-block-start", "description": "Padding above tab label", "default": "var(--rh-space-md, 8px)" }, { "name": "--rh-tabs-link-padding-block-end", "description": "Padding below tab label", "default": "var(--rh-space-md, 8px)" }, { "name": "--rh-space-md", "description": "Gap between icon and label using rh-space-md\n\n8px spacer", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-xl", "description": "24px spacer", "default": "24px", "syntax": "\u003clength\u003e" }, { "name": "--rh-tabs-link-color", "description": "Text color, falls back to rh-color-text-secondary", "default": "var(--rh-color-text-primary)" }, { "name": "--rh-color-text-primary" }, { "name": "--rh-border-width-sm", "description": "Inactive box tab side border width\n\nVertical box tab trailing border width above sm breakpoint\n\nVertical box tab top border width above sm breakpoint\n\nVertical box tab hover separator width above sm breakpoint\n\n1px border width; Example: Secondary CTA or Button", "default": "1px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-border-subtle", "description": "Inactive box tab side border color\n\nVertical box tab trailing border color above sm breakpoint\n\nVertical box tab top border color above sm breakpoint\n\nVertical box tab hover separator color above sm breakpoint\n\nFirst vertical box tab trailing border\n\nHorizontal box tab bottom border above sm breakpoint", "default": "1px" }, { "name": "--rh-border-width-lg", "description": "Tab active border color\n\nTop border uses rh-border-width-lg token\n\nVertical tab hover indicator width\n\nVertical box tab hover active indicator width above sm breakpoint\n\nHorizontal box tab hover indicator width\n\nVertical open tab hover indicator width below sm breakpoint\n\nVertical open tab hover indicator width above sm breakpoint\n\nHorizontal open tab hover indicator width\n\n3px border width: Example: Expanded Accordion panel", "default": "3px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-interactive-secondary-default", "description": "Vertical tab hover indicator color\n\nVertical box tab hover active indicator color above sm breakpoint\n\nHorizontal box tab hover indicator color\n\nVertical open tab hover indicator color below sm breakpoint\n\nVertical open tab hover indicator color above sm breakpoint\n\nHorizontal open tab hover indicator color", "default": "3px" }, { "name": "--rh-color-interactive-primary-default", "description": "Focus outline, adapts to color-palette" } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "TabExpandEvent", "declaration": { "name": "TabExpandEvent", "module": "rh-tabs/rh-tab.js" } }, { "kind": "custom-element-definition", "name": "rh-tab", "declaration": { "name": "RhTab", "module": "rh-tabs/rh-tab.js" } }, { "kind": "js", "name": "RhTab", "declaration": { "name": "RhTab", "module": "rh-tabs/rh-tab.js" } } ] }, { "kind": "javascript-module", "path": "rh-tabs/rh-tabs.js", "declarations": [ { "name": "RhTabs", "summary": "Arranges content in a contained view on the same page", "description": "Tabs provide a way for users to organize and navigate between\nsections of content on the same page. Each tab must be paired\nwith a corresponding `rh-tab-panel`. When using keyboard\nnavigation, arrow keys move focus between tabs following the\nWAI-ARIA Tabs pattern. The component allows horizontal,\nvertical, and boxed layouts, and overflow scroll buttons\nappear when tabs exceed the available width.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "labelScrollLeft", "description": "Accessible label for the scroll-left overflow button.\nAuthors should localize this string for non-English pages.", "type": { "text": "string" }, "default": "'Scroll left'", "kind": "field", "attribute": "label-scroll-left", "reflects": true }, { "name": "labelScrollRight", "description": "Accessible label for the scroll-right overflow button.\nAuthors should localize this string for non-English pages.", "type": { "text": "string" }, "default": "'Scroll right'", "kind": "field", "attribute": "label-scroll-right", "reflects": true }, { "name": "manual", "description": "When true, tabs use\n[manual](https://w3c.github.io/aria-practices/examples/tabs/tabs-manual.html)\nactivation, requiring the user to press Enter or click to activate\na focused tab. When false (default), tabs use\n[automatic](https://w3c.github.io/aria-practices/examples/tabs/tabs-automatic.html)\nactivation, where focus immediately selects the tab.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "manual", "reflects": true }, { "name": "activeIndex", "description": "Zero-based index of the currently active tab. Setting this\nproperty programmatically selects the tab at that index.\nDefaults to -1 (no tab selected).", "kind": "field", "attribute": "active-index" }, { "name": "activeTab", "type": { "text": "RhTab" }, "kind": "field" }, { "name": "colorPalette", "description": "Sets the color palette for child components, overriding any\ninherited context from parent elements.", "type": { "text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'", "references": [ { "name": "ColorPalette", "module": "lib/color-palettes.js" } ] }, "kind": "field", "attribute": "color-palette", "reflects": true }, { "name": "centered", "description": "When true, centers the tab list within the container.\nAuthors should avoid centering when there are many tabs,\nas it may cause layout issues with overflow.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "centered", "reflects": true }, { "name": "box", "description": "Sets the tab style to boxed (`box`) or boxed with inset\npadding (`inset`). When unset, tabs use the default open style.", "type": { "text": "'box' | 'inset'" }, "kind": "field", "attribute": "box", "reflects": true }, { "name": "vertical", "description": "When true, displays the tab list vertically to the left of\nthe panels. On small viewports (below 768px), vertical tabs\nrevert to horizontal layout.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "vertical", "reflects": true }, { "name": "canShowScrollButtons", "type": { "text": "boolean" }, "readonly": true, "kind": "field", "privacy": "protected" }, { "name": "tabs", "type": { "text": "RhTab[]" }, "readonly": true, "kind": "field" }, { "name": "panels", "readonly": true, "kind": "field" }, { "name": "firstUpdated", "kind": "method" }, { "parameters": [ { "name": "old", "type": { "text": "RhTab" } }, { "name": "activeTab", "type": { "text": "RhTab" } } ], "return": { "type": { "text": "void" } }, "name": "activeTabChanged", "kind": "method", "privacy": "protected" }, { "parameters": [ { "name": "option", "type": { "text": "RhTab | number" } } ], "name": "select", "kind": "method" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tabs/rh-tabs.ts#L65" }, "kind": "class", "tagName": "rh-tabs", "attributes": [ { "name": "label-scroll-left", "description": "Accessible label for the scroll-left overflow button.\nAuthors should localize this string for non-English pages.", "type": { "text": "string" }, "default": "'Scroll left'", "fieldName": "labelScrollLeft" }, { "name": "label-scroll-right", "description": "Accessible label for the scroll-right overflow button.\nAuthors should localize this string for non-English pages.", "type": { "text": "string" }, "default": "'Scroll right'", "fieldName": "labelScrollRight" }, { "name": "manual", "description": "When true, tabs use\n[manual](https://w3c.github.io/aria-practices/examples/tabs/tabs-manual.html)\nactivation, requiring the user to press Enter or click to activate\na focused tab. When false (default), tabs use\n[automatic](https://w3c.github.io/aria-practices/examples/tabs/tabs-automatic.html)\nactivation, where focus immediately selects the tab.", "type": { "text": "boolean" }, "default": "false", "fieldName": "manual" }, { "name": "active-index", "description": "Zero-based index of the currently active tab. Setting this\nproperty programmatically selects the tab at that index.\nDefaults to -1 (no tab selected).", "fieldName": "activeIndex" }, { "name": "color-palette", "description": "Sets the color palette for child components, overriding any\ninherited context from parent elements.", "type": { "text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'", "references": [ { "name": "ColorPalette", "module": "lib/color-palettes.js" } ] }, "fieldName": "colorPalette" }, { "name": "centered", "description": "When true, centers the tab list within the container.\nAuthors should avoid centering when there are many tabs,\nas it may cause layout issues with overflow.", "type": { "text": "boolean" }, "default": "false", "fieldName": "centered" }, { "name": "box", "description": "Sets the tab style to boxed (`box`) or boxed with inset\npadding (`inset`). When unset, tabs use the default open style.", "type": { "text": "'box' | 'inset'" }, "fieldName": "box" }, { "name": "vertical", "description": "When true, displays the tab list vertically to the left of\nthe panels. On small viewports (below 768px), vertical tabs\nrevert to horizontal layout.", "type": { "text": "boolean" }, "default": "false", "fieldName": "vertical" } ], "events": [ { "name": "expand", "description": "when a tab is selected.\nThe event detail shape includes `active` (boolean)\nindicating prior state and `tab` (RhTab) referencing\nthe expanded element. Cancelable with\n`preventDefault()`.", "type": { "text": "TabExpandEvent" } } ], "slots": [ { "name": "tab", "summary": "Tab elements", "description": "Must contain one or more `\u003crh-tab\u003e` elements.\nEach tab must have a corresponding `\u003crh-tab-panel\u003e`\nin the default slot. Screen readers announce the\ntab role and selected state for each tab." }, { "name": "", "summary": "Panel elements", "description": "Must contain one or more `\u003crh-tab-panel\u003e` elements.\nEach panel must correspond to a tab in the `tab` slot.\nPanels receive `role=\"tabpanel\"` and are focusable\nvia Tab key for keyboard accessibility." } ], "cssParts": [ { "name": "container", "description": "outer container" }, { "name": "tabs-container", "description": "tabs container" }, { "name": "tabs", "summary": "Tab elements", "description": "Must contain one or more `\u003crh-tab\u003e` elements.\nEach tab must have a corresponding `\u003crh-tab-panel\u003e`\nin the default slot. Screen readers announce the\ntab role and selected state for each tab." }, { "name": "panels", "summary": "Panel elements", "description": "Must contain one or more `\u003crh-tab-panel\u003e` elements.\nEach panel must correspond to a tab in the `tab` slot.\nPanels receive `role=\"tabpanel\"` and are focusable\nvia Tab key for keyboard accessibility." } ], "cssProperties": [ { "name": "--rh-font-size-body-text-md", "description": "Font size using rh-font-size-body-text-md token\n\n16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-accent-base", "description": "Overflow scroll button arrow accent color" }, { "name": "--rh-color-text-secondary", "description": "Overflow scroll button default text color" }, { "name": "--rh-color-gray-40", "description": "Subtle icon (hover state)", "default": "#a3a3a3", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-60", "description": "Secondary text (light theme)", "default": "#4d4d4d", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-icon-status-disabled" }, { "name": "--rh-space-3xl", "description": "48px spacer", "default": "48px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-4xl", "description": "64px spacer", "default": "64px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-2xl", "description": "32px spacer", "default": "32px", "syntax": "\u003clength\u003e" }, { "name": "--rh-tabs-inset", "default": "var(--_inset-inline-margin, auto)" }, { "name": "--rh-space-lg", "description": "Scroll button inline padding\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-surface", "description": "Tabs background, adapts to color-palette\n\nScroll button background, adapts to color-palette" }, { "name": "--rh-border-width-sm", "description": "Tab list bottom border width\n\nVertical border using rh-border-width-sm token\n\n1px border width; Example: Secondary CTA or Button", "default": "1px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-text-primary", "description": "Text color, adapts to color-palette\n\nOverflow scroll button hover text color\n\nContainer text color from rh-color-text-primary" }, { "name": "--rh-border-width-lg", "description": "3px border width: Example: Expanded Accordion panel", "default": "3px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-border-subtle", "description": "Tab list bottom border color, adapts to color-palette", "default": "3px" } ], "demos": [ { "description": "Default horizontal tabs with five sections and automatic activation.", "url": "https://ux.redhat.com/elements/tabs/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tabs/demo/index.html" } }, { "description": "Tabs with boxed inset style, adding bordered tab buttons with padding.", "url": "https://ux.redhat.com/elements/tabs/demo/box-inset/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tabs/demo/box-inset.html" } }, { "description": "Tabs with center-aligned tab list within the container.", "url": "https://ux.redhat.com/elements/tabs/demo/centered/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tabs/demo/centered.html" } }, { "description": "Tabs rendered in different color contexts with controls for box, centered, and vertical variants.", "url": "https://ux.redhat.com/elements/tabs/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tabs/demo/color-context.html" } }, { "description": "Deprecated theme attribute usage and custom active border color override.", "url": "https://ux.redhat.com/elements/tabs/demo/deprecation/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tabs/demo/deprecation.html" } }, { "description": "Listening to the TabExpandEvent to show or hide content when a specific tab is selected.", "url": "https://ux.redhat.com/elements/tabs/demo/expand-event/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tabs/demo/expand-event.html" } }, { "description": "Tabs with icons alongside text labels using the icon slot.", "url": "https://ux.redhat.com/elements/tabs/demo/icons-and-text/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tabs/demo/icons-and-text.html" } }, { "description": "Tabs with long label text demonstrating text wrapping and overflow behavior.", "url": "https://ux.redhat.com/elements/tabs/demo/long-tab-content/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tabs/demo/long-tab-content.html" } }, { "description": "Tabs with manual activation requiring Enter or click to select a focused tab.", "url": "https://ux.redhat.com/elements/tabs/demo/manual-activation/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tabs/demo/manual-activation.html" } }, { "description": "Nested tabs with a second rh-tabs inside a panel of the outer tabs.", "url": "https://ux.redhat.com/elements/tabs/demo/nested/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tabs/demo/nested.html" } }, { "description": "Tabs in a right-to-left (Hebrew) layout demonstrating bidi support.", "url": "https://ux.redhat.com/elements/tabs/demo/right-to-left/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tabs/demo/right-to-left.html" } }, { "description": "Vertical tab layout with tab list displayed to the left of the panels.", "url": "https://ux.redhat.com/elements/tabs/demo/vertical/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tabs/demo/vertical.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-tabs", "declaration": { "name": "RhTabs", "module": "rh-tabs/rh-tabs.js" } }, { "kind": "js", "name": "RhTabs", "declaration": { "name": "RhTabs", "module": "rh-tabs/rh-tabs.js" } } ] }, { "kind": "javascript-module", "path": "rh-tag/rh-tag.js", "declarations": [ { "name": "RhTag", "summary": "Categorizes content, adds context, or indicates status using a short text label", "description": "A tag provides a short, pill-shaped label for categorizing content or\nindicating status. It should include an icon when color alone conveys\nmeaning. Linked tags must have descriptive text for screen readers, and\nshould provide an `aria-label` on group containers. When disabled, Enter\nkeyboard navigation is suppressed on linked tags.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "icon", "description": "The name of the icon to display in the tag.\nWhen set, an `rh-icon` element renders in the icon slot as a decorative visual.", "type": { "text": "IconNameFor\u003cIconSetName\u003e" }, "kind": "field", "attribute": "icon", "reflects": true }, { "name": "iconSet", "description": "The icon set from which to select the icon. Defaults to `ui`.", "type": { "text": "'ui' | 'standard' | 'social' | 'microns'", "references": [ { "name": "IconSetName", "package": "@rhds/icons" } ] }, "default": "'ui'", "kind": "field", "attribute": "icon-set", "reflects": true }, { "name": "variant", "description": "The visual style variant of the tag.\n- `filled`: colored background with a subtle border (default)\n- `outline`: transparent background with a colored border\n- `desaturated`: transparent background with a neutral border and text color", "type": { "text": "'filled' | 'outline' | 'desaturated'" }, "default": "'filled'", "kind": "field", "attribute": "variant", "reflects": true }, { "name": "size", "description": "The size of the tag. When set to `compact`, the tag uses a smaller font\nsize and reduced padding.", "type": { "text": "'compact'" }, "kind": "field", "attribute": "size", "reflects": true }, { "name": "href", "description": "Optional URL that makes the tag a navigable link. When set, the tag\nrenders an anchor element around its text content.", "type": { "text": "string" }, "kind": "field", "attribute": "href", "reflects": true }, { "name": "disabled", "description": "Whether an interactive (linked) tag is disabled. When true, the tag\nvisually appears inactive and keyboard navigation is suppressed.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "disabled", "reflects": true }, { "name": "color", "description": "The color palette of the tag. Nine colors are available. Choose colors\nthat correspond to the tag's semantic meaning (e.g. red for errors,\ngreen for success). Defaults to gray.\n\nNote: `cyan` is accepted but deprecated; use `teal` instead.", "type": { "text": "'red' | 'red-orange' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'purple' | 'gray'" }, "kind": "field", "attribute": "color" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tag/rh-tag.ts#L32" }, "kind": "class", "tagName": "rh-tag", "attributes": [ { "name": "icon", "description": "The name of the icon to display in the tag.\nWhen set, an `rh-icon` element renders in the icon slot as a decorative visual.", "type": { "text": "IconNameFor\u003cIconSetName\u003e" }, "fieldName": "icon" }, { "name": "icon-set", "description": "The icon set from which to select the icon. Defaults to `ui`.", "type": { "text": "'ui' | 'standard' | 'social' | 'microns'", "references": [ { "name": "IconSetName", "package": "@rhds/icons" } ] }, "default": "'ui'", "fieldName": "iconSet" }, { "name": "variant", "description": "The visual style variant of the tag.\n- `filled`: colored background with a subtle border (default)\n- `outline`: transparent background with a colored border\n- `desaturated`: transparent background with a neutral border and text color", "type": { "text": "'filled' | 'outline' | 'desaturated'" }, "default": "'filled'", "fieldName": "variant" }, { "name": "size", "description": "The size of the tag. When set to `compact`, the tag uses a smaller font\nsize and reduced padding.", "type": { "text": "'compact'" }, "fieldName": "size" }, { "name": "href", "description": "Optional URL that makes the tag a navigable link. When set, the tag\nrenders an anchor element around its text content.", "type": { "text": "string" }, "fieldName": "href" }, { "name": "disabled", "description": "Whether an interactive (linked) tag is disabled. When true, the tag\nvisually appears inactive and keyboard navigation is suppressed.", "type": { "text": "boolean" }, "default": "false", "fieldName": "disabled" }, { "name": "color", "description": "The color palette of the tag. Nine colors are available. Choose colors\nthat correspond to the tag's semantic meaning (e.g. red for errors,\ngreen for success). Defaults to gray.\n\nNote: `cyan` is accepted but deprecated; use `teal` instead.", "type": { "text": "'red' | 'red-orange' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'purple' | 'gray'" }, "fieldName": "color" } ], "slots": [ { "name": "", "summary": "tag text content for screen readers and visual display", "description": "Expects inline text. Text must convey meaning without\nrelying on color alone (WCAG 1.4.1). Keep under\n25 characters." }, { "name": "icon", "summary": "decorative icon for screen reader and visual context", "description": "Expects an `rh-icon` element or inline `svg`. Icons must\nbe purely decorative. Screen readers skip this slot\nbecause the icon has no accessible name." } ], "cssParts": [ { "name": "icon", "summary": "decorative icon for screen reader and visual context", "description": "Expects an `rh-icon` element or inline `svg`. Icons must\nbe purely decorative. Screen readers skip this slot\nbecause the icon has no accessible name." } ], "cssProperties": [ { "name": "--rh-length-3xs", "description": "Offset between the link text and its dashed underline\n\n2px length token", "default": "2px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-surface-lighter", "description": "Tag pill background color, varies by color and variant\n\nTertiary surface (light theme)", "default": "#f2f2f2", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-font-family-body-text", "description": "Text font family\n\nBody text font family", "default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-size-body-text-sm", "description": "Text size\n\n14px font size", "default": "0.875rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-weight-body-text-regular", "description": "Text weight\n\nRegular font weight", "default": "400", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-line-height-body-text", "description": "Body text line height\n\nLine height for body text", "default": "1.5", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-size-icon-01", "description": "16px icon box", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-border-width-sm", "description": "Container border width\n\n1px border width; Example: Secondary CTA or Button", "default": "1px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-border-subtle", "description": "Container border color" }, { "name": "--rh-border-radius-pill", "description": "Pill-shaped border radius for the tag container\n\nPill-shaped border radius matching the container\n\nPill border radius; Example: Label", "default": "64px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-border-radius-default", "description": "Focus ring border radius for the inner text area\n\n3px border radius; Example: Card", "default": "3px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-space-xs", "description": "Icon to text gap\n\n4px spacer", "default": "4px", "syntax": "\u003clength\u003e" }, { "name": "--rh-border-width-md", "description": "Thicker border on hover for visual feedback\n\nFocus ring outline width\n\n2px border width: Example: Alert", "default": "2px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-border-interactive", "description": "Focus ring outline color" }, { "name": "--rh-font-size-body-text-xs", "description": "Compact variant uses a smaller text size\n\n12px font size", "default": "0.75rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-tag-padding-block-start", "description": "Tag block-start padding\n\nCompact block-start padding", "default": "0" }, { "name": "--rh-tag-padding-inline-end", "description": "Tag inline-end padding", "default": "var(--rh-space-md, 8px)" }, { "name": "--rh-tag-padding-block-end", "description": "Tag block-end padding\n\nCompact block-end padding", "default": "0" }, { "name": "--rh-tag-padding-inline-start", "description": "Tag inline-start padding", "default": "var(--rh-space-md, 8px)" }, { "name": "--rh-space-md", "description": "Compact inline-end padding\n\nCompact inline-start padding\n\n8px spacer", "default": "8px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-red-50", "description": "Red tag border in dark mode\n\nBrand red (light and dark theme)", "default": "#ee0000", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-red-70", "description": "Red tag fill in dark mode\n\nRed text in light mode\n\nDarker brand red", "default": "#5f0000", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-red-10", "description": "Red tag fill in light mode\n\nRed text in dark mode", "default": "#fce3e3", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-red-20", "description": "Red outline icon in dark mode\n\nLightest brand red", "default": "#fbc5c5", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-red-60", "description": "Red icon in light mode\n\nRed outline icon in light mode\n\nRed outline text in light mode\n\nDark brand red", "default": "#a60000", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-red-30", "description": "Red tag border in light mode\n\nRed icon in dark mode\n\nRed outline text in dark mode\n\nLighter brand red", "default": "#f9a8a8", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-red-orange-50", "description": "Red orange tag border in dark mode", "default": "#f0561d", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-red-orange-70", "description": "Red orange tag fill in dark mode\n\nRed orange text in light mode", "default": "#731f00", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-red-orange-10", "description": "Red orange tag fill in light mode\n\nRed orange text in dark mode", "default": "#ffe3d9", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-red-orange-20", "description": "Red orange outline icon in dark mode", "default": "#fbbea8", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-red-orange-60", "description": "Red orange icon in light mode\n\nRed orange outline icon in light mode\n\nRed orange outline text in light mode", "default": "#b1380b", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-red-orange-30", "description": "Red orange tag border in light mode\n\nRed orange icon in dark mode\n\nRed orange outline text in dark mode", "default": "#f89b78", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-orange-50", "description": "Orange tag border in dark mode\n\nLabel - Filled (Orange) accent color", "default": "#ca6c0f", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-orange-70", "description": "Orange tag fill in dark mode\n\nOrange text in light mode\n\nLabel - Filled (Orange) text color", "default": "#732e00", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-orange-10", "description": "Orange tag fill in light mode\n\nOrange text in dark mode\n\nLabel - Filled (Orange) background color", "default": "#ffe8cc", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-orange-20", "description": "Orange outline icon in dark mode", "default": "#fccb8f", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-orange-60", "description": "Orange icon in light mode\n\nOrange outline icon in light mode\n\nOrange outline text in light mode", "default": "#9e4a06", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-orange-30", "description": "Orange tag border in light mode\n\nOrange icon in dark mode\n\nOrange outline text in dark mode\n\nLabel - Filled (Orange) border color", "default": "#f8ae54", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-yellow-50", "description": "Yellow tag border in dark mode", "default": "#b98412", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-yellow-70", "description": "Yellow tag fill in dark mode\n\nYellow text in light mode\n\nAlert - Warning title text", "default": "#73480b", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-yellow-10", "description": "Yellow tag fill in light mode\n\nYellow text in dark mode\n\nAlert - Warning background", "default": "#fff4cc", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-yellow-20", "description": "Yellow outline icon in dark mode", "default": "#ffe072", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-yellow-60", "description": "Yellow icon in light mode\n\nYellow outline icon in light mode\n\nYellow outline text in light mode", "default": "#96640f", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-yellow-30", "description": "Yellow tag border in light mode\n\nYellow icon in dark mode\n\nYellow outline text in dark mode", "default": "#ffcc17", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-green-50", "description": "Green tag border in dark mode", "default": "#63993d", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-green-70", "description": "Green tag fill in dark mode\n\nGreen text in light mode\n\nAlert - Success title text", "default": "#204d00", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-green-10", "description": "Green tag fill in light mode\n\nGreen text in dark mode\n\nAlert - success background", "default": "#e9f7df", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-green-20", "description": "Green outline icon in dark mode\n\nLabel - Filled (Green) border color", "default": "#d1f1bb", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-green-60", "description": "Green icon in light mode\n\nGreen outline icon in light mode\n\nGreen outline text in light mode\n\nAlert - Success accent", "default": "#3d7317", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-green-30", "description": "Green tag border in light mode\n\nGreen icon in dark mode\n\nGreen outline text in dark mode", "default": "#afdc8f", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-teal-50", "description": "Teal tag border in dark mode\n\nAlert - Default accent", "default": "#37a3a3", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-teal-70", "description": "Teal tag fill in dark mode\n\nTeal text in light mode\n\nAlert - Default title text", "default": "#004d4d", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-teal-10", "description": "Teal tag fill in light mode\n\nTeal text in dark mode\n\nAlert - Default background", "default": "#daf2f2", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-teal-20", "description": "Teal outline icon in dark mode", "default": "#b9e5e5", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-teal-60", "description": "Teal icon in light mode\n\nTeal outline icon in light mode\n\nTeal outline text in light mode", "default": "#147878", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-teal-30", "description": "Teal tag border in light mode\n\nTeal icon in dark mode\n\nTeal outline text in dark mode\n\nLabel (Cyan) border color", "default": "#9ad8d8", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-blue-50", "description": "Blue tag border in dark mode\n\nLabel - Filled (Blue) accent color", "default": "#0066cc", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-blue-70", "description": "Blue tag fill in dark mode\n\nBlue text in light mode\n\nAlert - Info title text", "default": "#003366", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-blue-10", "description": "Blue tag fill in light mode\n\nBlue text in dark mode\n\nAlert - Info background", "default": "#e0f0ff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-blue-20", "description": "Blue outline icon in dark mode\n\nLabel - Filled (Blue) border color", "default": "#b9dafc", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-blue-60", "description": "Blue icon in light mode\n\nBlue outline icon in light mode\n\nBlue outline text in light mode\n\nInline link hover (light theme)", "default": "#004d99", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-blue-30", "description": "Blue tag border in light mode\n\nBlue icon in dark mode\n\nBlue outline text in dark mode\n\nInline link (dark theme)", "default": "#92c5f9", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-purple-50", "description": "Purple tag border in dark mode", "default": "#5e40be", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-purple-70", "description": "Purple tag fill in dark mode\n\nPurple text in light mode\n\nInline link visited hover (light theme)", "default": "#21134d", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-purple-10", "description": "Purple tag fill in light mode\n\nPurple text in dark mode\n\nLabel - Filled (Purple) background color", "default": "#ece6ff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-purple-20", "description": "Purple outline icon in dark mode\n\nInline link visited hover (dark theme)", "default": "#d0c5f4", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-purple-60", "description": "Purple icon in light mode\n\nPurple outline icon in light mode\n\nPurple outline text in light mode\n\nInline link visited (light theme)", "default": "#3d2785", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-purple-30", "description": "Purple tag border in light mode\n\nPurple icon in dark mode\n\nPurple outline text in dark mode", "default": "#b6a6e9", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-10", "description": "Gray tag fill in light mode\n\nGray text in dark mode\n\nTertiary surface (light theme)", "default": "#f2f2f2", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-20", "description": "Gray outline icon in dark mode\n\nSecondary surface (light theme)", "default": "#e0e0e0", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-white", "description": "Outline variant fill in light mode\n\nLightest surface (light theme) or primary text (dark theme)", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-95", "description": "Outline variant fill in dark mode\n\nPrimary surface (dark theme) or primary text (light theme)", "default": "#151515", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-50", "description": "Gray tag border in dark mode\n\nOutline variant border in dark mode\n\nSubtle icon", "default": "#707070", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-text-primary", "description": "Desaturated border color\n\nDesaturated icon color\n\nDesaturated text color" }, { "name": "--rh-color-gray-30", "description": "Gray tag border in light mode\n\nGray icon in dark mode\n\nGray outline text in dark mode\n\nOutline variant border in light mode\n\nDisabled fill in light mode\n\nDisabled border in light mode\n\nSubtle borders (light theme)", "default": "#c7c7c7", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-70", "description": "Gray tag fill in dark mode\n\nGray text in light mode\n\nDisabled fill in dark mode\n\nDisabled border in dark mode\n\nTertiary surface (dark theme)", "default": "#383838", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-60", "description": "Gray icon in light mode\n\nGray outline icon in light mode\n\nGray outline text in light mode\n\nDisabled icon in light mode\n\nDisabled text in light mode\n\nSecondary text (light theme)", "default": "#4d4d4d", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-gray-40", "description": "Disabled icon in dark mode\n\nDisabled text in dark mode\n\nSubtle icon (hover state)", "default": "#a3a3a3", "syntax": "\u003ccolor\u003e" } ], "demos": [ { "description": "A basic tag element with default gray color and filled variant.", "url": "https://ux.redhat.com/elements/tag/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tag/demo/index.html" } }, { "description": "Tags in all color, variant, size, and link combinations across light and dark color schemes.", "url": "https://ux.redhat.com/elements/tag/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tag/demo/color-context.html" } }, { "description": "Tags in each available color using the default filled variant.", "url": "https://ux.redhat.com/elements/tag/demo/colors/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tag/demo/colors.html" } }, { "description": "Desaturated variant tags with a decorative icon set via the icon attribute.", "url": "https://ux.redhat.com/elements/tag/demo/desaturated-with-icon/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tag/demo/desaturated-with-icon.html" } }, { "description": "Desaturated variant tags with a transparent background and neutral border.", "url": "https://ux.redhat.com/elements/tag/demo/desaturated/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tag/demo/desaturated.html" } }, { "description": "Filled variant tags with a decorative icon set via the icon attribute.", "url": "https://ux.redhat.com/elements/tag/demo/filled-color-with-icon/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tag/demo/filled-color-with-icon.html" } }, { "description": "Filled variant tags with a custom SVG icon slotted into the icon slot.", "url": "https://ux.redhat.com/elements/tag/demo/filled-color-with-slotted-icon/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tag/demo/filled-color-with-slotted-icon.html" } }, { "description": "Filled variant tags in all nine available colors.", "url": "https://ux.redhat.com/elements/tag/demo/filled-color/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tag/demo/filled-color.html" } }, { "description": "Tags used as links with href, including disabled link states and icon combinations.", "url": "https://ux.redhat.com/elements/tag/demo/links/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tag/demo/links.html" } }, { "description": "Outline variant tags with a decorative icon set via the icon attribute.", "url": "https://ux.redhat.com/elements/tag/demo/outline-with-icon/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tag/demo/outline-with-icon.html" } }, { "description": "Outline variant tags with a custom SVG icon slotted into the icon slot.", "url": "https://ux.redhat.com/elements/tag/demo/outline-with-slotted-icon/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tag/demo/outline-with-slotted-icon.html" } }, { "description": "Outline variant tags with a transparent background and colored border.", "url": "https://ux.redhat.com/elements/tag/demo/outline/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tag/demo/outline.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-tag", "declaration": { "name": "RhTag", "module": "rh-tag/rh-tag.js" } }, { "kind": "js", "name": "RhTag", "declaration": { "name": "RhTag", "module": "rh-tag/rh-tag.js" } } ] }, { "kind": "javascript-module", "path": "rh-tile/rh-tile-group.js", "declarations": [ { "name": "RhTileGroup", "summary": "Groups tiles for checkbox or radio selection with\nkeyboard navigation and form association.", "description": "A tile group organizes `\\\u003crh-tile\\\u003e` elements into a selectable\nset. When `radio` is set, it provides ARIA `role=\"radiogroup\"`\nand arrow-key navigation for screen readers. The group must\ncontain at least two tiles. Users should set `radio` when only\none option must be selected.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "disabled", "description": "Whether tile group interaction is disabled", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "disabled", "reflects": true }, { "name": "radio", "description": "If tile is checkable, whether only one tile can be checked", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "radio", "reflects": true }, { "name": "colorPalette", "description": "Sets color palette, which affects the element's styles as well as descendants' color theme.\nOverrides parent color context.\nYour theme will influence these colors so check there first if you are seeing inconsistencies.\nSee [CSS Custom Properties](#css-custom-properties) for default values\n\nTile group always resets its context to `base`, unless explicitly provided with a `color-palette`.", "type": { "text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'", "references": [ { "name": "ColorPalette", "module": "lib/color-palettes.js" } ] }, "kind": "field", "attribute": "color-palette", "reflects": true }, { "name": "tiles", "description": "All slotted tiles", "readonly": true, "kind": "field" }, { "name": "selected", "description": "All selected tiles", "readonly": true, "kind": "field" }, { "return": { "type": { "text": "void" } }, "name": "firstUpdated", "kind": "method" }, { "name": "focus", "description": "Sets focus on active tile", "kind": "method" }, { "parameters": [ { "name": "tile", "type": { "text": "RhTile" } } ], "name": "selectItem", "description": "Programatically select a tile", "kind": "method" }, { "parameters": [ { "name": "tile", "type": { "text": "RhTile" } } ], "name": "toggleItem", "description": "Programatically toggle a tile", "kind": "method" }, { "name": "updateItems", "description": "Updates slotted tiles to set properties and keyboard navigation", "kind": "method" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/rh-tile-group.ts#L31" }, "kind": "class", "tagName": "rh-tile-group", "attributes": [ { "name": "disabled", "description": "Whether tile group interaction is disabled", "type": { "text": "boolean" }, "default": "false", "fieldName": "disabled" }, { "name": "radio", "description": "If tile is checkable, whether only one tile can be checked", "type": { "text": "boolean" }, "default": "false", "fieldName": "radio" }, { "name": "color-palette", "description": "Sets color palette, which affects the element's styles as well as descendants' color theme.\nOverrides parent color context.\nYour theme will influence these colors so check there first if you are seeing inconsistencies.\nSee [CSS Custom Properties](#css-custom-properties) for default values\n\nTile group always resets its context to `base`, unless explicitly provided with a `color-palette`.", "type": { "text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'", "references": [ { "name": "ColorPalette", "module": "lib/color-palettes.js" } ] }, "fieldName": "colorPalette" } ], "slots": [ { "name": "", "description": "Place `rh-tile` elements here. Each tile must have a\nheadline slot with descriptive text for screen readers." } ], "cssProperties": [ { "name": "--rh-space-2xl", "description": "Gap between tiles\n\n32px spacer", "default": "32px", "syntax": "\u003clength\u003e" } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-tile-group", "declaration": { "name": "RhTileGroup", "module": "rh-tile/rh-tile-group.js" } }, { "kind": "js", "name": "RhTileGroup", "declaration": { "name": "RhTileGroup", "module": "rh-tile/rh-tile-group.js" } } ] }, { "kind": "javascript-module", "path": "rh-tile/rh-tile.js", "declarations": [ { "name": "TileSelectEvent", "description": "Fired when a checkable tile is selected or deselected.\nThe `force` property, when true, indicates the tile must be selected\n(used in radio group mode). When absent, the tile toggles its state.", "superclass": { "name": "Event", "package": "global:" }, "members": [ { "name": "target", "type": { "text": "RhTile" }, "kind": "field" }, { "name": "force", "description": "When true, the tile must be selected rather than toggled", "type": { "text": "boolean" }, "kind": "field" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/rh-tile.ts#L26" }, "kind": "class" }, { "name": "RhTile", "summary": "Clickable, contained surface for content with optional\nimages, icons, and links.", "description": "A tile provides a clickable surface for presenting content with\noptional images, icons, and links. Checkable tiles expose ARIA\n`role=\"checkbox\"` or `role=\"radio\"` to screen readers. Users\nshould set `accessible-label` when tiles lack text content.\nKeyboard users activate checkable tiles with Enter or Space.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "shadowRoot", "type": { "text": "ShadowRoot" }, "kind": "field" }, { "name": "bleed", "description": "Whether image is full-width (i.e. bleeds into the padding)", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "bleed" }, { "name": "desaturated", "description": "Whether headline link text is a desaturated color instead of blue;\n`true` sets headline color to white on dark tiles or black on light tiles", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "desaturated" }, { "name": "compact", "description": "Reduces tile padding for more compact spaces", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "compact" }, { "name": "icon", "description": "The icon to display in the tile", "type": { "text": "IconNameFor\u003cIconSetName\u003e" }, "kind": "field", "attribute": "icon", "reflects": true }, { "name": "iconSet", "description": "Icon set to display in the tile", "type": { "text": "'ui' | 'standard' | 'social' | 'microns'", "references": [ { "name": "IconSetName", "package": "@rhds/icons" } ] }, "default": "'standard'", "kind": "field", "attribute": "icon-set" }, { "name": "accessibleLabel", "description": "When checkable, the accessible (visually hidden) label for the form control\nIf not set, the text content of the tile element will be used instead.\n\n\u003cfigure\u003e\n\u003cfigcaption\u003eSetting an accessible label when there is no text content\u003c/figcaption\u003e\n\n```html\n\u003cform\u003e\n\u003crh-tile-group radio\u003e\n\u003crh-tile name=\"radio\" value=\"1\"\u003eTile 1\u003c/rh-tile\u003e\n\u003crh-tile name=\"radio\" value=\"2\"\u003eTile 2\u003c/rh-tile\u003e\n\u003crh-tile name=\"radio\"\nvalue=\"3\"\naccessible-label=\"Tile 3\"\u003e\n\u003cimg slot=\"image\"\nrole=\"presentation\"\nsrc=\"tile-3.webp\"\u003e\n\u003c/rh-tile\u003e\n\u003c/rh-tile-group\u003e\n\u003c/form\u003e\n```\n\u003c/figure\u003e", "type": { "text": "string" }, "kind": "field", "attribute": "accessible-label" }, { "name": "name", "description": "Form name", "type": { "text": "string" }, "kind": "field", "attribute": "name" }, { "name": "value", "description": "Form value", "type": { "text": "string" }, "kind": "field", "attribute": "value" }, { "name": "checkable", "description": "When true, tile behaves like a checkbox unless it is part of an\n`\u003crh-tile-group radio\u003e`, in which case it behaves like a radio button", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "checkable" }, { "name": "checked", "description": "If tile is checkable, whether it is currently checked", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "checked", "reflects": true }, { "name": "disabled", "description": "Whether tile interaction is disabled", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "disabled", "reflects": true }, { "name": "colorPalette", "description": "Sets color palette, which affects the element's styles as well as descendants' color theme.\nOverrides parent color context.\nYour theme will influence these colors so check there first if you are seeing inconsistencies.\nSee [CSS Custom Properties](#css-custom-properties) for default values\n\nTile always resets its context to `base`, unless explicitly provided with a `color-palette`.", "type": { "text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'", "references": [ { "name": "ColorPalette", "module": "lib/color-palettes.js" } ] }, "kind": "field", "attribute": "color-palette", "reflects": true }, { "name": "link", "description": "When set to \"private\", the icon representing the link changes from an arrow to a padlock", "type": { "text": "'private' | 'public' | 'external'" }, "kind": "field", "attribute": "link" }, { "parameters": [ { "name": "message", "type": { "text": "string" } } ], "name": "setCustomValidity", "kind": "method" }, { "name": "checkValidity", "kind": "method" }, { "name": "reportValidity", "kind": "method" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/rh-tile.ts#L55" }, "kind": "class", "tagName": "rh-tile", "attributes": [ { "name": "bleed", "description": "Whether image is full-width (i.e. bleeds into the padding)", "type": { "text": "boolean" }, "default": "false", "fieldName": "bleed" }, { "name": "desaturated", "description": "Whether headline link text is a desaturated color instead of blue;\n`true` sets headline color to white on dark tiles or black on light tiles", "type": { "text": "boolean" }, "default": "false", "fieldName": "desaturated" }, { "name": "compact", "description": "Reduces tile padding for more compact spaces", "type": { "text": "boolean" }, "default": "false", "fieldName": "compact" }, { "name": "icon", "description": "The icon to display in the tile", "type": { "text": "IconNameFor\u003cIconSetName\u003e" }, "fieldName": "icon" }, { "name": "icon-set", "description": "Icon set to display in the tile", "type": { "text": "'ui' | 'standard' | 'social' | 'microns'", "references": [ { "name": "IconSetName", "package": "@rhds/icons" } ] }, "default": "'standard'", "fieldName": "iconSet" }, { "name": "accessible-label", "description": "When checkable, the accessible (visually hidden) label for the form control\nIf not set, the text content of the tile element will be used instead.\n\n\u003cfigure\u003e\n\u003cfigcaption\u003eSetting an accessible label when there is no text content\u003c/figcaption\u003e\n\n```html\n\u003cform\u003e\n\u003crh-tile-group radio\u003e\n\u003crh-tile name=\"radio\" value=\"1\"\u003eTile 1\u003c/rh-tile\u003e\n\u003crh-tile name=\"radio\" value=\"2\"\u003eTile 2\u003c/rh-tile\u003e\n\u003crh-tile name=\"radio\"\nvalue=\"3\"\naccessible-label=\"Tile 3\"\u003e\n\u003cimg slot=\"image\"\nrole=\"presentation\"\nsrc=\"tile-3.webp\"\u003e\n\u003c/rh-tile\u003e\n\u003c/rh-tile-group\u003e\n\u003c/form\u003e\n```\n\u003c/figure\u003e", "type": { "text": "string" }, "fieldName": "accessibleLabel" }, { "name": "name", "description": "Form name", "type": { "text": "string" }, "fieldName": "name" }, { "name": "value", "description": "Form value", "type": { "text": "string" }, "fieldName": "value" }, { "name": "checkable", "description": "When true, tile behaves like a checkbox unless it is part of an\n`\u003crh-tile-group radio\u003e`, in which case it behaves like a radio button", "type": { "text": "boolean" }, "default": "false", "fieldName": "checkable" }, { "name": "checked", "description": "If tile is checkable, whether it is currently checked", "type": { "text": "boolean" }, "default": "false", "fieldName": "checked" }, { "name": "disabled", "description": "Whether tile interaction is disabled", "type": { "text": "boolean" }, "default": "false", "fieldName": "disabled" }, { "name": "color-palette", "description": "Sets color palette, which affects the element's styles as well as descendants' color theme.\nOverrides parent color context.\nYour theme will influence these colors so check there first if you are seeing inconsistencies.\nSee [CSS Custom Properties](#css-custom-properties) for default values\n\nTile always resets its context to `base`, unless explicitly provided with a `color-palette`.", "type": { "text": "'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'", "references": [ { "name": "ColorPalette", "module": "lib/color-palettes.js" } ] }, "fieldName": "colorPalette" }, { "name": "link", "description": "When set to \"private\", the icon representing the link changes from an arrow to a padlock", "type": { "text": "'private' | 'public' | 'external'" }, "fieldName": "link" } ], "events": [ { "name": "select", "description": "Fired when a checkable tile is\nclicked. The event's `force` property is `true` when the\ntile is in a radio group, indicating it must be selected.", "type": { "text": "TileSelectEvent" } } ], "slots": [ { "name": "image", "description": "Place a block-level img or svg element here.\nImages must include alt text for screen readers, or\nrole=\"presentation\" for decorative images.\nHidden when the tile is checkable." }, { "name": "icon", "description": "Place an inline rh-icon or svg element here.\nIcon should include a title for screen readers." }, { "name": "title", "description": "Inline text providing secondary context above\nthe headline. Hidden when checkable or compact." }, { "name": "headline", "description": "Block heading element. In a link tile, must\ncontain an anchor. In a checkable tile, this\nlabels the ARIA form control for screen readers." }, { "name": "", "description": "Inline or block body text expanding on the\nheadline. Should be concise." }, { "name": "footer", "description": "Inline supplementary text. Should not contain\ninteractive elements as the tile is clickable." } ], "cssProperties": [ { "name": "--rh-font-family-body-text", "description": "Tile font family\n\nBody text font family", "default": "RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-weight-heading-regular", "description": "Tile base font weight\n\nRegular font weight for headings", "default": "400", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-line-height-body-text", "description": "Tile line height\n\nLine height for body text", "default": "1.5", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-tile-interactive-color", "description": "Interactive border and icon color", "default": "var(--rh-color-border-interactive)" }, { "name": "--rh-color-border-interactive" }, { "name": "--rh-tile-focus-interactive-color", "description": "Interactive color on focus and hover", "default": "var(--rh-color-interactive-primary-hover)" }, { "name": "--rh-color-interactive-primary-hover" }, { "name": "--rh-tile-text-color-secondary", "description": "Secondary text and icon color", "default": "var(--rh-color-text-secondary)" }, { "name": "--rh-color-text-secondary" }, { "name": "--rh-tile-focus-background-color", "description": "Focus/hover surface color override in light mode\n\nFocus/hover surface color override in dark mode", "default": "var(--rh-color-surface-darker, #1f1f1f)" }, { "name": "--rh-tile-disabled-background-color", "description": "Disabled surface color override in light mode\n\nDisabled surface color override in dark mode", "default": "var(--rh-color-surface-dark, #383838)" }, { "name": "--rh-tile-border-color", "description": "Tile border color", "default": "var(--rh-color-border-subtle)" }, { "name": "--rh-color-border-subtle" }, { "name": "--rh-tile-link-color", "description": "Tile link color", "default": "var(--_interactive-color)" }, { "name": "--rh-border-radius-default", "description": "Tile border radius\n\n3px border radius; Example: Card", "default": "3px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-border-width-sm", "description": "Tile border width\n\n1px border width; Example: Secondary CTA or Button", "default": "1px", "syntax": "\u003clength\u003e" }, { "name": "--rh-size-icon-05", "description": "Icon size\n\n48px icon box", "default": "48px", "syntax": "\u003clength\u003e" }, { "name": "--rh-size-icon-03", "description": "Compact icon size\n\n32px icon box", "default": "32px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-heading-xs", "description": "Headline font size\n\nh6 heading font size", "default": "1.25rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-weight-body-text-medium", "description": "Headline font weight\n\nMedium font weight", "default": "500", "syntax": "\u003cnumber\u003e" }, { "name": "--rh-tile-text-color", "description": "Tile text color", "default": "var(--rh-color-text-primary)" }, { "name": "--rh-color-text-primary" }, { "name": "--rh-font-size-body-text-lg", "description": "Compact headline font size\n\n18px font size", "default": "1.125rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-sm", "description": "Compact body font size\n\n14px font size", "default": "0.875rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-xs", "description": "Compact footer font size\n\n12px font size", "default": "0.75rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-2xl", "description": "Tile padding\n\nIcon block end margin\n\nBody spacer inline size\n\n32px spacer", "default": "32px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-lg", "description": "Tile content margin\n\nCompact tile padding\n\nBody spacer block size\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-animation-speed", "description": "Arrow animation speed", "default": "0.3s", "syntax": "\u003ctime\u003e" }, { "name": "--rh-animation-timing", "description": "Arrow animation timing", "default": "cubic-bezier(0.465, 0.183, 0.153, 0.946)", "syntax": "\u003ceasing-function\u003e" }, { "name": "--rh-space-xl", "description": "Compact tile padding\n\nArrow icon inline size\n\nArrow icon block size\n\nSVG icon inline size\n\nSVG icon block size\n\n24px spacer", "default": "24px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-body-text-md", "description": "Tile base font size\n\nTitle font size\n\nBody text font size\n\n16px font size", "default": "1rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-border-interactive-on-dark", "description": "Interactive color for dark palettes\n\nInteractive border color (dark theme)", "default": "#92c5f9", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-interactive-primary-hover-on-dark", "description": "Focus interactive color for dark palettes\n\nPrimary interactive - hover (Dark theme)", "default": "#b9dafc", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-text-secondary-on-dark", "description": "Secondary text color for dark palettes\n\nSecondary text color for dark theme", "default": "#c7c7c7", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-border-subtle-on-dark", "description": "Border color for dark palettes\n\nSubtle border color (dark theme)", "default": "#707070", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-text-primary-on-dark", "description": "Text color for dark palettes\n\nPrimary text color for dark 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-darker", "description": "Focus/hover surface color in dark mode\n\nSecondary surface (dark theme)", "default": "#1f1f1f", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-surface-dark", "description": "Disabled surface color in dark mode\n\nDisabled background for dark palettes\n\nTertiary surface (dark theme)", "default": "#383838", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-border-interactive-on-light", "description": "Interactive color for light palettes\n\nInteractive border color (light theme)", "default": "#0066cc", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-interactive-primary-hover-on-light", "description": "Focus interactive color for light palettes\n\nPrimary interactive - hover (Light theme)", "default": "#003366", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-text-secondary-on-light", "description": "Secondary text color for light palettes\n\nSecondary text color for light theme", "default": "#4d4d4d", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-border-subtle-on-light", "description": "Border color for light palettes\n\nSubtle border color (light theme)", "default": "#c7c7c7", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-text-primary-on-light", "description": "Text color for light palettes\n\nPrimary text color for light theme", "default": "#151515", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-surface-lightest", "description": "Primary surface (light theme)", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-surface-lighter", "description": "Focus/hover surface color in light mode\n\nTertiary surface (light theme)", "default": "#f2f2f2", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-surface-light", "description": "Disabled surface color in light mode\n\nDisabled background for light palettes\n\nSecondary surface (light theme)", "default": "#e0e0e0", "syntax": "\u003ccolor\u003e" } ], "demos": [ { "description": "Default link tile with image, title, headline, body text, and footer.", "url": "https://ux.redhat.com/elements/tile/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/index.html" } }, { "description": "Tiles with a custom CSS accent border on top, shown across color contexts.", "url": "https://ux.redhat.com/elements/tile/demo/accented-tiles/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/accented-tiles.html" } }, { "description": "Checkable tiles acting as standalone checkboxes in unchecked, checked, and disabled states.", "url": "https://ux.redhat.com/elements/tile/demo/checkable/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/checkable.html" } }, { "description": "Tiles in all variants across light and dark color contexts.", "url": "https://ux.redhat.com/elements/tile/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/color-context.html" } }, { "description": "Tiles using each available color-palette value from darkest to lightest.", "url": "https://ux.redhat.com/elements/tile/demo/color-palettes/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/color-palettes.html" } }, { "description": "Compact link tile with a full-width bleed image and an icon.", "url": "https://ux.redhat.com/elements/tile/demo/compact-link-with-fullwidth-image-and-icon/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/compact-link-with-fullwidth-image-and-icon.html" } }, { "description": "Compact link tile with a desaturated heading and a slotted icon.", "url": "https://ux.redhat.com/elements/tile/demo/compact-link-with-icon/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/compact-link-with-icon.html" } }, { "description": "Compact link tile with both an image and a slotted icon.", "url": "https://ux.redhat.com/elements/tile/demo/compact-link-with-image-and-icon/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/compact-link-with-image-and-icon.html" } }, { "description": "Compact link tile with a desaturated heading and image slot.", "url": "https://ux.redhat.com/elements/tile/demo/compact-link-with-image/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/compact-link-with-image.html" } }, { "description": "Compact tile variants with reduced padding, including text-only, icon, image, and full-width image configurations.", "url": "https://ux.redhat.com/elements/tile/demo/compact/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/compact.html" } }, { "description": "Tiles with overridden CSS custom properties for border, background, interactive, and link colors.", "url": "https://ux.redhat.com/elements/tile/demo/custom-props/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/custom-props.html" } }, { "description": "Tile with desaturated heading color and a slotted SVG icon.", "url": "https://ux.redhat.com/elements/tile/demo/desaturated-heading-slotted-icon/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/desaturated-heading-slotted-icon.html" } }, { "description": "Tile with desaturated heading color using the icon attribute.", "url": "https://ux.redhat.com/elements/tile/demo/desaturated-heading/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/desaturated-heading.html" } }, { "description": "Disabled tile with muted colors and no pointer interaction.", "url": "https://ux.redhat.com/elements/tile/demo/disabled/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/disabled.html" } }, { "description": "Tile groups used as form controls with radio and checkbox modes, submitting values via FormData.", "url": "https://ux.redhat.com/elements/tile/demo/form-control/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/form-control.html" } }, { "description": "Tiles with full-width (bleed) images that extend to the tile edges.", "url": "https://ux.redhat.com/elements/tile/demo/full-width-images/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/full-width-images.html" } }, { "description": "Tiles with both a full-width bleed image and an icon.", "url": "https://ux.redhat.com/elements/tile/demo/icon-with-full-width-image/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/icon-with-full-width-image.html" } }, { "description": "Tiles with both an image and an icon displayed together.", "url": "https://ux.redhat.com/elements/tile/demo/icon-with-image/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/icon-with-image.html" } }, { "description": "Tiles with icons via slotted rh-icon, the icon attribute, and slotted SVG.", "url": "https://ux.redhat.com/elements/tile/demo/icon/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/icon.html" } }, { "description": "Tiles placed in a flex container, showing layout flexibility.", "url": "https://ux.redhat.com/elements/tile/demo/in-flex-container/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/in-flex-container.html" } }, { "description": "Tiles with private (padlock icon) and external (external-link icon) link types.", "url": "https://ux.redhat.com/elements/tile/demo/link-types/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/link-types.html" } }, { "description": "Disabled tile group where all child tiles are non-interactive.", "url": "https://ux.redhat.com/elements/tile/demo/tile-group-disabled/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/tile-group-disabled.html" } }, { "description": "Disabled radio tile group where all tiles are non-interactive.", "url": "https://ux.redhat.com/elements/tile/demo/tile-group-radio-disabled/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/tile-group-radio-disabled.html" } }, { "description": "Tile group with radio-style single-selection, one tile pre-checked.", "url": "https://ux.redhat.com/elements/tile/demo/tile-group-radio/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/tile-group-radio.html" } }, { "description": "Tile group with checkbox-style multi-selection, one tile pre-checked.", "url": "https://ux.redhat.com/elements/tile/demo/tile-group/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/tile-group.html" } }, { "description": "Tiles without footer content, including headline-only variants.", "url": "https://ux.redhat.com/elements/tile/demo/without-footer-content/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/without-footer-content.html" } } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "TileSelectEvent", "declaration": { "name": "TileSelectEvent", "module": "rh-tile/rh-tile.js" } }, { "kind": "custom-element-definition", "name": "rh-tile", "declaration": { "name": "RhTile", "module": "rh-tile/rh-tile.js" } }, { "kind": "js", "name": "RhTile", "declaration": { "name": "RhTile", "module": "rh-tile/rh-tile.js" } } ] }, { "kind": "javascript-module", "path": "rh-timestamp/rh-timestamp.js", "declarations": [ { "name": "RhTimestamp", "summary": "Displays a formatted date and time value using locale-aware formatting", "description": "Provides locale-aware date and time formatting for consistent display\nacross pages. Renders a `\u003ctime\u003e` element with an ARIA-accessible\n`datetime` attribute for screen readers. Authors must set `date`\nwhen displaying a specific moment; when omitted, the current time\nis used. Authors should wrap relative timestamps in `rh-tooltip`\nso users can see the full date. Avoid combining `date-format` and\n`time-format` with `customFormat` as `customFormat` overrides both.\nThe element is not keyboard-focusable on its own.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "dateFormat", "description": "Sets the date formatting style. When set without `time-format`, only the\ndate portion is displayed. Accepts `full`, `long`, `medium`, or `short`.\nSee [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#datestyle) for details on each style.", "type": { "text": "'full' | 'long' | 'medium' | 'short'", "references": [ { "name": "DateTimeFormat", "package": "@patternfly/pfe-core" } ] }, "kind": "field", "attribute": "date-format", "reflects": true }, { "name": "timeFormat", "description": "Sets the time formatting style. When set without `date-format`, only the\ntime portion is displayed. Accepts `full`, `long`, `medium`, or `short`.\nSee [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#timestyle) for details on each style.", "type": { "text": "'full' | 'long' | 'medium' | 'short'", "references": [ { "name": "DateTimeFormat", "package": "@patternfly/pfe-core" } ] }, "kind": "field", "attribute": "time-format", "reflects": true }, { "name": "customFormat", "description": "Provides fine-grained control over date and time formatting using\n`Intl.DateTimeFormatOptions`. This property must be set via JavaScript\n(it is not reflected as an attribute). When set, it overrides `date-format`,\n`time-format`, and `hour-12`. See [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) for available options.", "type": { "text": "object" }, "kind": "field" }, { "name": "displaySuffix", "description": "Appends custom text after the formatted timestamp string. Useful for\ndisplaying a timezone label (e.g. \"US Eastern\") when the built-in\ntime format does not include one.", "type": { "text": "string" }, "kind": "field", "attribute": "display-suffix", "reflects": true }, { "name": "locale", "description": "Overrides the browser's default locale for formatting.\nAccepts any valid BCP 47 language tag (e.g. \"en-GB\", \"es\", \"ja\").\nDefaults to the browser's locale when not set.", "type": { "text": "string" }, "kind": "field", "attribute": "locale", "reflects": true }, { "name": "relative", "description": "When set, displays the timestamp as a relative time string\n(e.g. \"3 hours ago\", \"in 2 days\") instead of an absolute date.\nUses `Intl.RelativeTimeFormat` for locale-aware output.", "type": { "text": "boolean" }, "kind": "field", "attribute": "relative", "reflects": true }, { "name": "utc", "description": "When set, converts the displayed time to UTC. If no `display-suffix`\nis provided, \"UTC\" is automatically appended.", "type": { "text": "boolean" }, "kind": "field", "attribute": "utc", "reflects": true }, { "name": "hour12", "description": "When set, uses 12-hour time format (e.g. \"2:30 PM\") instead of\n24-hour time (e.g. \"14:30\"). Accepts the attribute values \"true\"\nor \"false\", or can be set as a boolean property.", "type": { "text": "boolean" }, "kind": "field", "attribute": "hour-12", "reflects": true }, { "name": "date", "description": "The date value to display, as a date string parseable by `new Date()`.\nIf not set, defaults to the current date and time. When read, returns\nthe locale-formatted string representation of the date.", "kind": "field", "attribute": "date", "reflects": true }, { "name": "isoString", "description": "The ISO 8601 string representation of the current date value.", "readonly": true, "kind": "field" }, { "name": "time", "description": "The formatted time string currently displayed by the element.", "readonly": true, "kind": "field" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-timestamp/rh-timestamp.ts#L35" }, "kind": "class", "tagName": "rh-timestamp", "attributes": [ { "name": "date-format", "description": "Sets the date formatting style. When set without `time-format`, only the\ndate portion is displayed. Accepts `full`, `long`, `medium`, or `short`.\nSee [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#datestyle) for details on each style.", "type": { "text": "'full' | 'long' | 'medium' | 'short'", "references": [ { "name": "DateTimeFormat", "package": "@patternfly/pfe-core" } ] }, "fieldName": "dateFormat" }, { "name": "time-format", "description": "Sets the time formatting style. When set without `date-format`, only the\ntime portion is displayed. Accepts `full`, `long`, `medium`, or `short`.\nSee [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#timestyle) for details on each style.", "type": { "text": "'full' | 'long' | 'medium' | 'short'", "references": [ { "name": "DateTimeFormat", "package": "@patternfly/pfe-core" } ] }, "fieldName": "timeFormat" }, { "name": "display-suffix", "description": "Appends custom text after the formatted timestamp string. Useful for\ndisplaying a timezone label (e.g. \"US Eastern\") when the built-in\ntime format does not include one.", "type": { "text": "string" }, "fieldName": "displaySuffix" }, { "name": "locale", "description": "Overrides the browser's default locale for formatting.\nAccepts any valid BCP 47 language tag (e.g. \"en-GB\", \"es\", \"ja\").\nDefaults to the browser's locale when not set.", "type": { "text": "string" }, "fieldName": "locale" }, { "name": "relative", "description": "When set, displays the timestamp as a relative time string\n(e.g. \"3 hours ago\", \"in 2 days\") instead of an absolute date.\nUses `Intl.RelativeTimeFormat` for locale-aware output.", "type": { "text": "boolean" }, "fieldName": "relative" }, { "name": "utc", "description": "When set, converts the displayed time to UTC. If no `display-suffix`\nis provided, \"UTC\" is automatically appended.", "type": { "text": "boolean" }, "fieldName": "utc" }, { "name": "hour-12", "description": "When set, uses 12-hour time format (e.g. \"2:30 PM\") instead of\n24-hour time (e.g. \"14:30\"). Accepts the attribute values \"true\"\nor \"false\", or can be set as a boolean property.", "type": { "text": "boolean" }, "fieldName": "hour12" }, { "name": "date", "description": "The date value to display, as a date string parseable by `new Date()`.\nIf not set, defaults to the current date and time. When read, returns\nthe locale-formatted string representation of the date.", "fieldName": "date" } ], "demos": [ { "description": "Default timestamp displaying a specific date using the browser's locale formatting.", "url": "https://ux.redhat.com/elements/timestamp/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-timestamp/demo/index.html" } }, { "description": "Timestamp with a custom Intl.DateTimeFormat configuration set via JavaScript.", "url": "https://ux.redhat.com/elements/timestamp/demo/custom-format/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-timestamp/demo/custom-format.html" } }, { "description": "Timestamp with fallback text content displayed before the element upgrades.", "url": "https://ux.redhat.com/elements/timestamp/demo/fallback/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-timestamp/demo/fallback.html" } }, { "description": "Timestamps using various date-format and time-format combinations, locales, and display suffixes.", "url": "https://ux.redhat.com/elements/timestamp/demo/formats/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-timestamp/demo/formats.html" } }, { "description": "Timestamps displaying relative time strings like '3 years ago' in both English and Spanish locales.", "url": "https://ux.redhat.com/elements/timestamp/demo/relative/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-timestamp/demo/relative.html" } }, { "description": "Timestamps composed with rh-tooltip to show additional date context on hover, including UTC and relative time variants.", "url": "https://ux.redhat.com/elements/timestamp/demo/tooltip/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-timestamp/demo/tooltip.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-timestamp", "declaration": { "name": "RhTimestamp", "module": "rh-timestamp/rh-timestamp.js" } }, { "kind": "js", "name": "RhTimestamp", "declaration": { "name": "RhTimestamp", "module": "rh-timestamp/rh-timestamp.js" } } ] }, { "kind": "javascript-module", "path": "rh-tooltip/rh-tooltip.js", "declarations": [ { "name": "RhTooltip", "summary": "Reveals a small area of information on hover", "description": "A tooltip provides contextual information on hover, focus, or tap.\nContent should be brief. Authors must ensure the invoking element\nis focusable for keyboard and screen reader users. Pressing Escape\ndismisses the tooltip. When `silent` is set, authors must provide\nan alternative accessible label.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "version", "type": { "text": "string" }, "default": "'{{version}}'", "readonly": true, "kind": "field", "static": true }, { "name": "instances", "default": "new Set\u003cRhTooltip\u003e()", "kind": "field", "static": true, "privacy": "private" }, { "name": "announcer", "type": { "text": "HTMLElement" }, "kind": "field", "static": true, "privacy": "private" }, { "parameters": [ { "name": "message", "type": { "text": "string" } } ], "name": "announce", "kind": "method", "static": true, "privacy": "private" }, { "name": "initAnnouncer", "kind": "method", "static": true, "privacy": "private" }, { "name": "position", "description": "The position of the tooltip, relative to the invoking content", "type": { "text": "Side | AlignedPlacement", "references": [ { "name": "Placement", "package": "@patternfly/pfe-core" } ] }, "default": "'top'", "kind": "field", "attribute": "position" }, { "name": "content", "description": "Tooltip content. Overridden by the content slot", "type": { "text": "string" }, "kind": "field", "attribute": "content" }, { "name": "silent", "description": "When true, disables screen reader announcements for tooltip content. Only use when another accessible label is provided.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "silent", "reflects": true }, { "name": "show", "description": "Show the tooltip", "kind": "method" }, { "name": "hide", "description": "Hide the tooltip", "kind": "method" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tooltip/rh-tooltip.ts#L59" }, "kind": "class", "tagName": "rh-tooltip", "attributes": [ { "name": "position", "description": "The position of the tooltip, relative to the invoking content", "type": { "text": "Side | AlignedPlacement", "references": [ { "name": "Placement", "package": "@patternfly/pfe-core" } ] }, "default": "'top'", "fieldName": "position" }, { "name": "content", "description": "Tooltip content. Overridden by the content slot", "type": { "text": "string" }, "fieldName": "content" }, { "name": "silent", "description": "When true, disables screen reader announcements for tooltip content. Only use when another accessible label is provided.", "type": { "text": "boolean" }, "default": "false", "fieldName": "silent" } ], "slots": [ { "name": "", "summary": "Invoking element", "description": "Place the invoking element here, i.e. the element which\nwhen hovered or focused causes the tooltip to display.\nMust be inline, focusable content so that keyboard and\nscreen reader users can activate the tooltip." }, { "name": "content", "summary": "Tooltip content", "description": "Place tooltip content here. Overrides the `content`\nattribute. Content is announced to screen readers via\na live region unless the `silent` attribute is set." } ], "cssProperties": [ { "name": "--rh-tooltip-arrow-size", "description": "Arrow indicator size", "default": "var(--rh-tooltip__arrow--Width, 11px)" }, { "name": "--rh-tooltip__arrow--Width", "default": "11px", "deprecated": "use --rh-tooltip-arrow-size" }, { "name": "--rh-line-height-body-text", "description": "Tooltip content line height\n\nLine height for body text", "default": "1.5", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-box-shadow-sm", "description": "Tooltip panel shadow\n\nSmall box shadow", "default": "0 2px 4px 0 rgba(21, 21, 21, 0.2)", "syntax": "\u003cshadow\u003e" }, { "name": "--rh-tooltip-max-width", "description": "Maximum inline size of the tooltip panel", "default": "var(--rh-tooltip--MaxWidth, 18.75rem)" }, { "name": "--rh-tooltip--MaxWidth", "default": "18.75rem", "deprecated": "use --rh-tooltip-max-width" }, { "name": "--rh-border-radius-default", "description": "Tooltip panel border radius\n\n3px border radius; Example: Card", "default": "3px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-tooltip-content-padding-block-start", "description": "Block-start padding for tooltip content", "default": "var(--rh-tooltip__content--PaddingTop, var(--rh-space-lg, 16px))" }, { "name": "--rh-tooltip__content--PaddingTop", "default": "var(--rh-space-lg, 16px)", "deprecated": "use --rh-tooltip-content-padding-block-start" }, { "name": "--rh-tooltip-content-padding-block-end", "description": "Block-end padding for tooltip content", "default": "var(--rh-tooltip__content--PaddingBottom, var(--rh-space-lg, 16px))" }, { "name": "--rh-tooltip__content--PaddingBottom", "default": "var(--rh-space-lg, 16px)", "deprecated": "use --rh-tooltip-content-padding-block-end" }, { "name": "--rh-tooltip-content-padding-inline-start", "description": "Inline-start padding for tooltip content", "default": "var(--rh-tooltip__content--PaddingLeft, var(--rh-space-lg, 16px))" }, { "name": "--rh-tooltip__content--PaddingLeft", "default": "var(--rh-space-lg, 16px)", "deprecated": "use --rh-tooltip-content-padding-inline-start" }, { "name": "--rh-tooltip-content-padding-inline-end", "description": "Inline-end padding for tooltip content", "default": "var(--rh-tooltip__content--PaddingRight, var(--rh-space-lg, 16px))" }, { "name": "--rh-tooltip__content--PaddingRight", "default": "var(--rh-space-lg, 16px)", "deprecated": "use --rh-tooltip-content-padding-inline-end" }, { "name": "--rh-space-lg", "description": "16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-tooltip-content-font-size", "description": "Tooltip content font size", "default": "var(--rh-tooltip__content--FontSize, var(--rh-font-size-body-text-sm, 0.875rem))" }, { "name": "--rh-tooltip__content--FontSize", "default": "var(--rh-font-size-body-text-sm, 0.875rem)", "deprecated": "use --rh-tooltip-content-font-size" }, { "name": "--rh-font-size-body-text-sm", "description": "14px font size", "default": "0.875rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-tooltip__content--Color", "default": "var(--rh-color-text-primary-on-light, #151515)", "deprecated": "use --rh-tooltip-content-color" }, { "name": "--rh-color-text-primary-on-light", "description": "Primary text color for light theme", "default": "#151515", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-tooltip-content-color", "description": "Tooltip text color in light mode\n\nTooltip text color in dark mode", "default": "var(--rh-color-text-primary-on-dark, #ffffff)" }, { "name": "--rh-color-text-primary-on-dark", "description": "Primary text color for dark theme", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-color-surface-lightest", "description": "Primary surface (light theme)", "default": "#ffffff", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-tooltip-content-background-color", "description": "Tooltip surface in light mode\n\nTooltip surface in dark mode\n\nArrow surface in light mode\n\nArrow surface in dark mode", "default": "var(--rh-tooltip__content--BackgroundColor, var(--rh-color-surface-darkest, #151515))" }, { "name": "--rh-tooltip__content--BackgroundColor", "default": "var(--rh-color-surface-darkest, #151515)", "deprecated": "use --rh-tooltip-content-background-color" }, { "name": "--rh-color-surface-darkest", "description": "Primary surface (dark theme)", "default": "#151515", "syntax": "\u003ccolor\u003e" } ], "demos": [ { "description": "Default tooltip wrapping a button with content in the content slot.", "url": "https://ux.redhat.com/elements/tooltip/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tooltip/demo/index.html" } }, { "description": "Tooltip positioned below the invoking element using position=bottom.", "url": "https://ux.redhat.com/elements/tooltip/demo/bottom/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tooltip/demo/bottom.html" } }, { "description": "Tooltip adapting to different color contexts using rh-context-demo.", "url": "https://ux.redhat.com/elements/tooltip/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tooltip/demo/color-context.html" } }, { "description": "Tooltip using the content attribute instead of the content slot.", "url": "https://ux.redhat.com/elements/tooltip/demo/content-attributes/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tooltip/demo/content-attributes.html" } }, { "description": "Multiple tooltips in a dense layout, each using the content attribute.", "url": "https://ux.redhat.com/elements/tooltip/demo/dense-ui/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tooltip/demo/dense-ui.html" } }, { "description": "Tooltip positioned to the left of the invoking element using position=left.", "url": "https://ux.redhat.com/elements/tooltip/demo/left/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tooltip/demo/left.html" } }, { "description": "Tooltip positioned to the right of the invoking element using position=right.", "url": "https://ux.redhat.com/elements/tooltip/demo/right/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tooltip/demo/right.html" } }, { "description": "Tooltip with right-to-left text direction using Hebrew content.", "url": "https://ux.redhat.com/elements/tooltip/demo/rtl/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tooltip/demo/rtl.html" } }, { "description": "Silent tooltip that suppresses screen reader announcements, relying on an accessible label instead.", "url": "https://ux.redhat.com/elements/tooltip/demo/silent/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tooltip/demo/silent.html" } }, { "description": "Tooltip positioned above the invoking element using position=top.", "url": "https://ux.redhat.com/elements/tooltip/demo/top/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tooltip/demo/top.html" } } ], "customElement": true } ], "exports": [ { "kind": "custom-element-definition", "name": "rh-tooltip", "declaration": { "name": "RhTooltip", "module": "rh-tooltip/rh-tooltip.js" } }, { "kind": "js", "name": "RhTooltip", "declaration": { "name": "RhTooltip", "module": "rh-tooltip/rh-tooltip.js" } } ] }, { "kind": "javascript-module", "path": "rh-video-embed/rh-video-embed.js", "declarations": [ { "name": "ConsentClickEvent", "description": "Fired when the user clicks the \"Update preferences\" consent button.\nConsumers should listen for this event to open a cookie consent dialog.\nThis event has no `detail` payload; the event `target` is the\n`RhVideoEmbed` element that requires consent.", "superclass": { "name": "Event", "package": "global:" }, "members": [ { "name": "target", "type": { "text": "RhVideoEmbed" }, "kind": "field" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-video-embed/rh-video-embed.ts#L21" }, "kind": "class" }, { "name": "VideoClickEvent", "description": "Fired when the user clicks the play button to request video playback.\nConsumers should listen for this event to track user intent.\nThis event has no `detail` payload; the event `target` is the\n`RhVideoEmbed` element that was clicked.", "superclass": { "name": "Event", "package": "global:" }, "members": [ { "name": "target", "type": { "text": "RhVideoEmbed" }, "kind": "field" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-video-embed/rh-video-embed.ts#L34" }, "kind": "class" }, { "name": "VideoPlayEvent", "description": "Fired when the embedded iframe is appended to the DOM and the video\nis about to begin playback. This event has no `detail` payload;\nthe event `target` is the `RhVideoEmbed` element.", "superclass": { "name": "Event", "package": "global:" }, "members": [ { "name": "target", "type": { "text": "RhVideoEmbed" }, "kind": "field" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-video-embed/rh-video-embed.ts#L46" }, "kind": "class" }, { "name": "RhVideoEmbed", "summary": "Embeds a YouTube video with a thumbnail preview and play button", "description": "A video embed provides an accessible preview of a YouTube video\nwith a thumbnail and play button. Users must provide an iframe\ninside a `\u003ctemplate\u003e` with a `title` for screen reader users.\nShould include a thumbnail with `alt` text. Supports Tab and\nEnter keyboard focus. Uses `aria-hidden` on the thumbnail when\nactive. Avoid videos without captions.", "superclass": { "name": "LitElement", "package": "lit" }, "members": [ { "name": "requireConsent", "description": "Add to `rh-video-embed` when a video requires consent for cookies", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "require-consent" }, { "name": "consented", "description": "Boolean flag to flip with JavaScript when cookie consent has been granted or revoked.\nSee the Require Consent demo for reference.", "type": { "text": "boolean" }, "default": "false", "kind": "field", "attribute": "consented" }, { "name": "consentButton", "readonly": true, "kind": "field" }, { "name": "consentClicked", "readonly": true, "kind": "field" }, { "name": "focusableElement", "readonly": true, "kind": "field" }, { "name": "iframeElement", "readonly": true, "kind": "field" }, { "name": "playButton", "readonly": true, "kind": "field" }, { "name": "playClicked", "readonly": true, "kind": "field" }, { "name": "playStarted", "readonly": true, "kind": "field" }, { "name": "firstUpdated", "kind": "method" } ], "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-video-embed/rh-video-embed.ts#L81" }, "kind": "class", "tagName": "rh-video-embed", "attributes": [ { "name": "require-consent", "description": "Add to `rh-video-embed` when a video requires consent for cookies", "type": { "text": "boolean" }, "default": "false", "fieldName": "requireConsent" }, { "name": "consented", "description": "Boolean flag to flip with JavaScript when cookie consent has been granted or revoked.\nSee the Require Consent demo for reference.", "type": { "text": "boolean" }, "default": "false", "fieldName": "consented" } ], "events": [ { "name": "consent-click", "description": "Fires when the user clicks\nthe \"Update preferences\" consent button. Has no `detail` payload.", "type": { "text": "ConsentClickEvent" } }, { "name": "request-play", "description": "Fires when the user clicks the\nplay button to request video playback. Has no `detail` payload.", "type": { "text": "VideoClickEvent" } }, { "name": "play", "description": "Fires when the embedded iframe is\nappended and the video is about to begin playback. Has no `detail`\npayload.", "type": { "text": "VideoPlayEvent" } } ], "slots": [ { "name": "thumbnail", "summary": "Optional thumbnail image overlay", "description": "Accepts an `\u003cimg\u003e` element displayed on top of the\nvideo embed. Authors must include descriptive `alt`\ntext for screen reader and ARIA users, e.g. \"Video\ntitle (video thumbnail)\". The thumbnail is hidden\nvia `aria-hidden` when the video is playing." }, { "name": "", "summary": "Video iframe template", "description": "Accepts a `\u003ctemplate\u003e` element containing an\n`\u003ciframe\u003e` for the YouTube embed. The iframe must\ninclude a `title` attribute with the video title\nfor screen reader and ARIA accessibility. The\nembedded video should have accurate captions per\nWCAG 1.2.2." }, { "name": "autoplay", "summary": "Internal autoplay iframe slot", "description": "Reserved for internal use by `rh-video-embed`.\nAuthors must not place content in this slot." }, { "name": "consent-message", "summary": "Custom consent message", "description": "Accepts block content (e.g. `\u003cp\u003e`) explaining\nthat cookie opt-in is required. should be\nreadable by screen readers. Defaults to a\nbuilt-in message when not provided." }, { "name": "consent-button-text", "summary": "Consent button label", "description": "Accepts inline text for the consent CTA button.\nDefaults to \"Update preferences\"." }, { "name": "play-button-text", "summary": "Accessible play button label", "description": "Accepts inline text for the play button screen\nreader and ARIA label. should follow the pattern\n\"Video title (video)\" for accessibility. Defaults\nto the iframe title followed by \"(play video)\"." }, { "name": "caption", "summary": "Optional video caption", "description": "Accepts inline or block content displayed below the\nvideo embed, such as a `\u003cp\u003e` with a link. Links\nshould have accessible text for screen reader users.\nStyled with secondary text color and small font." } ], "cssParts": [ { "name": "figure", "description": "The outer container for rh-video-embed" }, { "name": "video", "description": "The container for the video, thumbnail, and play button" }, { "name": "consent-body", "description": "The container for the consent message and consent button" }, { "name": "play", "description": "The play button on top of the thumbnail" }, { "name": "caption", "description": "The `\u003cfigcaption\u003e` element for caption content" } ], "cssProperties": [ { "name": "--rh-color-border-interactive" }, { "name": "--rh-opacity-20", "description": "20% opacity", "default": "20%", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-opacity-80", "description": "80% opacity", "default": "80%", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-opacity-50", "description": "50% opacity", "default": "50%", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-color-text-secondary", "description": "Caption text color" }, { "name": "--rh-font-size-body-text-sm", "description": "Caption font size\n\n14px font size", "default": "0.875rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-line-height-body-text", "description": "Caption line height\n\nLine height for body text", "default": "1.5", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-font-family-heading", "description": "Consent message font family\n\nHeading font family", "default": "RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif", "syntax": "\u003ccustom-ident\u003e+" }, { "name": "--rh-font-size-heading-xs", "description": "Consent message font size\n\nh6 heading font size", "default": "1.25rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-line-height-heading", "description": "Consent message line height\n\nLine height for headings", "default": "1.3", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-space-lg", "description": "Spacing above caption\n\nSpace below consent message\n\n16px spacer", "default": "16px", "syntax": "\u003clength\u003e" }, { "name": "--rh-space-xl", "description": "Wider consent spacing\n\nConsent body padding\n\n24px spacer", "default": "24px", "syntax": "\u003clength\u003e" }, { "name": "--rh-font-size-heading-sm", "description": "Larger consent font size\n\nh5 heading font size", "default": "1.5rem", "syntax": "\u003clength\u003e" }, { "name": "--rh-border-radius-default", "description": "Focus border radius\n\n3px border radius; Example: Card", "default": "3px", "syntax": "\u003ccustom-ident\u003e" }, { "name": "--rh-border-width-lg", "description": "Focus outline width\n\n3px border width: Example: Expanded Accordion panel", "default": "3px", "syntax": "\u003clength\u003e" }, { "name": "--rh-border-width-md", "description": "Focus outline offset\n\n2px border width: Example: Alert", "default": "2px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-surface-darkest", "description": "Primary surface (dark theme)", "default": "#151515", "syntax": "\u003ccolor\u003e" }, { "name": "--rh-length-2xl", "description": "32px length token", "default": "32px", "syntax": "\u003clength\u003e" }, { "name": "--rh-length-4xl", "description": "Play button width\n\n64px length token", "default": "64px", "syntax": "\u003clength\u003e" }, { "name": "--rh-color-surface", "description": "Play icon color" } ], "demos": [ { "description": "Default video embed with a thumbnail image, play button, and caption link.", "url": "https://ux.redhat.com/elements/video-embed/demo/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-video-embed/demo/index.html" } }, { "description": "Video embed with centered and right-aligned caption text.", "url": "https://ux.redhat.com/elements/video-embed/demo/alignment/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-video-embed/demo/alignment.html" } }, { "description": "Video embed placed in an rh-card header slot.", "url": "https://ux.redhat.com/elements/video-embed/demo/card-with-video/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-video-embed/demo/card-with-video.html" } }, { "description": "Video embed adapting to light and dark color contexts.", "url": "https://ux.redhat.com/elements/video-embed/demo/color-context/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-video-embed/demo/color-context.html" } }, { "description": "Video embed without a caption slot, showing only thumbnail and play button.", "url": "https://ux.redhat.com/elements/video-embed/demo/no-caption/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-video-embed/demo/no-caption.html" } }, { "description": "Video embed requiring cookie consent before playback is allowed.", "url": "https://ux.redhat.com/elements/video-embed/demo/require-consent/", "source": { "href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-video-embed/demo/require-consent.html" } } ], "customElement": true } ], "exports": [ { "kind": "js", "name": "ConsentClickEvent", "declaration": { "name": "ConsentClickEvent", "module": "rh-video-embed/rh-video-embed.js" } }, { "kind": "js", "name": "VideoClickEvent", "declaration": { "name": "VideoClickEvent", "module": "rh-video-embed/rh-video-embed.js" } }, { "kind": "js", "name": "VideoPlayEvent", "declaration": { "name": "VideoPlayEvent", "module": "rh-video-embed/rh-video-embed.js" } }, { "kind": "custom-element-definition", "name": "rh-video-embed", "declaration": { "name": "RhVideoEmbed", "module": "rh-video-embed/rh-video-embed.js" } }, { "kind": "js", "name": "RhVideoEmbed", "declaration": { "name": "RhVideoEmbed", "module": "rh-video-embed/rh-video-embed.js" } } ] } ] }