dir="rtl"

Right-to-left 21.5.0

Set dir="rtl" on <html> — or on any wrapper — and every component mirrors. There is nothing to configure per component, no separate stylesheet to import and no RTL build of the package.

Use it

<!-- the whole app -->
<html dir="rtl" data-theme="dark">

<!-- …or one region of it -->
<section dir="rtl">
  <gog-inputfield label="بحث" iconStart="search" />
</section>

That is the whole API. The demo below puts dir on a region rather than on the document so you can flip it and compare — watch the field label and its icon change ends, the checkbox move to the other side of its text, and the slider and progress bar fill from the opposite edge. Open the select: its panel renders into <body> and still mirrors with the region, not with the page around it.

Branch

Notify the reviewers

0100

Passing

<div class="rtl-controls">
  <gog-button-toggle-group
    [options]="directions"
    [(value)]="dir"
    ariaLabel="Text direction"
    size="sm"
  />
</div>

<!--
  `dir` on a wrapper rather than on <html>: the point is that a scoped region mirrors on its own,
  including panels that render into <body> — the select below copies this dir onto its portaled
  host, which is why its own list mirrors with the region rather than with the page.
-->
<section class="rtl-region" [attr.dir]="dir()">
  <gog-inputfield label="Search" iconStart="search" placeholder="Type here" [(value)]="query" />

  <gog-select
    [options]="branches"
    [(value)]="branch"
    label="Branch"
    [appendToBody]="true"
    placeholder="Pick one"
  />

  <gog-checkbox label="Notify the reviewers" [(checked)]="notify" />

  <gog-slider [(value)]="progress" [min]="0" [max]="100" ariaLabel="Completion" />

  <gog-progressbar [value]="progress()" />

  <div class="rtl-row">
    <gog-tag iconName="check" variant="success">Passing</gog-tag>
    <gog-button variant="outline" size="sm" gogTooltip="Runs the whole suite">Re-run</gog-button>
  </div>
</section>

What mirrors

Mostly this is CSS logical properties doing the work, which is why it costs nothing at runtime and nothing in bundle size. A few places needed real decisions:

Where	What happens
Every stylesheet	Physical left/right declarations became logical properties across 16 stylesheets — padding, margin, border, inset, text-align and float all follow the writing direction.
Portaled panels	The select/multiselect panel and the tooltip bubble copy a scoped dir onto their portaled host, so an RTL region inside an LTR page renders its overlays correctly rather than taking the document's direction.
Tooltip	position="auto" prefers the mirrored horizontal side.
Calendar	The month and year arrows turn around.
Slider, toast progress, indeterminate progressbar	All three run from the inline start rather than from the left.

What stays physical

Two APIs name a side in words, and those words keep meaning that side. Mirroring them would make a call site say one thing and do another.

API	Values	Why it is not mirrored
`gogTooltipPosition`	`'left' \| 'right'`	They are physical words in the API. Naming a side means that side; use 'auto' when you want the direction-aware choice.
`ToastConfig.position`	`'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`	A toast corner is a deliberate placement decision, so it is not mirrored for you.

In your own styles

Write logical properties (margin-inline-start, inset-inline-end, text-align: start) and your own CSS mirrors along with the library's. For the handful of properties that have no logical form — transform-origin and translate — the library declares three custom properties that flip on [dir='rtl'], and they are yours to use:

Property	LTR	RTL	What it is for
`--gog-inline-start-side`	`left`	`right`	The left/right keyword for the inline start edge — for transform-origin and anything else that only takes physical keywords.
`--gog-inline-end-side`	`right`	`left`	The same for the inline end edge.
`--gog-direction-sign`	`1`	`-1`	Multiplier for a translate that has to run along the inline axis. Multiply your offset by it and the movement follows the direction.

/* A nudge that has to follow the writing direction. In LTR the sign is 1 and this moves
   right; in RTL it is -1 and the same rule moves left — one declaration, both directions. */
.my-badge {
  translate: calc(6px * var(--gog-direction-sign)) 0;
  transform-origin: var(--gog-inline-start-side) center;
}

They are ordinary custom properties on the same cascade as everything else on the Theming page — a nested dir re-declares them for its own subtree, the way a nested data-theme re-declares a palette.