fix(list): spacing (#2005)

* fix: spacing

* fix: revert changes, fix spacing

* fix: add tiny bit more space after 10th element

* test(visual): update snapshots (#2006)

Co-authored-by: felix-ico <[email protected]>

* fix: primary list item spacing

* test(visual): update snapshots (#2012)

Co-authored-by: felix-ico <[email protected]>

* docs: update css vars

---------

Co-authored-by: felixw <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: felix-ico <[email protected]>

packages/components/src/components/list-item/list-item.css

@@ -13,7 +13,8 @@
   --display: block;
   --font-size: var(--telekom-typography-font-size-body);
   --line-height: var(--telekom-typography-line-spacing-standard);
-  --spacing-left: calc(0.25ch + var(--telekom-spacing-unit-x4));
+  --spacing-left: calc(0.5ch + var(--telekom-spacing-unit-x5));
+  --spacing-left-nested: calc(0.5ch + var(--telekom-spacing-unit-x4));
 
   --font-marker-ordered: var(--telekom-text-style-body);
   --font-marker-ordered-nested: var(--telekom-text-style-small-bold);
@@ -25,7 +26,6 @@
   );
 
   --spacing-right-no-marker: var(--telekom-spacing-unit-x2);
-
   display: var(--display);
 }
 
@@ -37,11 +37,15 @@
   margin-top: var(--telekom-spacing-unit-x1);
 }
 
+.list-item--nested {
+  padding-left: var(--spacing-left-nested);
+}
+
 .list-item:before {
   content: '';
-  position: absolute;
   top: 0;
   left: 0;
+  position: absolute;
 }
 
 .list-item--unordered:before {
@@ -64,6 +68,7 @@
 .list-item--ordered:before {
   content: attr(data-index) '.';
   font: var(--font-marker-ordered);
+  font-variant-numeric: tabular-nums;
 }
 
 .list-item--nested.list-item--ordered:before {

packages/storybook-vue/stories/components/list/List.stories.mdx

@@ -113,7 +113,8 @@ export const TemplateCustomIcon = (args) => ({
   --display: block;
   --font-size: var(--telekom-typography-font-size-body);
   --line-height: var(--telekom-typography-line-spacing-standard);
-  --spacing-left: calc(0.25ch + var(--telekom-spacing-unit-x4));
+  --spacing-left: calc(0.5ch + var(--telekom-spacing-unit-x5));
+  --spacing-left-nested: calc(0.5ch + var(--telekom-spacing-unit-x4));
 
   --font-marker-ordered: var(--telekom-text-style-body);
   --font-marker-ordered-nested: var(--telekom-text-style-small-bold);