From 6c2bb278d86ea61bff17aeb031982e280a0c0577 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 30 Jan 2025 18:05:30 +0000
Subject: [PATCH 1/2] Create PR for #1584


From c1356b2698651e10f54eea2ad1379fd1841960bd Mon Sep 17 00:00:00 2001
From: Gery Hirschfeld <gerhard.hirschfeld@baloise.ch>
Date: Fri, 31 Jan 2025 08:43:28 +0100
Subject: [PATCH 2/2] feat(styles): add is-inside class to center align lists

---
 .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