@repobit/dex-system-design 0.23.115 → 0.23.117

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.23.117](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.116...@repobit/dex-system-design@0.23.117) (2026-08-11)
+
+**Note:** Version bump only for package @repobit/dex-system-design
+
+
+
+
+
+## [0.23.116](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.115...@repobit/dex-system-design@0.23.116) (2026-08-07)
+
+### Bug Fixes
+
+* **DEX-1014:** list component adjustments
+
+
 ## [0.23.115](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.114...@repobit/dex-system-design@0.23.115) (2026-08-07)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.115",
+  "version": "0.23.117",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -74,8 +74,8 @@
     "url": "https://github.com/bitdefender/dex-core/issues"
   },
   "dependencies": {
-    "@repobit/dex-store": "1.6.13",
-    "@repobit/dex-store-elements": "2.0.18",
+    "@repobit/dex-store": "1.6.15",
+    "@repobit/dex-store-elements": "2.0.20",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -92,5 +92,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "40caed2cbcd80d281839f6e39d2bb4acc47a0806"
+  "gitHead": "bfe5401ea7f76a5ef0bc0875a21354f8975ec838"
 }

package/src/components/list/list-item/list-item.css.js

@@ -11,21 +11,20 @@ export default css`
     gap: var(--spacing-8);
     color: var(--color-neutral-700);
     line-height: var(--typography-lineHeight-normal);
-        font-family: var(--typography-fontFamily-sans);
-
+    font-family: var(--typography-fontFamily-sans);
   }
 
   /* === SIZE VARIANTS === */
-  
+
   .bd-list-item.sm {
     font-size: var(--typography-fontSize-sm);
     margin-bottom: var(--spacing-4);
   }
 
-.bd-list-item.md {
-  font-size: var(--typography-fontSize-base);
-  margin-bottom: var(--bd-li-margin-bottom, var(--spacing-6));
-}
+  .bd-list-item.md {
+    font-size: var(--typography-fontSize-base);
+    margin-bottom: var(--bd-li-margin-bottom, var(--spacing-6));
+  }
 
   .bd-list-item.lg {
     font-size: var(--typography-fontSize-lg);
@@ -33,16 +32,21 @@ export default css`
   }
 
   /* === MARKER STYLES === */
-  
+
   .bd-list-item-marker {
     flex-shrink: 0;
-    margin-top: var(--spacing-6);
+    align-self: flex-start;
+    /* centrează markerul pe înălțimea unei linii de text,
+       calculat din line-height-ul itemului, indiferent de size.
+       Se aplică doar markerelor "forme" (bullet, check) — nu textului (number). */
+    margin-top: calc((1em * var(--typography-lineHeight-normal) - var(--bd-li-marker-size, var(--spacing-6))) / 2);
   }
 
   /* Bullet List */
   .bd-list-item.bullet .bd-list-item-marker {
-    width: var(--spacing-6);
-    height: var(--spacing-6);
+    --bd-li-marker-size: var(--spacing-6);
+    width: var(--bd-li-marker-size);
+    height: var(--bd-li-marker-size);
     background-color: var(--color-neutral-1000);
     border-radius: 50%;
   }
@@ -52,6 +56,10 @@ export default css`
     counter-increment: bd-list-counter;
   }
 
+  .bd-list-item.number .bd-list-item-marker {
+    margin-top: 0; /* text — se aliniază natural pe linia de bază, nu geometric */
+  }
+
   .bd-list-item.number .bd-list-item-marker::before {
     content: counter(bd-list-counter) ".";
     font-weight: var(--typography-fontWeight-semibold);
@@ -60,8 +68,9 @@ export default css`
 
   /* Check List */
   .bd-list-item.check .bd-list-item-marker {
-    width: var(--spacing-16);
-    height: var(--spacing-16);
+    --bd-li-marker-size: var(--spacing-16);
+    width: var(--bd-li-marker-size);
+    height: var(--bd-li-marker-size);
     background-color: var(--color-green-500);
     border-radius: 50%;
     position: relative;
@@ -79,10 +88,11 @@ export default css`
 
   /* Custom Icon */
   .bd-list-item-custom-icon {
-    width: var(--spacing-16);
-    height: var(--spacing-16);
+    --bd-li-marker-size: var(--spacing-16);
+    width: var(--bd-li-marker-size);
+    height: var(--bd-li-marker-size);
     flex-shrink: 0;
-    margin-top: var(--spacing-4);
+    margin-top: calc((1em * var(--typography-lineHeight-normal) - var(--bd-li-marker-size)) / 2);
   }
 
   /* No Marker */
@@ -95,17 +105,14 @@ export default css`
   }
 
   /* === CONTENT STYLING === */
-  
+
   .bd-list-item-content {
     flex: 1;
   }
 
-  // /* Last Item */
-  // .bd-list-item:last-child {
-  //   margin-bottom: 0;
-  // }
-:host(:last-of-type) .bd-list-item {
-  margin-bottom: 0;
-}
+  /* Last Item */
+  :host(:last-of-type) .bd-list-item {
+    margin-bottom: 0;
+  }
 }
 `;

package/src/components/list/list-item/list-item.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from "lit";
+import { LitElement, html, nothing } from "lit";
 import { tokens } from "../../../tokens/tokens.js";
 import listItemCSS from "./list-item.css.js";
 
@@ -28,7 +28,7 @@ export class BdListItem extends LitElement {
   }
 
   _renderMarker() {
-    if (this.kind === "none") return '';
+    if (this.kind === "none") return nothing;
 
     if (this.icon) {
       return html`<img src="${this.icon}" alt="" class="bd-list-item-custom-icon" />`;