fix(ui): use `start` and `end` for text alignments to respect writing direction

https://csslayout.news/whats-the-difference-between-the-alignment-values-of-start-flex-start-and-self-start/

front/src/components/album/Card.vue

@@ -56,7 +56,7 @@ const imageUrl = computed(() => props.album.cover?.urls.original
       :key="ac.artist.id"
     >
       <Link
-        align-text="left"
+        align-text="start"
         :to="{ name: 'library.artists.detail', params: { id: ac.artist.id }}"
       >
         {{ ac.credit ?? t('components.Queue.meta.unknownArtist') }}

front/src/components/ui/Section.vue

@@ -63,7 +63,7 @@ const headerGrid
         <template v-if="expand || collapse">
           <Button
             full
-            align-text="left"
+            align-text="start"
             align-self="end"
             :class="$style.summary"
             :aria-pressed="!!collapse"
@@ -111,7 +111,7 @@ const headerGrid
           ghost
           thin-font
           align-self="baseline"
-          :align-text="expand || collapse ? 'left' : undefined"
+          :align-text="expand || collapse ? 'start' : undefined"
           :aria-pressed="collapse"
           :class="{
             [$style.action]: true,

front/src/ui/components/Sidebar.vue

@@ -251,7 +251,7 @@ const moderationNotifications = computed(() =>
           to="/library"
           ghost
           full
-          align-text="left"
+          align-text="start"
           icon="bi-compass"
           thick-when-active
         >
@@ -262,7 +262,7 @@ const moderationNotifications = computed(() =>
           to="/library/artists"
           ghost
           full
-          align-text="left"
+          align-text="start"
           thin-font
           icon="bi-person-circle"
           thick-when-active
@@ -274,7 +274,7 @@ const moderationNotifications = computed(() =>
           to="/channels"
           ghost
           full
-          align-text="left"
+          align-text="start"
           thin-font
           icon="bi-person-square"
           thick-when-active
@@ -286,7 +286,7 @@ const moderationNotifications = computed(() =>
           to="/library/albums"
           ghost
           full
-          align-text="left"
+          align-text="start"
           thin-font
           icon="bi-disc"
           thick-when-active
@@ -298,7 +298,7 @@ const moderationNotifications = computed(() =>
           to="/library/playlists"
           ghost
           full
-          align-text="left"
+          align-text="start"
           thin-font
           icon="bi-music-note-list"
           thick-when-active
@@ -309,7 +309,7 @@ const moderationNotifications = computed(() =>
           to="/library/radios"
           ghost
           full
-          align-text="left"
+          align-text="start"
           thin-font
           icon="bi-boombox-fill"
           thick-when-active
@@ -320,7 +320,7 @@ const moderationNotifications = computed(() =>
           to="/library/podcasts"
           ghost
           full
-          align-text="left"
+          align-text="start"
           thin-font
           icon="bi-mic"
           thick-when-active
@@ -331,7 +331,7 @@ const moderationNotifications = computed(() =>
           to="/favorites"
           ghost
           full
-          align-text="left"
+          align-text="start"
           thin-font
           icon="bi-heart"
           thick-when-active

front/ui-docs/components/ui/card.md

@@ -352,7 +352,7 @@ Avoid adding buttons and links on top of a [linked card](#card-as-a-link). This
   icon="bi-exclamation large"
 >
   <Button primary low-height :onClick="()=>alert('Button clicked')">Click me!</Button>
-  <Link secondary to="./card.md" align-text="right">Open this file in a new window</Link>
+  <Link secondary to="./card.md" align-text="end">Open this file in a new window</Link>
 </Card>
 ```
 
@@ -364,7 +364,7 @@ Avoid adding buttons and links on top of a [linked card](#card-as-a-link). This
   icon="bi-exclamation large"
 >
   <Button primary low-height :onClick="()=>alert('Button clicked')">Click me!</Button>
-  <Link secondary to="./card.md" align-text="right">Open this file in a new window</Link>
+  <Link secondary to="./card.md" align-text="end">Open this file in a new window</Link>
 </Card>
 
 <!-- prettier-ignore-end -->
@@ -377,7 +377,7 @@ Instead, use the [action area](#add-an-action) to offer the primary link:
   icon="bi-check-lg large"
 >
   <Button secondary low-height :onClick="()=>alert('Button clicked')">Click me!</Button>
-  <Link secondary to="./card.md" align-text="right">Open this file in a new window</Link>
+  <Link secondary to="./card.md" align-text="end">Open this file in a new window</Link>
   <template #action>
     <Link solid full primary to="./card.md" align-text="center">Details</Link>
   </template>
@@ -391,7 +391,7 @@ Instead, use the [action area](#add-an-action) to offer the primary link:
   icon="bi-check-lg large"
 >
   <Button secondary low-height :onClick="()=>alert('Button clicked')">Click me!</Button>
-  <Link secondary to="./card.md" align-text="right">Open this file in a new window</Link>
+  <Link secondary to="./card.md" align-text="end">Open this file in a new window</Link>
   <template #action>
     <Link solid full primary to="./card.md" align-text="center">Details</Link>
   </template>

front/ui-docs/using-alignment.md

@@ -44,17 +44,17 @@ _
 <Layout flex class="preview">
 
 ```vue-html
-  <Button align-text="left">🐌</Button>
+  <Button align-text="start">🐌</Button>
   <Button align-text="center">🐌</Button>
-  <Button align-text="right">🐌</Button>
+  <Button align-text="end">🐌</Button>
   <Button icon="bi-star" align-text="stretch">🐌</Button>
   <Button icon="bi-star" align-text="space-out">🐌</Button>
 ```
 
   <Layout class="preview solid primary" stack no-gap>
-    <Button align-text="left">🐌</Button>
+    <Button align-text="start">🐌</Button>
     <Button align-text="center">🐌</Button>
-    <Button align-text="right">🐌</Button>
+    <Button align-text="end">🐌</Button>
     <Button icon="bi-star" align-text="stretch">🐌</Button>
     <Button icon="bi-star" align-text="space-out">🐌</Button>
   </Layout>