From 7a058e08c7a0e411be300676ba546d9c63f7efb7 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 31 Jan 2025 09:07:58 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(native=20list):=20disc=20versi?=
 =?UTF-8?q?on=20and=20ordered=20list=20marker=20left=20aligned=20(#1589)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Create PR for #1584

* feat(styles): add is-inside class to center align lists

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Gery Hirschfeld <gerhard.hirschfeld@baloise.ch>
---
 .changeset/kind-books-reply.md                |  5 ++
 .../bal-list/test/bal-list.native.html        | 64 +++++++++++++++++++
 packages/css/src/core/list.sass               |  5 ++
 packages/styles/src/core/list.sass            |  5 ++
 4 files changed, 79 insertions(+)
 create mode 100644 .changeset/kind-books-reply.md

diff --git a/.changeset/kind-books-reply.md b/.changeset/kind-books-reply.md
new file mode 100644
index 000000000..1ae395642
--- /dev/null
+++ b/.changeset/kind-books-reply.md
@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': minor
+---
+
+**styles**: add `is-inside` class to lists (ul & ol) to center alignt the element
diff --git a/packages/core/src/components/bal-list/test/bal-list.native.html b/packages/core/src/components/bal-list/test/bal-list.native.html
index e84608cba..0fa178e0b 100644
--- a/packages/core/src/components/bal-list/test/bal-list.native.html
+++ b/packages/core/src/components/bal-list/test/bal-list.native.html
@@ -21,6 +21,30 @@ <h2 class="title text-xx-large">Basic</h2>
             <li>Item 4</li>
           </ul>
         </section>
+        <section class="text-align-center">
+          <ul class="list is-inside">
+            <li>Item 1</li>
+            <li>Item 2</li>
+            <li>Item 3</li>
+            <li>Item 4</li>
+          </ul>
+        </section>
+        <section>
+          <ol class="list">
+            <li>Item 1</li>
+            <li>Item 2</li>
+            <li>Item 3</li>
+            <li>Item 4</li>
+          </ol>
+        </section>
+        <section class="text-align-center">
+          <ol class="list is-inside">
+            <li>Item 1</li>
+            <li>Item 2</li>
+            <li>Item 3</li>
+            <li>Item 4</li>
+          </ol>
+        </section>
         <h2 class="title text-xx-large">Bullet Circle</h2>
         <section>
           <ul class="list has-bullet-circle">
@@ -30,6 +54,14 @@ <h2 class="title text-xx-large">Bullet Circle</h2>
             <li>Item 4</li>
           </ul>
         </section>
+        <section class="text-align-center">
+          <ul class="list has-bullet-circle is-inside">
+            <li>Item 1</li>
+            <li>Item 2</li>
+            <li>Item 3</li>
+            <li>Item 4</li>
+          </ul>
+        </section>
         <h2 class="title text-xx-large">Bullet Check</h2>
         <section>
           <ul class="list has-bullet-check">
@@ -39,6 +71,14 @@ <h2 class="title text-xx-large">Bullet Check</h2>
             <li>Item 4</li>
           </ul>
         </section>
+        <section class="text-align-center">
+          <ul class="list has-bullet-check is-inside">
+            <li>Item 1</li>
+            <li>Item 2</li>
+            <li>Item 3</li>
+            <li>Item 4</li>
+          </ul>
+        </section>
         <h2 class="title text-xx-large">Bullet Check Circle</h2>
         <section>
           <ul class="list has-bullet-check-circle">
@@ -48,6 +88,14 @@ <h2 class="title text-xx-large">Bullet Check Circle</h2>
             <li>Item 4</li>
           </ul>
         </section>
+        <section class="text-align-center">
+          <ul class="list has-bullet-check-circle is-inside">
+            <li>Item 1</li>
+            <li>Item 2</li>
+            <li>Item 3</li>
+            <li>Item 4</li>
+          </ul>
+        </section>
         <h2 class="title text-xx-large">Bullet Close</h2>
         <section>
           <ul class="list has-bullet-close">
@@ -57,6 +105,14 @@ <h2 class="title text-xx-large">Bullet Close</h2>
             <li>Item 4</li>
           </ul>
         </section>
+        <section class="text-align-center">
+          <ul class="list has-bullet-close is-inside">
+            <li>Item 1</li>
+            <li>Item 2</li>
+            <li>Item 3</li>
+            <li>Item 4</li>
+          </ul>
+        </section>
         <h2 class="title text-xx-large">Bullet Arrow Down</h2>
         <section>
           <ul class="list has-bullet-arrow-down">
@@ -66,6 +122,14 @@ <h2 class="title text-xx-large">Bullet Arrow Down</h2>
             <li>Item 4</li>
           </ul>
         </section>
+        <section class="text-align-center">
+          <ul class="list has-bullet-arrow-down is-inside">
+            <li>Item 1</li>
+            <li>Item 2</li>
+            <li>Item 3</li>
+            <li>Item 4</li>
+          </ul>
+        </section>
       </main>
     </bal-doc-app>
   </body>
diff --git a/packages/css/src/core/list.sass b/packages/css/src/core/list.sass
index dd1aa8862..5fe8a6672 100644
--- a/packages/css/src/core/list.sass
+++ b/packages/css/src/core/list.sass
@@ -6,6 +6,11 @@ ul.is-list
   margin-left: 2rem
   +desktop
     margin-bottom: 2rem
+  &.is-inside
+    list-style-position: inside !important
+    margin-left: 0
+    li
+      list-style-position: inside !important
   li
     hyphens: auto
     margin-bottom: 1rem
diff --git a/packages/styles/src/core/list.sass b/packages/styles/src/core/list.sass
index ce57a9935..af6ee144b 100644
--- a/packages/styles/src/core/list.sass
+++ b/packages/styles/src/core/list.sass
@@ -6,6 +6,11 @@ ul.is-list
   margin-left: 2rem
   +desktop
     margin-bottom: 2rem
+  &.is-inside
+    list-style-position: inside !important
+    margin-left: 0
+    li
+      list-style-position: inside !important
   li
     hyphens: auto
     margin-bottom: 1rem