Fix card status strips over the card border, build RTL css in dev (#2921)

.changeset/dev-rtl-css.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Updated the dev CSS build to also emit the `.rtl.css` files, so the RTL preview page is styled in dev.

.changeset/fix-card-status-border.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixed the `card-status-*` strips leaving a thin line over the card border and a mismatched corner radius.

core/package.json

@@ -10,7 +10,7 @@
     "build-assets": "concurrently \"pnpm run css\" \"pnpm run js\"",
     "clean": "shx rm -rf dist demo",
     "css": "tsx ../.build/build-css.ts scss dist/css --rtl --minify --banner",
-    "css-build": "tsx ../.build/build-css.ts scss dist/css",
+    "css-build": "tsx ../.build/build-css.ts scss dist/css --rtl",
     "css-lint": "pnpm run lint:scss && pnpm run css-lint-variables",
     "lint:scss": "stylelint \"scss/**/*.scss\" --config ../stylelint.config.mjs",
     "lint:scss:fix": "pnpm run lint:scss --fix",

core/scss/_variables.scss

@@ -1246,6 +1246,8 @@ $card-img-overlay-padding: $spacer !default;
 $card-group-margin: 1.5rem !default;
 
 $card-status-size: 3px !default;
+// The strip sits on top of the card border, so it is pulled out by the border width
+$card-status-offset: calc(-1 * var(--card-border-width)) !default;
 
 $card-stamp-opacity: 0.2 !default;
 

core/scss/ui/_cards.scss

@@ -425,27 +425,29 @@ Card status
  */
 .card-status-top {
   position: absolute;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-  top: 0;
+  inset-inline-start: $card-status-offset;
+  inset-inline-end: $card-status-offset;
+  top: $card-status-offset;
   height: $card-status-size;
   @include border-radius(var(--card-border-radius) var(--card-border-radius) 0 0);
 }
 
 .card-status-start {
   position: absolute;
+  inset-inline-start: $card-status-offset;
   inset-inline-end: auto;
-  bottom: 0;
+  top: $card-status-offset;
+  bottom: $card-status-offset;
   width: $card-status-size;
-  height: 100%;
   @include border-radius(var(--card-border-radius) 0 0 var(--card-border-radius));
 }
 
 .card-status-bottom {
   position: absolute;
+  inset-inline-start: $card-status-offset;
+  inset-inline-end: $card-status-offset;
   top: initial;
-  bottom: 0;
-  width: 100%;
+  bottom: $card-status-offset;
   height: $card-status-size;
   @include border-radius(0 0 var(--card-border-radius) var(--card-border-radius));
 }