From 7ba7717d3fa279f77160840c4848bb224642ae43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Tue, 31 Dec 2024 17:41:05 +0100
Subject: [PATCH] Make horizontal rule direction aware (#2021)

---
 .changeset/chilly-vans-leave.md | 5 +++++
 docs/components/divider.mdx     | 4 ++--
 src/scss/ui/typo/_hr.scss       | 6 ++++--
 3 files changed, 11 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/chilly-vans-leave.md

diff --git a/.changeset/chilly-vans-leave.md b/.changeset/chilly-vans-leave.md
new file mode 100644
index 000000000..b83ec271e
--- /dev/null
+++ b/.changeset/chilly-vans-leave.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Make horizontal rule direction aware
diff --git a/docs/components/divider.mdx b/docs/components/divider.mdx
index 3e7bd7225..675d0c029 100644
--- a/docs/components/divider.mdx
+++ b/docs/components/divider.mdx
@@ -26,7 +26,7 @@ You can modify the position of the text which is to be included in a separator a
 <p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
 </p>
-<div class="hr-text hr-text-left">Left divider</div>
+<div class="hr-text hr-text-start">Start divider</div>
 <p>
   Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 </p>
@@ -34,7 +34,7 @@ You can modify the position of the text which is to be included in a separator a
 <p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
 </p>
-<div class="hr-text hr-text-right">Right divider</div>
+<div class="hr-text hr-text-end">End divider</div>
 <p>
   Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 </p>
diff --git a/src/scss/ui/typo/_hr.scss b/src/scss/ui/typo/_hr.scss
index 6d88382a4..7a4398647 100644
--- a/src/scss/ui/typo/_hr.scss
+++ b/src/scss/ui/typo/_hr.scss
@@ -39,7 +39,8 @@ Hr text
     color: var(--#{$prefix}secondary);
   }
 
-  &.hr-text-left {
+  &.hr-text-left,
+  &.hr-text-start {
     &:before {
       content: none;
     }
@@ -50,7 +51,8 @@ Hr text
     }
   }
 
-  &.hr-text-right {
+  &.hr-text-right,
+  &.hr-text-end {
     &:before {
       content: "";
     }