diff --git a/elements/rh-tabs/rh-tabs.css b/elements/rh-tabs/rh-tabs.css index 3e706170b0..e4fc30459d 100644 --- a/elements/rh-tabs/rh-tabs.css +++ b/elements/rh-tabs/rh-tabs.css @@ -186,6 +186,10 @@ button:disabled { color: var(--_overflow-button-disabled-text-color); } +.rtl :is(#previousTab, #nextTab) pf-icon { + rotate: 180deg; +} + @media screen and (min-width: 768px) { /* VERTICAL TABS */ :host([vertical]) [part="container"] { diff --git a/elements/rh-tabs/rh-tabs.ts b/elements/rh-tabs/rh-tabs.ts index a9511c00aa..0c6eff2c0e 100644 --- a/elements/rh-tabs/rh-tabs.ts +++ b/elements/rh-tabs/rh-tabs.ts @@ -17,6 +17,8 @@ import { getRandomId } from '@patternfly/pfe-core/functions/random.js'; import { RhTab, TabExpandEvent } from './rh-tab.js'; import { RhTabPanel } from './rh-tab-panel.js'; +import { DirController } from '../../lib/DirController.js'; + import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js'; import { colorContextProvider, type ColorPalette } from '../../lib/context/color/provider.js'; @@ -147,6 +149,8 @@ export class RhTabs extends LitElement { getItems: () => this.tabs ?? [], }); + #dir = new DirController(this); + get tabs() { return this.#tabs.tabs; } @@ -192,14 +196,15 @@ export class RhTabs extends LitElement { override render() { const { on = '' } = this; + const rtl = this.#dir.dir === 'rtl'; return html` -