@rhds/elements
Version:
Red Hat Design System Elements
49 lines • 2.13 kB
JavaScript
var _RhTabPanel_internals;
import { __classPrivateFieldGet, __decorate } from "tslib";
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators/custom-element.js';
import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
import { themable } from '@rhds/elements/lib/themable.js';
import { css } from "lit";
const styles = css `:host{display:block;padding:var(--_panel-padding,var(--rh-space-2xl,32px))}:host([hidden]){display:none!important}:host(:is(:focus,:focus-within)){outline:1px auto var(--rh-color-interactive-primary-default)}#container{display:contents}`;
/**
* The tab panel for use within a rh-tabs element, must be paired with a rh-tab.
*/
let RhTabPanel = class RhTabPanel extends LitElement {
constructor() {
super(...arguments);
_RhTabPanel_internals.set(this, this.attachInternals());
}
connectedCallback() {
super.connectedCallback();
this.id || (this.id = getRandomId('rh-tab-panel'));
this.hidden ?? (this.hidden = true);
__classPrivateFieldGet(this, _RhTabPanel_internals, "f").role = 'tabpanel';
/*
To make it easy for screen reader users to navigate from a tab
to the beginning of content in the active tabpanel, the tabpanel
element has tabindex="0" to include the panel in the page Tab sequence.
It is recommended that all tabpanel elements in a tab set are focusable
if there are any panels in the set that contain content where the first
element in the panel is not focusable.
https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-automatic
*/
this.tabIndex = 0;
}
render() {
return html `
<div id="container">
<!-- Panel content should follow guidelines for [tab panel content layout](../guidelines) -->
<slot></slot>
</div>
`;
}
};
_RhTabPanel_internals = new WeakMap();
RhTabPanel.styles = [styles];
RhTabPanel = __decorate([
customElement('rh-tab-panel'),
themable
], RhTabPanel);
export { RhTabPanel };
//# sourceMappingURL=rh-tab-panel.js.map