@zohodesk/components 1.6.31 → 1.6.34

package/lib/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap

@@ -78,6 +78,1813 @@ exports[`ListItem ListItem with renderValueRightPlaceholderNode 1`] = `
 </DocumentFragment>
 `;
 
+exports[`ListItem Render with a11y ariaHidden=false with active and needTick 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default activedefault mediumwithTick activewithBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selected="true"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="false"
+      class="d-flex-shrink-0 tickIcon defaultTick"
+      data-id="List item_tickIcon"
+      data-selector-id="listItem_tickIcon"
+      data-test-id="List item_tickIcon"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons ff icon-ticknew basic d-inline-block d-align-middle"
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+        style="--zd-iconfont-size: var(--zd_font_size8);"
+      />
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with a11y role, ariaSelected and ariaLabel 1`] = `
+<DocumentFragment>
+  <li
+    aria-label="Item label"
+    aria-selected="true"
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="menuitem"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with active 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default activedefault activewithBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selected="true"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with active and needTick 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default activedefault mediumwithTick activewithBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selected="true"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      class="d-flex-shrink-0 tickIcon defaultTick"
+      data-id="List item_tickIcon"
+      data-selector-id="listItem_tickIcon"
+      data-test-id="List item_tickIcon"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons ff icon-ticknew basic d-inline-block d-align-middle"
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+        style="--zd-iconfont-size: var(--zd_font_size8);"
+      />
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with active, needTick and palette as danger 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium activedanger mediumwithTick activewithBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selected="true"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      class="d-flex-shrink-0 tickIcon"
+      data-id="List item_tickIcon"
+      data-selector-id="listItem_tickIcon"
+      data-test-id="List item_tickIcon"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons ff icon-ticknew basic d-inline-block d-align-middle"
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+        style="--zd-iconfont-size: var(--zd_font_size8);"
+      />
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with active, needTick and palette as dark 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium dark activedark mediumwithTick activewithBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selected="true"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      class="d-flex-shrink-0 tickIcon darkTick"
+      data-id="List item_tickIcon"
+      data-selector-id="listItem_tickIcon"
+      data-test-id="List item_tickIcon"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons ff icon-ticknew basic d-inline-block d-align-middle"
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+        style="--zd-iconfont-size: var(--zd_font_size8);"
+      />
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with active, needTick and palette as primary 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium activeprimary mediumwithTick activewithBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selected="true"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      class="d-flex-shrink-0 tickIcon"
+      data-id="List item_tickIcon"
+      data-selector-id="listItem_tickIcon"
+      data-test-id="List item_tickIcon"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons ff icon-ticknew basic d-inline-block d-align-middle"
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+        style="--zd-iconfont-size: var(--zd_font_size8);"
+      />
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with active, needTick and palette as secondary 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium secondary activesecondary mediumwithTick activewithBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selected="true"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      class="d-flex-shrink-0 tickIcon"
+      data-id="List item_tickIcon"
+      data-selector-id="listItem_tickIcon"
+      data-test-id="List item_tickIcon"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons ff icon-ticknew basic d-inline-block d-align-middle"
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+        style="--zd-iconfont-size: var(--zd_font_size8);"
+      />
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with all content slots 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-flex-shrink-0 beforeChild"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <span>
+            Before children
+          </span>
+        </div>
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+        <div
+          class="d-flex-shrink-0"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div>
+            Custom Placeholder
+          </div>
+        </div>
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink children"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          Content
+        </div>
+      </div>
+      <div
+        class="d-flex-shrink-0 secondaryField secondaryValue"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+        data-title="Secondary value"
+      >
+        Secondary value
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with autoHover 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default defaultEffect withBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with customClass customListItem and customTitleBox 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder custom-list-item"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox custom-title-box"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with customClass customTickIcon with active and needTick 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default activedefault mediumwithTick activewithBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selected="true"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      class="d-flex-shrink-0 tickIcon defaultTick custom-tick-icon"
+      data-id="List item_tickIcon"
+      data-selector-id="listItem_tickIcon"
+      data-test-id="List item_tickIcon"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons ff icon-ticknew basic d-inline-block d-align-middle"
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+        style="--zd-iconfont-size: var(--zd_font_size8);"
+      />
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with customClass customTickIcon without active 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default mediumwithTick withBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with customClass customValueRightPlaceholder without renderValueRightPlaceholderNode 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with customProps ContainerProps align as baseline 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-baseline list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with customProps ListItemProps 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-custom-attr="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with dataId 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list-item-dataId"
+    data-selector-id="listItem"
+    data-test-id="list-item-dataId"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with dataSelectorId 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="list-item-dataSelectorId"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with highlight 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default defaultHover withBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with isDisabled and disableTitle 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default disable withBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    data-title="Disabled title"
+    role="option"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with isLink and href 1`] = `
+<DocumentFragment>
+  <a
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    href="/list-item"
+    role="option"
+    target="_blank"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+  </a>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with isLink, href and target as self 1`] = `
+<DocumentFragment>
+  <a
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    href="/list-item"
+    role="option"
+    target="_self"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+  </a>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with lhsAlignContent as center 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox alignLhsBox_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with lhsAlignContent as end 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox alignLhsBox_end"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with needBorder=false 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with needMultiLineText 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center multiLineValue"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with needMultiLineText and secondaryValue 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center multiLineValue"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+      <div
+        class="d-flex-shrink-0 secondaryField multiLine"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+        data-title="Secondary value"
+      >
+        Secondary value
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with needTick 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default mediumwithTick withBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with needTick and size as large 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list large default largewithTick withBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with needTick and size as small 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list small default smallwithTick withBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with palette as dark 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium dark withBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with palette as primary 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium withBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with palette as secondary 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium secondary withBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with renderBeforeChildren as function 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-flex-shrink-0 beforeChild"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <span>
+            Before children
+          </span>
+        </div>
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with renderValueRightPlaceholderNode as node 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+        <div
+          class="d-flex-shrink-0"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div>
+            Custom Placeholder
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with secondaryValue 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+      <div
+        class="d-flex-shrink-0 secondaryField secondaryValue"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+        data-title="Secondary value"
+      >
+        Secondary value
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with secondaryValue and isDisabled 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default disable withBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+      <div
+        class="d-flex-shrink-0 secondaryField secondaryValue"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Secondary value
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with size as large 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list large default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with size as small 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list small default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with title 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    data-title="List item title"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with value 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with value and children 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="List item"
+    data-selector-id="listItem"
+    data-test-id="List item"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List item
+        </div>
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink children"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          Content
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem Render with value containing an apostrophe 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="Agent_s list"
+    data-selector-id="listItem"
+    data-test-id="Agent_s list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-flex-shrink-0 titleBox"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          Agent's list
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
 exports[`ListItem Should render with renderBeforeChildren 1`] = `
 <DocumentFragment>
   <li