ngx-kit 6.0.1 → 6.1.0

package/drawer-menu/README.md

@@ -1,14 +1,14 @@
 # ngx-kit/drawer-menu
 
-درور منو (side drawer) با ۷ جلوه‌ی بازوبسته‌شدنِ متفاوت (از ساده تا سه‌بعدی/ژله‌ای)، ۳ رفتار برای محتوای صفحه (overlay/push/reveal)، و پیش‌فرضِ باز/بسته‌بودنِ واکنش‌گرا نسبت به اندازه‌ی صفحه.
+A side drawer menu with 7 different opening/closing effects (from simple to 3D/jelly), 3 behaviors for the page content (overlay/push/reveal), and a responsive default open/closed state based on screen size.
 
-## نصب
+## Install
 
 ```bash
 npm install ngx-kit
 ```
 
-## استفاده‌ی پایه
+## Basic usage
 
 ```html
 <ngx-drawer-menu
@@ -18,59 +18,60 @@ npm install ngx-kit
   [width]="280"
   [openOnDesktop]="true"
   [openOnMobile]="false"
-  [(open)]="isOpen">
+  [(open)]="isOpen"
+>
   <div drawerContent>
-    <!-- محتوای منو -->
-    <a routerLink="/home">خانه</a>
-    <a routerLink="/settings">تنظیمات</a>
+    <!-- menu content -->
+    <a routerLink="/home">Home</a>
+    <a routerLink="/settings">Settings</a>
   </div>
 
-  <!-- محتوای اصلیِ صفحه (پیش‌فرض، بدون select) -->
+  <!-- main page content (default, no select) -->
   <router-outlet />
 </ngx-drawer-menu>
 ```
 
 ## API
 
-| ورودی                            | نوع                                                                              | پیش‌فرض          | توضیح                                                                                                                    |
-| -------------------------------- | -------------------------------------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------ |
-| `side`                           | `'start' \| 'end'`                                                               | `'start'`        | منطقی — زیر RTL خودکار برعکس می‌شه                                                                                       |
-| `effect`                         | `'slide' \| 'curtain' \| 'jelly' \| 'pull' \| 'rotate3d' \| 'flip3d' \| 'scale'` | `'slide'`        | جلوه‌ی بازوبسته‌شدنِ خودِ پنل (پایین‌تر توضیح داده شده)                                                                  |
-| `contentBehavior`                | `'overlay' \| 'push' \| 'reveal'`                                                | `'overlay'`      | رفتارِ محتوای اصلیِ صفحه                                                                                                 |
-| `width`                          | `number`                                                                         | `280`            | عرضِ پنل به پیکسل                                                                                                        |
-| `swipeEnabled`                   | `boolean`                                                                        | `true`           | باز کردن با کشیدن از لبه‌ی صفحه                                                                                          |
-| `swipeEdgeSize`                  | `number`                                                                         | `24`             | پهنای ناحیه‌ی نامرئیِ لبه که کشیدن ازش باز می‌کنه                                                                        |
-| `backdropClose`                  | `boolean`                                                                        | `true`           | بستن با کلیک روی بک‌دراپ (یا تیره‌شدنِ محتوا در push/reveal)                                                             |
-| `curtainStrips`                  | `number`                                                                         | `7`              | فقط برای `effect="curtain"`                                                                                              |
-| `open`                           | `boolean` (model، دوطرفه)                                                        | `false`          | با `[(open)]` قابل‌کنترله                                                                                                |
-| `respondToViewport`              | `boolean`                                                                        | `true`           | رد شدن از `mobileBreakpoint` به‌صورت **زنده** (نه فقط بار اول) `open` رو با `openOnDesktop`/`openOnMobile` هماهنگ می‌کنه |
-| `openOnDesktop` / `openOnMobile` | `boolean`                                                                        | `true` / `false` |                                                                                                                          |
-| `mobileBreakpoint`               | `number`                                                                         | `768`            |                                                                                                                          |
-
-### جلوه‌ها (`effect`)
-
-| مقدار      | توضیح                                                                                                            |
-| ---------- | ---------------------------------------------------------------------------------------------------------------- |
-| `slide`    | اسلایدِ ساده‌ی کلاسیک                                                                                            |
-| `curtain`  | چند نوارِ عمودیِ هم‌رنگِ پنل که با تأخیرِ پلکانی جمع می‌شن و محتوا رو نمایان می‌کنن                              |
-| `jelly`    | نوسانِ فنریِ چندمرحله‌ای که فروکش می‌کنه (الهام از افکتِ [Jelly Slide Menu](https://dribbble.com/shots/2307371)) |
-| `pull`     | کشیدگیِ لاستیکیِ تک‌ضربه‌ای (rubber-band)                                                                        |
-| `rotate3d` | چرخشِ سه‌بعدیِ دورِ لولا، مثلِ بازشدنِ یه در                                                                     |
-| `flip3d`   | ورق‌خوردن با عمق روی محورِ Z، مثلِ جلدِ یه کتاب                                                                  |
-| `scale`    | بزرگ‌شدن از مرکز همراه با fade                                                                                   |
-
-### رفتارِ محتوا (`contentBehavior`)
-
-| مقدار     | توضیح                                                                  |
-| --------- | ---------------------------------------------------------------------- |
-| `overlay` | محتوا سرجاش می‌مونه، درور روش شناور می‌شه (با بک‌دراپ)                 |
-| `push`    | محتوا به‌اندازه‌ی عرضِ درور هل داده می‌شه (کنار می‌ره)                 |
-| `reveal`  | محتوا کمی کوچیک/عقب می‌ره، انگار درور از زیرش نمایان می‌شه (افکتِ iOS) |
-
-## نکته‌ی معماری: امبد کردن داخلِ یه ناحیه‌ی محدود
-
-پیش‌فرض، درور کل ارتفاعِ نزدیک‌ترین والدِ positioned رو می‌گیره (برای shell سراسریِ اپ همینو می‌خواید). اگه می‌خواید داخلِ یه کارت/ناحیه‌ی محدود (نه کل صفحه) امبدش کنید، کافیه اون container یه `position: relative` و ارتفاعِ مشخص داشته باشه — درور خودکار به همون باکس محدود می‌مونه (به لطفِ `perspective`ای که برای جلوه‌های سه‌بعدی استفاده می‌کنه و طبقِ اسپکِ CSS، containing-block برای فرزندهای `position:fixed` می‌سازه).
-
-## دارک‌مود و RTL
-
-خودکار پشتیبانی می‌شه؛ محاسباتِ درگ (که برخلافِ CSS logical properties، جهتِ فیزیکیِ واقعی لازم دارن) از `DirectionService` مشترک استفاده می‌کنن، پس با تغییرِ زنده‌ی `dir` هم درست کار می‌کنن.
+| Input | Type | Default | Description |
+| --- | --- | --- | --- |
+| `side` | `'start' \| 'end'` | `'start'` | Logical — automatically flips under RTL |
+| `effect` | `'slide' \| 'curtain' \| 'jelly' \| 'pull' \| 'rotate3d' \| 'flip3d' \| 'scale'` | `'slide'` | The panel's own open/close effect (described below) |
+| `contentBehavior` | `'overlay' \| 'push' \| 'reveal'` | `'overlay'` | How the main page content behaves |
+| `width` | `number` | `280` | Panel width in pixels |
+| `swipeEnabled` | `boolean` | `true` | Open by swiping from the screen edge |
+| `swipeEdgeSize` | `number` | `24` | Width of the invisible edge zone that a swipe can start from |
+| `backdropClose` | `boolean` | `true` | Close on backdrop click (or dimming the content in push/reveal) |
+| `curtainStrips` | `number` | `7` | Only for `effect="curtain"` |
+| `open` | `boolean` (model, two-way) | `false` | Controllable via `[(open)]` |
+| `respondToViewport` | `boolean` | `true` | Crossing `mobileBreakpoint` **live** (not just on first load) syncs `open` with `openOnDesktop`/`openOnMobile` |
+| `openOnDesktop` / `openOnMobile` | `boolean` | `true` / `false` | |
+| `mobileBreakpoint` | `number` | `768` | |
+
+### Effects (`effect`)
+
+| Value | Description |
+| --- | --- |
+| `slide` | Classic simple slide |
+| `curtain` | Several same-colored vertical strips that collapse with a staggered delay, revealing the content |
+| `jelly` | A multi-stage spring oscillation that settles down (inspired by the [Jelly Slide Menu](https://dribbble.com/shots/2307371) effect) |
+| `pull` | A single rubber-band stretch |
+| `rotate3d` | A 3D rotation around a hinge, like a door opening |
+| `flip3d` | Flips with depth on the Z axis, like a book cover |
+| `scale` | Zooms in from the center with a fade |
+
+### Content behavior (`contentBehavior`)
+
+| Value | Description |
+| --- | --- |
+| `overlay` | Content stays in place, the drawer floats over it (with a backdrop) |
+| `push` | Content is pushed aside by the drawer's width |
+| `reveal` | Content shrinks/recedes slightly, as if the drawer is revealed behind it (the iOS effect) |
+
+## Architecture note: embedding inside a bounded area
+
+By default, the drawer takes up the full height of the nearest positioned ancestor (which is what you want for a full app shell). If you want to embed it inside a bounded card/area (not the whole page), just give that container `position: relative` and a defined height — the drawer will automatically confine itself to that box (thanks to the `perspective` it uses for 3D effects, which per the CSS spec creates a containing block for `position:fixed` descendants).
+
+## Dark mode and RTL
+
+Supported automatically; drag math (which, unlike CSS logical properties, needs the real physical direction) uses the shared `DirectionService`, so it works correctly even with a live `dir` change.

package/dropzone/README.md

@@ -1,14 +1,30 @@
 # ngx-kit/dropzone
 
-ناحیه‌ی درگ‌اند‌دراپ فایل: اعتبارسنجیِ نوع/حجم/تعداد، پیش‌نمایشِ تصاویر، پیمایشِ بازگشتیِ پوشه‌ها (وقتی کاربر یه پوشه رو درگ کنه)، و کاملاً قابل‌دسترسی با کیبورد.
+A standalone Angular dropzone with file validation, previews, recursive folder support, keyboard accessibility, and a production-ready upload pipeline.
 
-## نصب
+The upload layer is intentionally decoupled from the UI. The component only knows about `NgxDropzoneUploadService`, so applications can use the default Angular `HttpClient` implementation or replace it with Axios, `fetch`, tus, S3 multipart, or any custom transport.
 
-```bash
-npm install ngx-kit
-```
+## Features
+
+- Drag & drop and file-picker selection
+- MIME, wildcard MIME and extension validation
+- Maximum file size and maximum file count
+- Recursive folder traversal when the browser exposes `webkitGetAsEntry`
+- Image previews with `URL.revokeObjectURL` cleanup
+- Keyboard accessible dropzone
+- Signal-based Angular component with `OnPush`
+- Automatic or manual uploads
+- Configurable multipart field alias
+- Configurable upload URL
+- Configurable parallel upload limit
+- Per-file upload progress
+- Per-file success/error state
+- Retry failed uploads
+- Cancel an active upload by removing the file
+- Optional multipart fields, headers and credentials
+- Pluggable upload adapter through an `InjectionToken`
 
-## استفاده
+## Basic selection
 
 ```html
 <ngx-dropzone
@@ -18,42 +34,389 @@ npm install ngx-kit
   [maxFiles]="10"
   (filesAdded)="onFilesAdded($event)"
   (filesRejected)="onFilesRejected($event)">
-  فایل‌ها را اینجا رها کنید یا کلیک کنید
+  Drop files here or click to browse
 </ngx-dropzone>
 ```
 
-## API
+## Automatic upload
 
-| ورودی          | نوع             | پیش‌فرض      | توضیح                                                                  |
-| -------------- | --------------- | ------------ | ---------------------------------------------------------------------- |
-| `accept`       | `string`        | `''`         | مثل `input[type=file]`: `"image/*"`, `".pdf,.docx"`, یا ترکیبی با کاما |
-| `multiple`     | `boolean`       | `true`       | اجازه‌ی انتخاب چند فایل                                                |
-| `maxFileSize`  | `number` (بایت) | بدون محدودیت | حداکثر حجمِ هر فایل                                                    |
-| `maxFiles`     | `number`        | بدون محدودیت | حداکثر تعدادِ فایل مجاز                                                |
-| `disabled`     | `boolean`       | `false`      |                                                                        |
-| `showFileList` | `boolean`       | `true`       | نمایشِ لیست/پیش‌نمایشِ فایل‌های انتخاب‌شده داخل خودِ کامپوننت          |
+When `autoUpload` is enabled, every newly accepted file is queued immediately.
+
+```html
+<ngx-dropzone
+  [accept]="'image/*,.pdf'"
+  [uploadUrl]="'/api/files/upload'"
+  [uploadAlias]="'file'"
+  [autoUpload]="true"
+  [maxParallel]="3">
+  Drop files here or click to browse
+</ngx-dropzone>
+```
 
-| خروجی           | نوع                                                     | توضیح                                         |
-| --------------- | ------------------------------------------------------- | --------------------------------------------- |
-| `filesAdded`    | `File[]`                                                | فایل‌های تازه‌پذیرفته‌شده                     |
-| `filesRejected` | `{ file: File; reason: 'type' \| 'size' \| 'count' }[]` | فایل‌های ردشده و دلیلش                        |
-| `filesChange`   | `File[]`                                                | کل لیستِ فعلی، بعد از هر تغییر (اضافه یا حذف) |
+For example, the browser sends a multipart request equivalent to:
 
-### آیکونِ سفارشی
+```text
+POST /api/files/upload
+Content-Type: multipart/form-data
+
+file=<selected file>
+```
+
+`maxParallel="3"` means at most three upload requests are active at the same time. Additional files remain in an internal FIFO queue.
+
+## Manual upload: one "Upload all" button
+
+This is the default manual mode.
 
 ```html
-<ngx-dropzone>
-  <svg dropzone-icon>...</svg>
-  متن دلخواه شما
-</ngx-dropzone>
+<ngx-dropzone
+  [uploadUrl]="'/api/files/upload'"
+  [uploadAlias]="'files'"
+  [autoUpload]="false"
+  [uploadMode]="'all'"
+  [maxParallel]="4"></ngx-dropzone>
+```
+
+The component renders an **Upload all** button. Clicking it queues every pending file. `maxParallel` still controls the number of concurrent requests.
+
+## Manual upload: one button per file
+
+```html
+<ngx-dropzone
+  [uploadUrl]="'/api/files/upload'"
+  [uploadAlias]="'file'"
+  [autoUpload]="false"
+  [uploadMode]="'single'"
+  [maxParallel]="2"></ngx-dropzone>
+```
+
+Each pending row gets its own **Upload** button. The user can decide which files enter the upload queue.
+
+## Extra multipart fields
+
+```html
+<ngx-dropzone
+  [uploadUrl]="'/api/files/upload'"
+  [uploadAlias]="'file'"
+  [uploadData]="{
+    tenantId: 'abc',
+    folderId: 123,
+    isPublic: false
+  }"></ngx-dropzone>
+```
+
+Every request contains the selected file plus those multipart fields.
+
+## Headers and credentials
+
+```html
+<ngx-dropzone
+  [uploadUrl]="'https://api.example.com/files'"
+  [uploadHeaders]="{
+    'X-Tenant-Id': 'abc',
+    'X-Upload-Source': 'ngx-dropzone'
+  }"
+  [uploadWithCredentials]="true"></ngx-dropzone>
+```
+
+Authentication headers that are already added by an Angular `HttpInterceptor` do not need to be supplied here.
+
+## Upload lifecycle
+
+Each file has one of these states:
+
+```text
+pending -> uploading -> uploaded
+                  \
+                   -> error -> retry -> uploading
+```
+
+Removing a file while it is uploading unsubscribes from the upload observable. With the default `HttpClient` adapter this cancels the underlying HTTP request.
+
+Every row displays:
+
+- current status
+- upload percentage
+- progress bar
+- upload/retry action when appropriate
+- remove action
+
+## Outputs
+
+| Output           | Payload                          | Description                   |
+| ---------------- | -------------------------------- | ----------------------------- |
+| `filesAdded`     | `File[]`                         | Newly accepted files          |
+| `filesRejected`  | `NgxDropzoneRejectedFile[]`      | Files rejected by validation  |
+| `filesChange`    | `File[]`                         | Current selected files        |
+| `uploadStarted`  | `NgxDropzoneFile`                | A file started uploading      |
+| `uploadProgress` | `NgxDropzoneUploadProgressEvent` | Progress update               |
+| `uploadSuccess`  | `NgxDropzoneFile`                | Upload completed successfully |
+| `uploadError`    | `{ item, error }`                | Upload failed                 |
+
+Example:
+
+```html
+<ngx-dropzone
+  [uploadUrl]="'/api/files'"
+  [autoUpload]="true"
+  [maxParallel]="3"
+  (uploadProgress)="onUploadProgress($event)"
+  (uploadSuccess)="onUploadSuccess($event)"
+  (uploadError)="onUploadError($event)"></ngx-dropzone>
+```
+
+## Upload contracts
+
+The upload boundary is defined by:
+
+```ts
+NgxDropzoneUploadService;
+NgxDropzoneUploadRequest;
+NgxDropzoneUploadEvent;
+```
+
+The service returns an `Observable`. It emits progress events and finally a response event.
+
+This is important: **the component does not depend on `HttpClient`**.
+
+## Default Angular HttpClient adapter
+
+The library ships with `NgxDropzoneHttpUploadService`.
+
+It uses:
+
+- `HttpClient.post`
+- `FormData`
+- `reportProgress: true`
+- `observe: 'events'`
+
+The default adapter is connected through:
+
+```ts
+NGX_DROPZONE_UPLOAD_SERVICE;
+```
+
+The token has a default factory, so normal applications do not need to configure anything.
+
+Make sure your application provides Angular's HTTP client:
+
+```ts
+import { provideHttpClient } from '@angular/common/http';
+
+export const appConfig = {
+  providers: [provideHttpClient()],
+};
+```
+
+## Replacing HttpClient with Axios
+
+You can completely replace the transport without changing the dropzone component.
+
+```ts
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import axios from 'axios';
+
+import {
+  NgxDropzoneUploadEvent,
+  NgxDropzoneUploadRequest,
+  NgxDropzoneUploadService,
+} from 'ngx-kit';
+
+@Injectable()
+export class AxiosDropzoneUploadService implements NgxDropzoneUploadService {
+  upload<TResponse = unknown>(
+    request: NgxDropzoneUploadRequest,
+  ): Observable<NgxDropzoneUploadEvent<TResponse>> {
+    return new Observable((subscriber) => {
+      const controller = new AbortController();
+
+      const form = new FormData();
+      form.append(request.alias, request.file, request.file.name);
+
+      for (const [key, value] of Object.entries(request.data ?? {})) {
+        form.append(key, value instanceof Blob ? value : String(value));
+      }
+
+      axios
+        .post<TResponse>(request.url, form, {
+          headers: request.headers,
+          withCredentials: request.withCredentials,
+          signal: controller.signal,
+          onUploadProgress: (event) => {
+            const total = event.total;
+            subscriber.next({
+              type: 'progress',
+              loaded: event.loaded,
+              total,
+              percent: total ? Math.min(100, Math.round((event.loaded / total) * 100)) : 0,
+            });
+          },
+        })
+        .then((response) => {
+          subscriber.next({
+            type: 'response',
+            response: response.data,
+            status: response.status,
+          });
+          subscriber.complete();
+        })
+        .catch((error) => subscriber.error(error));
+
+      return () => controller.abort();
+    });
+  }
+}
+```
+
+Then override the token:
+
+```ts
+import { NGX_DROPZONE_UPLOAD_SERVICE } from 'ngx-kit';
+
+export const appConfig = {
+  providers: [
+    {
+      provide: NGX_DROPZONE_UPLOAD_SERVICE,
+      useClass: AxiosDropzoneUploadService,
+    },
+  ],
+};
+```
+
+This keeps the dropzone UI independent from the HTTP library.
+
+## Custom adapter at component level
+
+You can also replace the adapter for a specific dropzone:
+
+```ts
+@Component({
+  // ...
+  providers: [
+    {
+      provide: NGX_DROPZONE_UPLOAD_SERVICE,
+      useClass: AxiosDropzoneUploadService,
+    },
+  ],
+})
+export class MyUploaderComponent {}
+```
+
+This is useful when one part of an application uses a different upload backend.
+
+## Configuration API
+
+| Input                   | Type                                 | Default   | Description                        |
+| ----------------------- | ------------------------------------ | --------- | ---------------------------------- |
+| `accept`                | `string`                             | `''`      | MIME/extension filters             |
+| `multiple`              | `boolean`                            | `true`    | Allow multiple files               |
+| `maxFileSize`           | `number`                             | unlimited | Maximum size per file in bytes     |
+| `maxFiles`              | `number`                             | unlimited | Maximum number of files            |
+| `disabled`              | `boolean`                            | `false`   | Disable interaction                |
+| `showFileList`          | `boolean`                            | `true`    | Show selected files                |
+| `uploadUrl`             | `string`                             | `''`      | Upload endpoint                    |
+| `uploadAlias`           | `string`                             | `'file'`  | Multipart file field name          |
+| `autoUpload`            | `boolean`                            | `false`   | Automatically queue accepted files |
+| `maxParallel`           | `number`                             | `3`       | Maximum simultaneous uploads       |
+| `uploadMode`            | `'all' \| 'single'`                  | `'all'`   | Manual upload UI behavior          |
+| `uploadData`            | `Record<string, ...>`                | `{}`      | Extra multipart fields             |
+| `uploadHeaders`         | `Record<string, string \| string[]>` | `{}`      | Extra request headers              |
+| `uploadWithCredentials` | `boolean`                            | `false`   | Send credentials                   |
+
+## Tests
+
+The upload implementation is covered at two levels.
+
+### HTTP adapter tests
+
+`ngx-dropzone-upload.spec.ts` verifies:
+
+- multipart file alias
+- extra form data
+- POST request
+- upload progress calculation
+- final response event
+
+### Component upload tests
+
+`dropzone-upload.spec.ts` verifies:
+
+- automatic upload
+- `maxParallel` concurrency
+- queued uploads starting after a slot is released
+- per-file manual upload
+- progress propagation
+- failed upload state
+- retry UI
+
+The existing `file-matching.spec.ts` continues to cover file type/extension matching and byte formatting.
+
+## Design decisions
+
+### Why an `InjectionToken`?
+
+The dropzone should not be coupled to a transport library.
+
+Bad:
+
+```ts
+class Dropzone {
+  constructor(private http: HttpClient) {}
+}
+```
+
+Better:
+
+```ts
+class Dropzone {
+  constructor(
+    @Inject(NGX_DROPZONE_UPLOAD_SERVICE)
+    private uploader: NgxDropzoneUploadService,
+  ) {}
+}
+```
+
+Now the UI depends on a small capability (`upload`) instead of Angular `HttpClient`.
+
+### Why an Observable?
+
+An upload is a stream of events rather than a single value:
+
+```text
+progress -> progress -> progress -> response
 ```
 
-## نکات فنی
+It also gives custom adapters a clean cancellation mechanism: unsubscribing from the observable cancels the transport.
+
+### Why `maxParallel` is handled by the component
+
+The upload adapter is responsible for **one file**.
+
+The dropzone is responsible for **orchestration**:
+
+```text
+Files
+  |
+  +-- pending queue
+  |
+  +-- upload #1
+  +-- upload #2
+  +-- upload #3
+  |
+  +-- pending queue...
+```
+
+This keeps the adapter simple and lets every transport share the same concurrency behavior.
+
+## Existing behavior retained
+
+The upload feature is layered on top of the existing selection implementation. File acceptance, maximum size/count validation, recursive directory traversal, keyboard interaction, previews, and preview URL cleanup remain part of the component.
+
+## Accessibility
 
-- شمارنده‌ی enter/leave برای جلوگیری از چشمک‌زدنِ حالتِ «درگ» موقعِ عبور از روی فرزندهای داخلِ ناحیه.
-- درگ‌کردن یه **پوشه** هم پشتیبانی می‌شه (`webkitGetAsEntry` + پیمایشِ بازگشتی) — مرورگرهایی که پشتیبانی نکنن، به گرفتنِ فایل‌های مستقیم fallback می‌کنن.
-- object URLهای پیش‌نمایش موقعِ حذفِ فایل یا destroy شدنِ کامپوننت، خودکار `revokeObjectURL` می‌شن (بدون نشتی حافظه).
+The dropzone remains keyboard accessible through Enter/Space. Upload progress uses the ARIA `progressbar` role and exposes the current percentage.
 
-## دارک‌مود و RTL
+## Dark mode and RTL
 
-خودکار پشتیبانی می‌شه.
+The existing CSS uses logical properties and `light-dark()`, so RTL and dark/light themes continue to work automatically.